/* Schválené CSS z reference/approved-diagram.html, beze změn kompozice. */

    #sc-copy-routes-all-directions { padding: 16px; background-color: transparent; }
    #sc-copy-routes-all-directions .sc-section {
      --sc-paper: light-dark(#fcfbfe, #1b1822);
      --sc-panel: light-dark(#ffffff, #28232f);
      --sc-ink: light-dark(#24212e, #f3edf9);
      --sc-muted: light-dark(#6e667c, #bdb2cc);
      --sc-line: light-dark(#e1daec, #493f58);
      --sc-violet: light-dark(#6640ce, #b59aff);
      --sc-blue: light-dark(#345be5, #91b2ff);
      --sc-orange: light-dark(#c96912, #ffaf66);
      --sc-orange-line: light-dark(#e88a27, #ffaf66);
      --sc-orange-halo: light-dark(#fff0dd, #412d1d);
      --sc-halo: light-dark(#ede6fd, #332647);
      --sc-metal-top: light-dark(#fefeff, #413b4b);
      --sc-metal-bottom: light-dark(#e8e7ef, #292532);
      --sc-shadow: light-dark(#33245115, #08050f55);
      position: relative; overflow: hidden; padding: 30px 20px 22px;
      background: var(--sc-paper); color: var(--sc-ink); border-radius: 24px;
      font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
      box-shadow: 0 12px 40px var(--sc-shadow);
    }
    #sc-copy-routes-all-directions * { box-sizing: border-box; }
    #sc-copy-routes-all-directions .sc-heading { position: relative; margin: 0; max-width: 470px; font-size: clamp(26px, 4.5vw, 38px); line-height: 1.12; letter-spacing: -.045em; font-weight: 600; }
    #sc-copy-routes-all-directions .sc-heading span { color: var(--sc-violet); }
    #sc-copy-routes-all-directions .sc-scene { height: 350px; position: relative; margin-top: 20px; isolation: isolate; }
    #sc-copy-routes-all-directions .sc-glow { position: absolute; inset: 50px 12%; background: radial-gradient(ellipse, var(--sc-halo), transparent 68%); z-index: -1; }
    #sc-copy-routes-all-directions .sc-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    #sc-copy-routes-all-directions .sc-track { stroke: var(--sc-line); stroke-width: 1.4; fill: none; }
    #sc-copy-routes-all-directions .sc-active-path { fill: none; stroke: url(#sc-route-gradient); stroke-width: 2.8; }
    #sc-copy-routes-all-directions .sc-backup-path { fill: none; stroke: var(--sc-orange-line); stroke-width: 2.8; }
    #sc-copy-routes-all-directions .sc-particle { fill: var(--sc-violet); stroke: var(--sc-paper); stroke-width: 2; }
    #sc-copy-routes-all-directions .sc-particle.is-backup { fill: var(--sc-orange-line); }
    #sc-copy-routes-all-directions .sc-node { position: absolute; width: 126px; text-align: center; transform: translateX(-50%); }
    #sc-copy-routes-all-directions [data-device="card"] { left: 20%; top: 0; }
    #sc-copy-routes-all-directions [data-device="mac"] { left: 80%; top: 0; }
    #sc-copy-routes-all-directions [data-device="drive"] { left: 20%; bottom: 0; }
    #sc-copy-routes-all-directions [data-device="nas"] { left: 80%; bottom: 0; }
    #sc-copy-routes-all-directions .sc-device-face { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 9px; border-radius: 21px; background: linear-gradient(145deg, var(--sc-metal-top), var(--sc-metal-bottom)); border: 1px solid var(--sc-line); box-shadow: 0 9px 16px var(--sc-shadow), inset 0 1px 1px var(--sc-panel); color: var(--sc-muted); transition: color 220ms ease; }
    #sc-copy-routes-all-directions .sc-device-face svg { width: 39px; height: 39px; stroke-width: 1.5; }
    #sc-copy-routes-all-directions .sc-node.is-source .sc-device-face, #sc-copy-routes-all-directions .sc-node.is-target .sc-device-face { color: var(--sc-violet); }
    #sc-copy-routes-all-directions .sc-node.is-backup .sc-device-face { color: var(--sc-orange); background: linear-gradient(145deg, var(--sc-panel), var(--sc-orange-halo)); }
    #sc-copy-routes-all-directions .sc-device-label { display: block; font-size: 14px; line-height: 1.3; font-weight: 500; }
    #sc-copy-routes-all-directions .sc-role { display: block; height: 19px; margin-top: 3px; color: var(--sc-violet); font-size: 11px; line-height: 1.5; letter-spacing: .09em; font-weight: 600; }
    #sc-copy-routes-all-directions .sc-node.is-backup .sc-role { color: var(--sc-orange); }
    #sc-copy-routes-all-directions .sc-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 17px 20px; border-radius: 20px; background: var(--sc-panel); box-shadow: 0 10px 38px var(--sc-shadow); }
    #sc-copy-routes-all-directions .sc-wordmark { white-space: nowrap; letter-spacing: -.045em; font-size: 23px; line-height: 1.2; font-weight: 700; }
    #sc-copy-routes-all-directions .sc-wordmark span { font-weight: 400; }
    #sc-copy-routes-all-directions .sc-routes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; max-width: 650px; margin: 20px auto 0; }
    #sc-copy-routes-all-directions .sc-route-button { appearance: none; font: inherit; font-size: 12px; line-height: 1.3; min-height: 38px; padding: 9px 12px; border-radius: 99px; border: 1px solid var(--sc-line); background: var(--sc-panel); color: var(--sc-muted); }
    #sc-copy-routes-all-directions .sc-route-button[aria-pressed="true"] { background: var(--sc-halo); border-color: var(--sc-violet); color: var(--sc-ink); }
    #sc-copy-routes-all-directions .sc-route-button:hover { color: var(--sc-violet); }
    #sc-copy-routes-all-directions .sc-backup-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; grid-column: 1 / -1; justify-self: center; margin-top: 5px; }
    #sc-copy-routes-all-directions .sc-backup-button svg { width: 16px; height: 16px; }
    #sc-copy-routes-all-directions .sc-backup-button[aria-pressed="true"] { color: var(--sc-orange); border-color: var(--sc-orange-line); background: var(--sc-orange-halo); }
    #sc-copy-routes-all-directions .sc-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    @media (max-width: 700px) {
      #sc-copy-routes-all-directions .sc-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 440px; }
    }
    @media (max-width: 450px) {
      #sc-copy-routes-all-directions { padding: 8px; }
      #sc-copy-routes-all-directions .sc-section { padding: 26px 14px 18px; }
      #sc-copy-routes-all-directions .sc-scene { height: 360px; }
      #sc-copy-routes-all-directions .sc-node { width: 104px; }
      #sc-copy-routes-all-directions .sc-center { padding: 16px 14px; }
      #sc-copy-routes-all-directions .sc-wordmark { font-size: 20px; }
      #sc-copy-routes-all-directions .sc-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #sc-copy-routes-all-directions .sc-route-button { flex: 1 1 calc(50% - 7px); min-height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #sc-copy-routes-all-directions .sc-device-face { transition: none; }
    }


/* Izolace od typografie stránky a náhrada kurzoru z náhledu chatu. */
#sc-copy-routes-all-directions { color-scheme: light; font-size: 16px; line-height: normal; font-weight: 400; letter-spacing: normal; }
#sc-copy-routes-all-directions .sc-heading { font-family: inherit; text-wrap: wrap; }
#sc-copy-routes-all-directions .sc-route-button { cursor: pointer; }

/* Široký vnější rámeček; vnitřní geometrie zůstává jako v původním obalu 736 px. */
#sc-copy-routes-all-directions { padding: 0; }
#sc-copy-routes-all-directions .sc-section { padding-inline: 0; }
#sc-copy-routes-all-directions .sc-content { width: min(664px, calc(100% - 32px)); margin-inline: auto; }
@media (max-width: 450px) {
  #sc-copy-routes-all-directions .sc-content { width: calc(100% - 4px); }
}

/* V10: volby z approved-organize-diagram.html kolem nezměněné scény V9.
   Ikony: Lucide 1.8.0 (icons/LICENSE); file-video je alias file-play. */
#sc-copy-routes-all-directions .sc-stage { position: relative; margin-top: 20px; }
#sc-copy-routes-all-directions .sc-scene { margin-top: 0; }
#sc-copy-routes-all-directions .sc-option-path { fill: none; stroke: var(--sc-line); stroke-width: 1.6; stroke-dasharray: 3 5; transition: stroke 200ms ease; }
#sc-copy-routes-all-directions .sc-option-path.is-enabled { stroke: var(--sc-violet); stroke-dasharray: none; }
#sc-copy-routes-all-directions .sc-option { position: absolute; top: calc(50% - 48px); width: 166px; z-index: 3; }
#sc-copy-routes-all-directions .sc-toggle { appearance: none; width: 100%; min-height: 52px; padding: 10px 11px; display: flex; align-items: center; gap: 7px; text-align: left; border: 1px solid var(--sc-line); border-radius: 14px; background: var(--sc-panel); color: var(--sc-muted); font: 500 12px/1.25 "Avenir Next", Avenir, "Trebuchet MS", sans-serif; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
#sc-copy-routes-all-directions .sc-toggle > svg { flex: 0 0 17px; width: 17px; height: 17px; stroke-width: 1.7; }
#sc-copy-routes-all-directions .sc-toggle-label { flex: 1; min-width: 0; }
#sc-copy-routes-all-directions .sc-toggle-mark { flex: 0 0 14px; width: 14px; height: 14px; border: 1px solid var(--sc-line); border-radius: 50%; display: grid; place-items: center; font: 600 10px/1 sans-serif; color: transparent; }
#sc-copy-routes-all-directions .sc-toggle[aria-pressed="true"] { color: var(--sc-violet); border-color: var(--sc-violet); background: var(--sc-halo); }
#sc-copy-routes-all-directions .sc-toggle[aria-pressed="true"] .sc-toggle-mark { color: var(--sc-panel); background: var(--sc-violet); border-color: var(--sc-violet); }
#sc-copy-routes-all-directions .sc-option-detail { margin-top: 10px; padding-inline: 8px; }
#sc-copy-routes-all-directions .sc-detail-label { color: var(--sc-muted); font-size: 11px; line-height: 1.3; margin: 0 0 5px; }
#sc-copy-routes-all-directions .sc-sample-row { display: flex; align-items: center; gap: 6px; min-height: 23px; font-size: 12px; line-height: 1.4; color: var(--sc-muted); white-space: nowrap; }
#sc-copy-routes-all-directions .sc-sample-row svg { flex: 0 0 14px; width: 14px; height: 14px; stroke-width: 1.6; }
#sc-copy-routes-all-directions .sc-option.is-enabled .sc-sample-row { color: var(--sc-ink); }
#sc-copy-routes-all-directions .sc-option.is-enabled .sc-sample-row svg { color: var(--sc-violet); }
#sc-copy-routes-all-directions [hidden] { display: none !important; }
#sc-copy-routes-all-directions .sc-option-folders { left: -182px; }
#sc-copy-routes-all-directions .sc-option-names { right: -182px; }
#sc-copy-routes-all-directions .sc-toggle { cursor: pointer; letter-spacing: normal; }
@media (max-width: 1199px) {
  #sc-copy-routes-all-directions .sc-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  #sc-copy-routes-all-directions .sc-scene { grid-column: 1 / -1; }
  #sc-copy-routes-all-directions .sc-option { position: static; width: auto; min-width: 0; }
  #sc-copy-routes-all-directions .sc-option-path { display: none; }
  #sc-copy-routes-all-directions .sc-toggle { min-height: 48px; }
}
@media (max-width: 700px) {
  #sc-copy-routes-all-directions .sc-toggle { padding-inline: 9px; gap: 5px; }
}
@media (max-width: 450px) {
  #sc-copy-routes-all-directions .sc-toggle { padding-inline: 7px; }
  #sc-copy-routes-all-directions .sc-toggle-mark { display: none; }
  #sc-copy-routes-all-directions .sc-option-detail { padding-inline: 2px; }
  #sc-copy-routes-all-directions .sc-sample-row { font-size: 11px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #sc-copy-routes-all-directions .sc-toggle,
  #sc-copy-routes-all-directions .sc-option-path { transition: none; }
}