/* Site-Shot 2026 design language — namespaced under .theme-2026 (blog pilot). */
:root {
  --ss-bg:#FFFFFF; --ss-surface:#FFFFFF; --ss-surface-alt:#F6F7F9; --ss-page:#EBEEF3;
  --ss-text:#0E1116; --ss-text-2:#454E5E; --ss-text-3:#69727F;
  --ss-border:#DBDFE6; --ss-border-strong:#C6CCD6; --ss-chrome:#FBFBFC;
  --ss-accent:#E2452F; --ss-accent-hover:#C93D29; --ss-middot:#C9CDD6;
  --ss-error:#D92D20; --ss-error-bg:#FEF3F2; --ss-error-border:#F4C7C0; --ss-error-text:#912018;
  /* Semantic status families, promoted here from shares/library.html's own
     <style>. They were page-local, so anything ELSE that used them rendered with
     invalid var() — which for background-color computes to transparent. That is
     how the scheduled-captures ledger shipped with invisible ok/skipped dots and
     a pause-reason callout with no container. Values are the library's own,
     unchanged, so that page looks identical. Kept distinct from --ss-accent:
     status is not branding. */
  --ss-warn-bg:#FBEEDD; --ss-warn-border:#EBC98D; --ss-warn-text:#8A5109;
  --ss-info-bg:#EAF0FB; --ss-info-border:#BFD3F2; --ss-info-text:#274B8A;
  --ss-ok-bg:#E7F5EE; --ss-ok-border:#BFE3D0; --ss-ok-text:#0F7B4A;
  --ss-r-card:14px; --ss-r-frame:9px; --ss-r-btn:8px; --ss-r-pill:999px;
  --ss-shadow:0 1px 2px rgba(16,24,40,.07),0 12px 30px rgba(16,24,40,.13);
  --ss-shadow-nav:0 1px 3px rgba(15,17,21,.05);
  --ss-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.theme-2026{
  background:var(--ss-page); color:var(--ss-text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-optical-sizing:auto; font-feature-settings:'cv05','ss01';
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
.theme-2026 *{box-sizing:border-box;}
.theme-2026 a{color:inherit; text-decoration:none;}
.theme-2026 img{max-width:100%; display:block;}
.theme-2026 .ss-wrap{max-width:760px; margin:0 auto; padding:0 24px;}
.theme-2026 .ss-bleed{max-width:1080px; margin:0 auto; padding:0 32px;}
/* Base link colour for theme pages — ROOT fix for the bundled legacy creative.css
   `a{color:#e74c3c}` (+ a:hover) bleeding onto generic links/buttons. Every styled
   link component (.ss-btn, nav, footer, article, table, .ss-read) sets its own
   colour and still wins by specificity; this only catches unstyled links. */
.theme-2026 a{color:var(--ss-accent);}
.theme-2026 .ss-mono{font-family:var(--ss-mono); font-variant-numeric:tabular-nums;}
.theme-2026 .ss-hr{border:0; border-top:1px solid var(--ss-border); margin:0; max-width:none;}
.theme-2026 .ss-kicker{font-family:var(--ss-mono); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ss-accent);}
.theme-2026 .ss-meta{font-family:var(--ss-mono); font-size:12.5px; font-weight:500;
  color:var(--ss-text-2); font-variant-numeric:tabular-nums; margin:0;}
.theme-2026 .ss-meta .dot{color:var(--ss-middot); margin:0 6px;}
.theme-2026 .ss-read{font-size:14px; font-weight:600; color:var(--ss-accent);}
.theme-2026 .ss-read .arrow{display:inline-block; transition:transform .14s ease;}
/* Buttons */
.theme-2026 .ss-btn{display:inline-flex; align-items:center; gap:6px; background:var(--ss-accent);
  color:#fff; font-size:13px; font-weight:600; padding:8px 15px; border-radius:var(--ss-r-btn);
  border:0; white-space:nowrap; transition:background .12s ease,transform .12s ease;}
.theme-2026 .ss-btn:hover{background:var(--ss-accent-hover); transform:translateY(-1px);}
.theme-2026 .ss-btn-ghost{background:transparent; color:var(--ss-text-2);}
.theme-2026 .ss-btn-ghost:hover{background:transparent; color:var(--ss-text); transform:none;}
/* Solid accent buttons rendered as <a> must keep white text. The bundled legacy
   creative.css sets a global a{color:#e74c3c} (+ a:hover), which can bleed through
   on solid link-buttons (e.g. Deactivate/Reset inside modals) and make the label
   invisible on the red fill. Higher-specificity guard, scoped to non-ghost links. */
.theme-2026 a.ss-btn:not(.ss-btn-ghost),
.theme-2026 a.ss-btn:not(.ss-btn-ghost):hover,
.theme-2026 a.ss-btn:not(.ss-btn-ghost):focus{color:#fff;}
.theme-2026 a.ss-btn.ss-btn-ghost,
.theme-2026 a.ss-btn.ss-btn-ghost:focus{color:var(--ss-text-2);}
.theme-2026 a.ss-btn.ss-btn-ghost:hover{color:var(--ss-text);}
.theme-2026 a:focus-visible{outline:2px solid var(--ss-accent); outline-offset:2px; border-radius:3px;}
.theme-2026 .ss-btn:focus-visible{outline:2px solid var(--ss-accent); outline-offset:2px; border-radius:var(--ss-r-btn);}
@media (prefers-reduced-motion: reduce){
  .theme-2026 *{transition:none !important;}
}
.theme-2026 .ss-nav{position:sticky; top:0; z-index:50; background:var(--ss-bg);
  border-bottom:1px solid var(--ss-border); transition:transform .25s ease, background .2s ease, box-shadow .2s ease;}
.theme-2026 .ss-nav.is-hidden{transform:translateY(-100%);}
.theme-2026 .ss-nav.is-scrolled{background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); box-shadow:var(--ss-shadow-nav);}
.theme-2026 .ss-nav__inner{min-height:60px; display:flex; align-items:center; gap:32px;}
.theme-2026 .ss-nav__brand{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.theme-2026 .ss-nav__glyph{width:24px; height:24px; border-radius:7px; background:var(--ss-accent);
  display:inline-flex; align-items:center; justify-content:center;}
.theme-2026 .ss-nav__word{font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;}
.theme-2026 .ss-nav__links{display:flex; gap:18px;}
.theme-2026 .ss-nav__links a{font-size:13.5px; color:var(--ss-text-2); padding:19px 0;}
.theme-2026 .ss-nav__links a:hover{color:var(--ss-text);}
.theme-2026 .ss-nav__links a.is-active{color:var(--ss-text); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--ss-accent);}
.theme-2026 .ss-nav__actions{margin-left:auto; display:flex; align-items:center; gap:16px;}
.theme-2026 .ss-nav__signin{font-size:13.5px; color:var(--ss-text-2); white-space:nowrap;}
.theme-2026 .ss-nav__signin:hover{color:var(--ss-text);}
@media (max-width:640px){
  .theme-2026 .ss-nav__links{display:none;}
  /* compact, wrap-friendly nav so large font-scaling / zoom doesn't break it */
  .theme-2026 .ss-nav__inner{gap:10px 12px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px;
    padding-left:16px; padding-right:16px;}
  .theme-2026 .ss-nav__actions{gap:12px;}
  .theme-2026 .ss-nav .ss-btn{padding:7px 12px;}
}
/* Command bar — the URL field plus SHOT, shared by the homepage and the tool landing
   pages. Each used to carry its own copy in an inline <style>, and the copies had
   drifted: the tool pages rendered a full-height button flush with the bar's edge. They
   now share one treatment, the homepage's inset pill. */
.theme-2026 .ss-cmdbar{display:flex; align-items:center; margin-top:26px;
  border:1px solid var(--ss-border-strong); border-radius:12px; background:var(--ss-surface);
  box-shadow:0 1px 3px rgba(16,24,40,.06), 0 14px 30px rgba(16,24,40,.10); overflow:hidden;}
.theme-2026 .ss-cmdbar input#url{flex:1; min-width:0; border:0; outline:0; height:56px;
  padding:0 18px; font-size:15px; font-family:inherit; color:var(--ss-text); background:transparent;}
.theme-2026 .ss-cmdbar input#url::placeholder{color:var(--ss-text-3);}
.theme-2026 .ss-cmdbar .input-group-btn{display:flex;}
.theme-2026 .ss-cmdbar #make_screenshot{display:inline-flex; align-items:center; gap:8px;
  border:0; height:42px; margin-right:7px; border-radius:9px; padding:0 18px;
  background:var(--ss-accent); color:#fff; font-size:16px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:background .12s ease;}
.theme-2026 .ss-cmdbar #make_screenshot:hover,
.theme-2026 .ss-cmdbar #make_screenshot:focus{background:var(--ss-accent-hover);}
/* On pages carrying the tool the nav scrolls away for good and only the bar pins, so
   SHOT stays reachable while the settings below are adjusted and the header CTA is not
   on screen to be hit by mistake. Halves the pinned chrome against holding the nav
   fixed above the bar. The nav's auto-hide is still suppressed in _nav_2026.html: it
   applies a transform that would jerk the nav upward while it is still visible.
   Note .theme-2026 is a class on <body>, so this reads "the body, which contains a
   command bar". */
.theme-2026:has(.ss-cmdbar) .ss-nav{position:static;}
.theme-2026:has(.ss-cmdbar) .ss-cmdbar{position:sticky; top:0; z-index:40;}
/* Scrolling a focused control into view must clear the pinned bar: 58px plus 8px air. */
.theme-2026:has(.ss-cmdbar){scroll-padding-top:66px;}
/* Where SHOT is on the page, the header CTA steps down to an outline so exactly
   one solid accent action is on screen. Deliberately scoped instead of given its
   own .ss-btn-outline class: a general class would be caught by the
   a.ss-btn:not(.ss-btn-ghost){color:#fff} guard above and render a white label on
   a transparent button, and widening that guard would put every other solid
   link-button at risk. This wins on specificity instead — (0,4,0) against the
   guard's (0,3,1), and (0,5,0) against (0,4,1) on hover. The CTA is NOT removed:
   .ss-nav__links is display:none below 640px, so on mobile this is the only way
   into the API funnel.
   :focus is listed explicitly because the guard's own :focus clause is (0,4,1) and
   would otherwise beat this rule's (0,4,0), painting a white label onto the
   transparent button — invisible to anyone arriving by keyboard. It is listed
   BEFORE :hover so that hovering a focused button still resolves to the filled
   treatment; the two are equal specificity and source order decides. */
.theme-2026:has(.ss-cmdbar) .ss-nav .ss-btn,
.theme-2026:has(.ss-cmdbar) .ss-nav .ss-btn:focus{background:transparent; color:var(--ss-accent);
  box-shadow:inset 0 0 0 1px var(--ss-accent);}
.theme-2026:has(.ss-cmdbar) .ss-nav .ss-btn:hover{background:var(--ss-accent); color:#fff;
  transform:none;}
.theme-2026 .ss-footer{background:#EDEFF3; border-top:1px solid var(--ss-border-strong);
  padding:64px 0 40px; margin-top:72px;}
.theme-2026 .ss-footer__lede{font-size:28px; font-weight:600; letter-spacing:-.025em; line-height:1.18;
  margin:8px 0 4px;}
.theme-2026 .ss-footer__sub{font-size:15px; color:var(--ss-text-2); margin:0 0 16px;}
.theme-2026 .ss-footer__cta{display:flex; align-items:center; gap:16px; margin-bottom:24px;}
/* balanced two-column footer: brand+CTA left, link columns right, rule+copy full-width below */
.theme-2026 .ss-footer__top{display:flex; justify-content:space-between; align-items:center; gap:40px 64px; flex-wrap:wrap;}
.theme-2026 .ss-footer__brand{max-width:400px;}
.theme-2026 .ss-footer__cols{display:grid; grid-template-columns:repeat(3,auto); gap:24px 56px; margin:0;}
@media (max-width:560px){ .theme-2026 .ss-footer__cols{grid-template-columns:1fr 1fr; gap:24px 40px;} }
.theme-2026 .ss-footer__h{font-family:var(--ss-mono); font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ss-text); margin:0 0 9px;}
.theme-2026 .ss-footer__cols a{display:block; font-size:13px; color:var(--ss-text); margin-bottom:6px;}
.theme-2026 .ss-footer__cols a:hover{color:var(--ss-accent);}
.theme-2026 .ss-footer__copy{font-size:12.5px; color:var(--ss-text); font-weight:500; margin:0;}
/* Hero */
.theme-2026 h1,.theme-2026 h2,.theme-2026 h3,.theme-2026 h4,.theme-2026 h5,.theme-2026 h6{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
.theme-2026 .ss-hero{padding-top:56px;}
.theme-2026 .ss-hero__eyebrow{display:inline-flex; align-items:center; gap:8px;}
.theme-2026 .ss-hero__eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--ss-accent);}
.theme-2026 .ss-hero__eyebrow .ss-mono{font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ss-accent);}
.theme-2026 .ss-hero__h1{font-size:42px; font-weight:600; letter-spacing:-.03em; line-height:1.08;
  margin:16px 0 12px; max-width:20ch;}
