/*
  VISUAL RELAUNCH PROTOTYPE — BASIS v422
  Screen-only design layer. The productive JavaScript/PHP logic remains untouched.
*/
@media screen {
  :root {
    --ck-left: clamp(278px, 16.2vw, 312px);
    --ck-right: clamp(292px, 17vw, 324px);
    --ck-bg: #eef2f7;
    --ck-panel: #ffffff;
    --ck-panel-soft: #f7f9fc;
    --ck-panel-hover: #f3f7fd;
    --ck-border: #d9e1ec;
    --ck-border-strong: #c6d1df;
    --ck-text: #132033;
    --ck-text-soft: #51627a;
    --ck-muted: #7a899d;
    --ck-primary: #1769e0;
    --ck-primary-hover: #0f58c4;
    --ck-primary-soft: #eaf2ff;
    --ck-success: #148451;
    --ck-danger: #c43c3c;
    --ck-warning: #a96208;
    --ck-canvas: #0b1422;
    --ck-radius-xl: 18px;
    --ck-radius-lg: 14px;
    --ck-radius-md: 10px;
    --ck-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 5px 14px rgba(15, 23, 42, .035);
    --ck-shadow-md: 0 10px 28px rgba(15, 23, 42, .09);
    --ck-focus: 0 0 0 3px rgba(23, 105, 224, .18);
  }

  html {
    font-size: 16px;
    background: var(--ck-bg);
  }

  body.design-prototype,
  body.design-prototype button,
  body.design-prototype input,
  body.design-prototype select,
  body.design-prototype textarea {
    font-family: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  }

  body.design-prototype {
    display: grid !important;
    grid-template-columns: var(--ck-left) minmax(520px, 1fr) var(--ck-right) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 1180px;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--ck-bg) !important;
    color: var(--ck-text) !important;
    font-size: 13px;
    line-height: 1.42;
  }

  body.design-prototype * {
    scrollbar-width: thin;
    scrollbar-color: #aeb9c8 transparent;
  }

  body.design-prototype *::-webkit-scrollbar { width: 8px; height: 8px; }
  body.design-prototype *::-webkit-scrollbar-track { background: transparent; }
  body.design-prototype *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #aeb9c8;
    background-clip: padding-box;
  }

  /* ---------- Left configuration rail ---------- */
  body.design-prototype #ui {
    grid-column: 1;
    min-width: 0;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 28px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 0 !important;
    border-right: 1px solid var(--ck-border) !important;
    background: #f5f7fa !important;
    box-shadow: none !important;
    z-index: 8;
  }

  body.design-prototype #ui::before {
    content: "KONFIGURATION";
    position: sticky;
    top: -12px;
    z-index: 40;
    display: flex;
    align-items: center;
    height: 34px;
    box-sizing: border-box;
    margin: -12px -12px 0;
    padding: 0 14px;
    border-bottom: 1px solid rgba(217, 225, 236, .92);
    background: rgba(245, 247, 250, .94);
    backdrop-filter: blur(14px);
    color: var(--ck-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
  }

  body.design-prototype #header-panel,
  body.design-prototype #ui > .panel {
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: var(--ck-radius-lg) !important;
    background: var(--ck-panel) !important;
    box-shadow: var(--ck-shadow-sm) !important;
  }

  body.design-prototype #header-panel {
    padding: 14px !important;
  }

  body.design-prototype #header-panel .brand {
    min-height: 196px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 96px auto;
    align-items: stretch !important;
    gap: 10px;
    overflow: hidden;
    text-align: left !important;
  }

  body.design-prototype #header-panel .brand-logo {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    height: 96px !important;
    max-height: 96px !important;
    align-self: center !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    transform-origin: center;
  }

  body.design-prototype #courtLangSwitchWrap {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  body.design-prototype #courtLangSwitchLabel {
    display: none !important;
  }

  body.design-prototype #courtLangButtons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 10px !important;
    background: var(--ck-panel-soft) !important;
    box-shadow: none !important;
  }

  body.design-prototype .court-lang-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 7px 15px 7px 6px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--ck-text-soft) !important;
    box-shadow: none !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body.design-prototype .court-lang-btn.is-active,
  body.design-prototype .court-lang-btn[aria-pressed="true"] {
    background: #ffffff !important;
    color: var(--ck-primary) !important;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .12) !important;
  }

  body.design-prototype .flag-icon { width: 19px; height: 13px; flex: 0 0 19px; }

  body.design-prototype #ui > .panel:not(#header-panel) {
    padding: 13px 13px 14px !important;
  }

  body.design-prototype #ui > .panel:hover {
    border-color: var(--ck-border-strong) !important;
  }

  body.design-prototype .panel > h2,
  body.design-prototype .panel .centered-section-title,
  body.design-prototype .panel .hoop-group-title {
    width: auto !important;
    margin: 0 0 10px !important;
    color: var(--ck-text) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .085em !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  body.design-prototype .panel > h2::after,
  body.design-prototype .panel .centered-section-title::after,
  body.design-prototype .panel .hoop-group-title::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--ck-primary);
  }

  body.design-prototype .centered-section-subtitle,
  body.design-prototype .logo-top-sub,
  body.design-prototype .logo-tip,
  body.design-prototype .text-label-tip,
  body.design-prototype .hoop-advisor-entry-copy p,
  body.design-prototype .ballshop-reference-copy,
  body.design-prototype .price-note,
  body.design-prototype .shipping-note {
    color: var(--ck-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.42 !important;
  }

  body.design-prototype .centered-section-subtitle {
    margin: -5px 0 10px !important;
    text-align: left !important;
  }

  body.design-prototype .field {
    gap: 5px !important;
    margin-bottom: 10px !important;
  }

  body.design-prototype .field:last-child { margin-bottom: 0 !important; }

  body.design-prototype .field > label,
  body.design-prototype .panel .field label,
  body.design-prototype label {
    color: var(--ck-text-soft) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  body.design-prototype .inline-group {
    gap: 8px !important;
    margin: 0 !important;
  }

  body.design-prototype input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.design-prototype select,
  body.design-prototype textarea {
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
    padding: 7px 9px !important;
    border: 1px solid var(--ck-border-strong) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--ck-text) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025) !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    line-height: 1.2 !important;
    outline: none !important;
  }

  body.design-prototype input:not([type="checkbox"]):not([type="radio"]):focus,
  body.design-prototype select:focus,
  body.design-prototype textarea:focus {
    border-color: var(--ck-primary) !important;
    box-shadow: var(--ck-focus) !important;
  }

  body.design-prototype #courtLength,
  body.design-prototype #courtWidth,
  body.design-prototype #customBaselineMargin,
  body.design-prototype #customSidelineMargin,
  body.design-prototype #customZoneScale,
  body.design-prototype #customThreeScale {
    border-color: #a8c5ef !important;
    background: #f2f7ff !important;
  }

  body.design-prototype input[type="checkbox"],
  body.design-prototype input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ck-primary);
  }

  /* Modern button foundation */
  body.design-prototype button:not(.color-swatch):not(.color-preview):not(.hoop-card):not(.floor-card),
  body.design-prototype .file-upload-btn,
  body.design-prototype summary.logo-options-btn,
  body.design-prototype summary.text-label-options-btn {
    min-height: 34px;
    box-sizing: border-box;
    border: 1px solid var(--ck-border-strong) !important;
    border-radius: 8px !important;
    padding: 7px 11px !important;
    background: #ffffff !important;
    color: var(--ck-text-soft) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
    white-space: normal !important;
  }

  body.design-prototype button:not(.color-swatch):not(.color-preview):not(.hoop-card):not(.floor-card):hover:not(:disabled),
  body.design-prototype .file-upload-btn:hover,
  body.design-prototype summary.logo-options-btn:hover,
  body.design-prototype summary.text-label-options-btn:hover {
    border-color: #aac0dc !important;
    background: var(--ck-panel-hover) !important;
    color: var(--ck-primary) !important;
    filter: none !important;
    transform: translateY(-1px);
  }

  body.design-prototype button:focus-visible,
  body.design-prototype summary:focus-visible,
  body.design-prototype .file-upload-btn:focus-visible {
    outline: none !important;
    box-shadow: var(--ck-focus) !important;
  }

  body.design-prototype button:disabled {
    opacity: .46 !important;
    cursor: not-allowed !important;
    transform: none !important;
  }

  body.design-prototype button.primary,
  body.design-prototype .next-steps-action,
  body.design-prototype .sponsor-offer-cta,
  body.design-prototype .pdf-button.info {
    border-color: var(--ck-primary) !important;
    background: var(--ck-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(23, 105, 224, .18) !important;
  }

  body.design-prototype button.primary:hover:not(:disabled),
  body.design-prototype .next-steps-action:hover:not(:disabled),
  body.design-prototype .sponsor-offer-cta:hover:not(:disabled),
  body.design-prototype .pdf-button.info:hover:not(:disabled) {
    border-color: var(--ck-primary-hover) !important;
    background: var(--ck-primary-hover) !important;
    color: #ffffff !important;
  }

  body.design-prototype button.secondary {
    border-color: var(--ck-border-strong) !important;
    background: #ffffff !important;
    color: var(--ck-text-soft) !important;
  }

  /* Court type selection */
  body.design-prototype .court-type-custom {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
  }

  body.design-prototype .court-type-option {
    min-width: 0;
    min-height: 126px !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 8px 9px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--ck-text) !important;
    box-shadow: none !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden;
  }

  body.design-prototype .court-type-option strong {
    display: block;
    min-height: 25px;
    font-size: 10.5px !important;
    line-height: 1.2;
    text-align: center;
  }

  body.design-prototype .court-type-preview {
    display: block;
    width: 100%;
    height: 62px;
    border-radius: 8px;
    background: #eef1f4;
    border: 1px solid #d9e2ef;
    overflow: hidden;
  }

  body.design-prototype .court-type-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  body.design-prototype .court-type-meta {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 24px;
    color: var(--ck-muted) !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: center;
  }

  body.design-prototype .court-type-option:hover {
    border-color: #abc3e3 !important;
    background: var(--ck-panel-hover) !important;
    transform: translateY(-1px);
  }

  body.design-prototype .court-type-option.active {
    border-color: var(--ck-primary) !important;
    background: var(--ck-primary-soft) !important;
    color: #0d4fae !important;
    box-shadow: inset 0 0 0 1px rgba(23, 105, 224, .08) !important;
  }

  body.design-prototype .court-type-option.active::before {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ck-primary);
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
  }

  body.design-prototype .court-type-option { position: relative; }

  /* Color system */
  body.design-prototype .panel:has(#mainColorScale) > .field:not([style*="display: none"]) {
    width: 100%;
    min-height: 43px;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px;
    grid-template-areas: "label preview" "scale scale";
    align-items: center;
    gap: 6px 10px !important;
    margin-bottom: 8px !important;
  }

  body.design-prototype .panel:has(#mainColorScale) > .field > label {
    grid-area: label;
    min-width: 0;
    margin: 0 !important;
  }
  body.design-prototype .panel:has(#mainColorScale) > .field > .color-preview {
    grid-area: preview;
    justify-self: end;
  }
  body.design-prototype .panel:has(#mainColorScale) > .field > .color-scale { grid-area: scale; }

  body.design-prototype .color-preview {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 2px solid #ffffff !important;
    border-radius: 9px !important;
    box-shadow: 0 0 0 1px var(--ck-border-strong), 0 2px 5px rgba(15, 23, 42, .10) !important;
  }

  body.design-prototype .color-scale {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 6px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 9px !important;
    background: var(--ck-panel-soft) !important;
  }

  body.design-prototype .color-swatch {
    min-width: 0 !important;
    width: 100% !important;
    aspect-ratio: 1.45 / 1;
    height: auto !important;
    max-height: 24px;
    border: 2px solid #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 1px rgba(100, 116, 139, .30) !important;
  }

  body.design-prototype .color-swatch.active,
  body.design-prototype .color-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--ck-primary) !important;
  }

  body.design-prototype .color-custom {
    margin-top: 7px !important;
    padding-top: 7px !important;
    border-top: 1px solid var(--ck-border) !important;
  }

  body.design-prototype .color-custom-inputs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;
    justify-content: center !important;
    gap: 7px !important;
  }
  body.design-prototype .color-custom-inputs input[type="number"] {
    width: 100% !important;
    min-width: 64px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    text-align: center !important;
  }
  body.design-prototype .color-custom-apply {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    min-width: 116px !important;
    min-height: 32px !important;
    margin: 2px 0 0 !important;
    padding: 6px 12px !important;
  }

  /* Logos and text labels */
  body.design-prototype .logo-panel-top,
  body.design-prototype .text-label-main {
    gap: 8px !important;
  }

  body.design-prototype .logo-top-title,
  body.design-prototype .text-label-top-title {
    color: var(--ck-text-soft) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  body.design-prototype .logo-slot-strip,
  body.design-prototype .text-label-slot-strip {
    gap: 5px !important;
    padding: 4px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 10px !important;
    background: var(--ck-panel-soft) !important;
  }

  body.design-prototype .logo-slot-btn,
  body.design-prototype .text-label-slot-btn {
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 7px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ck-muted) !important;
    font-size: 10px !important;
  }

  body.design-prototype .logo-slot-btn.is-active,
  body.design-prototype .text-label-slot-btn.is-active,
  body.design-prototype .logo-slot-btn[aria-selected="true"],
  body.design-prototype .text-label-slot-btn[aria-selected="true"] {
    background: #ffffff !important;
    color: var(--ck-primary) !important;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .10) !important;
  }

  body.design-prototype .logo-source-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  body.design-prototype .logo-tab {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 6px 7px !important;
    font-size: 10px !important;
  }

  body.design-prototype .logo-tab.is-active {
    border-color: var(--ck-primary) !important;
    background: var(--ck-primary-soft) !important;
    color: var(--ck-primary) !important;
  }

  body.design-prototype .logo-production-note {
    margin: 8px 0 !important;
    padding: 8px 9px !important;
    border: 1px solid #cfe0f7 !important;
    border-radius: 9px !important;
    background: #f3f7fd !important;
    color: var(--ck-text-soft) !important;
    font-size: 10px !important;
  }

  body.design-prototype details#logoDetails,
  body.design-prototype details#textLabelDetails {
    margin-top: 8px !important;
  }

  body.design-prototype #logoDetails > summary.logo-options-btn,
  body.design-prototype #textLabelDetails > summary.text-label-options-btn {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 8px 7px 10px !important;
    border: 1px solid var(--ck-border-strong) !important;
    border-radius: 8px !important;
    background: var(--ck-panel-soft) !important;
    color: var(--ck-text-soft) !important;
  }

  body.design-prototype #logoDetails > summary.logo-options-btn::after,
  body.design-prototype #textLabelDetails > summary.text-label-options-btn::after {
    content: "" !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background-color: #e5ebf3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2351627a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 15px 15px !important;
  }

  body.design-prototype #logoDetails[open] > summary.logo-options-btn::after,
  body.design-prototype #textLabelDetails[open] > summary.text-label-options-btn::after {
    transform: rotate(180deg) !important;
  }

  body.design-prototype .logo-row,
  body.design-prototype .text-label-row {
    margin-top: 7px !important;
    padding: 9px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 10px !important;
    background: var(--ck-panel-soft) !important;
    box-shadow: none !important;
  }

  body.design-prototype .logo-row-header,
  body.design-prototype .text-label-row-header {
    color: var(--ck-text) !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
  }

  body.design-prototype .logo-row-fields,
  body.design-prototype .text-label-grid {
    gap: 6px !important;
  }

  body.design-prototype .text-label-actions {
    display: flex !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }

  body.design-prototype .text-label-duplicate-btn {
    min-width: 160px !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
  }

  body.design-prototype .text-label-duplicate-btn:disabled {
    opacity: .45 !important;
  }

  body.design-prototype .logo-actions,
  body.design-prototype .product-button-row,
  body.design-prototype .accessory-button-row {
    gap: 6px !important;
    margin-top: 7px !important;
  }

  body.design-prototype .logo-actions button,
  body.design-prototype .product-button-row button,
  body.design-prototype .accessory-button-row button {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    font-size: 10.5px !important;
  }

  /* Product cards: floor tiles, hoops, accessories */
  body.design-prototype .floor-cards,
  body.design-prototype .hoop-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  body.design-prototype .hoop-group { margin-top: 13px !important; }
  body.design-prototype .hoop-group:first-child { margin-top: 0 !important; }

  body.design-prototype .hoop-card,
  body.design-prototype .floor-card,
  body.design-prototype #accessoriesPanel .accessory-product-card {
    position: relative;
    min-width: 0 !important;
    min-height: 116px !important;
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-rows: repeat(6, auto) !important;
    align-items: start !important;
    align-content: center !important;
    gap: 4px 12px !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--ck-text) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025) !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body.design-prototype .hoop-card:hover,
  body.design-prototype .floor-card:hover,
  body.design-prototype #accessoriesPanel .accessory-product-card:hover {
    border-color: #abc3e3 !important;
    background: var(--ck-panel-hover) !important;
    transform: translateY(-1px);
  }

  body.design-prototype .hoop-card.active,
  body.design-prototype .floor-card.active,
  body.design-prototype #accessoriesPanel .accessory-product-card.active {
    border-color: var(--ck-primary) !important;
    background: var(--ck-primary-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(23, 105, 224, .08) !important;
  }

  body.design-prototype .hoop-card.active::after,
  body.design-prototype .floor-card.active::after {
    content: "✓";
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--ck-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 3px 8px rgba(23, 105, 224, .22);
  }

  body.design-prototype .hoop-card img,
  body.design-prototype .floor-card img,
  body.design-prototype #accessoriesPanel .accessory-product-card img {
    grid-column: 1 !important;
    grid-row: 1 / span 6 !important;
    align-self: center !important;
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    background: #ffffff !important;
  }

  body.design-prototype .hoop-card-title,
  body.design-prototype #accessoriesPanel .accessory-product-card .hoop-card-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding-right: 24px;
    color: var(--ck-text) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.24 !important;
  }

  body.design-prototype .hoop-card-article,
  body.design-prototype #accessoriesPanel .accessory-product-card .hoop-card-article {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 7px !important;
    margin: 0 !important;
    color: var(--ck-muted) !important;
    font-size: 10.25px !important;
    line-height: 1.35 !important;
  }

  body.design-prototype .hoop-card-price,
  body.design-prototype .tile-price,
  body.design-prototype #accessoriesPanel .accessory-product-card .hoop-card-price {
    color: var(--ck-text) !important;
    font-size: 16.5px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }

  body.design-prototype .tile-brand-logo,
  body.design-prototype .hoop-group-logo {
    display: block !important;
    width: min(100%, 276px) !important;
    max-width: 276px !important;
    margin: 5px auto 12px !important;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    object-fit: contain !important;
    object-position: center !important;
  }

  body.design-prototype .tile-brand-logo {
    height: 110px !important;
    max-height: 110px !important;
    padding: 7px 10px !important;
  }

  body.design-prototype .hoop-group-logo {
    height: 82px !important;
    max-height: 82px !important;
    padding: 8px 12px !important;
  }

  body.design-prototype .hoop-advisor-entry {
    margin: 10px 0 !important;
    padding: 10px !important;
    border: 1px solid #cfe0f7 !important;
    border-radius: 11px !important;
    background: #f4f8fe !important;
  }

  body.design-prototype .hoop-advisor-entry-copy,
  body.design-prototype .hoop-advisor-entry-copy h3,
  body.design-prototype .hoop-advisor-entry-copy p {
    text-align: left !important;
  }

  body.design-prototype .hoop-advisor-entry-copy h3 {
    margin: 0 0 4px !important;
    color: var(--ck-text) !important;
    font-size: 11px !important;
  }

  body.design-prototype button.hoop-advisor-trigger {
    width: 100% !important;
    margin-top: 7px !important;
    border-color: #a9c5ea !important;
    background: #ffffff !important;
    color: var(--ck-primary) !important;
  }

  body.design-prototype .hoop-variant-panel {
    margin-top: 7px !important;
    padding: 8px !important;
    border-radius: 9px !important;
    background: var(--ck-panel-soft) !important;
  }

  /* Calculation and next-step source panels remain hidden in the prototype store */
  .prototype-source-store { display: none !important; }

  /* ---------- Court workspace ---------- */
  body.design-prototype #canvas-container {
    grid-column: 2;
    min-width: 0 !important;
    width: auto !important;
    height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background-color: var(--ck-canvas) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045) !important;
    z-index: 1 !important;
  }

  body.design-prototype #canvas-container[data-view-mode="3d"] {
    background-image:
      linear-gradient(to top,
        rgba(8, 17, 30, .18) 0%,
        rgba(8, 17, 30, .10) 38%,
        rgba(8, 17, 30, .03) 74%,
        rgba(23, 105, 224, .02) 100%
      ),
      url("./img/background-city.png?v=20260719-2") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: normal !important;
  }

  body.design-prototype #canvas-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 70px rgba(2, 6, 23, .12);
  }

  .prototype-workspace-header {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 31;
    min-height: 56px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 8px 12px 8px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(9, 18, 31, .82);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(2, 6, 23, .20);
    backdrop-filter: blur(14px);
  }

  .prototype-workspace-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-self: start;
  }

  .prototype-workspace-heading strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.2;
  }

  .prototype-eyebrow {
    display: block;
    color: var(--ck-muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .prototype-workspace-header .prototype-eyebrow { color: #9eb1cb; }

  .prototype-workspace-state {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: #d5e0ee;
    font-size: 10px;
    font-weight: 700;
  }

  .prototype-state-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4bd48a;
    box-shadow: 0 0 0 4px rgba(75, 212, 138, .12);
  }

  body.design-prototype .prototype-workspace-header .court-view-mode-switch {
    position: static !important;
    inset: auto !important;
    justify-self: center;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.design-prototype .prototype-workspace-header .court-view-mode-copy {
    display: none !important;
  }

  body.design-prototype .prototype-workspace-header .court-view-mode-buttons {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
  }

  body.design-prototype #canvas-container .prototype-workspace-header .court-view-mode-btn {
    min-width: 66px !important;
    min-height: 34px !important;
    gap: 5px !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(255, 255, 255, .68) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  body.design-prototype #canvas-container .prototype-workspace-header .court-view-mode-btn:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, .10) !important;
  }

  body.design-prototype #canvas-container .prototype-workspace-header .court-view-mode-btn.is-active,
  body.design-prototype #canvas-container .prototype-workspace-header .court-view-mode-btn[aria-pressed="true"] {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #0b1627 !important;
    box-shadow: none !important;
  }
  body.design-prototype .court-view-mode-icon,
  body.design-prototype .court-view-mode-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* ---------- Public live summary ---------- */
  .prototype-summary {
    grid-column: 3;
    min-width: 0;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--ck-border);
    background: #f5f7fa;
    z-index: 10;
  }

  .prototype-summary-scroll {
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 15px 13px 24px;
  }

  .prototype-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    padding: 0 2px;
  }

  .prototype-summary-header h2 {
    margin: 3px 0 0;
    color: var(--ck-text);
    font-size: 15px;
    font-weight: 760;
    line-height: 1.22;
    letter-spacing: -.02em;
    text-transform: none;
  }

  .prototype-live-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid #cde4d8;
    border-radius: 8px;
    background: #edf8f2;
    color: #187047;
    font-size: 9px;
    font-weight: 800;
  }
  .prototype-live-badge > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2db572;
  }

  .prototype-summary-hero,
  .prototype-summary-card {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-panel);
    box-shadow: var(--ck-shadow-sm);
  }

  .prototype-summary-hero {
    padding: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f3f7fd 100%);
  }

  .prototype-summary-project-label {
    margin-bottom: 3px;
    color: var(--ck-muted);
    font-size: 9px;
    font-weight: 700;
  }

  .prototype-summary-hero h3 {
    margin: 0;
    color: var(--ck-text);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .prototype-summary-type {
    display: inline-flex;
    margin-top: 9px;
    padding: 5px 7px;
    border: 1px solid #cfe0f7;
    border-radius: 7px;
    background: var(--ck-primary-soft);
    color: #0f55b8;
    font-size: 9px;
    font-weight: 800;
  }

  .prototype-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
  }

  .prototype-metric {
    min-width: 0;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .82);
  }
  .prototype-metric span {
    display: block;
    margin-bottom: 2px;
    color: var(--ck-muted);
    font-size: 8.5px;
    font-weight: 650;
  }
  .prototype-metric strong {
    display: block;
    overflow: visible;
    white-space: normal;
    color: var(--ck-primary);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
  }

  .prototype-summary-nav {
    display: grid;
    gap: 6px;
    margin: 10px 0;
  }

  .prototype-summary-nav button {
    width: 100%;
    min-width: 0;
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(70px, auto) 12px;
    align-items: center;
    gap: 7px;
    padding: 7px 9px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: var(--ck-text) !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  .prototype-summary-nav button::after {
    content: "›";
    color: #94a3b8;
    font-size: 15px;
    font-weight: 700;
  }
  .prototype-summary-nav button:hover {
    border-color: #abc3e3 !important;
    background: var(--ck-panel-hover) !important;
  }
  .prototype-summary-nav button span {
    min-width: 0;
    color: var(--ck-text-soft);
    font-size: 10px;
    font-weight: 700;
  }
  .prototype-summary-nav button strong {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ck-muted);
    font-size: 9px;
    font-weight: 700;
    text-align: right;
  }

  .prototype-summary-card {
    margin-top: 10px;
    padding: 13px;
  }

  .prototype-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .prototype-card-heading h3,
  .prototype-service-card h3 {
    margin: 3px 0 0;
    color: var(--ck-text);
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.25;
  }

  .prototype-price-card .prototype-price-heading {
    display: block;
  }
  .prototype-price-card .prototype-price-heading > div {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
  }
  .prototype-price-card .prototype-price-heading .prototype-eyebrow {
    align-self: center;
  }
  .prototype-price-card .prototype-price-heading h3 {
    margin: 0;
    text-align: right;
  }

  body.design-prototype .prototype-text-action {
    min-height: 24px !important;
    padding: 3px 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ck-primary) !important;
    font-size: 9px !important;
  }

  .prototype-price-total {
    margin-top: 13px;
    color: var(--ck-primary);
    font-size: clamp(27px, 1.85vw, 33px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .prototype-price-note {
    margin-top: 5px;
    color: var(--ck-muted);
    font-size: 9.5px;
    line-height: 1.35;
    text-align: right;
  }

  .prototype-calculation-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-top: 3px;
  }
  body.design-prototype .prototype-calculation-links button {
    width: auto;
    min-height: 0 !important;
    padding: 1px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6f8fbe !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none;
  }
  body.design-prototype .prototype-calculation-links button:hover:not(:disabled) {
    background: transparent !important;
    color: var(--ck-primary) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transform: none;
  }

  .prototype-price-lines {
    display: grid;
    gap: 7px;
    margin: 11px 0 12px;
    padding: 11px 0;
    border-top: 1px solid #e5eaf1;
    border-bottom: 1px solid #e5eaf1;
  }
  .prototype-price-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(78px, max-content);
    align-items: baseline;
    gap: 12px;
    color: var(--ck-text-soft);
    font-size: 11.5px;
    line-height: 1.4;
  }
  .prototype-price-line span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prototype-price-line strong {
    min-width: 72px;
    color: var(--ck-primary);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.4;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .prototype-unit-prices {
    margin: 0 0 13px;
    padding: 11px 0 11px 11px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #f7f9fc;
  }
  .prototype-unit-prices-heading {
    display: grid;
    gap: 3px;
    margin-bottom: 9px;
  }
  .prototype-unit-prices-heading strong {
    color: var(--ck-text);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
  }
  .prototype-unit-price-lines {
    display: grid;
    gap: 6px;
  }
  .prototype-unit-price-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(78px, max-content);
    align-items: baseline;
    gap: 12px;
    color: #536781;
    font-size: 10.5px;
    line-height: 1.35;
  }
  .prototype-unit-price-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prototype-unit-price-line strong {
    min-width: 72px;
    color: var(--ck-text);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  body.design-prototype button.prototype-sponsor-highlight {
    position: relative;
    isolation: isolate;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 122px !important;
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 15px !important;
    overflow: hidden;
    margin: 2px 0 0 !important;
    padding: 14px 16px !important;
    border: 2px solid #e3262e !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffafa 56%, #fff1f2 100%) !important;
    color: #172238 !important;
    box-shadow: 0 10px 24px rgba(183, 28, 36, .13) !important;
    text-align: left !important;
    white-space: normal !important;
  }
  body.design-prototype button.prototype-sponsor-highlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 170px;
    height: 170px;
    left: -86px;
    top: -97px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 38, 46, .10) 0%, rgba(227, 38, 46, 0) 70%);
    pointer-events: none;
  }
  body.design-prototype button.prototype-sponsor-highlight::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 120px;
    height: 120px;
    right: -70px;
    bottom: -78px;
    border-radius: 50%;
    background: rgba(227, 38, 46, .06);
    pointer-events: none;
  }
  body.design-prototype button.prototype-sponsor-highlight:hover:not(:disabled) {
    border-color: #bf111b !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff6f6 54%, #ffe9eb 100%) !important;
    color: #172238 !important;
    box-shadow: 0 14px 30px rgba(183, 28, 36, .20) !important;
    transform: translateY(-2px) !important;
  }
  body.design-prototype button.prototype-sponsor-highlight:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(227, 38, 46, .18), 0 14px 30px rgba(183, 28, 36, .18) !important;
  }
  body.design-prototype .prototype-sponsor-badge {
    width: 74px !important;
    height: 74px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 74px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #ff3943 0%, #ee1f2b 60%, #cf101b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 20px rgba(211, 18, 29, .28), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
  }
  body.design-prototype .prototype-sponsor-badge strong {
    color: #ffffff !important;
    font-size: 27px !important;
    font-weight: 900 !important;
    line-height: .86 !important;
    letter-spacing: -.055em !important;
  }
  body.design-prototype .prototype-sponsor-badge small {
    margin-top: 7px !important;
    color: #ffffff !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;
  }
  body.design-prototype .prototype-sponsor-copy {
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  body.design-prototype .prototype-sponsor-copy > strong {
    color: #8f171d !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    letter-spacing: -.018em !important;
  }
  body.design-prototype .prototype-sponsor-copy > span:not(.prototype-sponsor-cta) {
    color: #33445f !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
  }
  body.design-prototype .prototype-sponsor-copy .prototype-sponsor-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 3px !important;
    color: #c71922 !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }
  body.design-prototype button.prototype-sponsor-highlight:hover:not(:disabled) .prototype-sponsor-cta {
    color: #9f1018 !important;
  }

  body.design-prototype .prototype-primary-action,
  body.design-prototype .prototype-secondary-action {
    width: 100%;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
  }
  body.design-prototype .prototype-primary-action {
    border-color: var(--ck-primary) !important;
    background: var(--ck-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(23, 105, 224, .18) !important;
  }
  body.design-prototype .prototype-primary-action:hover:not(:disabled) {
    border-color: var(--ck-primary-hover) !important;
    background: var(--ck-primary-hover) !important;
    color: #ffffff !important;
  }
  body.design-prototype .prototype-secondary-action {
    margin-top: 7px;
    border-color: var(--ck-border-strong) !important;
    background: #ffffff !important;
    color: var(--ck-text-soft) !important;
  }

  .prototype-next-heading {
    padding-bottom: 9px;
    border-bottom: 1px solid #e5eaf1;
  }
  .prototype-next-steps {
    display: grid;
    gap: 9px;
    margin-top: 10px;
  }
  .prototype-next-step {
    padding: 10px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #f8fafc;
  }
  .prototype-next-step-heading {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }
  .prototype-next-step-heading strong {
    padding-top: 3px;
    color: var(--ck-text);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.35;
  }
  .prototype-next-step-number {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e4f6ed;
    color: #087a4b;
    font-size: 14px;
    font-weight: 850;
  }
  .prototype-next-step p {
    margin: 7px 0 9px;
    color: var(--ck-text-soft);
    font-size: 9.5px;
    line-height: 1.48;
  }
  .prototype-next-step .prototype-secondary-action {
    margin-top: 0;
  }

  .prototype-customer-data {
    display: grid;
    gap: 8px;
    margin: 9px 0 10px;
    padding: 10px;
    border: 1px solid #d6e0ed;
    border-radius: 10px;
    background: #ffffff;
  }
  .prototype-customer-data-title {
    color: var(--ck-text);
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1.2;
  }
  .prototype-customer-field {
    display: grid;
    gap: 4px;
    color: #37587f;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.25;
  }
  .prototype-customer-field small {
    color: #7890ad;
    font-size: inherit;
    font-weight: 600;
  }
  body.design-prototype .prototype-customer-field input {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid #c7d4e5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--ck-text) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  body.design-prototype .prototype-customer-field input::placeholder {
    color: #9aaabd !important;
    opacity: 1;
  }
  body.design-prototype .prototype-customer-field input:focus {
    border-color: var(--ck-primary) !important;
    outline: 2px solid rgba(23, 105, 224, .16) !important;
    outline-offset: 0 !important;
  }
  body.design-prototype .prototype-customer-field input[aria-invalid="true"] {
    border-color: #d92d3a !important;
    background: #fffafb !important;
  }
  .prototype-quote-requirement {
    min-height: 14px;
    color: #6c819d;
    font-size: 8.7px;
    font-weight: 650;
    line-height: 1.4;
  }
  .prototype-quote-requirement.is-ready {
    color: #087a4b;
  }
  .prototype-quote-requirement.is-error {
    color: #b4232f;
  }
  .prototype-next-step .prototype-next-legal-note {
    margin: 8px 0 0;
    color: #647892;
    font-size: 8.8px;
    line-height: 1.5;
  }
  .prototype-action-status {
    min-height: 0;
    margin-top: 7px;
    color: #527096;
    font-size: 9px;
    line-height: 1.35;
  }
  .prototype-next-followup {
    display: grid;
    gap: 4px;
    margin-top: 9px;
    padding: 10px;
    border-radius: 10px;
    background: #edf3fa;
  }
  .prototype-next-followup strong {
    color: var(--ck-text);
    font-size: 10px;
    font-weight: 800;
  }
  .prototype-next-followup span {
    color: #49698f;
    font-size: 9.3px;
    line-height: 1.5;
  }

  .prototype-ballshop-card,
  .prototype-courtside-card {
    text-align: center;
  }
  .prototype-ballshop-card h3 {
    margin: 0 0 8px;
    color: var(--ck-text);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .prototype-ballshop-logo {
    display: block;
    width: min(100%, 230px);
    height: 54px;
    margin: 0 auto 8px;
    object-fit: contain;
  }
  .prototype-ballshop-card p {
    margin: 0 0 10px;
    color: var(--ck-text-soft);
    font-size: 10.5px;
    line-height: 1.45;
  }
  .prototype-ballshop-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #b9cce4;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ck-primary);
    font-size: 10.5px;
    font-weight: 800;
    text-decoration: none;
  }
  .prototype-ballshop-link:hover {
    border-color: var(--ck-primary);
    background: var(--ck-primary-soft);
  }
  .prototype-courtside-logo-link {
    display: block;
  }
  .prototype-courtside-logo {
    display: block;
    width: min(100%, 215px);
    height: 62px;
    margin: 0 auto 8px;
    object-fit: contain;
  }
  .prototype-courtside-card p {
    margin: 0;
    color: #68788d;
    font-size: 10px;
    line-height: 1.45;
  }

  .prototype-summary-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 3px 2px;
    color: #9aa6b5;
    font-size: 9px;
  }
  .prototype-summary-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .prototype-summary-footer a {
    color: #68788d;
    text-decoration: none;
    font-weight: 650;
  }
  body.design-prototype .prototype-summary-footer button#prototypeContactBtn {
    width: auto;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #68788d !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    line-height: inherit !important;
  }
  body.design-prototype .prototype-summary-footer button#prototypeContactBtn:hover:not(:disabled),
  .prototype-summary-footer a:hover {
    background: transparent !important;
    color: var(--ck-primary) !important;
    transform: none;
  }
  .prototype-summary-footer .prototype-internal-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid #d2dbe7;
    border-radius: 7px;
    background: #ffffff;
    color: #5f7189;
    font-size: 8.5px;
    font-weight: 700;
  }
  .prototype-summary-footer .prototype-internal-login:hover {
    border-color: #aac0dc;
    background: var(--ck-panel-hover);
  }

  /* ---------- Internal right rail ---------- */
  body.design-prototype #internal-ui,
  body.design-prototype.ck-internal-mode #internal-ui {
    grid-column: 3;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 13px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid var(--ck-border) !important;
    background: #f5f7fa !important;
    box-shadow: none !important;
    z-index: 10 !important;
  }

  body.design-prototype.ck-internal-mode {
    display: grid !important;
    grid-template-columns: var(--ck-left) minmax(520px, 1fr) var(--ck-right) !important;
  }
  body.design-prototype.ck-internal-mode #canvas-container {
    grid-column: 2;
    width: auto !important;
    margin: 0 !important;
  }
  body.design-prototype.ck-internal-mode #public-summary { display: none !important; }

  body.design-prototype #internal-ui .internal-right-header,
  body.design-prototype #internal-ui .court-auth-panel,
  body.design-prototype #internal-ui .project-storage-tools,
  body.design-prototype #internal-ui .user-admin-tools,
  body.design-prototype #internal-ui .internal-accordion-section {
    box-sizing: border-box;
    border: 1px solid var(--ck-border) !important;
    border-radius: var(--ck-radius-lg) !important;
    background: #ffffff !important;
    box-shadow: var(--ck-shadow-sm) !important;
  }

  body.design-prototype #internal-ui .internal-right-header {
    margin-bottom: 10px !important;
    padding: 13px !important;
  }
  body.design-prototype #internal-ui .internal-right-kicker {
    color: var(--ck-muted) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
  }
  body.design-prototype #internal-ui .internal-right-title {
    margin-top: 3px !important;
    color: var(--ck-text) !important;
    font-size: 15px !important;
    font-weight: 760 !important;
  }
  body.design-prototype #internal-ui .internal-right-subtitle {
    color: var(--ck-muted) !important;
    font-size: 9.5px !important;
    line-height: 1.4 !important;
  }

  body.design-prototype #internal-ui .prototype-public-return {
    width: 100% !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 8px 11px !important;
    border: 1px solid #bfd0e5 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: var(--ck-primary) !important;
    box-shadow: var(--ck-shadow-sm) !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease !important;
  }
  body.design-prototype #internal-ui .prototype-public-return svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.design-prototype #internal-ui .prototype-public-return:hover {
    border-color: #8eadd1 !important;
    background: #f7faff !important;
    box-shadow: 0 4px 12px rgba(31, 72, 125, .10) !important;
    transform: translateY(-1px);
  }
  body.design-prototype #internal-ui .prototype-public-return:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18) !important;
    outline-offset: 2px !important;
  }

  body.design-prototype.prototype-public-mode {
    display: grid !important;
    grid-template-columns: var(--ck-left) minmax(520px, 1fr) var(--ck-right) !important;
  }
  body.design-prototype.prototype-public-mode #public-summary {
    display: block !important;
  }
  body.design-prototype.prototype-public-mode #internal-ui {
    display: none !important;
  }

  body.design-prototype #internal-ui .court-auth-panel,
  body.design-prototype #internal-ui .project-storage-tools,
  body.design-prototype #internal-ui .user-admin-tools {
    padding: 11px !important;
  }

  body.design-prototype #internal-ui .internal-accordion-section {
    margin-bottom: 7px !important;
    overflow: hidden !important;
  }
  body.design-prototype #internal-ui .internal-accordion-summary {
    min-height: 39px;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: var(--ck-text) !important;
    font-size: 10.5px !important;
    font-weight: 740 !important;
  }
  body.design-prototype #internal-ui .internal-accordion-summary::before {
    width: 14px !important;
    height: 14px !important;
    color: var(--ck-muted) !important;
  }
  body.design-prototype #internal-ui .internal-accordion-section[open] > .internal-accordion-summary {
    border-bottom: 1px solid var(--ck-border) !important;
    background: var(--ck-panel-soft) !important;
    color: var(--ck-primary) !important;
  }
  body.design-prototype #internal-ui .internal-accordion-title {
    font-size: 10.5px !important;
    font-weight: 740 !important;
  }
  body.design-prototype #internal-ui .internal-accordion-badge {
    min-width: 0 !important;
    padding: 3px 5px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: var(--ck-muted) !important;
    font-size: 8.5px !important;
  }
  body.design-prototype #internal-ui .internal-accordion-body {
    padding: 10px !important;
    background: #ffffff !important;
  }

  body.design-prototype #internal-ui input:not([type="checkbox"]):not([type="radio"]),
  body.design-prototype #internal-ui select,
  body.design-prototype #internal-ui textarea {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 10.5px !important;
  }
  body.design-prototype #internal-ui button:not(.color-swatch) {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 9.5px !important;
  }
  body.design-prototype #internal-ui button.prototype-public-return {
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: 10px !important;
  }
  body.design-prototype #internal-ui .project-meta-panel,
  body.design-prototype #internal-ui .project-document-panel,
  body.design-prototype #internal-ui .project-production-panel,
  body.design-prototype #internal-ui .project-logistics-panel,
  body.design-prototype #internal-ui .project-payment-panel,
  body.design-prototype #internal-ui .project-margin-panel,
  body.design-prototype #internal-ui .project-closure-panel,
  body.design-prototype #internal-ui .project-aftercare-panel,
  body.design-prototype #internal-ui .project-list-panel {
    border-color: var(--ck-border) !important;
    border-radius: 10px !important;
    background: var(--ck-panel-soft) !important;
    box-shadow: none !important;
  }

  body.design-prototype #internal-ui .project-list-summary,
  body.design-prototype #internal-ui .project-auto-document-summary,
  body.design-prototype #internal-ui .project-production-summary,
  body.design-prototype #internal-ui .project-logistics-summary,
  body.design-prototype #internal-ui .project-payment-summary,
  body.design-prototype #internal-ui .project-margin-summary,
  body.design-prototype #internal-ui .project-closure-summary,
  body.design-prototype #internal-ui .project-aftercare-summary,
  body.design-prototype #internal-ui .project-aftercare-delivery-summary {
    color: var(--ck-text-soft) !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  /* Dialogs and overlays */
  body.design-prototype .sponsor-modal-content,
  body.design-prototype .hoop-advisor-dialog,
  body.design-prototype .legal-modal-dialog,
  body.design-prototype .photo-modal-panel,
  body.design-prototype .large-photo-panel {
    border: 1px solid var(--ck-border) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22) !important;
  }

  body.design-prototype .sponsor-modal-content h2,
  body.design-prototype .hoop-advisor-dialog h2 {
    color: var(--ck-text) !important;
    font-size: 19px !important;
    font-weight: 760 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
  }

  body.design-prototype button.sponsor-modal-close,
  body.design-prototype button.hoop-advisor-close,
  body.design-prototype button.photo-modal-close,
  body.design-prototype button.large-photo-close,
  body.design-prototype button.legal-modal-close {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: var(--ck-panel-soft) !important;
    color: var(--ck-text-soft) !important;
  }

  body.design-prototype .hoop-advisor-profile {
    border-radius: 11px !important;
    background: #ffffff !important;
  }
  body.design-prototype .hoop-advisor-profile.is-active {
    border-color: var(--ck-primary) !important;
    background: var(--ck-primary-soft) !important;
  }

  .prototype-focus-pulse { animation: prototypeFocusPulse 850ms ease; }
  @keyframes prototypeFocusPulse {
    0%, 100% { box-shadow: var(--ck-shadow-sm); }
    35% { box-shadow: 0 0 0 3px rgba(23, 105, 224, .20), var(--ck-shadow-md); }
  }

  @media (max-width: 1450px) {
    :root {
      --ck-left: 278px;
      --ck-right: 292px;
    }
    body.design-prototype { grid-template-columns: var(--ck-left) minmax(480px, 1fr) var(--ck-right) !important; }
    body.design-prototype.ck-internal-mode { grid-template-columns: var(--ck-left) minmax(480px, 1fr) var(--ck-right) !important; }
  }

  @media (max-width: 1180px) {
    body.design-prototype {
      min-width: 0;
      grid-template-columns: 272px minmax(0, 1fr) !important;
    }
    body.design-prototype #public-summary,
    body.design-prototype #internal-ui,
    body.design-prototype.ck-internal-mode #internal-ui {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: auto !important;
      width: min(316px, 88vw) !important;
      z-index: 1000 !important;
      box-shadow: -18px 0 46px rgba(15, 23, 42, .20) !important;
    }
    body.design-prototype #canvas-container,
    body.design-prototype.ck-internal-mode #canvas-container {
      grid-column: 2;
      margin-right: min(316px, 88vw) !important;
    }
    body.design-prototype.ck-internal-mode {
      grid-template-columns: 272px minmax(0, 1fr) !important;
    }
  }
}

