.ak-status-list {
  --ak-page: #f6f8fb;
  --ak-surface: #fff;
  --ak-header: #173f72;
  --ak-header-hover: #24558d;
  --ak-accent: #c94f00;
  --ak-text: #162033;
  --ak-border: #94a3b8;
  --ak-selected: #d9e9fb;
  color: var(--ak-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
}

.ak-status-list *,
.ak-status-list *::before,
.ak-status-list *::after {
  box-sizing: border-box;
}

.ak-status-list button,
.ak-status-list input {
  font: inherit;
}

.ak-status-controls {
  padding: 12px;
  border: 1px solid var(--ak-border);
  border-radius: 8px;
  background: var(--ak-surface);
}

.ak-status-search-row {
  display: grid;
  grid-template-columns: minmax(240px, 390px) auto;
  align-items: end;
  gap: 12px;
}

.ak-status-search {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
}

.ak-status-search input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--ak-border);
  border-radius: 6px;
  background: #fff;
  color: var(--ak-text);
  font-size: 14px;
}

.ak-status-count {
  min-width: 5.5em;
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.ak-status-professions {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.ak-status-professions button,
.ak-status-mobile-view button,
.ak-status-module-toggle button {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--ak-border);
  border-radius: 5px;
  background: var(--ak-surface);
  color: var(--ak-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ak-status-professions button:hover,
.ak-status-mobile-view button:hover,
.ak-status-module-toggle button:hover {
  background: #e8f0fb;
}

.ak-status-professions button[aria-pressed="true"],
.ak-status-mobile-view button[aria-pressed="true"],
.ak-status-module-toggle button[aria-pressed="true"] {
  border-color: var(--ak-header);
  background: var(--ak-selected);
  color: #0c315d;
}

.ak-status-mobile-view {
  display: none;
}

.ak-status-module-toggle {
  display: grid;
  grid-template-columns: 112px minmax(180px, 280px);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
}

.ak-status-module-toggle > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.ak-status-note {
  margin: 12px 0 7px;
  font-size: 13px;
  line-height: 1.5;
}

.ak-status-table-scroll {
  width: 100%;
  max-width: 100%;
  position: relative;
  isolation: isolate;
}

.ak-status-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ak-surface);
  font-size: 13px;
}

.ak-status-table th,
.ak-status-table td {
  height: 40px;
  padding: 4px 6px;
  border: 0;
  border-right: 1px solid var(--ak-border);
  border-bottom: 1px solid var(--ak-border);
  vertical-align: middle;
}

.ak-status-table thead tr:first-child > th {
  border-top: 1px solid var(--ak-border);
}

.ak-status-table tr > :first-child {
  border-left: 1px solid var(--ak-border);
}

.ak-status-table th {
  background: var(--ak-header);
  color: #fff;
  text-align: left;
}

.ak-status-table .ak-col-number {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ak-status-table th button {
  width: 100%;
  min-height: 29px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ak-status-table th button:hover,
.ak-status-table th button:focus-visible {
  background: var(--ak-header-hover);
}

.ak-status-table th button[data-direction="desc"]::after {
  content: " ▼";
}

.ak-status-table th button[data-direction="asc"]::after {
  content: " ▲";
}

.ak-status-table tbody tr:nth-child(even) {
  background: #f1f5f9;
}

.ak-status-table tbody tr:hover {
  background: #e4effb;
}

.ak-col-operator {
  width: 27%;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ak-surface);
  box-shadow: 1px 0 0 var(--ak-border);
  text-align: left;
}

.ak-status-table thead .ak-col-operator {
  z-index: 3;
  background: var(--ak-header);
}

.ak-status-table tbody tr:nth-child(even) .ak-col-operator {
  background: #f1f5f9;
}

.ak-status-table tbody tr:hover .ak-col-operator {
  background: #e4effb;
}

.ak-col-redeploy {
  width: 8%;
}

.ak-status-table .ak-operator-content {
  display: grid;
  gap: 3px;
  line-height: 1.25;
}

.ak-status-table .ak-operator-top {
  display: grid;
  width: 100%;
  min-height: 32px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.ak-status-table .ak-operator-image-link {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.ak-status-table .ak-operator-name-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  color: #0a5ca8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ak-status-table .ak-operator-name-link:hover {
  color: #073f78;
  text-decoration-thickness: 2px;
}

.ak-status-table .ak-col-operator img,
.ak-status-table .ak-col-operator i {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.ak-status-table .ak-operator-top small {
  display: inline-block;
  max-width: 100%;
  padding: 1px 5px;
  overflow: hidden;
  border: 1px solid var(--ak-border);
  border-radius: 3px;
  background: #eef3f9;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  justify-self: start;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ak-status-table .ak-operator-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.ak-status-table .ak-module-tag {
  display: inline-block;
  min-width: 24px;
  padding: 1px 4px;
  border: 1px solid #475569;
  border-radius: 3px;
  background: #475569;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.ak-status-table tr[data-module="X"] .ak-module-tag {
  border-color: #1d4ed8;
  background: #1d4ed8;
}

.ak-status-table tr[data-module="Y"] .ak-module-tag {
  border-color: #a34708;
  background: #a34708;
}

.ak-status-table tr[data-module="Δ"] .ak-module-tag {
  border-color: #6d28d9;
  background: #6d28d9;
}

.ak-status-list[data-modules="off"] .ak-module-tag {
  display: none;
}

.ak-status-table .ak-col-operator i {
  background: #cbd5e1;
}

.ak-status-table .ak-col-operator b {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ak-status-table th.ak-sort-active {
  background: var(--ak-header-hover);
}

.ak-status-table td.ak-sort-active {
  background: #e7f0fb;
  color: #0c315d;
  font-weight: 400;
}

.ak-status-empty {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--ak-border);
  background: var(--ak-surface);
  text-align: center;
  font-size: 13px;
}

@media (max-width: 760px) {
  .ak-status-search-row {
    grid-template-columns: 1fr auto;
  }

  .ak-status-professions {
    grid-template-columns: repeat(3, 1fr);
  }

  .ak-status-mobile-view {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
  }

  .ak-status-mobile-view > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .ak-status-module-toggle {
    grid-template-columns: 100px 1fr;
  }

  .ak-status-table {
    font-size: 11.5px;
  }

  .ak-status-table th,
  .ak-status-table td {
    height: 40px;
    padding: 4px;
  }

  .ak-col-operator {
    width: 40%;
  }

  .ak-status-table .ak-operator-content {
    gap: 2px;
  }

  .ak-status-table .ak-col-operator img,
  .ak-status-table .ak-col-operator i {
    width: 28px;
    height: 28px;
  }

  .ak-status-table .ak-operator-top {
    min-height: 28px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
  }

  .ak-status-table .ak-operator-top small {
    max-width: 100%;
    padding: 1px 4px;
    font-size: 11px;
  }

  .ak-status-table .ak-operator-name-link,
  .ak-status-table .ak-col-operator > .ak-operator-content > b {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ak-status-table th button {
    font-size: 11.5px;
  }

  .ak-status-list[data-view="main"] .ak-col-hp,
  .ak-status-list[data-view="main"] .ak-col-atk,
  .ak-status-list[data-view="main"] .ak-col-def,
  .ak-status-list[data-view="main"] .ak-col-res,
  .ak-status-list[data-view="deployment"] .ak-col-redeploy,
  .ak-status-list[data-view="deployment"] .ak-col-interval,
  .ak-status-list[data-view="deployment"] .ak-col-block,
  .ak-status-list[data-view="deployment"] .ak-col-cost {
    width: 15%;
  }

  .ak-status-list[data-view="durability"] .ak-col-hp,
  .ak-status-list[data-view="durability"] .ak-col-def,
  .ak-status-list[data-view="durability"] .ak-col-res {
    width: 20%;
  }

  .ak-status-list[data-view="main"] .ak-col-redeploy,
  .ak-status-list[data-view="main"] .ak-col-interval,
  .ak-status-list[data-view="main"] .ak-col-block,
  .ak-status-list[data-view="main"] .ak-col-cost,
  .ak-status-list[data-view="durability"] .ak-col-atk,
  .ak-status-list[data-view="durability"] .ak-col-redeploy,
  .ak-status-list[data-view="durability"] .ak-col-interval,
  .ak-status-list[data-view="durability"] .ak-col-block,
  .ak-status-list[data-view="durability"] .ak-col-cost,
  .ak-status-list[data-view="deployment"] .ak-col-hp,
  .ak-status-list[data-view="deployment"] .ak-col-atk,
  .ak-status-list[data-view="deployment"] .ak-col-def,
  .ak-status-list[data-view="deployment"] .ak-col-res {
    display: none;
  }
}