.puzzle-hub-shell {
    --bg: var(--bs-body-bg);
    --panel: var(--bs-body-bg);
    --panel-soft: var(--bs-tertiary-bg);
    --border: var(--bs-border-color);
    --text: var(--bs-body-color);
    --muted: var(--bs-secondary-color);
    --primary: var(--bs-primary);
    --primary-rgb: var(--bs-primary-rgb);
    --primary-soft: var(--bs-primary-bg-subtle);
    --primary-border: var(--bs-primary-border-subtle);
    --secondary-soft: var(--bs-secondary-bg-subtle);
    --warning-soft: var(--bs-warning-bg-subtle);
    --warning-border: var(--bs-warning-border-subtle);
    --warning-text: var(--bs-warning-text-emphasis);
    --danger-soft: var(--bs-danger-bg-subtle);
    --danger-border: var(--bs-danger-border-subtle);
    --danger-text: var(--bs-danger-text-emphasis);
    --shadow: 0 .5rem 1rem rgba(0, 0, 0, .06);
    --shadow-soft: 0 .125rem .25rem rgba(0, 0, 0, .06)
  }

  .puzzle-hub-shell * {
    box-sizing: border-box
  }

  .puzzle-hub-shell {
    margin: 0;
    font-family: inherit;
    background: transparent;
    color: var(--text)
  }

  .puzzle-hub-shell .page {
    max-width: 1500px;
    margin: 0 auto;
    padding: .25rem 0 0
  }

  .puzzle-hub-shell .card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-soft)
  }

  .puzzle-hub-shell .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
  }

  .puzzle-hub-shell .hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px
  }

  .puzzle-hub-shell .meta {
    color: var(--muted);
    font-size: .84rem
  }

  .puzzle-hub-shell .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px
  }

  .puzzle-hub-shell .danger-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .puzzle-hub-shell .danger-actions form {
    margin: 0;
  }

  .puzzle-hub-shell .btn,
  .puzzle-hub-shell button,
  .puzzle-hub-shell input[type=text],
  .puzzle-hub-shell input[type=search],
  .puzzle-hub-shell input[type=password],
  .puzzle-hub-shell input[type=number],
  .puzzle-hub-shell input[type=file],
  .puzzle-hub-shell select {
    font: inherit
  }

  .puzzle-hub-shell .btn,
  .puzzle-hub-shell button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 12px;
    min-height: 36px;
    background: var(--primary);
    color: var(--bs-btn-color, #fff);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
    box-shadow: 0 .375rem .75rem rgba(var(--primary-rgb), .14);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease
  }

  .puzzle-hub-shell .btn-secondary {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none
  }

  .puzzle-hub-shell .btn-danger {
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    box-shadow: none
  }

  .puzzle-hub-shell input[type=text],
  .puzzle-hub-shell input[type=search],
  .puzzle-hub-shell input[type=password],
  .puzzle-hub-shell input[type=number],
  .puzzle-hub-shell input[type=file],
  .puzzle-hub-shell select {
    width: 100%;
    background: var(--bs-body-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    min-height: 36px;
    font-size: .9rem;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease
  }

  .puzzle-hub-shell input[type=text]:hover,
  .puzzle-hub-shell input[type=search]:hover,
  .puzzle-hub-shell input[type=password]:hover,
  .puzzle-hub-shell input[type=number]:hover,
  .puzzle-hub-shell input[type=file]:hover,
  .puzzle-hub-shell select:hover {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border))
  }

  .puzzle-hub-shell input[type=text]:focus,
  .puzzle-hub-shell input[type=search]:focus,
  .puzzle-hub-shell input[type=password]:focus,
  .puzzle-hub-shell input[type=number]:focus,
  .puzzle-hub-shell input[type=file]:focus,
  .puzzle-hub-shell select:focus {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--border));
    box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .14)
  }

  .puzzle-hub-shell input[type=range] {
    width: 100%;
    display: block;
    margin-top: 6px;
  }

  .puzzle-hub-shell .preview-box {
    margin-top: 12px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: var(--bs-body-bg)
  }

  .puzzle-hub-shell .preview-box img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover
  }

  .puzzle-hub-shell .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .puzzle-hub-shell .check {
    display: flex;
    align-items: center;
    margin: 8px 0;
    gap: 8px
  }

  .puzzle-hub-shell .check input {
    width: auto;
    margin: 0
  }

  .puzzle-hub-shell .top-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap
  }

  .puzzle-hub-shell .preview-details {
    display: block
  }

  .puzzle-hub-shell .preview-details summary {
    cursor: pointer;
    margin-top: 12px;
    color: var(--text);
    font-weight: 600
  }

  @media (max-width:980px) {

    .grid,
    .row {
      grid-template-columns: 1fr
    }

    .puzzle-hub-shell .share-form-grid {
      grid-template-columns: 1fr;
    }
  }

  .puzzle-hub-shell .puzzle-entry {
    background: var(--panel-soft);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 18px;
    padding: 15px;
    box-shadow: var(--shadow-soft)
  }
  body.has-site-wallpaper .puzzle-hub-shell .puzzle-entry {
    background: rgba(255, 255, 255, var(--site-wallpaper-card-opacity, 0.88));
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
      0 1.1rem 2.3rem rgba(15, 23, 42, 0.10),
      0 0.1rem 0.35rem rgba(15, 23, 42, 0.05);
    isolation: isolate;
  }
  html[data-bs-theme="dark"] body.has-site-wallpaper .puzzle-hub-shell .puzzle-entry {
    background: rgba(15, 23, 42, var(--site-wallpaper-card-opacity, 0.88));
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow:
      0 1.15rem 2.4rem rgba(2, 6, 23, 0.36),
      0 0.12rem 0.36rem rgba(2, 6, 23, 0.26);
  }

  .puzzle-hub-shell .hero-card {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: var(--shadow-soft)
  }
  body.has-site-wallpaper .puzzle-hub-shell .hub-filter-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
  }

  .puzzle-hub-shell .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start
  }

  .puzzle-hub-shell .hero-left {
    min-width: 0
  }

  .puzzle-hub-shell .hero-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 8px;
  }

  .puzzle-hub-shell .hero-title-row .h3 {
    margin: 0;
  }

  .puzzle-hub-shell .hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  .puzzle-hub-shell .hero-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    line-height: 1.1;
    background: var(--warning-soft);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
    text-align: center
  }

  .puzzle-hub-shell .hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px
  }

  .puzzle-hub-shell .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px
  }

  .puzzle-hub-shell .stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-soft)
  }

  .puzzle-hub-shell .stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    margin-top: 6px
  }

  .puzzle-hub-shell .puzzle-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start
  }

  .puzzle-hub-shell .puzzle-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .puzzle-hub-shell .puzzle-title-row h5 {
    margin: 0;
  }

  .puzzle-hub-shell .puzzle-head h3 {
    margin: 0 0 6px;
    border: 0;
    padding: 0
  }

  .puzzle-hub-shell .puzzle-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 8px
  }

  .puzzle-hub-shell .puzzle-kpi {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-tertiary-bg));
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: .82rem;
    font-weight: 700;
  }

  .puzzle-hub-shell .puzzle-kpi strong {
    display: inline;
    font-size: .72rem;
    color: var(--muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .puzzle-hub-shell #sortSelect,
  .puzzle-hub-shell #uploadedBySelect,
  .puzzle-hub-shell #perPageSelect,
  .puzzle-hub-shell #titleSearchInput {
    min-width: 220px;
  }

  .puzzle-hub-shell .filter-inline {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 0
  }

  .puzzle-hub-shell .filter-inline .field {
    display: flex;
    flex-direction: column;
    gap: 4px
  }

  .puzzle-hub-shell .filter-inline .field::before {
    content: attr(data-label);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 700
  }

  .puzzle-hub-shell .filter-inline .actions {
    margin: 0
  }

  .puzzle-hub-shell .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33, 37, 41, .46);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 3000
  }

  .puzzle-hub-shell .modal-backdrop.open {
    display: flex
  }

  .puzzle-hub-shell .modal-card {
    width: min(720px, 100%);
    max-height: min(88vh, 900px);
    overflow: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .16)
  }

  .puzzle-hub-shell .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent)
  }

  .puzzle-hub-shell .modal-head h2 {
    margin: 0;
    font-size: 1.2rem
  }

  .puzzle-hub-shell .modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 4px
  }

  .puzzle-hub-shell .variant-crop-row {
    display: grid;
    gap: 8px;
    margin-top: 10px;
  }

  .puzzle-hub-shell .variant-crop-row .btn {
    width: 100%;
  }

  .puzzle-hub-shell .variant-crop-modal-card {
    width: min(860px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    overflow: hidden;
    padding: 14px;
  }

  .puzzle-hub-shell .variant-crop-modal-card .modal-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .puzzle-hub-shell .variant-crop-modal-card .modal-head h2 {
    font-size: 1.08rem;
  }

  .puzzle-hub-shell .variant-crop-modal-body {
    display: grid;
    gap: 8px;
  }

  .puzzle-hub-shell .variant-crop-preview {
    position: relative;
    width: min(100%, 520px, calc(100dvh - 250px));
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  .puzzle-hub-shell .variant-crop-preview.dragging {
    cursor: grabbing;
  }

  .puzzle-hub-shell .variant-crop-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform-origin: 50% 50%;
    pointer-events: none;
  }

  .puzzle-hub-shell .variant-crop-frame {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 0 999px rgba(15, 23, 42, .06);
    pointer-events: none;
  }

  .puzzle-hub-shell .variant-crop-zoom {
    display: grid;
    gap: 4px;
    color: var(--text);
    font-weight: 700;
  }

  .puzzle-hub-shell .variant-crop-zoom input {
    width: 100%;
  }

  .puzzle-hub-shell #squareCropStatus {
    margin: 0;
  }

  .puzzle-hub-shell .variant-crop-modal-card .modal-actions {
    margin-top: 4px;
    padding-top: 0;
  }

  @supports not (height: 100dvh) {
    .puzzle-hub-shell .variant-crop-modal-card {
      max-height: calc(100vh - 28px);
    }

    .puzzle-hub-shell .variant-crop-preview {
      width: min(100%, 520px, calc(100vh - 250px));
    }
  }

  .puzzle-hub-shell .pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px
  }

  .puzzle-hub-shell .pagination .meta {
    min-width: 140px;
    text-align: center
  }

  .puzzle-hub-shell .tag-filter-modal-card {
    width: min(680px, calc(100vw - 28px));
  }

  .puzzle-hub-shell .manage-modal-card {
    width: min(1120px, calc(100vw - 28px));
  }

  .puzzle-hub-shell .manage-modal-grid {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr);
    gap: 22px;
    align-items: start;
  }

  .puzzle-hub-shell .manage-modal-column {
    display: grid;
    gap: 14px;
    align-content: start;
  }

  .puzzle-hub-shell .manage-modal-section {
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    padding-top: 16px;
  }

  .puzzle-hub-shell .manage-modal-section:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .puzzle-hub-shell .manage-modal-card .danger-actions {
    margin-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    padding-top: 16px;
  }

  @media (max-width: 860px) {
    .puzzle-hub-shell .modal-backdrop {
      align-items: flex-start;
      overflow: auto;
      padding: max(12px, env(safe-area-inset-top)) 12px max(28px, env(safe-area-inset-bottom));
      overscroll-behavior: contain;
    }

    .puzzle-hub-shell .modal-card {
      max-height: calc(100dvh - 40px);
      -webkit-overflow-scrolling: touch;
    }

    .puzzle-hub-shell .manage-modal-card {
      padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .puzzle-hub-shell .manage-modal-grid {
      grid-template-columns: 1fr;
      padding-bottom: 8px;
    }
  }

  @supports not (height: 100dvh) {
    @media (max-width: 860px) {
      .puzzle-hub-shell .modal-card {
        max-height: calc(100vh - 40px);
      }
    }
  }

  .puzzle-hub-shell .tag-filter-panel,
  .puzzle-hub-shell .tag-edit-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
  }

  .puzzle-hub-shell .tag-mode-row,
  .puzzle-hub-shell .tag-filter-list,
  .puzzle-hub-shell .tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .puzzle-hub-shell .tag-filter-modal-card .tag-filter-list {
    max-height: min(42vh, 320px);
    overflow: auto;
    padding-right: 4px;
  }

  .puzzle-hub-shell .tag-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-soft) 80%, transparent);
    color: var(--text);
    font-size: .84rem;
    cursor: pointer;
  }

  .puzzle-hub-shell .tag-check input {
    accent-color: var(--primary);
  }

  .puzzle-hub-shell .tag-filter-chip {
    min-height: 32px;
    padding: 6px 11px;
    transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
  }

  .puzzle-hub-shell .tag-filter-chip input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .puzzle-hub-shell .tag-filter-chip:hover {
    border-color: color-mix(in srgb, var(--primary) 54%, var(--border));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 16%, transparent);
  }

  .puzzle-hub-shell .tag-filter-chip:has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 26%, transparent);
  }

  .puzzle-hub-shell .tag-filter-chip:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
  }

  .puzzle-hub-shell .tag-filter-chip:has(input:checked) small {
    color: rgba(255, 255, 255, .78);
  }

  .puzzle-hub-shell .tag-check small {
    color: var(--muted);
  }

  .puzzle-hub-shell .tag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
    font-size: .78rem;
    font-weight: 800;
  }

  html[data-bs-theme="dark"] .puzzle-hub-shell .tag-chip {
    background: rgba(37, 99, 235, .22);
    color: #dbeafe;
    border-color: rgba(147, 197, 253, .42);
  }

  .puzzle-hub-shell .tag-suggestion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .puzzle-hub-shell .tag-suggestion-btn {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-soft) 88%, transparent);
    color: var(--text);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 800;
    min-height: 26px;
    padding: 4px 9px;
  }

  .puzzle-hub-shell .tag-suggestion-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    color: var(--primary);
  }

  .puzzle-hub-shell .puzzle-entry.pending-approval {
    border-color: var(--warning-border);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning-border) 55%, transparent), var(--shadow-soft);
    background: linear-gradient(180deg, color-mix(in srgb, var(--warning-soft) 62%, var(--panel-soft)), var(--panel-soft));
  }

  .puzzle-hub-shell .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    border: 1px solid var(--border);
    margin-top: 8px;
    margin-right: 6px;
  }

  .puzzle-hub-shell .pill-warning {
    background: var(--warning-soft);
    color: var(--warning-text);
    border-color: var(--warning-border);
  }

  .puzzle-hub-shell .pill-danger {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: var(--danger-border);
  }

  .puzzle-hub-shell .pill-inline {
    margin-top: 0;
    margin-right: 0;
    padding: 2px 8px;
    font-size: .72rem;
  }

  .puzzle-hub-shell .image-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33, 37, 41, .52);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 4000
  }

  .puzzle-hub-shell .image-modal-backdrop.open {
    display: flex
  }

  .puzzle-hub-shell .image-modal-card {
    width: min(1200px, 100%);
    max-height: min(92vh, 1000px);
    background: var(--bs-body-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .16);
    display: flex;
    flex-direction: column;
    gap: 12px
  }

  .puzzle-hub-shell .image-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent)
  }

  .puzzle-hub-shell .image-modal-head h2 {
    margin: 0
  }

  .puzzle-hub-shell .image-modal-stage {
    min-height: 220px;
    max-height: calc(92vh - 120px);
    overflow: auto;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--bs-tertiary-bg) 88%, var(--bs-body-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px
  }

  .puzzle-hub-shell .image-modal-stage img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 150px);
    width: auto;
    height: auto;
    border-radius: 10px
  }

  .puzzle-hub-shell .upload-live-preview {
    margin-top: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 16px;
    padding: 14px;
    background: var(--panel-soft)
  }

  .puzzle-hub-shell .upload-live-preview canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--bs-body-bg) 80%, var(--bs-tertiary-bg))
  }

  .puzzle-hub-shell .upload-modal-card {
    width: min(1180px, 96vw);
    max-height: min(90vh, 1000px);
  }

  .puzzle-hub-shell .upload-modal-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(380px, 520px);
    gap: 18px;
    align-items: start;
  }

  .puzzle-hub-shell .upload-modal-left,
  .puzzle-hub-shell .upload-modal-right {
    min-width: 0;
  }

  .puzzle-hub-shell .upload-modal-right .upload-live-preview {
    margin-top: 0;
    position: sticky;
    top: 0;
  }

  @media (max-width: 980px) {
    .upload-modal-grid {
      grid-template-columns: 1fr;
    }

    .puzzle-hub-shell .upload-modal-right .upload-live-preview {
      position: static;
    }

    .puzzle-hub-shell .upload-modal-card {
      width: min(720px, 100%);
    }

    .puzzle-hub-shell .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .puzzle-hub-shell .hero-layout {
      grid-template-columns: 1fr;
    }

    .puzzle-hub-shell .hero-right {
      align-items: flex-start;
      text-align: left;
      min-width: 0;
    }
  }

  @media (max-width: 640px) {

    .puzzle-hub-shell .stats-grid,
    .puzzle-hub-shell .puzzle-kpis {
      grid-template-columns: 1fr;
    }

    .puzzle-hub-shell .filter-inline {
      justify-content: stretch;
    }

    .puzzle-hub-shell .filter-inline .field,
    .puzzle-hub-shell .filter-inline .actions {
      width: 100%;
    }

    .puzzle-hub-shell #sortSelect,
    .puzzle-hub-shell #uploadedBySelect,
    .puzzle-hub-shell #perPageSelect,
    .puzzle-hub-shell #titleSearchInput {
      min-width: 0;
    }

    .puzzle-hub-shell .puzzle-head {
      flex-direction: column;
    }
  }

  .puzzle-hub-shell h3 {
    margin-top: 0px;
    margin-bottom: 10px;
    border-bottom: 3px groove color-mix(in srgb, var(--primary) 48%, transparent);
    padding-bottom: 3px;
  }

  .puzzle-hub-shell .gallery-modal-card {
    width: min(1280px, 96vw);
    max-height: min(92vh, 1040px);
    padding: 18px;
  }

  .puzzle-hub-shell .gallery-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }

  .puzzle-hub-shell .gallery-tile {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-tertiary-bg));
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    aspect-ratio: 4 / 3;
  }

  .puzzle-hub-shell .gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease, filter .22s ease;
  }

  .puzzle-hub-shell .gallery-tile::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 12px 10px;
    font-size: .84rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .82));
    opacity: 0;
    transition: opacity .22s ease;
  }

  .puzzle-hub-shell .gallery-tile:hover img,
  .puzzle-hub-shell .gallery-tile:focus-visible img {
    transform: scale(1.03);
    filter: saturate(1.04);
  }

  .puzzle-hub-shell .gallery-tile:hover::after,
  .puzzle-hub-shell .gallery-tile:focus-visible::after {
    opacity: 1;
  }

  .puzzle-hub-shell .gallery-modal-empty {
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--border) 84%, transparent);
    background: var(--panel-soft);
  }

  .puzzle-hub-shell .section-caption {
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: .35rem;
  }

  .puzzle-hub-shell .layout-note {
    color: var(--muted);
    max-width: 760px;
  }

  .puzzle-hub-shell .share-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
  }

  .puzzle-hub-shell .share-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: var(--panel-soft);
  }

  .puzzle-hub-shell .share-item-main {
    min-width: 0;
  }

  .puzzle-hub-shell .share-item-title {
    font-weight: 700;
    line-height: 1.25;
  }

  .puzzle-hub-shell .share-item-title code {
    font-size: .85rem;
  }

  .puzzle-hub-shell .share-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
  }

  .puzzle-hub-shell .share-result-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--primary-border) 70%, transparent);
    background: color-mix(in srgb, var(--primary-soft) 78%, var(--panel));
  }

  .puzzle-hub-shell .share-result-box input[type=text] {
    margin-top: 8px;
  }

  .puzzle-hub-shell .image-sets-modal-card {
    width: min(1280px, calc(100vw - 28px));
  }

  .puzzle-hub-shell .image-set-editor-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
  }

  .puzzle-hub-shell .image-set-editor-head label {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .puzzle-hub-shell .image-set-actions,
  .puzzle-hub-shell .image-set-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .puzzle-hub-shell .image-set-toolbar {
    margin-top: 14px;
  }

  .puzzle-hub-shell .image-set-toolbar select,
  .puzzle-hub-shell .image-set-toolbar input {
    flex: 1 1 240px;
  }

  .puzzle-hub-shell .image-set-meta {
    margin-top: 12px;
    color: var(--muted);
    font-size: .92rem;
  }

  .puzzle-hub-shell .image-set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding-bottom: 18px;
  }

  .puzzle-hub-shell .image-set-option {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    cursor: pointer;
  }

  .puzzle-hub-shell .image-set-option input {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
  }

  .puzzle-hub-shell .image-set-option img,
  .puzzle-hub-shell .image-set-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .puzzle-hub-shell .image-set-placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
    background: color-mix(in srgb, var(--panel-soft) 82%, #000);
    font-size: 1.7rem;
  }

  .puzzle-hub-shell .image-set-option.selected {
    border-color: var(--primary-border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  .puzzle-hub-shell .image-set-option.selected img {
    filter: grayscale(1);
  }

  .puzzle-hub-shell .image-set-option.unavailable {
    border-style: dashed;
  }

  .puzzle-hub-shell .image-set-option span {
    display: block;
    padding: 8px;
    overflow: hidden;
    color: var(--text);
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .puzzle-hub-shell .image-set-option small {
    display: block;
    padding: 0 8px 8px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.2;
  }

  .puzzle-hub-shell .image-set-option mark {
    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 999px;
    padding: 3px 6px;
    background: #f87171;
    color: #111827;
    font-size: .68rem;
    font-weight: 800;
  }

  @media (max-width: 720px) {
    .puzzle-hub-shell .image-set-editor-head {
      grid-template-columns: 1fr;
    }

    .puzzle-hub-shell .image-set-grid {
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    }
  }