@media screen {
  /* Product-card structure corrections for dynamically generated v422 content */
  body.design-prototype .hoop-card > img:first-child,
  body.design-prototype .floor-card > img:first-child,
  body.design-prototype #accessoriesPanel .accessory-product-card > img:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 6 !important;
    align-self: center !important;
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    background: #ffffff !important;
  }

  body.design-prototype .hoop-card > .hoop-card-placeholder,
  body.design-prototype #accessoriesPanel .accessory-product-card > .hoop-card-placeholder {
    grid-column: 1 !important;
    grid-row: 1 / span 6 !important;
    align-self: center !important;
    width: 84px !important;
    height: 84px !important;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 10px !important;
    background: var(--ck-panel-soft) !important;
    color: var(--ck-muted) !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    text-align: center;
  }

  body.design-prototype .hoop-card > .hoop-card-desc,
  body.design-prototype .hoop-card > .hoop-variant-control,
  body.design-prototype .hoop-card > .fiba-logo,
  body.design-prototype .hoop-card > .hoop-card-price,
  body.design-prototype .hoop-card > .price-note,
  body.design-prototype #accessoriesPanel .accessory-product-card > .hoop-card-desc,
  body.design-prototype #accessoriesPanel .accessory-product-card > .hoop-card-price,
  body.design-prototype #accessoriesPanel .accessory-product-card > .accessory-qty-line,
  body.design-prototype #accessoriesPanel .accessory-product-card > .price-note {
    grid-column: 2 !important;
    min-width: 0;
  }

  body.design-prototype .hoop-card > .hoop-card-desc,
  body.design-prototype #accessoriesPanel .accessory-product-card > .hoop-card-desc {
    color: var(--ck-muted) !important;
    font-size: 10.25px !important;
    line-height: 1.35 !important;
  }

  body.design-prototype .hoop-card > .hoop-card-price,
  body.design-prototype #accessoriesPanel .accessory-product-card > .hoop-card-price {
    margin-top: 2px !important;
  }

  body.design-prototype .hoop-card > .price-note,
  body.design-prototype #accessoriesPanel .accessory-product-card > .price-note {
    margin: 0 !important;
    color: var(--ck-muted) !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body.design-prototype .hoop-card > .fiba-logo,
  body.design-prototype .floor-card .hoop-card-article > img {
    width: auto !important;
    height: 32px !important;
    max-width: 96px !important;
    max-height: 32px !important;
    margin: 5px 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
  }

  body.design-prototype .floor-card .hoop-card-article {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body.design-prototype .floor-card .hoop-card-article > span {
    display: block !important;
    margin-top: 4px !important;
    color: var(--ck-text) !important;
    font-size: 16.5px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  body.design-prototype .floor-card .hoop-card-article > .price-note {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body.design-prototype .hoop-variant-control {
    margin-top: 4px !important;
  }

  body.design-prototype .hoop-variant-control label {
    display: block;
    margin-bottom: 3px;
    font-size: 9.5px !important;
  }

  body.design-prototype .hoop-variant-control select {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  body.design-prototype #accessoriesPanel .accessory-product {
    min-width: 0;
  }

  body.design-prototype #accessoriesPanel .accessory-qty-line {
    display: grid !important;
    grid-template-columns: auto 62px;
    align-items: center;
    gap: 6px;
    margin-top: 4px !important;
  }

  body.design-prototype #accessoriesPanel .accessory-qty-line select {
    min-height: 34px !important;
    padding: 5px 7px !important;
  }
}


