:root {
      color-scheme: dark;
      --bg: #0b0f16;
      --panel: #161b24;
      --panel-2: #202837;
      --panel-3: #101720;
      --border: #2b3445;
      --text: #ecf1f8;
      --muted: #98a4b7;
      --accent: #94cdfb;
      --accent-2: #d7b7ff;
      --success: #9be7c3;
      --warning: #ffd58a;
      --danger: #ff8a8a;
      --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
      --radius-lg: 18px;
      --radius-md: 14px;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(148, 205, 251, 0.18), transparent 32rem),
        radial-gradient(circle at top right, rgba(215, 183, 255, 0.16), transparent 34rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42rem),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 24px;
      border-bottom: 1px solid var(--border);
      background: rgba(11, 15, 22, 0.82);
      backdrop-filter: blur(16px);
      position: sticky;
      top: 0;
      z-index: 5;
    }
    h1 { margin: 0; font-size: 20px; letter-spacing: 0.01em; }
    header p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
    .header-copy { min-width: 0; }
    .header-actions {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }
    .home-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      padding: 8px 12px;
      border: 1px solid rgba(215, 183, 255, 0.35);
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(215, 183, 255, 0.16), rgba(148, 205, 251, 0.1));
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-decoration: none;
      white-space: nowrap;
      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }
    .home-link::before {
      content: "←";
      color: var(--accent-2);
      font-weight: 900;
    }
    .home-link:hover {
      border-color: rgba(215, 183, 255, 0.62);
      background: linear-gradient(135deg, rgba(215, 183, 255, 0.24), rgba(148, 205, 251, 0.16));
      transform: translateY(-1px);
    }
    .home-link:focus-visible {
      outline: 2px solid var(--accent-2);
      outline-offset: 2px;
    }
    .header-chip {
      flex: 0 0 auto;
      padding: 8px 12px;
      border: 1px solid rgba(148, 205, 251, 0.28);
      border-radius: 999px;
      background: rgba(148, 205, 251, 0.1);
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    main {
      display: grid;
      grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
      gap: 18px;
      padding: 18px;
    }
    aside, section {
      background: rgba(25, 29, 37, 0.88);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .run-list {
      max-height: calc(100vh - 112px);
      overflow: auto;
      padding: 10px;
    }
    .run-button {
      width: 100%;
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      padding: 9px;
      margin: 0 0 10px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.018);
      text-align: left;
      cursor: pointer;
      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }
    .run-button:hover {
      background: rgba(255, 255, 255, 0.045);
      border-color: rgba(148, 205, 251, 0.18);
      transform: translateY(-1px);
    }
    .run-button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .run-button.active {
      background: linear-gradient(135deg, rgba(148, 205, 251, 0.18), rgba(215, 183, 255, 0.12));
      border-color: rgba(148, 205, 251, 0.45);
    }
    .run-button.latest:not(.active) {
      border-color: rgba(155, 231, 195, 0.28);
      background: linear-gradient(135deg, rgba(155, 231, 195, 0.08), rgba(255, 255, 255, 0.018));
    }
    .run-button.pending:not(.active) {
      border-color: rgba(148, 205, 251, 0.28);
      background: linear-gradient(135deg, rgba(148, 205, 251, 0.1), rgba(255, 255, 255, 0.018));
    }
    .run-button.failed:not(.active) {
      border-color: rgba(255, 130, 130, 0.3);
      background: linear-gradient(135deg, rgba(255, 130, 130, 0.09), rgba(255, 255, 255, 0.018));
    }
    .run-thumb {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 86px;
      overflow: hidden;
      border-radius: 11px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(135deg, rgba(148, 205, 251, 0.16), rgba(215, 183, 255, 0.1)),
        var(--panel-3);
      color: var(--muted);
      font-size: 11px;
    }
    .run-thumb img {
      width: 100%;
      height: 100%;
      min-height: 86px;
      object-fit: cover;
      display: block;
    }
    .pending-thumb {
      gap: 8px;
      color: var(--accent);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .run-spinner-mini {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 3px solid rgba(148, 205, 251, 0.18);
      border-top-color: var(--accent);
      animation: spin 0.9s linear infinite;
    }
    .run-spinner-mini.failed {
      animation: none;
      border-color: rgba(255, 130, 130, 0.28);
      border-top-color: var(--danger);
    }
    .run-thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.35);
      pointer-events: none;
    }
    .run-summary {
      display: grid;
      align-content: center;
      gap: 7px;
      min-width: 0;
    }
    .run-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .run-name {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 760;
    }
    .run-meta {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .badge {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 7px;
      border: 1px solid rgba(155, 231, 195, 0.32);
      background: rgba(155, 231, 195, 0.12);
      color: var(--success);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .badge.pending {
      border-color: rgba(148, 205, 251, 0.34);
      background: rgba(148, 205, 251, 0.12);
      color: var(--accent);
    }
    .badge.failed {
      border-color: rgba(255, 130, 130, 0.34);
      background: rgba(255, 130, 130, 0.12);
      color: var(--danger);
    }
    .content { padding: 16px; }
    .title-row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    #run-title { margin: 0; font-size: 24px; }
    #run-subtitle {
      color: var(--muted);
      font-size: 13px;
      margin-top: 5px;
      overflow-wrap: anywhere;
    }
    #run-stats {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.035);
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .metadata-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin: 0 0 14px;
    }
    .metadata-card {
      min-width: 0;
      padding: 10px 11px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.03);
    }
    .metadata-label {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .metadata-value {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
      font-size: 13px;
    }
    .viewer-card {
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.025);
    }
    .viewer-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(12, 15, 20, 0.55);
    }
    .viewer-toolbar strong {
      display: block;
      font-size: 13px;
      letter-spacing: 0.01em;
    }
    .viewer-toolbar small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
    }
    .smallclothes-style-panel {
      display: grid;
      gap: 10px;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(12, 15, 20, 0.46);
    }
    .smallclothes-style-panel[hidden] { display: none; }
    .smallclothes-style-row {
      display: grid;
      grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(88px, 1fr));
      gap: 8px;
      align-items: end;
    }
    .smallclothes-style-panel label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .smallclothes-style-panel select,
    .smallclothes-style-panel input[type="color"] {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #11151c;
      color: var(--text);
    }
    .smallclothes-style-panel select {
      padding: 8px 9px;
    }
    .smallclothes-help {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
    }
    .interactive-options-panel {
      display: grid;
      gap: 10px;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(12, 15, 20, 0.42);
    }
    .interactive-options-panel[hidden] { display: none; }
    .interactive-options-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }
    .interactive-options-header strong {
      display: block;
      font-size: 13px;
    }
    .interactive-options-header small,
    .interactive-options-note {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
    }
    .interactive-options-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px;
    }
    .interactive-option-group {
      display: grid;
      gap: 7px;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.025);
    }
    .interactive-option-group label,
    .interactive-option-group strong {
      display: grid;
      gap: 5px;
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
    }
    .interactive-option-group select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 9px;
      background: #11151c;
      color: var(--text);
    }
    .interactive-option-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 12px;
    }
    .interactive-option-badge {
      display: inline-flex;
      align-items: center;
      width: max-content;
      border: 1px solid rgba(148, 205, 251, 0.28);
      border-radius: 999px;
      padding: 2px 6px;
      color: var(--accent);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .interactive-option-badge.warn {
      border-color: rgba(255, 213, 138, 0.32);
      color: var(--warning);
    }
    .camera-presets {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }
    .viewer-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 9px 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(12, 15, 20, 0.42);
    }
    .viewer-control, .viewer-toggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 6px 9px;
      border: 1px solid rgba(255, 255, 255, 0.075);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.035);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    .viewer-control input[type="range"] {
      width: 100px;
      accent-color: var(--accent);
    }
    .viewer-control select {
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 12px;
    }
    .viewer-action {
      border: 1px solid rgba(148, 205, 251, 0.36);
      border-radius: 999px;
      min-height: 34px;
      padding: 7px 11px;
      background: rgba(148, 205, 251, 0.11);
      color: var(--text);
      font: inherit;
      font-size: 12px;
      font-weight: 760;
      cursor: pointer;
    }
    .viewer-action:hover {
      border-color: rgba(148, 205, 251, 0.62);
      background: rgba(148, 205, 251, 0.18);
    }
    .preset-button {
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 7px 10px;
      background: var(--panel-2);
      color: var(--text);
      font: inherit;
      font-size: 12px;
      cursor: pointer;
      transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
    }
    .preset-button:hover {
      border-color: rgba(148, 205, 251, 0.48);
      background: rgba(148, 205, 251, 0.12);
    }
    .preset-button.active {
      border-color: rgba(148, 205, 251, 0.72);
      background: linear-gradient(135deg, rgba(148, 205, 251, 0.24), rgba(215, 183, 255, 0.16));
      color: #f8fbff;
    }
    model-viewer {
      width: 100%;
      height: min(72vh, 760px);
      min-height: 480px;
    }
    model-viewer[data-viewer-bg="studio"] {
      background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.09), transparent 16rem),
        linear-gradient(180deg, #26303d, #111820 70%);
    }
    model-viewer[data-viewer-bg="warm"] {
      background:
        radial-gradient(circle at 42% 20%, rgba(255, 224, 178, 0.16), transparent 16rem),
        linear-gradient(180deg, #3b3128, #171513 72%);
    }
    model-viewer[data-viewer-bg="cool"] {
      background:
        radial-gradient(circle at 54% 18%, rgba(148, 205, 251, 0.18), transparent 17rem),
        linear-gradient(180deg, #202e41, #0c1118 72%);
    }
    model-viewer[data-viewer-bg="checker"] {
      background-color: #151a22;
      background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.055) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.055) 75%);
      background-size: 42px 42px;
      background-position: 0 0, 0 21px, 21px -21px, -21px 0;
    }
    .empty {
      display: grid;
      place-items: center;
      min-height: 320px;
      color: var(--muted);
      border: 1px dashed var(--border);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.025);
      text-align: center;
      padding: 18px;
    }
    .render-loading {
      display: grid;
      place-items: center;
      gap: 14px;
      min-height: 420px;
      border: 1px dashed rgba(148, 205, 251, 0.32);
      border-radius: 16px;
      background:
        radial-gradient(circle at center, rgba(148, 205, 251, 0.14), transparent 18rem),
        rgba(255, 255, 255, 0.025);
      color: var(--muted);
      text-align: center;
      padding: 24px;
    }
    .render-spinner {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      border: 4px solid rgba(148, 205, 251, 0.18);
      border-top-color: var(--accent);
      animation: spin 0.9s linear infinite;
    }
    .render-spinner.idle {
      animation: none;
      border-color: rgba(74, 222, 128, 0.22);
      border-top-color: var(--success);
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .links, .images {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }
    .links {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    a {
      color: var(--accent);
      text-decoration: none;
    }
    a:hover { text-decoration: underline; }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(148, 205, 251, 0.11), rgba(215, 183, 255, 0.07));
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 13px;
      font-weight: 680;
    }
    button.pill {
      cursor: pointer;
      font: inherit;
      justify-content: center;
    }
    .images {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    figure {
      margin: 0;
      padding: 10px;
      background: var(--panel-2);
      border: 1px solid var(--border);
      border-radius: 14px;
      transition: transform 140ms ease, border-color 140ms ease;
    }
    figure:hover {
      border-color: rgba(148, 205, 251, 0.28);
      transform: translateY(-1px);
    }
    figure img {
      display: block;
      width: 100%;
      border-radius: 10px;
      background: #222;
    }
    figcaption {
      color: var(--muted);
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.35;
    }
    code {
      display: block;
      overflow: auto;
      padding: 12px;
      margin-top: 14px;
      background: #0c0f14;
      border: 1px solid var(--border);
      border-radius: 12px;
      color: #c7d1e2;
      font-size: 12px;
    }
    .upload-panel {
      padding: 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.025);
    }
    .run-search {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      background: rgba(12, 15, 20, 0.34);
    }
    .run-search input {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 9px 12px;
      background: #11151c;
      color: var(--text);
    }
    .run-search button {
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 9px 11px;
      background: var(--panel-2);
      color: var(--text);
      cursor: pointer;
    }
    .drop-zone {
      display: grid;
      gap: 6px;
      place-items: center;
      min-height: 128px;
      border: 1px dashed rgba(148, 205, 251, 0.5);
      border-radius: 14px;
      padding: 16px;
      background: linear-gradient(135deg, rgba(148, 205, 251, 0.08), rgba(215, 183, 255, 0.06));
      color: var(--text);
      text-align: center;
      cursor: pointer;
    }
    .drop-zone.dragover {
      border-color: var(--accent);
      background: linear-gradient(135deg, rgba(148, 205, 251, 0.18), rgba(215, 183, 255, 0.12));
    }
    .drop-zone.disabled {
      cursor: default;
      opacity: 0.62;
    }
    .drop-zone strong { font-size: 14px; }
    .drop-zone small { color: var(--muted); line-height: 1.4; }
    .upload-options {
      display: grid;
      grid-template-columns: 1fr 84px 84px;
      gap: 8px;
      margin-top: 10px;
    }
    .upload-options input {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 9px 10px;
      background: #11151c;
      color: var(--text);
    }
    #api-status {
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }
    #api-status[data-tone="ok"] { color: var(--success); }
    #api-status[data-tone="warn"] { color: var(--warning); }
    .package-options-panel {
      display: grid;
      gap: 10px;
      min-width: 0;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(12, 15, 20, 0.38);
    }
    .package-options-panel[hidden] { display: none; }
    .package-options-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .package-options-header > div {
      min-width: min(100%, 180px);
      flex: 1 1 220px;
    }
    .package-options-header strong {
      display: block;
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .package-options-header small, .option-help {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }
    .option-group {
      display: grid;
      gap: 6px;
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.025);
    }
    .option-group label {
      display: grid;
      gap: 5px;
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
    }
    .option-group select {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 9px;
      background: #11151c;
      color: var(--text);
    }
    .option-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      font-size: 12px;
    }
    .model-select-panel {
      display: grid;
      gap: 8px;
    }
    .model-checkbox {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      padding: 7px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.03);
    }
    .model-checkbox span {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 12px;
      line-height: 1.35;
    }
    .model-checkbox small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
    }
    .option-warning {
      color: var(--warning);
      font-size: 11px;
      line-height: 1.4;
    }
    .render-package-button {
      flex: 0 0 auto;
      max-width: 100%;
      border: 1px solid rgba(148, 205, 251, 0.48);
      border-radius: 999px;
      padding: 8px 12px;
      background: linear-gradient(135deg, rgba(148, 205, 251, 0.18), rgba(215, 183, 255, 0.12));
      color: var(--text);
      cursor: pointer;
      font-weight: 760;
      white-space: nowrap;
    }
    .render-package-button:disabled {
      cursor: wait;
      opacity: 0.68;
    }
    .render-package-button.dirty {
      border-color: rgba(255, 211, 122, 0.62);
      background: linear-gradient(135deg, rgba(255, 211, 122, 0.20), rgba(148, 205, 251, 0.10));
    }
    .upload-panel code {
      display: inline;
      padding: 2px 5px;
      margin: 0;
      border-radius: 6px;
      font-size: 11px;
    }
    .console {
      position: fixed;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 20;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(12, 15, 20, 0.96);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .console.hidden pre { display: none; }
    .console.hidden { width: min(560px, calc(100vw - 36px)); right: auto; }
    .console-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      color: var(--muted);
      font-size: 12px;
      border-bottom: 1px solid var(--border);
    }
    .console button {
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 10px;
      background: var(--panel-2);
      color: var(--text);
      cursor: pointer;
    }
    .console pre {
      margin: 0;
      max-height: 260px;
      overflow: auto;
      padding: 12px;
      white-space: pre-wrap;
      color: #c7d1e2;
      font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    @media (max-width: 900px) {
      header {
        align-items: flex-start;
        flex-direction: column;
      }
      .header-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      main { grid-template-columns: 1fr; }
      .run-list { max-height: 260px; }
      model-viewer { min-height: 380px; }
      .upload-options { grid-template-columns: 1fr; }
      .smallclothes-style-row { grid-template-columns: 1fr 1fr; }
      .viewer-toolbar {
        align-items: flex-start;
        flex-direction: column;
      }
      .viewer-controls { align-items: stretch; }
      .viewer-control, .viewer-toggle, .viewer-action { flex: 1 1 150px; justify-content: center; }
      .camera-presets { justify-content: flex-start; }
    }