/* Magnet Studio M42 — final screenshot-driven dark surfaces.
   Loaded after M41. Targets only the remaining pale controls and preview shells. */

html[data-theme='dark']{
  --m42-panel:#111a2f;
  --m42-panel-2:#0d1528;
  --m42-panel-3:#18233e;
  --m42-line:rgba(158,180,231,.19);
  --m42-line-strong:rgba(141,163,255,.46);
  --m42-text:#f6f8ff;
  --m42-copy:#b7c2d8;
  --m42-muted:#8d99b2;
  --m42-blue:#91a4ff;
  --m42-green:#68e0b8;
  --m42-amber:#ffd38a;
}

/* --------------------------------------------------------------------------
   Homepage hero: the light copy half was inheriting white dark-mode text.
   Keep photography true-colour, darken only UI chrome and copy surfaces.
   -------------------------------------------------------------------------- */
html[data-theme='dark'] .m16-home .m16-hero{
  border-color:var(--m42-line)!important;
  background:#0d1528!important;
  box-shadow:0 34px 96px rgba(0,0,0,.38)!important;
}
html[data-theme='dark'] .m16-home .m16-hero__copy{
  color:var(--m42-text)!important;
  background:
    radial-gradient(circle at 2% 96%,rgba(84,107,255,.18),transparent 30%),
    radial-gradient(circle at 92% 4%,rgba(231,72,178,.11),transparent 28%),
    linear-gradient(150deg,#151f39,#0d1528 72%)!important;
}
html[data-theme='dark'] .m16-home .m16-hero h1{color:#f7f9ff!important}
html[data-theme='dark'] .m16-home .m16-hero__copy>p{color:#b9c4d9!important}
html[data-theme='dark'] .m16-home .m16-text-link{color:#edf2ff!important}
html[data-theme='dark'] .m16-home .m16-text-link span{border-bottom-color:rgba(193,205,236,.31)!important}
html[data-theme='dark'] .m16-home .m16-hero__micro{color:#c0cbe0!important}
html[data-theme='dark'] .m16-home .m16-hero__micro span{
  border:1px solid var(--m42-line)!important;
  border-radius:999px;
  background:rgba(9,15,29,.5)!important;
}
html[data-theme='dark'] .m16-home .m16-hero__badge{
  color:#eaf0ff!important;
  border-color:var(--m42-line)!important;
  background:rgba(13,21,40,.84)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
}
html[data-theme='dark'] .m16-home .m16-hero__studio-card{
  color:var(--m42-text)!important;
  border-color:var(--m42-line)!important;
  background:rgba(15,24,44,.91)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme='dark'] .m16-home .m16-hero__studio-card header b{color:#f4f7ff!important}
html[data-theme='dark'] .m16-home .m16-hero__studio-card footer{color:#b4bfd5!important}
html[data-theme='dark'] .m16-home .m16-hero__studio-card>div{
  background:radial-gradient(circle at 50% 44%,#f7f9ff,#dce3f0 72%)!important;
}

/* Homepage editor illustration: match the real dark editor instead of leaving
   white form fields and a white canvas inside a dark story block. */
html[data-theme='dark'] .m16-home .m16-editor-window{
  background:#0b1223!important;
}
html[data-theme='dark'] .m16-home .m16-editor-window__body>nav span.is-active{
  color:#fff!important;
  background:linear-gradient(145deg,rgba(76,101,255,.34),rgba(145,89,255,.22))!important;
  box-shadow:inset 0 0 0 1px rgba(151,171,255,.2)!important;
}
html[data-theme='dark'] .m16-home .m16-editor-canvas{
  background-color:#0c1427!important;
  background-image:linear-gradient(rgba(105,127,187,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(105,127,187,.08) 1px,transparent 1px)!important;
}
html[data-theme='dark'] .m16-home .m16-editor-safe{border-color:rgba(102,126,255,.36)!important}
html[data-theme='dark'] .m16-home .m16-editor-canvas em{
  color:#dce5ff!important;
  border:1px solid var(--m42-line)!important;
  background:rgba(13,21,40,.9)!important;
}
html[data-theme='dark'] .m16-home .m16-editor-choice>span{
  color:#eef3ff!important;
  border-color:var(--m42-line)!important;
  background:#0d1528!important;
}
html[data-theme='dark'] .m16-home .m16-editor-choice>span small{color:#9eabc2!important}

/* Support hero: recolour the remaining pale visual half while preserving the
   product cutout itself. */
html[data-theme='dark'] .m17-support-page .m17-hero__visual{
  border-left:1px solid var(--m42-line)!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(89,108,187,.26),transparent 34%),
    radial-gradient(circle at 78% 8%,rgba(151,87,255,.15),transparent 31%),
    linear-gradient(145deg,#16213b,#0d1528 72%)!important;
}
html[data-theme='dark'] .m17-support-page .m17-hero__visual::before{
  border-color:rgba(167,184,231,.16)!important;
  box-shadow:0 0 0 42px rgba(122,143,210,.035),0 0 0 84px rgba(122,143,210,.02)!important;
}
html[data-theme='dark'] .m17-support-page .m17-hero__badge{
  color:#eaf0ff!important;
  border-color:var(--m42-line)!important;
  background:rgba(13,21,40,.86)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.3)!important;
}

/* --------------------------------------------------------------------------
   Studio: last pale utility cards, selected segments and proof confirmation.
   -------------------------------------------------------------------------- */
html[data-theme='dark'] .m2-studio-app .m7-art-note{
  color:#b7c2d8!important;
  border:1px solid var(--m42-line)!important;
  background:#0d1528!important;
}
html[data-theme='dark'] .m2-studio-app .m7-art-note svg{color:#91a4ff!important}
html[data-theme='dark'] .m2-studio-app .m7-art-control output{
  color:#dce5ff!important;
  border:1px solid var(--m42-line)!important;
  background:#18233e!important;
}
html[data-theme='dark'] .m2-studio-app .m7-art-compare figcaption{
  color:#eef3ff!important;
  border:1px solid var(--m42-line)!important;
  background:rgba(13,21,40,.9)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.24)!important;
}
html[data-theme='dark'] .m2-studio-app .m2-outline-label{
  color:#dce5ff!important;
  border:1px solid var(--m42-line)!important;
  background:rgba(13,21,40,.9)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.24)!important;
}

/* The selected layout/finish buttons were still a pale lavender surface with
   white text. Force a high-contrast selected treatment after every legacy CSS. */
html[data-theme='dark'] .m2-studio-app :where(.m2-segmented,.m3-finish,.m7-layout-switch) button.is-selected{
  color:#fff!important;
  border-color:rgba(158,177,255,.58)!important;
  background:linear-gradient(135deg,#5d75f0,#835fe9 68%,#b953b1)!important;
  box-shadow:0 10px 24px rgba(49,61,171,.3),inset 0 1px 0 rgba(255,255,255,.15)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.18)!important;
}
html[data-theme='dark'] .m2-studio-app :where(.m2-segmented,.m3-finish,.m7-layout-switch) button:not(.is-selected){
  color:#d5def0!important;
  border-color:var(--m42-line)!important;
  background:#0d1528!important;
}

/* Context navigation: previous actions must not become a white island. */
html[data-theme='dark'] .m2-studio-app .m7-step-nav button:first-child{
  color:#dce4f6!important;
  border-color:var(--m42-line)!important;
  background:#0d1528!important;
  box-shadow:none!important;
}
html[data-theme='dark'] .m2-studio-app .m7-step-nav button:first-child :where(b,small,svg){color:inherit!important}
html[data-theme='dark'] .m2-studio-app .m7-step-nav button:first-child:not(:disabled):hover{
  color:#fff!important;
  border-color:var(--m42-line-strong)!important;
  background:#18233e!important;
}

/* Upload-state notice on the canvas. */
html[data-theme='dark'] .m2-studio-app .m3-pending-pill{
  color:#ffe0aa!important;
  border:1px solid rgba(255,194,96,.29)!important;
  background:linear-gradient(145deg,rgba(104,66,18,.68),rgba(63,43,18,.8))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28)!important;
}
html[data-theme='dark'] .m2-studio-app .m3-pending-pill :where(b,span,svg){color:inherit!important}

/* Proof summary and approval card: keep semantic green but use dark surfaces. */
html[data-theme='dark'] .m2-studio-app .m2-proof-score{
  color:#a8efd6!important;
  border:1px solid rgba(91,220,178,.31)!important;
  background:linear-gradient(145deg,rgba(22,88,69,.48),rgba(12,39,35,.78))!important;
  box-shadow:0 12px 28px rgba(0,0,0,.2)!important;
}
html[data-theme='dark'] .m2-studio-app .m2-proof-score b{color:#eafff8!important}
html[data-theme='dark'] .m2-studio-app .m2-proof-score small{color:#a7cfc2!important}
html[data-theme='dark'] .m2-studio-app .m2-proof-score svg{color:#70e4bd!important}
html[data-theme='dark'] .m2-studio-app .m2-proof-score.is-blocked{
  color:#ffd39a!important;
  border-color:rgba(255,190,87,.28)!important;
  background:rgba(91,58,16,.46)!important;
}
html[data-theme='dark'] .m2-studio-app .m3-proof-confirm{
  color:#dce8e4!important;
  border:1px solid rgba(101,221,181,.28)!important;
  background:linear-gradient(145deg,rgba(19,72,59,.5),rgba(12,37,34,.76))!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}
html[data-theme='dark'] .m2-studio-app .m3-proof-confirm b{color:#f0fff9!important}
html[data-theme='dark'] .m2-studio-app .m3-proof-confirm small{color:#a8c9bf!important}
html[data-theme='dark'] .m2-studio-app .m3-proof-confirm input{accent-color:#52d6aa!important}
html[data-theme='dark'] .m2-studio-app .m3-proof-confirm.is-disabled{
  color:#8f9bb2!important;
  border-color:var(--m42-line)!important;
  background:#0d1528!important;
  opacity:1!important;
}
html[data-theme='dark'] .m2-studio-app .m3-proof-confirm.is-disabled :where(b,small){color:#8f9bb2!important}
html[data-theme='dark'] .m2-studio-app .m2-primary-button:disabled{
  color:#8d99b0!important;
  border:1px solid rgba(151,172,220,.12)!important;
  background:#182132!important;
  box-shadow:none!important;
  opacity:1!important;
}

@media(max-width:780px){
  html[data-theme='dark'] .m16-home .m16-hero__copy{background:linear-gradient(155deg,#151f39,#0d1528)!important}
  html[data-theme='dark'] .m17-support-page .m17-hero__visual{border-left:0!important;border-top:1px solid var(--m42-line)!important}
  html[data-theme='dark'] .m2-studio-app .m7-step-nav button:first-child{min-width:0!important}
}

@media(prefers-reduced-motion:reduce){
  html[data-theme='dark'] .m2-studio-app :where(.m2-segmented,.m3-finish,.m7-layout-switch) button{transition:none!important}
}