/* Same stage, rotation, timing and easing as the leads audience flip. */
      .sg-drawing-stage { display: grid; min-width: 0; perspective: 1500px; }
      .sg-drawing-flipper {
        position: relative; display: grid; min-width: 0; transform-style: preserve-3d;
        transition: transform .58s cubic-bezier(.2,.78,.2,1);
      }
      .sg-drawing-flipper.is-flipped { transform: rotateY(180deg); }
      .sg-drawing-flipper > .sg-config-card,
      .sg-drawing-back {
        grid-area: 1 / 1; min-width: 0;
        backface-visibility: hidden; -webkit-backface-visibility: hidden;
      }
      .sg-drawing-flipper > .sg-config-card { min-width: 0; }
      .sg-drawing-flipper.is-flipped > .sg-config-card,
      .sg-drawing-flipper:not(.is-flipped) > .sg-drawing-back { pointer-events: none; }
      /* At rest, render the front without a 3D layer so its pixels match live. */
      .sg-drawing-stage:not(.has-flip) { perspective: none; }
      .sg-drawing-stage:not(.has-flip) .sg-drawing-flipper { transform-style: flat; }
      .sg-drawing-stage:not(.has-flip) .sg-config-card {
        backface-visibility: visible; -webkit-backface-visibility: visible;
      }
      .sg-drawing-stage:not(.has-flip) .sg-drawing-back { visibility: hidden; }
      /* Existing Schneider breaker-platform icon green, not a new palette color. */
      .sg-drawing-stage { --sg-drawing-green: #3DCD58; }
      .sg-drawing-open, .sg-drawing-back button {
        min-height: 34px; padding: 8px 12px; border: 1px solid var(--sg-drawing-green);
        border-radius: 999px; font: inherit; font-size: 12px; font-weight: 900;
        white-space: nowrap; cursor: pointer;
      }
      .sg-drawing-open {
        align-self: center; justify-self: start;
        background: var(--sg-drawing-green); color: var(--sg-navy);
      }
      .sg-drawing-open:hover { background: #fff; border-color: #fff; }
      .sg-drawing-open:focus-visible, .sg-drawing-back button:focus-visible {
        outline: 2px solid #fff; outline-offset: 3px;
      }
      /* Back-only accent: the live page's existing --sg-teal (#43c8b8). */
      .sg-drawing-back {
        position: absolute; inset: 0; display: flex; flex-direction: column;
        padding: 0; border: 1px solid var(--sg-line); border-radius: 22px;
        background: linear-gradient(135deg, #08243a, #0d3855); color: #fff;
        box-shadow: 0 14px 40px rgba(16,46,67,.07);
        transform: rotateY(180deg); container-type: inline-size;
      }
      .sg-drawing-back-head {
        flex: 0 0 126px; padding: 25px 25px 18px; border-radius: 21px 21px 0 0;
        border-bottom: 1px solid rgba(255,255,255,.16); background: var(--sg-navy);
      }
      .sg-drawing-back-head .sg-config-top { height: 30px; }
      #drawings-ev2u-2000a .sg-config-top { height: calc(.875rem * 1.2 + 18px); }
      .sg-drawing-back h3 {
        margin: 23px 0 0; font-size: clamp(14px, 5.2cqw, 21px);
        line-height: 1.15; font-weight: 800; letter-spacing: -.045em; white-space: nowrap;
      }
      .sg-drawing-rating { color: #3DCD58; font-size: .86em; font-weight: 700; letter-spacing: 0; }
      .sg-drawing-body {
        display: flex; flex: 1; flex-direction: column; justify-content: flex-start;
        min-height: 0; padding: 28px 14px 0;
      }
      .sg-drawing-label {
        margin: 0 10px 12px; color: #91adbf; font-size: 10px; line-height: 14px;
        font-weight: 700; letter-spacing: .16em;
      }
      .sg-drawing-list { margin: 0; padding: 0; list-style: none; }
      .sg-drawing-list li + li { margin-top: 10px; }
      .sg-drawing-row {
        display: flex; align-items: center; height: 48px; padding: 0 9px;
        border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
        background: rgba(255,255,255,.06); color: #fff; text-decoration: none;
      }
      .sg-drawing-row:hover { background: rgba(255,255,255,.12); border-color: var(--sg-teal); }
      .sg-drawing-row:focus-visible { outline: 2px solid var(--sg-teal); outline-offset: 2px; }
      .sg-drawing-file { display: grid; width: 100%; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 8px; }
      .sg-drawing-file svg { width: 16px; height: 16px; color: #91adbf; }
      .sg-drawing-row:hover svg, .sg-drawing-row:focus-visible svg { color: var(--sg-teal); }
      .sg-drawing-name { font-size: clamp(12px, 3.6cqw, 13px); line-height: 18px; font-weight: 500; white-space: nowrap; }
      .sg-drawing-meta { color: #a9bdca; font-size: 11px; line-height: 16px; font-weight: 400; text-align: right; white-space: nowrap; }
      .sg-drawing-note {
        display: block; margin: 6px 0 0 34px; color: #91adbf; font-weight: 400;
        font-size: clamp(9px, 2.9cqw, 11px); line-height: 1.4; white-space: nowrap;
      }
      .sg-drawing-empty {
        padding: 22px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
        background: rgba(255,255,255,.06); text-align: center;
      }
      .sg-drawing-pending { margin: 0; }
      .sg-drawing-empty .sg-pending-chip {
        padding: 6px 10px; font-size: 12px; font-weight: 600;
        background: rgba(230,191,66,.12); border-color: rgba(230,191,66,.35); color: #e6bf42;
      }
      .sg-drawing-empty .sg-pending-light { animation: none; box-shadow: none; }
      .sg-drawing-empty-note {
        margin: 12px 0 0; color: #91adbf; font-size: clamp(9px, 3cqw, 11px);
        font-weight: 400; line-height: 1.5;
      }
      .sg-drawing-footer {
        display: flex; flex: 0 0 67px; align-items: center; padding: 0 25px;
        background: #0a2a42; border-radius: 0 0 21px 21px;
      }
      .sg-drawing-back button { background: #3DCD58; color: var(--sg-navy); }
      .sg-drawing-back button:hover { background: #fff; border-color: #fff; }
      @media (prefers-reduced-motion: reduce) { .sg-drawing-flipper { transition: none; } }