/* PhotoCrossStitch — "Dark fabric" theme (direction B). Loaded after site.css / app.css with <body class="theme-dark">. */
.theme-dark{
  --linen:#1E2230; --paper:#272C3D; --sand:#2C3245; --oat:#353B51; --fabric:#232838;
  --ink:#F3EDE4; --ink-2:#E2DBD0; --muted:#B9B3C6;
  --line:#353B51; --line-2:#434A63; --line-3:#565E7A;
  --rose:#F3CE75; --rose-hover:#F6DC98; --rose-tint:#3A2F38; --rose-soft:#E4A6AC; --rose-ink:#F0C7CB;
  --sage:#161925; --sage-tint:#2B3428; --sage-mid:#9CA482;
  --straw-tint:#3A3424; --pink:#E4A6AC;
  --serif:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  color-scheme:dark;
}
body.theme-dark{background-color:#1E2230;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.6px);background-size:8px 8px}
.theme-dark .display,.theme-dark h1,.theme-dark h2,.theme-dark .h2,.theme-dark .label-sm,.theme-dark .logo span,.theme-dark .idea h3,.theme-dark .step h3,.theme-dark .tool b,.theme-dark .readout .big,.theme-dark .readout-big .big,.theme-dark .mat h3,.theme-dark .dlg-head h2,.theme-dark .colors-head h2,.theme-dark .page-head h1{font-family:var(--serif);font-weight:800;letter-spacing:-.025em}
.theme-dark .hero h1{font-size:72px;line-height:.98;letter-spacing:-.035em}
.theme-dark .logo span{font-size:22px;letter-spacing:-.02em}

/* fabric & hoops on dark aida */
.theme-dark .aida,.theme-dark .well,.theme-dark .export-preview{background-color:#232838;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.6px);background-size:7px 7px}
.theme-dark .hoop .ring{box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.35)}
.theme-dark .hoop .cloth{box-shadow:inset 0 6px 20px rgba(0,0,0,.45)}
.theme-dark .hoop canvas{filter:drop-shadow(0 0 3px rgba(255,240,200,.18))}
.theme-dark .polaroid{background:#F3EDE4;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.theme-dark .polaroid .cap{color:#5B5249}
.theme-dark .readout .mini-hoop::after{background-color:#232838;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.6px)}

/* accents */
.theme-dark .kicker span,.theme-dark .scene .note,.theme-dark .hand{color:var(--pink)!important}
.theme-dark .scene .arrow path{stroke:var(--pink)}
.theme-dark a{color:var(--rose)} .theme-dark a:hover{color:var(--rose-hover)}
.theme-dark .site-nav a{color:var(--ink)}
.theme-dark .site-nav a[aria-current="page"],.theme-dark .site-nav a:hover{color:var(--rose)}
.theme-dark .btn-primary{color:#1E2230}
.theme-dark .btn-primary:hover{color:#1E2230}
.theme-dark .btn-dark{background:#F3EDE4;border-color:#F3EDE4;color:#1E2230}
.theme-dark .btn-dark:hover{background:#fff;color:#1E2230}
.theme-dark .seg button[aria-pressed="true"],.theme-dark .chips button[aria-pressed="true"],.theme-dark .opt button[aria-pressed="true"],.theme-dark .icon-btn[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#1E2230}
.theme-dark .color[aria-pressed="true"]{background:var(--oat);border-color:var(--rose)}
.theme-dark .switch::after{background:#F3EDE4}
.theme-dark .switch[aria-checked="true"]{background:var(--rose)}

/* upload card & chips */
.theme-dark .drop{background:rgba(39,44,61,.85);border-color:rgba(243,206,117,.55);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.theme-dark .drop.over{background:#2F3548;border-color:var(--rose)}
.theme-dark .drop-icon{background:rgba(243,206,117,.14)}
.theme-dark .drop-icon svg{stroke:var(--rose)}
.theme-dark .drop .note svg{stroke:var(--sage-mid)}
.theme-dark .trust span{background:rgba(243,237,228,.07);color:var(--ink-2)}
.theme-dark .trust span::before{background:var(--rose)}

/* section cards */
.theme-dark .band{background:rgba(39,44,61,.55);border-color:var(--line)}
.theme-dark .band-sand{background:rgba(39,44,61,.55)}
.theme-dark .idea{background:var(--paper)!important;border:1.5px solid var(--line)}
.theme-dark .idea:nth-child(1){box-shadow:inset 0 3px 0 #E4A6AC}
.theme-dark .idea:nth-child(2){box-shadow:inset 0 3px 0 #9CA482}
.theme-dark .idea:nth-child(3){box-shadow:inset 0 3px 0 #C56A5B}
.theme-dark .idea:nth-child(4){box-shadow:inset 0 3px 0 #F3CE75}
.theme-dark .idea em{color:var(--rose)}
.theme-dark .step .ic{background:var(--paper)!important;border-color:#1E2230}
.theme-dark .step .ic svg{stroke:var(--rose)}
.theme-dark .steps::before{border-top-color:rgba(228,166,172,.6)}
.theme-dark .sheet{box-shadow:0 18px 40px rgba(0,0,0,.45)}
.theme-dark .sheet,.theme-dark .sheet .t,.theme-dark .sheet .row span{color:#3A2E2A}
.theme-dark .shop{background:var(--paper);box-shadow:none;border:1.5px solid var(--line)}
.theme-dark .shop-row{border-color:var(--line)}
.theme-dark .checks svg{stroke:var(--sage-mid)}
.theme-dark .data{background:var(--paper)}
.theme-dark .faq details{background:var(--paper)}
.theme-dark .tool{background:var(--paper);border-color:var(--line)}
.theme-dark .card{background:var(--paper);border-color:var(--line)}
.theme-dark .readout-big{background:var(--rose-tint)!important}
.theme-dark .readout-big div{color:var(--rose-ink)!important}
.theme-dark .readout-big .big{color:var(--ink)!important}
.theme-dark .callout{background:var(--rose-tint)}
.theme-dark .dmc-grid li{background:var(--paper);border-color:var(--line)}
.theme-dark .match-chip{background:var(--paper);border-color:var(--line)}
.theme-dark select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F3EDE4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.theme-dark .site-footer{background:#161925;color:var(--ink-2)}
.theme-dark .site-footer a{color:var(--ink-2)}
.theme-dark .toast{background:#F3EDE4;color:#1E2230}

/* editor */
.theme-dark .app-bar{background:#232838;border-color:var(--line)}
.theme-dark .app-bar .privacy{color:var(--sage-mid)}
.theme-dark .panel{background:#232838;border-color:var(--line)}
.theme-dark .busy{background:rgba(30,34,48,.6)}
.theme-dark .statline span{background:var(--paper)}
.theme-dark .readout{background:var(--rose-tint)}
.theme-dark .fabric-box{background:rgba(156,164,130,.14)}
.theme-dark dialog.pcs{background:#272C3D;color:var(--ink)}
.theme-dark .mobile-cta{background:linear-gradient(rgba(30,34,48,0),#1E2230 35%)}
.theme-dark input[type=range]{accent-color:var(--rose)}
@media (max-width:900px){ .theme-dark .hero h1{font-size:44px} }
.theme-dark .logo,.theme-dark .logo:hover{color:var(--ink)} .theme-dark .fabric-box svg{stroke:#9CA482}
.theme-dark .idea,.theme-dark .idea:hover,.theme-dark .tool,.theme-dark .tool:hover{color:var(--ink)}