.theme-2026 .ss-hero__lead{font-size:17px; line-height:1.6; letter-spacing:-.005em;
  color:var(--ss-text-2); max-width:60ch; margin:0;}
.theme-2026 .ss-hero__cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:26px;}
.theme-2026 .ss-section-label{font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ss-accent); margin:40px 0 10px;}

/* Screenshot frame */
.theme-2026 .ss-frame{display:block; border:1px solid var(--ss-border); border-radius:var(--ss-r-frame);
  overflow:hidden; background:#fff;}
.theme-2026 .ss-frame__bar{position:relative; height:32px; background:var(--ss-chrome);
  border-bottom:1px solid var(--ss-border); display:flex; align-items:center; padding:0 12px;}
.theme-2026 .ss-frame--sm .ss-frame__bar{height:24px;}
.theme-2026 .ss-dots{display:inline-flex; gap:5px;}
.theme-2026 .ss-dots i{width:7px; height:7px; border-radius:50%; background:var(--ss-border-strong);}
.theme-2026 .ss-frame--sm .ss-dots i{width:6px; height:6px;}
.theme-2026 .ss-frame__url{position:absolute; left:50%; transform:translateX(-50%); background:#fff;
  border:1px solid var(--ss-border); border-radius:var(--ss-r-pill); padding:2px 10px;
  font-size:11px; color:var(--ss-text-3);}
.theme-2026 .ss-frame__img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);}