@media screen {
  /* Relaunch review: full product names and one consistent sidebar heading system */
  body.design-prototype {
    --prototype-price-column: 72px;
    --prototype-price-gap: 8px;
  }

  body.design-prototype .prototype-price-line,
  body.design-prototype .prototype-unit-price-line {
    grid-template-columns: minmax(0, 1fr) var(--prototype-price-column) !important;
    gap: var(--prototype-price-gap) !important;
  }

  body.design-prototype .prototype-price-line span:first-child {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.28 !important;
  }

  body.design-prototype .prototype-price-line strong,
  body.design-prototype .prototype-unit-price-line strong {
    width: var(--prototype-price-column) !important;
    min-width: var(--prototype-price-column) !important;
    justify-self: end;
    text-align: right !important;
  }

  /* SAM 3x3: reserve a dedicated row for the FIBA mark so the product title stays visible. */
  body.design-prototype .hoop-card[data-value="sam3x3"] {
    grid-template-rows: auto auto auto auto auto !important;
  }
  body.design-prototype .hoop-card[data-value="sam3x3"] > img:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 5 !important;
  }
  body.design-prototype .hoop-card[data-value="sam3x3"] > .hoop-card-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    visibility: visible !important;
  }
  body.design-prototype .hoop-card[data-value="sam3x3"] > .hoop-card-desc {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  body.design-prototype .hoop-card[data-value="sam3x3"] > .fiba-logo {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    width: auto !important;
    height: 28px !important;
    max-width: 88px !important;
    max-height: 28px !important;
    margin: 3px 0 !important;
  }
  body.design-prototype .hoop-card[data-value="sam3x3"] > .hoop-card-price {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
  body.design-prototype .hoop-card[data-value="sam3x3"] > .price-note {
    grid-column: 2 !important;
    grid-row: 5 !important;
  }

  /* LOGOS is the reference: all major sidebar section headings use the same type scale. */
  body.design-prototype .panel > h2,
  body.design-prototype .panel .centered-section-title,
  body.design-prototype .panel .hoop-group-title,
  body.design-prototype .prototype-summary-header .prototype-eyebrow,
  body.design-prototype .prototype-card-heading .prototype-eyebrow,
  body.design-prototype .prototype-unit-prices-heading .prototype-eyebrow {
    color: var(--ck-text) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .085em !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  body.design-prototype .prototype-summary-header .prototype-eyebrow,
  body.design-prototype .prototype-card-heading .prototype-eyebrow,
  body.design-prototype .prototype-unit-prices-heading .prototype-eyebrow {
    display: block;
    width: fit-content;
    margin-bottom: 9px;
  }

  body.design-prototype .prototype-summary-header .prototype-eyebrow::after,
  body.design-prototype .prototype-card-heading .prototype-eyebrow::after,
  body.design-prototype .prototype-unit-prices-heading .prototype-eyebrow::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--ck-primary);
  }
}

