:root {
      --pack-bg: #f7f7fa;
      --pack-panel: #ffffff;
      --pack-raised: #f5f2fa;
      --pack-active: #eee9f5;
      --pack-border: #e4e0ea;
      --pack-border-strong: #82758f;
      --pack-text: #201b2d;
      --pack-soft: #51475f;
      --pack-muted: #6e667c;
      --pack-green: #7145c6;
      --pack-error: #f3727f;
      --pack-warning: #ffa42b;
      --pack-info: #7145c6;
      --pack-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    }

    .pack-skip-link {
      position: fixed;
      z-index: 500;
      top: 8px;
      left: 8px;
      padding: 10px 14px;
      border-radius: 9999px;
      background: var(--pack-green);
      color: #ffffff;
      font-weight: 700;
      text-decoration: none;
      transform: translateY(-160%);
    }

    .pack-skip-link:focus { transform: none; }

    .packs-page { background: var(--pack-bg); }

    .packs-main {
      width: min(1240px, 100%);
      margin: 0 auto;
      padding: 28px 32px 64px;
    }

    .packs-header,
    .section-heading,
    .library-toolbar,
    .dialog-heading,
    .analytics-summary,
    .pack-card-footer,
    .pack-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .packs-header { align-items: flex-end; margin-bottom: 20px; }
    .packs-header-copy { max-width: 720px; }

    .packs-kicker,
    .section-kicker,
    .field-label,
    .quota-label,
    .analytics-label {
      margin: 0 0 5px;
      color: var(--pack-muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      line-height: 1.35;
      text-transform: uppercase;
    }

    .packs-header h1 {
      margin: 0;
      font-size: clamp(24px, 3.2vw, 32px);
      font-weight: 700;
      letter-spacing: -.035em;
      line-height: 1.08;
    }

    .packs-lead {
      max-width: 64ch;
      margin: 9px 0 0;
      color: var(--pack-muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .header-actions,
    .button-row,
    .mode-switch,
    .pack-actions,
    .share-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pack-button,
    .mode-button,
    .pack-link-button {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      padding: 9px 16px;
      border: 1px solid var(--pack-border-strong);
      border-radius: 9999px;
      background: var(--pack-raised);
      color: var(--pack-text);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      line-height: 1;
      text-decoration: none;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    }

    .pack-button:hover,
    .pack-button:focus-visible,
    .mode-button:hover,
    .mode-button:focus-visible,
    .pack-link-button:hover,
    .pack-link-button:focus-visible {
      border-color: #82758f;
      background: var(--pack-active);
    }

    .pack-button.primary {
      border-color: var(--pack-green);
      background: var(--pack-green);
      color: #ffffff;
    }

    .pack-button.primary:hover,
    .pack-button.primary:focus-visible { background: #5d32af; }

    .pack-button.quiet { background: transparent; }
    .pack-button.danger { color: var(--pack-error); }
    .pack-button:disabled,
    .pack-button[aria-disabled="true"],
    .pack-link-button[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: .48;
    }

    .quota-panel {
      display: grid;
      grid-template-columns: minmax(190px, .8fr) repeat(2, minmax(180px, 1fr));
      overflow: hidden;
      margin-bottom: 26px;
      border: 1px solid var(--pack-border);
      border-radius: 8px;
      background: var(--pack-panel);
    }

    .quota-intro,
    .quota-item { min-width: 0; padding: 15px 16px; }
    .quota-item { border-left: 1px solid var(--pack-border); }
    .quota-intro strong,
    .quota-item strong { display: block; font-size: 14px; line-height: 1.35; }
    .quota-intro span,
    .quota-item span { display: block; margin-top: 4px; color: var(--pack-muted); font-size: 12px; line-height: 1.4; }
    .quota-plan { color: var(--pack-green); }

    .pack-section { margin-top: 28px; }
    .section-heading { align-items: flex-end; margin-bottom: 14px; }
    .section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
    .section-heading p:last-child { max-width: 58ch; margin: 0; color: var(--pack-muted); font-size: 13px; line-height: 1.5; }

    .library-toolbar {
      align-items: flex-end;
      margin-bottom: 12px;
      padding: 12px;
      border-radius: 8px;
      background: var(--pack-panel);
    }

    .filter-fields {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(150px, .42fr);
      flex: 1;
      gap: 8px;
    }

    .field { display: grid; gap: 6px; min-width: 0; }
    .field-label { margin: 0; }

    .pack-input,
    .pack-select,
    .pack-textarea {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: var(--pack-raised);
      box-shadow: 0 1px 0 #f7f7fa, inset 0 0 0 1px #dcd5e6;
      color: var(--pack-text);
      font: inherit;
      font-size: 14px;
    }

    .pack-textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
    .pack-input::placeholder,
    .pack-textarea::placeholder { color: #82758f; }
    .pack-select { appearance: auto; }

    .mode-switch {
      padding: 3px;
      border-radius: 9999px;
      background: #f8f6fb;
    }

    .mode-button {
      min-height: 36px;
      padding: 8px 13px;
      border-color: transparent;
      background: transparent;
      color: var(--pack-muted);
      letter-spacing: .08em;
    }

    .mode-button[aria-pressed="true"] {
      background: var(--pack-active);
      color: var(--pack-text);
    }

    .library-status,
    .form-status,
    .analytics-status {
      min-height: 20px;
      margin: 0 0 12px;
      color: var(--pack-muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .form-status { margin-top: 10px; margin-bottom: 0; }
    .status-error { color: var(--pack-error); }
    .status-success { color: var(--pack-green); }
    .status-warning { color: var(--pack-warning); }

    .packs-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .pack-card {
      display: flex;
      min-width: 0;
      min-height: 230px;
      flex-direction: column;
      padding: 16px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: var(--pack-panel);
      transition: background-color 140ms ease, border-color 140ms ease;
    }

    .pack-card:hover { border-color: var(--pack-border); background: var(--pack-raised); }
    .pack-card-top { align-items: flex-start; }

    .pack-preview {
      flex: 0 0 auto;
      min-width: 72px;
      min-height: 36px;
      padding: 8px 13px;
      border: 0;
      border-radius: 9999px;
      background: #201b2d;
      color: #faf9fc;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .pack-preview.is-playing { background: var(--pack-green); }
    .pack-preview:disabled { cursor: wait; opacity: .62; }

    .visibility-badge,
    .meta-chip {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      padding: 4px 8px;
      border-radius: 9999px;
      background: var(--pack-active);
      color: var(--pack-soft);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }

    .visibility-badge.unlisted { color: var(--pack-info); }

    .pack-card h3 {
      overflow-wrap: anywhere;
      margin: 16px 0 3px;
      font-size: 17px;
      letter-spacing: -.015em;
      line-height: 1.25;
    }

    .pack-author { margin: 0; color: var(--pack-muted); font-size: 12px; }
    .pack-description { display: -webkit-box; overflow: hidden; margin: 12px 0; color: var(--pack-soft); font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .pack-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
    .pack-card-footer { align-items: flex-end; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--pack-border); }
    .pack-stats { color: var(--pack-muted); font-size: 11px; line-height: 1.45; }
    .pack-actions { justify-content: flex-end; }
    .pack-actions .pack-button { min-height: 34px; padding: 7px 11px; font-size: 10px; }

    .empty-state {
      grid-column: 1 / -1;
      padding: 34px 22px;
      border: 1px dashed var(--pack-border-strong);
      border-radius: 8px;
      text-align: center;
    }

    .empty-state h3 { margin: 0; font-size: 17px; }
    .empty-state p { max-width: 52ch; margin: 7px auto 16px; color: var(--pack-muted); font-size: 13px; line-height: 1.5; }

    .creator-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(260px, .65fr);
      gap: 10px;
    }

    .analytics-panel,
    .visibility-guide {
      padding: 17px;
      border-radius: 8px;
      background: var(--pack-panel);
    }

    .analytics-summary { justify-content: flex-start; margin: 16px 0 12px; }
    .analytics-metric { min-width: 130px; padding: 11px 13px; border-radius: 6px; background: var(--pack-raised); }
    .analytics-label { display: block; margin: 0; }
    .analytics-metric strong { display: block; margin-top: 4px; font-size: 21px; font-variant-numeric: tabular-nums; }

    .analytics-chart-wrap { overflow-x: auto; padding-bottom: 6px; }
    .analytics-chart {
      display: grid;
      grid-template-columns: repeat(90, minmax(5px, 1fr));
      align-items: end;
      gap: 2px;
      min-width: 620px;
      height: 104px;
      padding: 10px;
      border-radius: 6px;
      background: #f8f6fb;
    }

    .analytics-bar { min-height: 2px; border-radius: 2px 2px 0 0; background: #82758f; }

    .analytics-table-wrap { overflow-x: auto; margin-top: 12px; }
    .analytics-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .analytics-table th,
    .analytics-table td { padding: 9px 8px; border-bottom: 1px solid var(--pack-border); text-align: right; }
    .analytics-table th:first-child,
    .analytics-table td:first-child { text-align: left; }
    .analytics-table th { color: var(--pack-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

    .visibility-guide h3,
    .analytics-panel h3 { margin: 0; font-size: 17px; }
    .visibility-guide > p,
    .analytics-panel header p { margin: 6px 0 0; color: var(--pack-muted); font-size: 12px; line-height: 1.5; }
    .visibility-list { display: grid; gap: 11px; margin: 16px 0 0; padding: 0; list-style: none; }
    .visibility-list strong { display: block; font-size: 13px; }
    .visibility-list span { display: block; margin-top: 2px; color: var(--pack-muted); font-size: 12px; line-height: 1.45; }

    .packs-footer { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--pack-border); color: var(--pack-muted); font-size: 11px; }
    .packs-footer a { color: var(--pack-soft); }

    .pack-dialog {
      width: min(680px, calc(100vw - 28px));
      max-height: min(860px, calc(100vh - 28px));
      overflow-y: auto;
      padding: 0;
      border: 1px solid var(--pack-border-strong);
      border-radius: 10px;
      background: var(--pack-panel);
      box-shadow: var(--pack-shadow);
      color: var(--pack-text);
    }

    .pack-dialog::backdrop { background: rgba(0, 0, 0, .78); }
    .dialog-body { padding: 20px; }
    .dialog-heading { align-items: flex-start; margin-bottom: 18px; }
    .dialog-heading h2 { margin: 0; font-size: 22px; }
    .dialog-heading p { margin: 5px 0 0; color: var(--pack-muted); font-size: 12px; line-height: 1.5; }
    .dialog-close { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid var(--pack-border-strong); border-radius: 50%; background: var(--pack-raised); color: var(--pack-text); font-size: 20px; cursor: pointer; }

    .upload-form { display: grid; gap: 14px; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .form-grid .wide { grid-column: 1 / -1; }

    .file-picker {
      display: grid;
      min-height: 110px;
      place-items: center;
      padding: 18px;
      border: 1px dashed var(--pack-border-strong);
      border-radius: 8px;
      background: #f8f6fb;
      text-align: center;
      cursor: pointer;
    }

    .file-picker:hover { background: var(--pack-raised); }
    .file-picker input { width: 100%; max-width: 390px; color: var(--pack-muted); }
    .file-picker strong { display: block; margin-bottom: 5px; font-size: 14px; }
    .file-picker span { display: block; color: var(--pack-muted); font-size: 11px; line-height: 1.45; }
    .file-summary { margin: 7px 0 0; color: var(--pack-soft); font-size: 12px; line-height: 1.45; }
    .file-names { max-height: 72px; overflow-y: auto; margin: 5px 0 0; padding-left: 20px; color: var(--pack-muted); font-size: 11px; }

    .visibility-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .visibility-choice { display: grid; grid-template-columns: auto 1fr; gap: 8px; min-height: 86px; padding: 11px; border: 1px solid var(--pack-border); border-radius: 7px; background: var(--pack-raised); cursor: pointer; }
    .visibility-choice:has(input:checked) { border-color: #82758f; background: var(--pack-active); }
    .visibility-choice.is-disabled { cursor: not-allowed; opacity: .48; }
    .visibility-choice input { margin-top: 3px; accent-color: var(--pack-green); }
    .visibility-choice strong { display: block; font-size: 13px; }
    .visibility-choice small { display: block; margin-top: 3px; color: var(--pack-muted); font-size: 10px; line-height: 1.4; }

    .quota-note { padding: 11px 12px; border-left: 3px solid var(--pack-border-strong); border-radius: 4px; background: #f8f6fb; color: var(--pack-soft); font-size: 12px; line-height: 1.5; }
    .quota-note strong { color: var(--pack-text); }

    .share-result { margin-top: 14px; padding: 13px; border-radius: 7px; background: #f8f6fb; }
    .share-result label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .share-url-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
    .share-url-row .pack-input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
    .share-help { margin: 8px 0 0; color: var(--pack-muted); font-size: 11px; line-height: 1.45; }
    [hidden] { display: none !important; }

    @media (max-width: 1120px) {
      .quota-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .quota-intro { grid-column: 1 / -1; }
      .quota-item:nth-child(2),
      .quota-item:nth-child(4) { border-left: 0; }
      .quota-item { border-top: 1px solid var(--pack-border); }
      .packs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .packs-main { padding: 22px 16px 42px; }
      .packs-header,
      .section-heading,
      .library-toolbar { align-items: stretch; flex-direction: column; }
      .header-actions .pack-button { flex: 1; }
      .filter-fields { grid-template-columns: 1fr; width: 100%; }
      .mode-switch { align-self: flex-start; }
      .creator-grid { grid-template-columns: 1fr; }
      .visibility-options { grid-template-columns: 1fr; }
      .visibility-choice { min-height: 0; }
    }

    @media (max-width: 560px) {
      .quota-panel,
      .packs-grid,
      .form-grid { grid-template-columns: 1fr; }
      .quota-intro,
      .form-grid .wide { grid-column: auto; }
      .quota-item { border-left: 0; }
      .pack-card { min-height: 0; }
      .dialog-body { padding: 16px; }
      .share-url-row { grid-template-columns: 1fr; }
      .analytics-summary { align-items: stretch; flex-direction: column; }
      .analytics-metric { min-width: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .pack-button,
      .mode-button,
      .pack-link-button,
      .pack-card { transition: none; }
    }

    @media (forced-colors: active) {
      .pack-button.primary,
      .pack-preview,
      .pack-preview.is-playing { border: 1px solid ButtonText; }
      .pack-card,
      .quota-panel,
      .analytics-panel,
      .visibility-guide { border: 1px solid CanvasText; }
    }