/* Featured */
.theme-2026 .ss-featured-wrap{padding-top:40px;}
.theme-2026 .ss-featured{display:block; background:var(--ss-surface); border:1px solid var(--ss-border-strong);
  border-radius:var(--ss-r-card); overflow:hidden; box-shadow:0 1px 3px rgba(16,24,40,.06),0 18px 44px rgba(16,24,40,.13);
  transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease;}
.theme-2026 .ss-featured .ss-frame{border:0; border-radius:0; border-bottom:1px solid var(--ss-border);}
.theme-2026 .ss-featured:hover{box-shadow:0 2px 8px rgba(15,17,21,.06),0 18px 44px rgba(15,17,21,.10);
  border-color:var(--ss-border-strong); transform:translateY(-2px);}
.theme-2026 .ss-featured:hover .ss-read .arrow{transform:translateX(3px);}
.theme-2026 .ss-featured__body{padding:28px 30px 30px;}
.theme-2026 .ss-featured__title{font-size:31px; font-weight:600; letter-spacing:-.022em;
  line-height:1.16; margin:10px 0 9px;}
.theme-2026 .ss-featured__sum{font-size:15px; line-height:1.6; color:var(--ss-text-2);
  max-width:64ch; margin:0 0 12px;}

/* Divider list rows */
.theme-2026 .ss-row{display:grid; grid-template-columns:184px 1fr; gap:20px; padding:20px 22px;
  margin-bottom:14px; background:var(--ss-surface); border:1px solid var(--ss-border-strong);
  border-radius:var(--ss-r-card); box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px rgba(16,24,40,.09); align-items:start;}