@media screen {
  /* Keep the enlarged live-summary heading on one line while retaining the status badge. */
  body.design-prototype .prototype-summary-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "section section"
      "title badge";
    align-items: start;
    gap: 3px 10px;
  }
  body.design-prototype .prototype-summary-header > div {
    display: contents;
  }
  body.design-prototype .prototype-summary-header .prototype-eyebrow {
    grid-area: section;
    white-space: nowrap;
  }
  body.design-prototype .prototype-summary-header h2 {
    grid-area: title;
  }
  body.design-prototype .prototype-summary-header .prototype-live-badge {
    grid-area: badge;
    align-self: start;
    margin-top: 3px;
  }
}

@media screen {
  /* Consolidated correction block: public start, brand header, workspace switch and internal usability. */

  /* The former sticky rail label had no user-facing function. */
  body.design-prototype #ui::before {
    content: none !important;
    display: none !important;
  }

  /* Brand card: complete, uncropped logo with a little more breathing room. */
  body.design-prototype #header-panel {
    min-height: 224px !important;
    padding: 14px 13px !important;
  }
  body.design-prototype #header-panel .brand {
    min-height: 196px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 96px auto !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  body.design-prototype #header-panel .brand-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 96px !important;
    max-height: 96px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    clip-path: none !important;
  }
  body.design-prototype #courtLangSwitchWrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }
  body.design-prototype #courtLangButtons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Workspace mode selection: clearly visible, centered and entirely white on dark. */
  body.design-prototype .prototype-workspace-header .court-view-mode-switch {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    min-width: 238px !important;
  }
  body.design-prototype .prototype-workspace-header .court-view-mode-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }
  body.design-prototype .prototype-workspace-header .court-view-mode-label {
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }
  body.design-prototype .prototype-workspace-header .court-view-mode-hint {
    color: rgba(255,255,255,.74) !important;
    font-size: 8.5px !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
  }
  body.design-prototype #canvas-container .prototype-workspace-header .court-view-mode-btn {
    min-width: 72px !important;
    min-height: 38px !important;
    border-width: 1.5px !important;
    font-size: 11px !important;
  }

  /* Internal accordion titles: the original title belongs in the second grid column. */
  body.design-prototype #internal-ui .internal-accordion-summary {
    position: relative !important;
    z-index: 2 !important;
    grid-template-columns: 16px minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    min-height: 42px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  body.design-prototype #internal-ui .internal-accordion-summary::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.design-prototype #internal-ui .internal-accordion-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    padding-left: 0 !important;
    color: var(--ck-text) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  body.design-prototype #internal-ui .internal-accordion-badge {
    grid-column: 3 !important;
    grid-row: 1 !important;
    max-width: 118px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
  }
  body.design-prototype #internal-ui .internal-accordion-body {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  /* Internal project controls must remain genuine, clearly actionable buttons. */
  body.design-prototype #internal-ui button,
  body.design-prototype #internal-ui summary,
  body.design-prototype #internal-ui input,
  body.design-prototype #internal-ui select,
  body.design-prototype #internal-ui textarea {
    pointer-events: auto !important;
  }
  body.design-prototype #internal-ui .project-list-item,
  body.design-prototype #internal-ui .project-list-actions {
    position: relative !important;
    z-index: 2 !important;
  }
  body.design-prototype #internal-ui .project-list-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.design-prototype #internal-ui .project-list-action-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 3 !important;
  }
  body.design-prototype #internal-ui .project-list-action-btn:not(.project-list-action-btn--rename):not(.project-list-action-btn--archive):not(.project-list-action-btn--delete):not(.project-list-action-btn--restore):not(:disabled) {
    border-color: #1769e0 !important;
    background: #1769e0 !important;
    color: #ffffff !important;
  }
  body.design-prototype #internal-ui .project-list-action-btn--rename:not(:disabled) {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
  }
  body.design-prototype #internal-ui .project-list-action-btn--archive:not(:disabled) {
    border-color: #d97706 !important;
    background: #f59e0b !important;
    color: #ffffff !important;
  }
  body.design-prototype #internal-ui .project-list-action-btn--restore:not(:disabled) {
    border-color: #059669 !important;
    background: #10b981 !important;
    color: #ffffff !important;
  }
  body.design-prototype #internal-ui .project-list-action-btn--delete:not(:disabled),
  body.design-prototype #internal-ui .project-list-action-btn--danger:not(:disabled) {
    border-color: #dc2626 !important;
    background: #dc2626 !important;
    color: #ffffff !important;
  }
  body.design-prototype #internal-ui .project-list-action-btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
  }
}


