.ports-body {
  --ports-bg: #f4f6fa;
  --ports-surface: #fff;
  --ports-soft: #f7f8fb;
  --ports-text: #202938;
  --ports-muted: #647187;
  --ports-subtle: #8591a2;
  --ports-border: #dfe4ec;
  --ports-accent: #bd274a;
  --ports-accent-soft: #fff0f3;
  --ports-port-badge: #a91f42;
  --ports-full-badge: #076246;
  --ports-shadow: 0 5px 16px rgb(24 37 59 / 4%);
  margin: 0;
  color-scheme: light;
  background: var(--ports-bg);
  color: var(--ports-text);
}

html[data-theme="dark"] .ports-body {
  --ports-bg: #202124;
  --ports-surface: #292a2d;
  --ports-soft: #252629;
  --ports-text: #f1f3f4;
  --ports-muted: #bdc1c6;
  --ports-subtle: #9aa0a6;
  --ports-border: #45464a;
  --ports-accent: #ff718c;
  --ports-accent-soft: #40252d;
  --ports-port-badge: #a92a4b;
  --ports-full-badge: #075a40;
  --ports-shadow: 0 7px 20px rgb(0 0 0 / 15%);
  color-scheme: dark;
}

.ports-page { min-height: 60vh; background: var(--ports-bg); color: var(--ports-text); }
.ports-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.ports-heading { padding: 25px 0 20px; border-bottom: 1px solid var(--ports-border); background: var(--ports-surface); }
.ports-heading__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ports-heading__copy { min-width: 0; }
.ports-eyebrow { margin: 0 0 5px; color: var(--ports-muted); font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.ports-eyebrow span { padding: 0 5px; color: var(--ports-subtle); }
.ports-heading h1 { margin: 0; color: var(--ports-text); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 760; letter-spacing: -.035em; line-height: 1.2; }
.ports-heading__copy > p:last-child { margin: 5px 0 0; color: var(--ports-muted); font-size: .9rem; }
.ports-heading__mark { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--ports-accent) 22%, var(--ports-border)); border-radius: 13px; background: var(--ports-accent-soft); color: var(--ports-accent); }
.ports-heading__icon { width: 24px; height: 24px; }
.ports-content { padding: 20px 0 52px; }
.ports-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 11px; padding: 13px; border: 1px solid var(--ports-border); border-radius: 12px; background: var(--ports-surface); box-shadow: var(--ports-shadow); }
.ports-toolbar label { display: grid; min-width: 190px; gap: 6px; color: var(--ports-muted); font-size: .75rem; font-weight: 700; }
.ports-toolbar label > span { display: inline-flex; align-items: center; gap: 7px; }
.ports-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.ports-toolbar label > span .ports-icon { color: var(--ports-accent); }
.ports-toolbar select { width: 100%; min-height: 42px; padding: 0 32px 0 11px; border: 1px solid var(--ports-border); border-radius: 8px; background: var(--ports-soft); color: var(--ports-text); font: inherit; font-size: .87rem; }
.ports-filter-note { margin: 8px 0 0; color: var(--ports-muted); font-size: .8rem; }
.ports-summary { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 23px 0 12px; }
.ports-summary .ports-eyebrow { margin-bottom: 3px; color: var(--ports-accent); }
.ports-summary h2 { margin: 0; color: var(--ports-text); font-size: 1.1rem; font-weight: 730; letter-spacing: -.02em; }
.ports-summary > span { color: var(--ports-muted); font-size: .8rem; white-space: nowrap; }
.ports-list { display: grid; gap: 9px; }
.ports-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 15px; min-width: 0; padding: 12px; border: 1px solid var(--ports-border); border-radius: 12px; background: var(--ports-surface); box-shadow: var(--ports-shadow); }
.ports-row__cover { display: grid; width: 78px; height: 78px; place-items: center; overflow: hidden; border: 1px solid var(--ports-border); border-radius: 10px; background: var(--ports-soft); }
.ports-row__cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ports-row__fallback { display: grid; width: 100%; height: 100%; place-items: center; background: var(--ports-accent-soft); color: var(--ports-accent); }
.ports-row__fallback .ports-icon { width: 27px; height: 27px; }
.ports-row__content { display: grid; min-width: 0; gap: 7px; }
.ports-row__heading { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
.ports-row__heading h3 { min-width: 0; margin: 0; color: var(--ports-text); font-size: .98rem; font-weight: 730; line-height: 1.3; }
.ports-row__heading h3 a { overflow-wrap: anywhere; color: inherit; text-decoration: none; }
.ports-row__heading h3 a:hover { color: var(--ports-accent); }
.ports-row__badges { display: inline-flex; flex: 0 0 auto; gap: 5px; }
.ports-badge { display: inline-flex; min-height: 21px; align-items: center; padding: 0 7px; border-radius: 5px; background: var(--ports-port-badge); color: #fff; font-size: .61rem; font-weight: 800; letter-spacing: .045em; }
.ports-badge--full { background: var(--ports-full-badge); }
.ports-row__genre { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ports-muted); font-size: .77rem; }
.ports-row__genre .ports-icon { width: 14px; height: 14px; color: var(--ports-accent); }
.ports-row__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px 10px; padding-top: 8px; border-top: 1px solid var(--ports-border); }
.ports-row__detail { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: var(--ports-accent); }
.ports-row__detail .ports-icon { width: 15px; height: 15px; }
.ports-row__detail > span { display: grid; min-width: 0; gap: 1px; }
.ports-row__detail small { color: var(--ports-subtle); font-size: .62rem; line-height: 1.2; }
.ports-row__detail strong { overflow-wrap: anywhere; color: var(--ports-text); font-size: .73rem; font-weight: 650; line-height: 1.25; }
.ports-row__action { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid var(--ports-border); border-radius: 8px; color: var(--ports-accent); font-size: .73rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ports-row__action:hover { border-color: var(--ports-accent); background: var(--ports-accent-soft); }
.ports-row__action .ports-icon { width: 14px; height: 14px; }
.ports-row:focus-within { border-color: color-mix(in srgb, var(--ports-accent) 46%, var(--ports-border)); }
.ports-state { margin: 0; padding: 20px; border: 1px solid var(--ports-border); border-radius: 11px; background: var(--ports-surface); color: var(--ports-muted); text-align: center; }
.ports-load-more { display: none; }
.ports-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-top: 20px; }
.ports-page-button { display: inline-flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; gap: 4px; padding: 0 9px; border: 1px solid var(--ports-border); border-radius: 8px; background: var(--ports-surface); color: var(--ports-text); font: inherit; font-size: .77rem; font-weight: 650; cursor: pointer; }
.ports-page-button:hover:not(:disabled) { border-color: var(--ports-accent); color: var(--ports-accent); }
.ports-page-button.is-current { border-color: var(--ports-accent); background: var(--ports-accent); color: #fff; }
.ports-page-button:disabled { opacity: .48; cursor: default; }
.ports-page-button:focus-visible, .ports-row__action:focus-visible, .ports-toolbar select:focus-visible, .ports-load-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--ports-accent) 52%, transparent); outline-offset: 2px; }
.ports-page-gap { padding: 0 3px; color: var(--ports-muted); }
.ports-pagination[hidden], .ports-load-more[hidden], .ports-state[hidden], .ports-filter-note[hidden] { display: none !important; }
@media (max-width: 700px) {
  .ports-shell { width: calc(100% - 28px); }
  .ports-heading { padding: 20px 0 17px; }
  .ports-heading h1 { font-size: 1.55rem; }
  .ports-heading__copy > p:last-child { font-size: .84rem; }
  .ports-heading__mark { width: 43px; height: 43px; border-radius: 12px; }
  .ports-heading__icon { width: 21px; height: 21px; }
  .ports-content { padding-top: 15px; padding-bottom: 42px; }
  .ports-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .ports-toolbar label { min-width: 0; gap: 5px; font-size: .7rem; }
  .ports-toolbar select { min-height: 42px; padding-left: 9px; padding-right: 20px; font-size: .81rem; }
  .ports-summary { margin: 20px 0 10px; }
  .ports-summary h2 { font-size: 1rem; }
  .ports-summary > span { font-size: .73rem; }
  .ports-list { gap: 8px; }
  .ports-row { grid-template-columns: 66px minmax(0, 1fr); align-items: start; gap: 9px 11px; padding: 10px; border-radius: 11px; }
  .ports-row__cover { grid-row: 1 / span 2; width: 66px; height: 66px; border-radius: 9px; }
  .ports-row__content { gap: 6px; }
  .ports-row__heading { gap: 5px 7px; }
  .ports-row__heading h3 { font-size: .88rem; }
  .ports-badge { min-height: 19px; padding: 0 6px; font-size: .57rem; }
  .ports-row__genre { font-size: .72rem; }
  .ports-row__details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 5px; padding-top: 7px; }
  .ports-row__detail { align-items: flex-start; gap: 5px; }
  .ports-row__detail .ports-icon { width: 14px; height: 14px; margin-top: 1px; }
  .ports-row__detail small { font-size: .59rem; }
  .ports-row__detail strong { font-size: .68rem; }
  .ports-row__action { grid-column: 2; justify-self: start; min-height: 32px; padding: 0 8px; font-size: .69rem; }
  .ports-load-more { display: flex; width: max-content; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin: 17px auto 0; padding: 0 15px; border: 1px solid var(--ports-border); border-radius: 9px; background: var(--ports-surface); color: var(--ports-text); font: inherit; font-size: .83rem; font-weight: 700; cursor: pointer; }
  .ports-load-more:disabled { opacity: .6; cursor: wait; }
  .ports-pagination { display: none; }
}
@media (max-width: 360px) {
  .ports-toolbar { grid-template-columns: 1fr; }
  .ports-row { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .ports-row__cover { width: 58px; height: 58px; }
  .ports-row__details { grid-template-columns: 1fr 1fr; }
  .ports-row__action { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .ports-row, .ports-row__action { transition: none; } }