.theme-2026 .ss-row--text{grid-template-columns:1fr;}
.theme-2026 .ss-row{transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease;}
.theme-2026 .ss-row:hover{border-color:var(--ss-border-strong); box-shadow:0 2px 8px rgba(15,17,21,.06),0 18px 44px rgba(15,17,21,.10); transform:translateY(-2px);}
.theme-2026 .ss-row .ss-frame{transition:box-shadow .14s ease,border-color .14s ease;}
.theme-2026 .ss-row:hover .ss-frame{box-shadow:var(--ss-shadow); border-color:var(--ss-border-strong);}
.theme-2026 .ss-row:hover .ss-row__title{color:#000;}
.theme-2026 .ss-row:hover .ss-read .arrow{transform:translateX(3px);}
.theme-2026 .ss-row__body{min-width:0; display:flex; flex-direction:column;}
.theme-2026 .ss-row__title{font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.32;
  margin:6px 0 5px;}
.theme-2026 .ss-row__sum{font-size:14px; line-height:1.55; color:var(--ss-text-2); margin:0 0 8px; max-width:72ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
@media (max-width:640px){
  .theme-2026 .ss-row{grid-template-columns:1fr;}
  .theme-2026 .ss-hero__h1{font-size:32px;}
  .theme-2026 .ss-featured__title{font-size:22px;}
}
/* Article */
.theme-2026 .ss-article__title{font-size:38px; font-weight:600; letter-spacing:-.03em;
  line-height:1.1; margin:12px 0 24px; max-width:20ch;}
.theme-2026 .ss-article__body{font-size:17px; line-height:1.75; color:var(--ss-text);}
.theme-2026 .ss-article__body h1{font-size:36px; font-weight:600; letter-spacing:-.028em;
  line-height:1.12; margin:0 0 .35em;}
.theme-2026 .ss-article__body p{margin:0 0 1.2em; font-size:inherit; line-height:inherit;}
.theme-2026 .ss-article__body h2{font-size:26px; font-weight:600; letter-spacing:-.02em; margin:1.6em 0 .5em; position:relative; padding-left:14px; border-top:1px solid var(--ss-border); padding-top:1.1em; margin-top:2.2em;}
/* Accent bar hugs the heading TEXT only: the h2 carries 1.1em padding-top
   below its hairline, so the bar must start below that padding or it climbs
   into the gap and reads as a stray stripe. */
.theme-2026 .ss-article__body h2::before{content:''; position:absolute; left:0; top:calc(1.1em + .18em); bottom:.18em; width:4px; border-radius:2px; background:var(--ss-accent);}
.theme-2026 .ss-article__body > p:first-of-type{font-size:19px; line-height:1.7; color:var(--ss-text-2);}
.theme-2026 .ss-article__body h3{font-size:20px; font-weight:600; margin:1.4em 0 .4em;}
.theme-2026 .ss-article__body a{color:var(--ss-accent); text-decoration:underline;}
.theme-2026 .ss-article__body img{border:1px solid var(--ss-border); border-radius:var(--ss-r-frame); margin:1.2em 0;}
.theme-2026 .ss-article__body pre{background:var(--ss-surface-alt); border:1px solid var(--ss-border);
  border-radius:var(--ss-r-frame); padding:16px; overflow:auto; font-family:var(--ss-mono); font-size:13.5px;}
.theme-2026 .ss-article__body .codehilite{background:transparent; border:0; padding:0;}
.theme-2026 .ss-article__body code{font-family:var(--ss-mono); font-size:.92em;}
.theme-2026 .ss-article__body :not(pre) > code{background:var(--ss-surface-alt);
  border:1px solid var(--ss-border); border-radius:5px; padding:.1em .4em; color:var(--ss-text);}
.theme-2026 .ss-article__body ul,.theme-2026 .ss-article__body ol{margin:0 0 1.2em; padding-left:1.5em;}
.theme-2026 .ss-article__body li+li{margin-top:.35em;}
.theme-2026 .ss-article__body blockquote{margin:1.4em 0; background:var(--ss-surface-alt);
  border:1px solid var(--ss-border); border-left:3px solid var(--ss-accent);
  border-radius:var(--ss-r-frame); padding:14px 18px; color:var(--ss-text-2);}
.theme-2026 .ss-article__body table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:15px; border:1px solid var(--ss-border-strong); border-radius:var(--ss-r-frame); overflow:hidden; box-shadow:var(--ss-shadow);}
.theme-2026 .ss-article__body th,.theme-2026 .ss-article__body td{padding:.6em .85em;
  border-bottom:1px solid var(--ss-border-strong); text-align:left;}
.theme-2026 .ss-article__body th{background:#E7EBF1; text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--ss-text); font-weight:700; border-bottom:1px solid var(--ss-border-strong);}
.theme-2026 .ss-article__body tbody tr:nth-child(even){background:#F4F6F9;}
.theme-2026 .ss-article__body strong{font-weight:650; color:var(--ss-text);}
.theme-2026 .ss-article__body li::marker{color:var(--ss-accent);}
.theme-2026 .ss-article{padding-top:40px; border-top:3px solid var(--ss-accent);}
.theme-2026 .ss-article__back{margin-top:40px;}
/* Blog on the site-wide 1080 grid (.ss-bleed envelope, same as nav/home/pricing).
   Every article block — title, prose, Q&A cards, tables, code — spans the full
   envelope at ONE uniform width. Deliberate owner call: no capped/centered
   editorial measure, no per-element breakouts (both were tried and rejected —
   mixed widths read as broken). Scoped: terms/privacy/ai-agents reuse
   .ss-article and stay on the 760 .ss-wrap. */
.theme-2026 .ss-article--wide .ss-article__title{max-width:none;}
/* Markdown `---` separators: the legacy creative.css bundle styles bare <hr>
   as a 50px red dash — restyle to a full-width quiet rule on the same grid. */
.theme-2026 .ss-article__body hr{max-width:none; border:0;
  border-top:1px solid var(--ss-border); margin:2.2em 0;}
@media (max-width:640px){
  .theme-2026 .ss-article__title{font-size:28px;}
}

/* ============================================================================
   Shared primitives for the site-wide migration (Phase 0).
   All namespaced under .theme-2026 → inert on any page that hasn't opted in.
   ========================================================================= */

/* Account menu (authenticated nav dropdown, ported from the dark _menu.html) */
.theme-2026 .ss-nav__account{position:relative;}
.theme-2026 .ss-nav__account-toggle{display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:0; cursor:pointer; font:inherit; font-size:13.5px;
  color:var(--ss-text-2); padding:6px 4px;}
.theme-2026 .ss-nav__account-toggle:hover{color:var(--ss-text);}
.theme-2026 .ss-nav__account-toggle:focus-visible{outline:2px solid var(--ss-accent);
  outline-offset:2px; border-radius:6px;}
.theme-2026 .ss-nav__chevron{transition:transform .14s ease;}
.theme-2026 .ss-nav__account.is-open .ss-nav__chevron{transform:rotate(180deg);}
.theme-2026 .ss-nav__menu{position:absolute; top:calc(100% + 8px); right:0; min-width:188px;
  background:var(--ss-surface); border:1px solid var(--ss-border); border-radius:var(--ss-r-btn);
  box-shadow:var(--ss-shadow); padding:6px; display:none; flex-direction:column; z-index:60;}
.theme-2026 .ss-nav__account.is-open .ss-nav__menu{display:flex;}
.theme-2026 .ss-nav__menu-item{display:block; width:100%; text-align:left; background:transparent;
  border:0; cursor:pointer; font:inherit; font-size:13.5px; color:var(--ss-text-2);
  padding:8px 10px; border-radius:6px;}
.theme-2026 .ss-nav__menu-item:hover{background:var(--ss-surface-alt); color:var(--ss-text);}
.theme-2026 .ss-nav__menu-item:focus-visible{outline:2px solid var(--ss-accent); outline-offset:-2px;}
/* Storage stock, always on screen (PRD F4.4a). Tabular so the digits do not
   shuffle the menu width as the count grows. */
.theme-2026 .ss-nav__meter{float:right; margin-left:10px; font-size:11.5px;
  font-variant-numeric:tabular-nums; color:var(--ss-text-3, var(--ss-text-2));
  opacity:.75;}
.theme-2026 .ss-nav__logout{margin:0;}

/* Forms — site-shot-2026 input layer (theme-2026 ships no Bootstrap form styling) */
.theme-2026 .ss-field{display:block; margin:0 0 18px;}
.theme-2026 .ss-label{display:block; font-size:13px; font-weight:600; color:var(--ss-text);
  margin:0 0 6px;}
.theme-2026 .ss-input,
.theme-2026 .ss-select,
.theme-2026 .ss-textarea{display:block; width:100%; font:inherit; font-size:15px; color:var(--ss-text);
  background:var(--ss-surface); border:1px solid var(--ss-border-strong); border-radius:var(--ss-r-btn);
  padding:10px 12px; transition:border-color .12s ease, box-shadow .12s ease;}
.theme-2026 .ss-textarea{min-height:120px; resize:vertical;}
.theme-2026 .ss-input:focus,
.theme-2026 .ss-select:focus,
.theme-2026 .ss-textarea:focus{outline:none; border-color:var(--ss-accent);
  box-shadow:0 0 0 3px rgba(226,69,47,.14);}
.theme-2026 .ss-input::placeholder,
.theme-2026 .ss-textarea::placeholder{color:var(--ss-text-3);}
.theme-2026 .ss-help{font-size:12.5px; color:var(--ss-text-3); margin:6px 0 0;}
.theme-2026 .ss-error,
.theme-2026 .ss-field .errorlist{color:var(--ss-error); font-size:13px; margin:6px 0 0; padding:0;
  list-style:none;}
.theme-2026 .ss-alert{border:1px solid var(--ss-border-strong); border-left:3px solid var(--ss-accent);
  border-radius:var(--ss-r-btn); padding:13px 16px; font-size:14px; margin:0 0 18px; background:var(--ss-surface);
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 22px rgba(16,24,40,.08);}
.theme-2026 .ss-alert--error{background:var(--ss-error-bg); border-color:var(--ss-error-border); color:var(--ss-error-text);}
.theme-2026 .ss-form{max-width:420px;}
.theme-2026 .ss-form-actions{display:flex; align-items:center; gap:14px; margin-top:4px;}
.theme-2026 .ss-btn--block{width:100%; justify-content:center; padding:11px 16px; font-size:14px;}

/* Data tables (theme-2026 only styled blog-prose tables before) */
.theme-2026 .ss-table{width:100%; border-collapse:collapse; font-size:14px; color:var(--ss-text);
  background:var(--ss-surface);}
.theme-2026 .ss-table th,
.theme-2026 .ss-table td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--ss-border);
  vertical-align:middle;}
.theme-2026 .ss-table thead th{background:#EEF1F5; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ss-text); white-space:nowrap;
  border-bottom:1px solid var(--ss-border-strong); position:static;}
.theme-2026 .ss-table--sticky thead th{position:sticky; top:60px; z-index:1;}
/* A <caption> names the table for anyone navigating by table landmark, so it
   is kept visible rather than hidden — it carries the row count, which is
   worth reading either way. */
.theme-2026 .ss-table caption{caption-side:top; text-align:left; padding:12px 14px 11px;
  font-size:13px; color:var(--ss-text-2); background:var(--ss-surface);
  border-bottom:1px solid var(--ss-border);}
.theme-2026 .ss-table tbody td{color:var(--ss-text);}
.theme-2026 .ss-table tbody tr:nth-child(even){background:var(--ss-surface-alt);}
.theme-2026 .ss-table tbody tr:last-child td{border-bottom:0;}
.theme-2026 .ss-table tbody tr:hover{background:#F1F4F8;}
.theme-2026 .ss-table .ss-num,
.theme-2026 .ss-table .ss-mono{font-variant-numeric:tabular-nums;}
.theme-2026 .ss-table a{color:var(--ss-accent); font-weight:600; text-decoration:none;}
.theme-2026 .ss-table a:hover{text-decoration:underline;}
.theme-2026 .ss-table code{font-family:var(--ss-mono); font-size:.92em; color:var(--ss-text); background:var(--ss-surface-alt); border:1px solid var(--ss-border); border-radius:5px; padding:.08em .4em;}
.theme-2026 .ss-table td.ss-num:first-child code, .theme-2026 .ss-table td.ss-num:first-of-type{color:var(--ss-accent);}
/* Never reintroduce the `overflow` shorthand here. It used to sit after
   `overflow-x:auto` and, being a shorthand, silently reset BOTH axes to
   hidden — so every table wider than its wrapper was clipped with no way to
   scroll to the rest. On /countries/ at 375px that hid 650px of a 963px
   table: the time zone, geolocation and city columns simply did not exist
   for a phone. Use the two longhands; overflow-y:hidden still clips the
   rounded corners, which is all the shorthand was there for. */
.theme-2026 .ss-table-wrap{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border:1px solid var(--ss-border-strong); border-radius:var(--ss-r-frame); box-shadow:var(--ss-shadow); margin:22px 0 8px;}

/* Pagination (replaces the three log pages' inline dark #2C3E50 overrides) */
.theme-2026 .ss-pagination{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0;
  margin:28px 0 0; justify-content:center;}
.theme-2026 .ss-pagination .page-item .page-link,
.theme-2026 .ss-pagination a,
.theme-2026 .ss-pagination span{display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px; font-size:13.5px; color:var(--ss-text-2);
  background:var(--ss-surface); border:1px solid var(--ss-border); border-radius:var(--ss-r-btn);}
.theme-2026 .ss-pagination a:hover{border-color:var(--ss-border-strong); color:var(--ss-text);}
.theme-2026 .ss-pagination .active .page-link,
.theme-2026 .ss-pagination .ss-page-active{background:var(--ss-accent); border-color:var(--ss-accent);
  color:#fff;}
.theme-2026 .ss-pagination .disabled .page-link,
.theme-2026 .ss-pagination .ss-page-disabled{opacity:.45; pointer-events:none;}

/* Bootstrap modal token overlay (modals keep Bootstrap markup + JS) */
.theme-2026 .modal-content{background:var(--ss-surface); color:var(--ss-text);
  border:1px solid var(--ss-border); border-radius:var(--ss-r-card); box-shadow:var(--ss-shadow);}
.theme-2026 .modal-header,
.theme-2026 .modal-footer{border-color:var(--ss-border);}
.theme-2026 .modal-title{font-size:18px; font-weight:600; letter-spacing:-.01em;}
.theme-2026 .modal-body{font-size:15px; color:var(--ss-text-2); line-height:1.6;}

/* App/page scaffolding for migrated base2 pages */
.theme-2026 .ss-page{padding:48px 0 8px;}
.theme-2026 .ss-page__title{font-size:30px; font-weight:600; letter-spacing:-.025em; margin:0 0 6px;}
.theme-2026 .ss-page__lead{font-size:16px; color:var(--ss-text-2); margin:0 0 8px;}
.theme-2026 .ss-page__lead code,.theme-2026 .ss-page code:not(.ss-table code){font-family:var(--ss-mono); font-size:.9em; background:var(--ss-surface-alt); border:1px solid var(--ss-border); border-radius:5px; padding:.08em .4em; color:var(--ss-text);}
.theme-2026 .ss-card{background:var(--ss-surface); border:1px solid var(--ss-border-strong);
  border-radius:var(--ss-r-card); padding:24px; box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.11),0 2px 6px rgba(16,24,40,.05);}
.theme-2026 .ss-stack > * + *{margin-top:16px;}
/* Screenshot-tool share buttons: _screenshot_shared_styles.html hardcodes color:#fff (dark-theme
   default), which makes the save/copy icons invisible on the light theme. Override for theme-2026. */
.theme-2026 #share a, .theme-2026 #share button:not(.screenshot-share-cta){ color:var(--ss-text); background:var(--ss-surface);
  border:1px solid var(--ss-border-strong); opacity:1; }
.theme-2026 #share a:hover, .theme-2026 #share button:not(.screenshot-share-cta):hover{ color:var(--ss-accent);
  border-color:var(--ss-accent); background:var(--ss-surface); }