@media screen {
  /* Workspace flow correction: the header occupies its own row and no longer overlays the court canvas. */
  body.design-prototype .prototype-workspace-shell {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: auto;
    height: 100vh;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    position: relative;
    background: var(--ck-canvas);
    z-index: 1;
  }

  body.design-prototype .prototype-workspace-shell > .prototype-workspace-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-row: 1;
    width: auto;
    min-width: 0;
    margin: 12px 14px;
    z-index: 31;
  }

  body.design-prototype .prototype-workspace-shell > #canvas-container,
  body.design-prototype.ck-internal-mode .prototype-workspace-shell > #canvas-container {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.design-prototype .prototype-workspace-shell > #canvas-container canvas {
    display: block !important;
  }

  @media (max-width: 1180px) {
    body.design-prototype .prototype-workspace-shell,
    body.design-prototype.ck-internal-mode .prototype-workspace-shell {
      grid-column: 2;
      margin-right: min(316px, 88vw) !important;
    }

    body.design-prototype .prototype-workspace-shell > #canvas-container,
    body.design-prototype.ck-internal-mode .prototype-workspace-shell > #canvas-container {
      margin-right: 0 !important;
    }
  }
}

@media screen {
  /* Selection-state harmonisation: floor tiles use exactly the same active card language as hoop systems. */
  body.design-prototype .floor-card.active,
  body.design-prototype .hoop-card.active {
    border: 1px solid var(--ck-primary) !important;
    background: var(--ck-primary-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(23, 105, 224, .08) !important;
  }

  /* Remove the legacy cyan fill inside active floor-tile cards. */
  body.design-prototype .floor-card.active .hoop-card-article,
  body.design-prototype .floor-card.active .hoop-card-article > span,
  body.design-prototype .floor-card.active .hoop-card-article > .price-note,
  body.design-prototype .floor-card.active .hoop-card-article img {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Language selection: the active language must be immediately recognisable. */
  body.design-prototype .court-lang-btn {
    position: relative !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease !important;
  }

  body.design-prototype .court-lang-btn:hover:not(.is-active):not([aria-pressed="true"]) {
    border-color: var(--ck-border-strong) !important;
    background: #ffffff !important;
    color: var(--ck-text) !important;
  }

  body.design-prototype .court-lang-btn.is-active,
  body.design-prototype .court-lang-btn[aria-pressed="true"] {
    border: 1px solid var(--ck-primary) !important;
    background: var(--ck-primary-soft) !important;
    color: var(--ck-primary) !important;
    box-shadow: 0 0 0 2px rgba(23, 105, 224, .10), 0 2px 7px rgba(15, 23, 42, .08) !important;
  }

  body.design-prototype .court-lang-btn.is-active::after,
  body.design-prototype .court-lang-btn[aria-pressed="true"]::after {
    content: "✓" !important;
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: var(--ck-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .22) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }
}

@media screen {
  /* Court selection uses the same active-state language as the selected product cards. */
  body.design-prototype #courtTypeButtons .court-type-option.active {
    border: 1px solid var(--ck-primary) !important;
    background: var(--ck-primary-soft) !important;
    color: var(--ck-text) !important;
    box-shadow: inset 0 0 0 1px rgba(23, 105, 224, .08) !important;
  }

  body.design-prototype #courtTypeButtons .court-type-option.active strong,
  body.design-prototype #courtTypeButtons .court-type-option.active .court-type-meta {
    color: inherit !important;
  }

  body.design-prototype #courtTypeButtons .court-type-option.active::before {
    content: "✓";
    top: 9px;
    right: 9px;
    width: 21px;
    height: 21px;
    background: var(--ck-primary);
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(23, 105, 224, .22);
  }
}


/* V458 — Tablet-Sicherheitsnetz für explizit erzwungene Desktopansicht.
   Der frühere margin-right reservierte innerhalb der mittleren Grid-Spalte
   einen grauen Leerbereich. Die feste rechte Sidebar darf stattdessen überlagern. */
@media screen and (max-width: 1180px) {
  body.design-prototype:not(.ck-mobile-page) #canvas-container,
  body.design-prototype:not(.ck-mobile-page).ck-internal-mode #canvas-container {
    margin-right: 0 !important;
  }
}

/* V459 — iPad/Tablet: tatsächliche Ursache des grauen Leerbereichs.
   Im <=1180px-Breakpoint wurde nicht nur der Canvas, sondern der gesamte
   Workspace mit margin-right verkleinert. Auf Tablets muss die mittlere
   Arbeitsfläche die komplette zweite Grid-Spalte ausfüllen; die rechte
   Seitenleiste liegt bei Bedarf darüber und reserviert keinen Leerraum. */
@media screen and (max-width: 1180px) {
  body.design-prototype:not(.ck-mobile-page) .prototype-workspace-shell,
  body.design-prototype:not(.ck-mobile-page).ck-internal-mode .prototype-workspace-shell {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
  }

  body.design-prototype:not(.ck-mobile-page) .prototype-workspace-shell > #canvas-container,
  body.design-prototype:not(.ck-mobile-page).ck-internal-mode .prototype-workspace-shell > #canvas-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}