.theme-2026 #share button:not(.screenshot-share-cta):disabled{ color:var(--ss-text-3); opacity:.55; }
/* Primary $1 "Save & share" CTA owns its full look in _screenshot_shared_styles.html
   (soft accent-tint fill + dark-red text). The :not() exemptions above keep the
   icon-button rules from out-specifying and flattening it; disabled fading is handled
   by the base `#share button:disabled` opacity rule, so no theme override is needed. */
.theme-2026 .screenshot-action-status--success{ color:#067647; }
.theme-2026 .screenshot-action-status--error{ color:var(--ss-error); }
.theme-2026 .screenshot-action-status--pending{ color:var(--ss-text-2); }
.theme-2026 .screenshot-ephemeral-notice{ color:var(--ss-text-2); }
/* Auth / form cards (signup, login, password reset) */
.theme-2026 .ss-authwrap{display:flex; justify-content:center; padding:80px 24px 96px; background:radial-gradient(900px 480px at 50% -8%, rgba(226,69,47,.06), transparent 60%), var(--ss-page); min-height:calc(100vh - 60px); align-items:flex-start;}
.theme-2026 .ss-auth{width:100%; max-width:440px; margin:0 auto; background:var(--ss-surface);
  border:1px solid var(--ss-border-strong); border-top:3px solid var(--ss-accent); border-radius:var(--ss-r-card);
  box-shadow:0 1px 3px rgba(16,24,40,.06),0 16px 40px rgba(16,24,40,.10); padding:32px 30px;}
.theme-2026 .ss-auth h1,.theme-2026 .ss-auth h2{font-size:22px; font-weight:600; letter-spacing:-.02em;
  color:var(--ss-text); margin:0 0 6px; text-align:center;}
.theme-2026 .ss-auth__sub{font-size:14px; color:var(--ss-text-2); text-align:center; margin:0 0 22px;}
.theme-2026 .ss-auth .form-control,
.theme-2026 .ss-auth input[type=text],.theme-2026 .ss-auth input[type=email],
.theme-2026 .ss-auth input[type=password],.theme-2026 .ss-auth input[type=number],
.theme-2026 .ss-auth .ss-input{width:100%; height:42px; padding:0 12px; border:1px solid var(--ss-border-strong);
  border-radius:var(--ss-r-btn); background:#FCFCFD; color:var(--ss-text); font-size:14px; font-family:inherit; box-shadow:inset 0 1px 2px rgba(16,24,40,.04);}
.theme-2026 .ss-auth input:not(.is-invalid):not([aria-invalid="true"]){border-color:var(--ss-border-strong);}
.theme-2026 .ss-auth textarea.form-control{height:auto; padding:10px 12px;}
.theme-2026 .ss-auth .form-control:focus,.theme-2026 .ss-auth .ss-input:focus,
.theme-2026 .ss-auth input:focus{outline:0; border-color:var(--ss-accent); box-shadow:0 0 0 3px rgba(226,69,47,.13);}
.theme-2026 .ss-auth label{display:block; font-size:13px; font-weight:600; color:var(--ss-text); margin:0 0 6px;}
.theme-2026 .ss-auth .form-group,.theme-2026 .ss-auth .ss-field{margin-bottom:16px;}
.theme-2026 .ss-auth .btn-primary,.theme-2026 .ss-auth .ss-btn{width:100%; display:flex; align-items:center;
  justify-content:center; background:var(--ss-accent); border:0; color:#fff; border-radius:var(--ss-r-btn);
  padding:11px 16px; font-size:14px; font-weight:600; cursor:pointer; text-transform:none;
  box-shadow:0 1px 2px rgba(16,24,40,.08),0 1px 6px rgba(226,69,47,.28);}
.theme-2026 .ss-auth .btn-primary:hover,.theme-2026 .ss-auth .ss-btn:hover{background:var(--ss-accent-hover);}
.theme-2026 .ss-auth .btn-secondary,.theme-2026 .ss-auth .btn-link,
.theme-2026 .ss-auth .btn:not(.btn-primary):not(.ss-btn){background:var(--ss-surface-alt); border:1px solid var(--ss-border-strong);
  color:var(--ss-text); border-radius:var(--ss-r-btn); padding:10px 14px; font-weight:600; text-transform:none;}
.theme-2026 .ss-auth .helptext{font-size:12.5px; color:var(--ss-text-3); margin-top:5px; display:block;}
.theme-2026 .ss-auth .ss-help{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border:1px solid var(--ss-border-strong); border-radius:50%; font-size:11px; line-height:1; color:var(--ss-text-2); text-decoration:none; vertical-align:middle;}
.theme-2026 .ss-auth .ss-label{display:flex; align-items:center;}
.theme-2026 .ss-auth .errorlist{list-style:none; padding:0; margin:6px 0 0; color:var(--ss-error); font-size:13px;}
.theme-2026 .ss-auth__foot{text-align:center; font-size:13.5px; color:var(--ss-text-2); margin-top:18px;}
.theme-2026 .ss-auth__foot a{color:var(--ss-accent); font-weight:600;}