/*
 * A2DIL common stylesheet.
 * Source and ownership map: ../docs/WEB_SOURCE_MAP.md
 */
:root {
  color-scheme: dark;
  --a2-bg-app: #010307;
  --a2-bg-titlebar: #02050a;
  --a2-surface: rgba(5, 9, 15, .76);
  --a2-surface-raised: rgba(11, 20, 31, .88);
  --a2-surface-hover: rgba(18, 32, 47, .92);
  --a2-border: rgba(255, 255, 255, .12);
  --a2-border-strong: rgba(255, 255, 255, .2);
  --a2-accent: #2fd6cf;
  --a2-accent-dim: #1fa8a3;
  --a2-accent-rgb: 47, 214, 207;
  --a2-red: #e04040;
  --a2-red-rgb: 224, 64, 64;
  --a2-blue: #70c8ff;
  --a2-race-color-elyos: #70c8ff;
  --a2-race-color-asmodian: #b070dd;
  --a2-yellow: #e7cf7d;
  --a2-green: #55d596;
  --a2-job-color-gladiator: #86ddf3;
  --a2-job-color-ranger: #62b18f;
  --a2-job-color-sorcerer: #b78cf2;
  --a2-job-color-assassin: #a4e79b;
  --a2-job-color-templar: #7da0f9;
  --a2-job-color-spiritmaster: #cf6bd0;
  --a2-job-color-cleric: #e7cf7d;
  --a2-job-color-chanter: #e4a55b;
  --a2-job-color-gwonseong: #d86868;
  --a2-text-primary: #e0e0e0;
  --a2-text-bright: #f2f5f8;
  --a2-text-secondary: #8899aa;
  --a2-text-muted: #70828f;
  --a2-radius: 5px;
  --a2-card-radius: 8px;
  --a2-panel-radius: 12px;
  --a2-frame-radius: 14px;
  --a2-font-family: "NanumSquareNeo", "Malgun Gothic", "Segoe UI", sans-serif;
  --a2-shadow-card: 0 14px 38px rgba(0, 0, 0, .24);
  --a2-shadow-raised: 0 22px 60px rgba(0, 0, 0, .42);
  --a2-focus-ring: 0 0 0 3px rgba(var(--a2-accent-rgb), .28);
  --bg: var(--a2-bg-app);
  --bg-2: var(--a2-bg-titlebar);
  --panel: var(--a2-surface);
  --panel-2: var(--a2-surface-raised);
  --line: var(--a2-border);
  --line-strong: var(--a2-border-strong);
  --text: var(--a2-text-primary);
  --muted: var(--a2-text-secondary);
  --accent: var(--a2-accent);
  --accent-soft: rgba(var(--a2-accent-rgb), .1);
  --danger: var(--a2-red);
  --danger-soft: rgba(var(--a2-red-rgb), .12);
  --silver: var(--a2-text-bright);
  --gold: var(--a2-yellow);
}

/* Skill history */
.skill-history-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 38px 0 24px;
}

.skill-history-hero h1 {
  margin: 5px 0 8px;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -.045em;
}

.skill-history-hero p {
  margin: 0;
  color: var(--muted);
}

.skill-history-search {
  display: grid;
  gap: 7px;
  width: min(360px, 100%);
  color: #a9bac5;
  font-size: 12px;
  font-weight: 800;
}

.skill-history-search input {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #293b46;
  border-radius: 10px;
  color: var(--text);
  background: #0a1218;
}

.skill-history-search input:focus {
  border-color: var(--accent);
  outline: none;
}

.skill-history-jobs {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid #243640;
  border-radius: 14px;
  background: #081015;
}

.skill-history-jobs button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #91a5b0;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.skill-history-jobs button:hover,
.skill-history-jobs button.active {
  border-color: #2c7b75;
  color: #eafffc;
  background: rgba(36, 224, 199, .12);
}

.skill-history-summary {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.skill-history-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border: 1px solid #21323b;
  border-radius: 10px;
  background: #091218;
}

.skill-history-summary span {
  color: #7f949f;
  font-size: 12px;
}

.skill-history-summary strong {
  color: #c9f8f1;
  font-size: 13px;
}

.skill-history-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-bottom: 40px;
}

.skill-history-panel {
  min-width: 0;
  border: 1px solid #243640;
  border-radius: 14px;
  background: linear-gradient(160deg, #0c151b, #071015);
  overflow: hidden;
}

.skill-history-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid #1e3039;
}

.skill-history-panel > header div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-history-panel h2 {
  margin: 0;
  font-size: 16px;
}

.skill-history-panel small {
  color: #708791;
  font-size: 11px;
}

.skill-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a970ff;
  box-shadow: 0 0 10px rgba(169, 112, 255, .55);
}

.skill-history-dot.passive {
  background: #f0c85a;
  box-shadow: 0 0 10px rgba(240, 200, 90, .55);
}

.skill-history-dot.stigma {
  background: #ff5f6d;
  box-shadow: 0 0 10px rgba(255, 95, 109, .55);
}

.skill-history-list {
  display: grid;
  gap: 7px;
  padding: 10px;
}

.skill-history-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  border: 1px solid #1c3039;
  border-radius: 10px;
  color: var(--text);
  text-align: left;
  background: #0a151b;
  cursor: pointer;
}

.skill-history-card:hover {
  border-color: #34706e;
  background: #0d1b21;
  transform: translateY(-1px);
}

.skill-history-card > img {
  width: 42px;
  height: 42px;
  border: 1px solid #30464f;
  border-radius: 8px;
  object-fit: cover;
}

.skill-history-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.skill-history-card-copy strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
}

.skill-history-card-copy small {
  overflow: hidden;
  color: #758b96;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-history-arrow {
  color: #5f7a84;
  font-size: 23px;
}

.skill-history-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border: 1px solid #927122;
  border-radius: 999px;
  color: #ffd95f;
  background: #30260b;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.skill-history-empty-card {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 120px;
  padding: 20px;
  border: 1px dashed #29404a;
  border-radius: 10px;
  color: #b2c2c8;
  text-align: center;
}

.skill-history-empty-card span,
.skill-history-empty {
  color: #768c96;
  font-size: 12px;
}

.skill-history-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 32px));
  padding: 28px;
  border: 1px solid #34706e;
  border-radius: 15px;
  color: var(--text);
  background: #071116;
  overflow-y: auto;
}

.skill-history-dialog::backdrop {
  background: rgba(0, 5, 8, .82);
  backdrop-filter: blur(5px);
}

.skill-history-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  height: 34px;
  border: 1px solid #35505a;
  border-radius: 8px;
  color: #c1d3d8;
  background: #0b171d;
  font-size: 22px;
  cursor: pointer;
}

.skill-history-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 40px;
}

.skill-error-report-toggle {
  margin-left: auto;
  padding: 8px 11px;
  border: 1px solid #385563;
  border-radius: 8px;
  color: #b9d1d9;
  background: #0b171d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.skill-error-report-form {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #29434f;
  border-radius: 10px;
  background: #0b171d;
}

.skill-error-report-form[hidden] { display: none; }
.skill-error-report-form label { display: grid; gap: 8px; }
.skill-error-report-form label > span { color: #b7cbd2; font-size: 12px; font-weight: 800; }
.skill-error-report-form textarea {
  width: 100%;
  resize: vertical;
  padding: 10px;
  border: 1px solid #35505a;
  border-radius: 8px;
  color: #e8f1f3;
  background: #071116;
  line-height: 1.5;
}
.skill-error-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.skill-error-report-actions button {
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  color: #062024;
  background: var(--accent);
  font-weight: 900;
  cursor: pointer;
}
.skill-error-report-actions button.secondary {
  border: 1px solid #385563;
  color: #b9d1d9;
  background: transparent;
}
.skill-error-report-message { min-height: 18px; margin: 8px 0 0; color: #ffb877; font-size: 12px; }
.skill-error-report-message.success { color: #62dfb1; }

.skill-report-admin-notice {
  padding: 11px 14px;
  border: 1px solid rgba(74, 221, 170, .35);
  border-radius: 9px;
  color: #75e2ba;
  background: rgba(74, 221, 170, .08);
}
.skill-report-filter { display: flex; gap: 8px; margin: 0 0 18px; }
.skill-report-filter a {
  padding: 8px 12px;
  border: 1px solid #2b424d;
  border-radius: 8px;
  color: #9eb5be;
  text-decoration: none;
}
.skill-report-filter a.active { border-color: var(--accent); color: var(--accent); }
.skill-report-admin-list { display: grid; gap: 12px; }
.skill-report-admin-list article {
  padding: 16px;
  border: 1px solid #263b45;
  border-radius: 11px;
  background: #0a1419;
}
.skill-report-admin-list article > header { display: flex; justify-content: space-between; gap: 16px; }
.skill-report-admin-list article > header div { display: grid; gap: 4px; }
.skill-report-admin-list article > header span,
.skill-report-admin-list article > header time,
.skill-report-user { color: #8199a3; font-size: 12px; }
.skill-report-content { white-space: pre-wrap; color: #dce8eb; line-height: 1.65; }
.skill-report-admin-list form {
  display: grid;
  grid-template-columns: 150px minmax(240px, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.skill-report-admin-list form label { display: grid; gap: 5px; }
.skill-report-admin-list form label span { color: #8fa5ae; font-size: 11px; font-weight: 800; }
.skill-report-admin-list select,
.skill-report-admin-list textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #304650;
  border-radius: 7px;
  color: #e5eef0;
  background: #071116;
}
.skill-report-admin-list form button {
  min-height: 39px;
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  color: #062024;
  background: var(--accent);
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 760px) {
  .skill-history-detail-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .skill-error-report-toggle {
    margin-left: 0;
  }

  .skill-report-filter {
    flex-wrap: wrap;
  }

  .skill-report-admin-list article > header {
    flex-direction: column;
  }

  .skill-report-admin-list form {
    grid-template-columns: 1fr;
  }
}

.training-ranking-title { margin-bottom: 22px; }
.training-ranking-title p { max-width: 720px; color: var(--a2-text-secondary); }
.training-ranking-board { --job-color: var(--a2-accent); display: grid; gap: 18px; padding-bottom: 48px; }
.training-ranking-job-tabs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.training-ranking-job-tabs a { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-width: 0; min-height: 58px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--job-color, var(--a2-accent)) 20%, var(--a2-border)); border-radius: 10px; background: color-mix(in srgb, var(--job-color, var(--a2-accent)) 6%, #0b1016); color: var(--a2-text-secondary); transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.training-ranking-job-tabs a .a2-job-icon { grid-row: 1 / 3; width: 28px; height: 28px; }
.training-ranking-job-tabs a > span { min-width: 0; overflow: hidden; color: inherit; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.training-ranking-job-tabs a > small { color: var(--a2-text-secondary); font-size: 10px; line-height: 1; }
.training-ranking-job-tabs > a[data-job-key]:hover, .training-ranking-job-tabs > a[data-job-key]:focus-visible { border-color: color-mix(in srgb, var(--job-color) 70%, white 8%); color: var(--job-color); background: color-mix(in srgb, var(--job-color) 10%, #081017); transform: translateY(-1px); outline: none; }
.training-ranking-job-tabs > a[data-job-key].active { border-color: color-mix(in srgb, var(--job-color) 78%, white 8%); background: color-mix(in srgb, var(--job-color) 14%, #081017); color: var(--job-color); box-shadow: inset 0 -2px var(--job-color), 0 0 18px color-mix(in srgb, var(--job-color) 12%, transparent); }
.training-ranking-current { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; padding: 24px; border: 1px solid color-mix(in srgb, var(--job-color) 42%, var(--a2-border)); border-radius: 16px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--job-color) 15%, transparent), transparent 44%), linear-gradient(145deg, rgba(10, 18, 26, .98), rgba(5, 11, 17, .98)); box-shadow: inset 3px 0 var(--job-color); }
.training-ranking-current-job { display: flex; align-items: center; gap: 16px; min-width: 0; }
.training-ranking-current-job > .a2-job-icon { width: 56px; height: 56px; }
.training-ranking-current .eyebrow, .training-ranking-results .eyebrow, .training-ranking-band-section .eyebrow { margin: 0 0 4px; color: var(--job-color); }
.training-ranking-current h2 { margin: 0; color: var(--a2-text-bright); font-size: clamp(23px, 3vw, 32px); letter-spacing: -.035em; }
.training-ranking-current-job p:last-child { margin: 6px 0 0; color: var(--a2-text-secondary); font-size: 13px; }
.training-ranking-count { display: grid; align-content: center; justify-items: end; min-width: 150px; padding-left: 22px; border-left: 1px solid var(--a2-border); }
.training-ranking-count > span { color: var(--a2-text-secondary); font-size: 12px; }
.training-ranking-count > strong { color: var(--job-color); font-size: 30px; line-height: 1.2; }
.training-ranking-count > strong small { margin-left: 3px; color: var(--a2-text-secondary); font-size: 12px; }
.training-ranking-band-section, .training-ranking-results { border: 1px solid var(--a2-border); border-radius: 16px; background: var(--a2-surface); }
.training-ranking-band-section { padding: 20px; }
.training-ranking-band-heading, .training-ranking-results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.training-ranking-band-heading h3, .training-ranking-results-heading h3 { margin: 0; color: var(--a2-text-bright); font-size: 20px; }
.training-ranking-band-heading > p, .training-ranking-results-heading > p { margin: 0; color: var(--a2-text-secondary); font-size: 12px; text-align: right; }
.training-ranking-band-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.training-ranking-band-tabs a { display: grid; place-items: center; min-height: 40px; padding: 6px 8px; border: 1px solid var(--a2-border); border-radius: 8px; background: var(--a2-surface-soft); color: var(--a2-text-secondary); font-size: 12px; font-weight: 800; }
.training-ranking-board .training-ranking-band-tabs > a:hover, .training-ranking-board .training-ranking-band-tabs > a:focus-visible, .training-ranking-board .training-ranking-band-tabs > a.active { border-color: var(--job-color); color: var(--job-color); outline: none; }
.training-ranking-board .training-ranking-band-tabs > a.active { background: color-mix(in srgb, var(--job-color) 12%, var(--a2-surface-soft)); box-shadow: inset 0 -2px var(--job-color); }
.training-ranking-results { overflow: hidden; }
.training-ranking-results-heading { margin: 0; padding: 20px 22px; border-bottom: 1px solid var(--a2-border); }
.training-ranking-results-tools { display: grid; justify-items: end; gap: 9px; }
.training-ranking-results-tools > p { margin: 0; color: var(--a2-text-secondary); font-size: 12px; text-align: right; }
.training-ranking-support-tabs { display: inline-grid; grid-template-columns: repeat(3, minmax(48px, 1fr)); gap: 4px; padding: 3px; border: 1px solid var(--a2-border); border-radius: 9px; background: var(--a2-surface-soft); }
.training-ranking-support-tabs a { display: grid; min-height: 30px; padding: 5px 10px; place-items: center; border-radius: 6px; color: var(--a2-text-secondary); font-size: 12px; font-weight: 800; }
.training-ranking-support-tabs a:hover, .training-ranking-support-tabs a:focus-visible, .training-ranking-support-tabs a.active { color: var(--job-color); outline: none; }
.training-ranking-support-tabs a.active { background: color-mix(in srgb, var(--job-color) 13%, var(--a2-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--job-color) 55%, var(--a2-border)); }
.training-ranking-table-wrap { overflow-x: auto; }
.training-ranking-table { width: 100%; min-width: 920px; border-collapse: collapse; white-space: nowrap; }
.training-ranking-table th, .training-ranking-table td { padding: 14px 16px; border-bottom: 1px solid var(--a2-border); text-align: right; }
.training-ranking-table th { color: var(--a2-text-secondary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.training-ranking-table th:nth-child(2), .training-ranking-table td:nth-child(2), .training-ranking-table th:first-child, .training-ranking-table td:first-child { text-align: left; }
.training-ranking-table tbody tr { transition: background .16s ease; }
.training-ranking-table tbody tr:hover { background: color-mix(in srgb, var(--job-color) 5%, transparent); }
.training-ranking-table tbody tr:last-child td { border-bottom: 0; }
.training-ranking-character { display: grid; gap: 2px; }
.training-ranking-character strong { color: var(--a2-text-bright); }
.training-ranking-table td small, .training-ranking-table time { color: var(--a2-text-secondary); font-size: 11px; }
.training-ranking-dps { color: var(--job-color); font-size: 15px; }
.training-ranking-detail-button { display: inline-grid; min-width: 52px; min-height: 32px; padding: 6px 11px; place-items: center; border: 1px solid color-mix(in srgb, var(--job-color) 48%, var(--a2-border)); border-radius: 8px; background: color-mix(in srgb, var(--job-color) 8%, var(--a2-surface-soft)); color: var(--a2-text-bright); font-size: 12px; font-weight: 800; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.training-ranking-detail-button:hover, .training-ranking-detail-button:focus-visible { border-color: var(--job-color); background: color-mix(in srgb, var(--job-color) 15%, var(--a2-surface-soft)); color: var(--job-color); outline: none; }
.training-rank-badge { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--a2-border); border-radius: 9px; background: var(--a2-surface-soft); color: var(--a2-text-secondary); font-weight: 900; }
.training-rank-badge.rank-1 { border-color: #cda84f; background: rgba(205, 168, 79, .14); color: #f2d173; }
.training-rank-badge.rank-2 { border-color: #8fa2b5; background: rgba(143, 162, 181, .13); color: #c7d1dc; }
.training-rank-badge.rank-3 { border-color: #b0774d; background: rgba(176, 119, 77, .13); color: #dba171; }
.training-support-state { display: inline-flex; padding: 4px 8px; border: 1px solid rgba(82, 211, 155, .25); border-radius: 999px; color: #65d9aa; background: rgba(82, 211, 155, .07); font-size: 11px; }
.training-support-state.with-support { border-color: rgba(255, 148, 98, .3); color: #ffad82; background: rgba(255, 148, 98, .08); }
.training-ranking-empty { display: grid; justify-items: center; gap: 8px; min-height: 250px; padding: 54px 24px; text-align: center; }
.training-ranking-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 4px; border: 1px solid color-mix(in srgb, var(--job-color) 32%, var(--a2-border)); border-radius: 22px; background: color-mix(in srgb, var(--job-color) 9%, var(--a2-surface-soft)); }
.training-ranking-empty-icon .a2-job-icon { width: 44px; height: 44px; }
.training-ranking-empty strong { color: var(--a2-text-bright); font-size: 17px; }
.training-ranking-empty p { max-width: 560px; margin: 0; color: var(--a2-text-secondary); font-size: 13px; line-height: 1.7; }
.training-detail-shell { --job-color: var(--a2-accent); position: relative; left: 50%; width: min(1520px, calc(100vw - 24px)); margin: 18px 0 50px; border: 1px solid color-mix(in srgb, var(--job-color) 34%, var(--a2-border)); border-radius: 15px; overflow: hidden; transform: translateX(-50%); background: #03090e; box-shadow: 0 24px 70px rgba(0, 0, 0, .42), inset 0 1px color-mix(in srgb, var(--job-color) 12%, transparent); }
.training-detail-hero { position: relative; min-height: 142px; padding: 26px 72px 18px 22px; overflow: hidden; background: radial-gradient(circle at 95% 0, color-mix(in srgb, var(--job-color) 10%, transparent), transparent 27%), linear-gradient(135deg, rgba(6, 16, 23, .98), rgba(3, 10, 15, .98)); }
.training-detail-identity { position: relative; z-index: 2; }
.training-detail-identity .eyebrow { margin: 0 0 4px; color: var(--job-color); }
.training-detail-name-row { display: flex; align-items: center; gap: 10px; }
.training-detail-name-row h1 { margin: 0; color: var(--a2-text-bright); font-size: 28px; line-height: 1.15; letter-spacing: -.04em; }
.training-detail-complete { padding: 4px 8px; border: 1px solid rgba(75, 216, 169, .28); border-radius: 999px; color: #55d8ab; background: rgba(75, 216, 169, .08); font-size: 10px; font-weight: 800; }
.training-detail-identity > p:not(.eyebrow) { margin: 7px 0 0; color: #87a5c1; font-size: 12px; }
.training-detail-identity .training-detail-target { color: color-mix(in srgb, var(--job-color) 78%, #71d9c9); }
.training-detail-watermark { position: absolute; top: -22px; right: 44px; display: grid; place-items: center; width: 170px; height: 170px; opacity: .1; pointer-events: none; }
.training-detail-watermark .a2-job-icon { width: 150px; height: 150px; }
.training-detail-close { position: absolute; z-index: 3; top: 14px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; color: #8ca0af; font-size: 24px; line-height: 1; }
.training-detail-close:hover, .training-detail-close:focus-visible { border-color: color-mix(in srgb, var(--job-color) 38%, var(--a2-border)); color: var(--job-color); background: color-mix(in srgb, var(--job-color) 8%, transparent); }
.training-detail-summary { display: grid; grid-template-columns: repeat(9, minmax(94px, 1fr)) minmax(128px, 1.25fr) minmax(158px, 1.5fr); gap: 6px; min-width: 1300px; padding: 0 22px 17px; overflow-x: auto; border-bottom: 1px solid color-mix(in srgb, var(--job-color) 30%, var(--a2-border)); }
.training-detail-summary article { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 38px; padding: 7px 9px; border: 1px solid #20303a; border-radius: 5px; background: rgba(5, 13, 19, .9); }
.training-detail-summary article > span { color: #7790a5; font-size: 9px; }
.training-detail-summary article > strong { color: #ecf3f8; font-size: 12px; white-space: nowrap; }
.training-detail-summary .metric-equipment, .training-detail-summary .metric-dps { color: #53d9ae; }
.training-detail-summary .metric-accuracy, .training-detail-skill-table .metric-accuracy { color: #18d7ff; }
.training-detail-summary .metric-critical, .training-detail-skill-table .metric-critical { color: #ff4650; }
.training-detail-summary .metric-back, .training-detail-skill-table .metric-back { color: #ffb000; }
.training-detail-summary .metric-hard, .training-detail-skill-table .metric-hard { color: #a96aff; }
.training-detail-summary .metric-perfect, .training-detail-skill-table .metric-perfect { color: #45df90; }
.training-detail-summary .metric-multi, .training-detail-skill-table .metric-multi { color: #20d7cf; }
.training-detail-summary .metric-damage { color: #ffd65c; font-size: 14px; }
.training-detail-workspace { padding: 10px 20px 20px; }
.training-detail-view-options { display: flex; justify-content: flex-end; margin-bottom: 7px; }
.training-detail-chain-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 9px; border: 1px solid #263641; border-radius: 999px; color: #8ba5bd; background: #081119; font-size: 10px; font-weight: 800; cursor: pointer; }
.training-detail-chain-toggle:has(input:checked) { border-color: color-mix(in srgb, var(--job-color) 62%, #2a3f48); color: var(--job-color); background: color-mix(in srgb, var(--job-color) 9%, #09131a); }
.training-detail-chain-toggle:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.training-detail-chain-toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--job-color); }
.training-detail-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.training-detail-tabs > button { min-height: 36px; padding: 7px 12px; border: 1px solid #263641; border-radius: 5px; background: #081119; color: #8ba5bd; font: inherit; font-size: 12px; font-weight: 800; text-align: left; cursor: pointer; }
.training-detail-tabs > button small { margin-left: 5px; color: #627a8d; font-size: 9px; }
.training-detail-shell .training-detail-tabs > button:hover, .training-detail-shell .training-detail-tabs > button:focus-visible, .training-detail-shell .training-detail-tabs > button.active { border-color: color-mix(in srgb, var(--job-color) 62%, #2a3f48); color: var(--job-color); background: color-mix(in srgb, var(--job-color) 9%, #09131a); }
.training-detail-shell .training-detail-tabs > button.active { box-shadow: inset 0 -2px var(--job-color); }
.training-timeline { overflow: hidden; border: 1px solid #1d2b34; border-radius: 9px; background: #02080c; }
.training-timeline-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 20px 15px; border-bottom: 1px solid #17262e; background: linear-gradient(120deg, color-mix(in srgb, var(--job-color) 7%, #071017), #050c11 64%); }
.training-timeline-header .eyebrow { margin: 0 0 3px; color: var(--job-color); font-size: 9px; }
.training-timeline-header h2 { margin: 0; color: #f1f6f8; font-size: 19px; letter-spacing: -.02em; }
.training-timeline-header > div:first-child > p:last-child { margin: 5px 0 0; color: #7991a2; font-size: 10px; }
.training-timeline-peak { display: grid; grid-template-columns: auto auto; align-items: end; gap: 1px 8px; min-width: 160px; text-align: right; }
.training-timeline-peak span { align-self: center; color: #7890a1; font-size: 9px; }
.training-timeline-peak strong { color: var(--job-color); font-size: 20px; line-height: 1; }
.training-timeline-peak small { grid-column: 1 / -1; color: #607a8c; font-size: 8px; }
.training-timeline-chart-scroll { overflow-x: auto; scrollbar-color: color-mix(in srgb, var(--job-color) 35%, #20313a) #071016; }
.training-timeline-chart-stage { min-width: 760px; padding: 8px 12px 0; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--job-color) 5%, transparent), transparent 46%), #03090e; }
.training-timeline-chart { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 350; }
.training-timeline-grid line { stroke: #17242c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.training-timeline-grid line:nth-of-type(n + 6) { stroke-dasharray: 3 7; }
.training-timeline-grid text { fill: #627b8d; font-size: 9px; font-weight: 700; }
.training-timeline-chart stop { stop-color: var(--job-color); }
.training-timeline-area { fill: url(#training-timeline-area-gradient); }
.training-timeline-line { fill: none; stroke: var(--job-color); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--job-color) 42%, transparent)); }
.training-timeline-buff-window { fill: var(--job-color); opacity: .13; }
.training-timeline-series-0 { --timeline-series-color: #f2ad55; }
.training-timeline-series-1 { --timeline-series-color: #45d7d0; }
.training-timeline-series-2 { --timeline-series-color: #a98cff; }
.training-timeline-damage-bar { fill: color-mix(in srgb, var(--timeline-series-color, var(--job-color)) 58%, transparent); stroke: color-mix(in srgb, var(--timeline-series-color, var(--job-color)) 82%, transparent); stroke-width: .7; rx: 1.5px; vector-effect: non-scaling-stroke; }
.training-timeline-use-marker { cursor: pointer; }
.training-timeline-marker-hit-area { fill: transparent; stroke: transparent; stroke-width: 1.4; vector-effect: non-scaling-stroke; pointer-events: all; transition: fill .14s ease, stroke .14s ease, filter .14s ease; }
.training-timeline-marker-shape { fill: #03090e; stroke: #ffd75d; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255, 213, 84, .72)); pointer-events: none; transform-box: fill-box; transform-origin: center; transition: transform .14s ease, filter .14s ease; }
.training-timeline-use-marker.is-perfect .training-timeline-marker-shape { fill: #ffd75d; }
.training-timeline-use-marker.is-hard .training-timeline-marker-shape { stroke: #ff4257; filter: drop-shadow(0 0 5px rgba(255, 66, 87, .82)); }
.training-timeline-use-marker .training-timeline-marker-shape-small { stroke-width: 1.3; }
.training-timeline-use-marker:hover .training-timeline-marker-hit-area,
.training-timeline-use-marker:focus-visible .training-timeline-marker-hit-area,
.training-timeline-use-marker.active .training-timeline-marker-hit-area { fill: rgba(255, 215, 93, .13); stroke: color-mix(in srgb, var(--job-color) 72%, #fff); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--job-color) 72%, transparent)); }
.training-timeline-use-marker:hover .training-timeline-marker-shape,
.training-timeline-use-marker:focus-visible .training-timeline-marker-shape,
.training-timeline-use-marker.active .training-timeline-marker-shape { filter: drop-shadow(0 0 9px rgba(255, 230, 126, .98)); transform: scale(1.28); }
.training-timeline-use-marker:focus { outline: none; }
.training-timeline-judgement-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 5px 16px 11px; color: #6f8798; font-size: 9px; }
.training-timeline-judgement-legend span { display: inline-flex; align-items: center; gap: 5px; }
.training-timeline-judgement-legend i { position: relative; display: inline-block; width: 10px; height: 10px; border: 1.5px solid #ffd75d; border-radius: 50%; background: #03090e; }
.training-timeline-judgement-legend i.perfect { background: #ffd75d; }
.training-timeline-judgement-legend i.critical { border: 0; border-radius: 0; background: #ffd75d; clip-path: polygon(50% 0, 61% 31%, 85% 15%, 69% 39%, 100% 50%, 69% 61%, 85% 85%, 61% 69%, 50% 100%, 39% 69%, 15% 85%, 31% 61%, 0 50%, 31% 39%, 15% 15%, 39% 31%); }
.training-timeline-judgement-legend i.critical:after { content: ""; position: absolute; inset: 2px; background: #03090e; clip-path: inherit; }
.training-timeline-judgement-legend i.multi:after { content: ""; position: absolute; left: -4px; top: -4px; width: 4px; height: 4px; border: 1px solid #ffd75d; border-radius: 50%; background: #03090e; }
.training-timeline-judgement-legend i.hard { border-color: #ff4257; }
.training-timeline-point-tooltip { position: fixed; z-index: 2000; width: min(260px, calc(100vw - 20px)); padding: 13px; border: 1px solid color-mix(in srgb, var(--job-color, #39d7c9) 45%, #2a3943); border-radius: 10px; color: #dce8ed; background: linear-gradient(145deg, rgba(11, 24, 30, .98), rgba(4, 11, 16, .99)); box-shadow: 0 16px 40px rgba(0, 0, 0, .52), 0 0 20px color-mix(in srgb, var(--job-color, #39d7c9) 10%, transparent); }
.training-timeline-point-tooltip[hidden] { display: none; }
.training-timeline-point-tooltip header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #1d2d36; }
.training-timeline-point-tooltip header > div { display: grid; min-width: 0; gap: 2px; }
.training-timeline-point-tooltip header span,
.training-timeline-point-tooltip section > span { color: var(--job-color, #39d7c9); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.training-timeline-point-tooltip header strong { overflow: hidden; color: #eef6f8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.training-timeline-point-tooltip header b { flex: 0 0 auto; color: #8ca5b4; font-size: 10px; }
.training-timeline-point-tooltip > p { display: flex; align-items: center; justify-content: space-between; margin: 9px 0; color: #7f96a5; font-size: 9px; }
.training-timeline-point-tooltip > p strong { color: #ffd75d; font-size: 15px; }
.training-timeline-point-tooltip section { display: grid; gap: 6px; }
.training-timeline-point-tooltip ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.training-timeline-point-tooltip li { padding: 3px 7px; border: 1px solid #2a3943; border-radius: 999px; color: #8297a5; background: #081218; font-size: 8px; }
.training-timeline-point-tooltip li.critical { border-color: rgba(255, 70, 80, .45); color: #ff6972; }
.training-timeline-point-tooltip li.perfect { border-color: rgba(69, 223, 144, .45); color: #58e6a0; }
.training-timeline-point-tooltip li.hard { border-color: rgba(255, 66, 87, .52); color: #ff6879; }
.training-timeline-point-tooltip li.front { border-color: rgba(126, 196, 255, .42); color: #9ad2ff; }
.training-timeline-point-tooltip li.back { border-color: rgba(255, 176, 0, .44); color: #ffc24a; }
.training-timeline-point-tooltip li.dot { border-color: rgba(169, 106, 255, .43); color: #b98bff; }
.training-timeline-point-tooltip li.multi { border-color: rgba(32, 215, 207, .43); color: #41ddd6; }
.training-timeline-picker { display: grid; gap: 9px; padding: 0 14px 13px; }
.training-timeline-picker > section { min-width: 0; overflow: hidden; border: 1px solid #182831; border-radius: 8px; background: #040c11; }
.training-timeline-picker > section > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 10px 12px 8px; border-bottom: 1px solid #14232b; }
.training-timeline-picker > section > header span { color: var(--job-color); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.training-timeline-picker > section > header h3 { margin: 1px 0 0; color: #dce8ed; font-size: 12px; }
.training-timeline-picker > section > header p { margin: 0; color: #60798b; font-size: 9px; text-align: right; }
.training-timeline-options { display: flex; gap: 7px; padding: 9px 10px 10px; overflow-x: auto; scrollbar-color: color-mix(in srgb, var(--job-color) 30%, #20313a) #071016; }
.training-timeline-skill-options, .training-timeline-buff-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); overflow: visible; }
.training-timeline-options button { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; flex: 0 0 112px; min-width: 0; gap: 1px 7px; padding: 7px; border: 1px solid #21333d; border-radius: 7px; background: #071117; color: #91a8b6; text-align: left; cursor: pointer; }
.training-timeline-options button:hover, .training-timeline-options button:focus-visible { border-color: color-mix(in srgb, var(--job-color) 55%, #263a44); color: #dcebef; outline: none; }
.training-timeline-options button.active { border-color: var(--job-color); background: color-mix(in srgb, var(--job-color) 10%, #071117); box-shadow: inset 0 -2px var(--job-color), 0 0 12px color-mix(in srgb, var(--job-color) 9%, transparent); }
.training-timeline-skill-options button.active[class*="training-timeline-series-"] { border-color: var(--timeline-series-color); background: color-mix(in srgb, var(--timeline-series-color) 11%, #071117); box-shadow: inset 0 -2px var(--timeline-series-color), 0 0 12px color-mix(in srgb, var(--timeline-series-color) 10%, transparent); }
.training-timeline-options button img, .training-timeline-options button > i { grid-row: 1 / 3; width: 34px; height: 34px; border: 1px solid #263943; border-radius: 7px; object-fit: cover; background: #020608; }
.training-timeline-options button > i { display: grid; place-items: center; color: #6d8797; font-size: 10px; font-style: normal; }
.training-timeline-options button span { min-width: 0; overflow: hidden; color: #dce7eb; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.training-timeline-options button small { color: #687f8f; font-size: 8px; }
.training-timeline-options button.no-windows::after { position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #687681; content: ''; }
.training-timeline-options button.no-windows:not(.active) { opacity: .7; }
.training-timeline-option-empty { padding: 18px; color: #667f8f; font-size: 10px; text-align: center; }
.training-timeline-status { margin: 0; padding: 10px 14px; border-top: 1px solid #16252d; color: #7590a1; background: #050c11; font-size: 10px; text-align: center; }
.training-detail-workspace [data-chain-view][hidden] { display: none !important; }
.training-detail-panel[hidden] { display: none; }

/* Character information */
.character-app, .character-workspace { display: grid; gap: 14px; }
.character-search-panel, .character-section, .character-profile-hero { border: 1px solid var(--a2-border, #1c313b); border-radius: 14px; background: rgba(4, 13, 18, .94); }
.character-search-panel { padding: 18px; }
.character-search-panel > header { margin-bottom: 14px; }
.character-search-panel h2, .character-section h3 { margin: 3px 0; color: #edf6f8; }
.character-search-panel p { margin: 0; color: #78909c; }
.character-workspace[hidden] { display: none; }
.character-profile-hero { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; border-color: color-mix(in srgb, var(--job-color, #39d7c9) 38%, #1c313b); background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--job-color, #39d7c9) 12%, transparent), transparent 42%), #061117; }
.character-profile-hero > :not(.character-hero-job-icon) { position: relative; z-index: 1; }
.character-profile-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.character-profile-identity > img { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; }
.character-profile-identity h2 { margin: 3px 0; color: var(--job-color, #eef7f8); font-size: 28px; }
.character-profile-hero .character-hero-job-icon { position: absolute; z-index: 0; top: 50%; right: 190px; width: 308px; height: 308px; transform: translateY(-50%); opacity: .1; background-color: var(--job-color, #39d7c9); pointer-events: none; }
.character-profile-identity p, .character-profile-identity strong { display: block; margin: 2px 0 0; color: #8ea5b0; }
.character-profile-identity strong { color: #d4b867; font-size: 12px; }
.character-power { display: grid; justify-items: end; gap: 3px; text-align: right; }
.character-power > span, .character-power small { color: #77919e; font-size: 10px; }
.character-power > strong { color: var(--job-color, #65ddd2); font-size: 30px; font-variant-numeric: tabular-nums; }
.character-power-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.character-power-actions .secondary { margin: 0; }
.character-section-nav { display: flex; gap: 6px; overflow-x: auto; }
.character-section-nav a { padding: 8px 13px; border: 1px solid #1c313b; border-radius: 999px; color: #9bb0ba; background: #071219; font-size: 11px; white-space: nowrap; }
.character-section { overflow: hidden; scroll-margin-top: 84px; }
.character-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid #152832; }
.character-section > header > span { color: var(--job-color, #58d6cc); font-weight: 800; }
.character-section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.character-section-actions .secondary { padding: 7px 10px; font-size: 10px; }
#character-skills > header > div:first-child { flex: 0 0 auto; }
#character-skills > header h3 { white-space: nowrap; }
.character-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 14px; }
.character-stat-group { padding: 14px; border-bottom: 1px solid #14262f; }
.character-stat-group:last-child { border-bottom: 0; }
.character-stat-group > h4 { margin: 0 0 10px; color: #dce8ec; font-size: 13px; }
.character-stat-group .character-stat-grid { padding: 0; }
#character-main-stat-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#character-god-stat-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.character-stat-grid article { min-height: 92px; padding: 12px; border: 1px solid #192d37; border-radius: 10px; background: #08151b; }
.character-stat-grid span, .character-stat-grid small { display: block; color: #78909b; font-size: 10px; line-height: 1.5; }
.character-stat-grid strong { display: block; margin: 3px 0; color: #edf6f8; font-size: 20px; }
.character-title-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.character-title-grid article { padding: 13px; border: 1px solid #26313a; border-radius: 10px; background: #091319; }
.character-title-grid small, .character-title-grid strong, .character-title-grid span { display: block; }
.character-title-grid small { color: #c7a95b; font-size: 9px; }
.character-title-grid strong { margin: 4px 0 7px; color: #eef5f7; }
.character-title-grid span { color: #8da1aa; font-size: 12px; line-height: 1.65; }
.character-item-grid, .character-petwing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 14px; }
.character-equipment-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.character-equipment-column { min-width: 0; padding: 14px; border-right: 1px solid #14262f; }
.character-equipment-column:last-child { border-right: 0; }
.character-equipment-column > h4 { margin: 0 0 10px; color: #dce8ec; font-size: 13px; }
.character-equipment-column > h5 { margin: 14px 0 8px; color: #7f98a3; font-size: 10px; }
.character-equipment-column > h4 + h5 { margin-top: 0; }
.character-equipment-column > h4.character-equipment-secondary-title { margin-top: 18px; padding-top: 14px; border-top: 1px solid #14262f; }
.character-equipment-column .character-item-grid, .character-equipment-column .character-petwing-grid { grid-template-columns: 1fr; padding: 0; }
.character-petwing-grid { grid-template-columns: 1fr; }
.character-magic-stone-list { display: grid; gap: 7px; }
.character-magic-stone-list article { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 35px; padding: 8px 10px; border: 1px solid #1b303a; border-radius: 9px; background: #071319; }
.character-magic-stone-list strong { overflow: hidden; color: #f1f5f6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.character-magic-stone-list article > span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.character-magic-stone-list small { color: #6f8792; font-size: 9px; }
.character-magic-stone-list b { color: #f1f5f6; font-size: 12px; font-variant-numeric: tabular-nums; }
.character-magic-stone-list article.tone-damage strong, .character-magic-stone-list article.tone-damage b { color: #f3c94f; }
.character-magic-stone-list article.tone-attack strong, .character-magic-stone-list article.tone-attack b { color: #63bdf5; }
.character-item-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px; border: 1px solid #1b303a; border-radius: 10px; background: #071319; }
.character-item-card:is(button) { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.character-item-card:is(button):hover, .character-item-card:is(button):focus-visible { border-color: color-mix(in srgb, var(--job-color, #39d7c9) 48%, #1b303a); background: #0a1920; transform: translateY(-1px); }
.character-item-icon { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.character-item-icon img, .character-item-icon > i { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.character-item-icon > i { display: grid; place-items: center; color: #516975; background: #101f26; font-style: normal; }
.character-item-icon > b { position: absolute; z-index: 1; right: -3px; bottom: -3px; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px #001018; }
.character-item-icon > b.enchant { min-width: 25px; padding: 3px 4px; border-radius: 5px 0 7px 0; background: rgba(2, 15, 21, .88); text-align: center; }
.character-item-icon > b.exceed { display: grid; width: 19px; height: 19px; place-items: center; right: -2px; bottom: -2px; }
.character-item-icon > b.exceed::before { position: absolute; z-index: -1; inset: 1px; border: 1px solid #78eaff; background: linear-gradient(135deg, #119ac5, #075782); box-shadow: 0 0 5px rgba(31, 202, 242, .65); content: ''; transform: rotate(45deg); }
.character-item-card div { display: grid; min-width: 0; gap: 2px; }
.character-item-card small, .character-item-card span { color: #728995; font-size: 9px; }
.character-item-card strong { overflow: hidden; color: #e7f0f3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.character-item-detail-label { flex: 0 0 auto; margin-left: auto; color: #718a96; font-size: 9px; font-weight: 800; }
.character-item-card:is(button):hover .character-item-detail-label, .character-item-card:is(button):focus-visible .character-item-detail-label { color: var(--job-color, #63dcd1); }
.character-item-card.grade-epic { border-color: rgba(201, 76, 255, .32); }
.character-item-card.grade-unique { border-color: rgba(255, 190, 58, .34); }
.character-skill-group { padding: 14px; border-bottom: 1px solid #14262f; }
.character-skill-group:last-child { border-bottom: 0; }
.character-skill-group h4 { display: flex; gap: 8px; margin: 0 0 9px; color: #dce8ec; }
.character-skill-group h4 small { color: #718894; font-weight: 500; }
.character-skill-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.character-skill-grid article { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid #172b34; border-radius: 9px; background: #071218; }
.character-skill-grid article.over-level { border-color: #f3c94f; background: rgba(243, 201, 79, .055); box-shadow: inset 0 0 0 1px rgba(243, 201, 79, .08); }
.character-skill-grid img, .character-skill-grid i { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; }
.character-skill-grid strong { overflow: hidden; color: #e8f0f2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.character-skill-grid article > strong { min-width: 0; }
.character-skill-grid article > b { flex: 0 0 auto; margin-left: auto; color: var(--job-color, #72dcd2); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.character-skill-grid article > b.over-level { color: #f3c94f; }
.character-devanion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.character-devanion-grid article { padding: 11px; border: 1px solid var(--board-color); border-radius: 10px; background: color-mix(in srgb, var(--board-color) 6%, #071319); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--board-color) 8%, transparent); }
.character-devanion-grid header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.character-devanion-grid strong { color: var(--board-color); font-size: 13px; }
.character-devanion-grid span { color: #748b96; font-size: 12px; }
.character-devanion-grid span b { color: #e6eff2; font: inherit; }
.character-devanion-grid small { color: var(--board-color); font-size: 10px; }
.character-devanion-grid article > div { overflow: hidden; height: 5px; margin: 9px 0 5px; border-radius: 999px; background: #14252d; }
.character-devanion-grid article > div i { display: block; height: 100%; background: var(--board-color); }
.character-empty { grid-column: 1 / -1; color: #718894; text-align: center; }
.character-item-detail-page { display: grid; gap: 14px; padding-bottom: 60px; }
.character-item-dialog { width: min(900px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 1px solid #29414c; border-radius: 16px; background: #030a0f; box-shadow: 0 24px 80px rgba(0, 0, 0, .7); }
.character-item-dialog::backdrop { background: rgba(0, 5, 8, .78); backdrop-filter: blur(5px); }
.character-item-dialog-close { position: absolute; z-index: 3; top: 9px; right: 10px; width: 34px; height: 34px; padding: 0; border: 1px solid #314752; border-radius: 50%; color: #c9d6db; background: rgba(4, 14, 19, .92); font-size: 21px; line-height: 1; }
.character-item-dialog iframe { display: block; width: 100%; height: min(690px, calc(100vh - 30px)); border: 0; background: #030a0f; }
.character-item-embed { margin: 0; min-width: 0; background: #030a0f; }
.character-item-embed main { width: auto; max-width: none; padding: 12px; }
.character-item-embed .character-item-detail-page { gap: 8px; padding-bottom: 0; }
.character-item-embed .character-item-detail-hero { gap: 12px; padding: 11px 14px; }
.character-item-embed .character-item-detail-hero > img { width: 58px; height: 58px; border-radius: 11px; }
.character-item-embed .character-item-detail-hero h1 { font-size: 21px; }
.character-item-embed .character-item-detail-hero p { font-size: 12px; }
.character-item-embed .eyebrow { font-size: 10px; }
.character-item-embed .character-item-detail-enhance span { font-size: 10px; }
.character-item-embed .character-item-detail-enhance strong { font-size: 21px; }
.character-item-embed .character-item-detail-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.character-item-embed .character-item-detail-columns > section > header { padding: 9px 11px; }
.character-item-embed .character-item-detail-columns h2 { font-size: 15px; }
.character-item-embed .character-item-detail-list { padding: 6px; }
.character-item-embed .character-item-detail-list article { min-height: 29px; padding: 4px 7px; }
.character-item-embed .character-item-detail-list article > strong { font-size: 11px; }
.character-item-embed .character-item-detail-list article > span { font-size: 12px; }
.character-item-embed .character-item-detail-list.icon-list img { width: 23px; height: 23px; }
.character-item-embed .character-item-detail-godstones { padding: 6px; }
.character-item-embed .character-item-detail-godstones article { gap: 7px; padding: 7px; }
.character-item-embed .character-item-detail-godstones img { width: 32px; height: 32px; }
.character-item-embed .character-item-detail-godstones p { margin: 4px 0 0; font-size: 10px; line-height: 1.45; }
.character-item-detail-hero { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #263b45; border-radius: 14px; background: #071319; }
.character-item-detail-hero.grade-epic { border-color: rgba(201, 76, 255, .42); }
.character-item-detail-hero.grade-unique { border-color: rgba(255, 190, 58, .44); }
.character-item-detail-hero > img { width: 78px; height: 78px; border-radius: 14px; object-fit: cover; }
.character-item-detail-hero h1 { margin: 3px 0; color: #edf5f7; font-size: 25px; }
.character-item-detail-hero p { margin: 0; color: #8197a2; }
.character-item-detail-enhance { display: grid; justify-items: end; gap: 2px; margin-left: auto; }
.character-item-detail-enhance span { color: #738a95; font-size: 9px; }
.character-item-detail-enhance strong { color: #6eddd3; font-size: 24px; }
.character-item-detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.character-item-detail-columns > section { overflow: hidden; border: 1px solid #1b303a; border-radius: 12px; background: #061117; }
.character-item-detail-columns > section > header { padding: 13px 15px; border-bottom: 1px solid #152832; }
.character-item-detail-columns h2 { margin: 3px 0 0; color: #e7f0f3; font-size: 16px; }
.character-item-detail-list { display: grid; gap: 1px; padding: 10px; }
.character-item-detail-list article { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 9px; border-radius: 7px; background: #09171d; }
.character-item-detail-list article > strong { color: #b9c9cf; font-size: 11px; }
.character-item-detail-list article > span { margin-left: auto; color: #e8f1f3; font-size: 12px; font-weight: 800; }
.character-item-detail-list article > span b { color: #62d9cf; }
.character-item-detail-list.icon-list img { width: 28px; height: 28px; border-radius: 6px; }
.character-item-detail-list > p, .character-item-detail-godstones > p { color: #718894; text-align: center; }
.character-item-detail-godstones { padding: 10px; }
.character-item-detail-godstones article { display: flex; gap: 10px; padding: 10px; border-radius: 8px; background: #09171d; }
.character-item-detail-godstones img { width: 42px; height: 42px; border-radius: 8px; }
.character-item-detail-godstones strong { color: #d9b85f; }
.character-item-detail-godstones p { color: #899da6; font-size: 10px; line-height: 1.6; white-space: pre-line; }
@media (max-width: 900px) { .character-stat-grid, #character-main-stat-list, #character-god-stat-list, .character-item-grid, .character-devanion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .character-equipment-columns { grid-template-columns: 1fr; } .character-equipment-column { border-right: 0; border-bottom: 1px solid #14262f; } .character-equipment-column:last-child { border-bottom: 0; } .character-equipment-column .character-item-grid, .character-equipment-column .character-petwing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .character-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .character-item-embed .character-item-detail-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .character-profile-hero, .character-item-detail-hero { align-items: flex-start; flex-direction: column; } .character-power, .character-item-detail-enhance { justify-items: start; margin-left: 0; text-align: left; } .character-title-grid, .character-petwing-grid, .character-item-detail-columns, .character-item-embed .character-item-detail-columns { grid-template-columns: 1fr; } .character-stat-grid, #character-main-stat-list, #character-god-stat-list, .character-item-grid, .character-equipment-column .character-item-grid, .character-equipment-column .character-petwing-grid, .character-devanion-grid { grid-template-columns: 1fr; } .character-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #character-skills > header { gap: 8px; padding-right: 12px; padding-left: 12px; } }
@media (max-width: 600px) { .character-profile-hero .character-hero-job-icon { top: 58%; right: -42px; width: 270px; height: 270px; opacity: .12; } }
.training-detail-table-viewport { max-height: 620px; overflow: auto; border: 1px solid #1d2b34; border-radius: 8px; background: #02080c; scrollbar-color: color-mix(in srgb, var(--job-color) 35%, #20313a) #071016; }
.training-detail-skill-table { width: 100%; min-width: 1360px; border-collapse: separate; border-spacing: 0; white-space: nowrap; }
.training-detail-skill-table th, .training-detail-skill-table td { height: 42px; padding: 5px 7px; border-bottom: 1px solid #14232b; color: #edf3f7; font-size: 11px; text-align: center; }
.training-detail-skill-table thead th { position: sticky; z-index: 3; top: 0; height: 44px; color: #8eafd0; background: #070f15; font-size: 9px; font-weight: 700; text-align: center !important; vertical-align: middle; }
.training-detail-skill-table thead th small { display: block; margin-top: 1px; color: #5f82a1; font-size: 8px; }
.training-detail-skill-table th:first-child, .training-detail-skill-table td:first-child { width: 210px; min-width: 210px; }
.training-detail-skill-table thead th:first-child { z-index: 4; background: #070f15; text-align: center; }
.training-detail-skill-table tbody tr { background: linear-gradient(90deg, color-mix(in srgb, var(--job-color) 26%, #071016) 0 var(--skill-damage-share, 0%), transparent var(--skill-damage-share, 0%) 100%); }
.training-detail-skill-table tbody tr:hover td { border-bottom-color: color-mix(in srgb, var(--job-color) 24%, #14232b); }
.training-detail-skill-table tbody tr:last-child td { border-bottom: 0; }
.training-detail-skill-name { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.training-detail-skill-name img { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #24343a; border-radius: 7px; object-fit: cover; background: #020507; }
.training-detail-skill-name strong { min-width: 0; overflow: hidden; color: #f2f6f8; font-size: 12px; text-overflow: ellipsis; }
.training-detail-traits { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 58px; }
.training-detail-traits i { display: block; width: 9px; height: 13px; border: 1px solid #26333a; border-radius: 3px; background: #071016; }
.training-detail-traits i.active { border-color: #dccb7b; background: linear-gradient(#f1dc81, #aa8e3c); box-shadow: 0 0 8px rgba(239, 211, 105, .45); }
.training-detail-skill-table .metric-dps { color: #18cced; }
.training-detail-damage strong { color: #ffd65c; }
.training-detail-damage small { margin-left: 4px; color: #f5c849; font-size: 9px; }
.training-detail-effect-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.training-detail-effect-group { min-width: 0; border: 1px solid #1d2d36; border-radius: 9px; overflow: hidden; background: #040b10; }
.training-detail-effect-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #1b2b33; }
.training-detail-effect-group > header .eyebrow { margin: 0; color: var(--job-color); font-size: 9px; }
.training-detail-effect-group > header h2 { margin: 2px 0 0; font-size: 16px; }
.training-detail-effect-group > header > strong { color: #7890a0; font-size: 11px; }
.training-detail-effect-list { max-height: 560px; overflow-y: auto; }
.training-detail-effect-list article { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #14222a; }
.training-detail-effect-list article:last-child { border-bottom: 0; }
.training-detail-effect-list img { width: 36px; height: 36px; border: 1px solid #263943; border-radius: 8px; background: #020507; }
.training-detail-effect-copy { display: grid; min-width: 0; gap: 3px; }
.training-detail-effect-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-detail-effect-copy small { color: #7690a0; font-size: 9px; }
.training-detail-effect-copy > span { height: 4px; overflow: hidden; border-radius: 999px; background: #15242c; }
.training-detail-effect-copy > span i { display: block; width: var(--training-uptime); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--job-color) 72%, #36d9aa), var(--job-color)); }
.training-detail-effect-list article > b { color: var(--job-color); font-size: 12px; }
.training-detail-effect-group.debuff .training-detail-effect-copy > span i { background: linear-gradient(90deg, #a75472, #f07886); }
.training-detail-effect-group.debuff .training-detail-effect-list article > b { color: #ef8491; }
.training-detail-log-viewport { max-height: 620px; }
.training-detail-log-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; white-space: nowrap; }
.training-detail-log-table th, .training-detail-log-table td { height: 42px; padding: 6px 12px; border-bottom: 1px solid #14232b; color: #dce7ed; font-size: 10px; text-align: right; }
.training-detail-log-table th { position: sticky; z-index: 2; top: 0; color: #83a5c0; background: #071016; text-align: center; }
.training-detail-log-table th:first-child, .training-detail-log-table td:first-child { text-align: center; }
.training-detail-log-table th:nth-child(2), .training-detail-log-table td:nth-child(2) { text-align: left; }
.training-detail-log-table th:nth-child(3), .training-detail-log-table td:nth-child(3) { text-align: right; }
.training-detail-log-table th:nth-child(4), .training-detail-log-table td:nth-child(4) { text-align: center; }
.training-detail-log-table .training-detail-skill-name img { width: 28px; height: 28px; }
.training-detail-log-table code { color: #86a1b4; font-size: 9px; }
.training-log-flags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.training-log-flags i { padding: 3px 6px; border: 1px solid #2a3943; border-radius: 999px; color: #8297a5; font-size: 8px; font-style: normal; }
.training-log-flags i.critical { border-color: rgba(255, 70, 80, .34); color: #ff6972; }
.training-log-flags i.perfect { border-color: rgba(69, 223, 144, .35); color: #58e6a0; }
.training-log-flags i.hard { border-color: rgba(169, 106, 255, .38); color: #bb8aff; }
.training-log-flags i.front { border-color: rgba(126, 196, 255, .34); color: #9ad2ff; }
.training-log-flags i.back { border-color: rgba(255, 176, 0, .36); color: #ffc24a; }
.training-log-flags i.dot { border-color: rgba(169, 106, 255, .35); color: #b98bff; }
.training-log-flags i.multi { border-color: rgba(32, 215, 207, .34); color: #41ddd6; }
.training-detail-empty { display: grid; min-height: 180px; padding: 32px; place-items: center; color: #748997; font-size: 12px; text-align: center; }
@media (max-width: 1000px) { .training-ranking-job-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .training-ranking-band-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .training-detail-effect-columns { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .training-ranking-results-tools { width: 100%; justify-items: start; } .training-ranking-results-tools > p { text-align: left; } }
@media (max-width: 700px) { .training-ranking-current, .training-ranking-band-heading, .training-ranking-results-heading { align-items: flex-start; flex-direction: column; } .training-ranking-count { justify-items: start; width: 100%; padding: 14px 0 0; border-top: 1px solid var(--a2-border); border-left: 0; } .training-ranking-band-heading > p, .training-ranking-results-heading > p { text-align: left; } .training-detail-shell { width: calc(100vw - 12px); margin-top: 8px; border-radius: 11px; } .training-detail-hero { min-height: 150px; padding: 22px 54px 16px 16px; } .training-detail-name-row { align-items: flex-start; flex-direction: column; gap: 6px; } .training-detail-watermark { right: 6px; width: 120px; height: 120px; }.training-detail-watermark .a2-job-icon { width: 108px; height: 108px; } .training-detail-summary { padding-inline: 14px; } .training-detail-workspace { padding: 8px 10px 12px; } .training-detail-tabs { display: flex; overflow-x: auto; } .training-detail-tabs > button { min-width: 150px; flex: 1 0 auto; } .training-timeline-header { align-items: flex-start; flex-direction: column; gap: 12px; padding: 15px; } .training-timeline-peak { justify-content: start; min-width: 0; text-align: left; } .training-timeline-chart-stage { min-width: 0; padding-inline: 4px; } .training-timeline-grid text { font-size: 20px; } .training-timeline-use-point { r: 7px; } .training-timeline-picker { padding-inline: 8px; } .training-timeline-picker > section > header { align-items: flex-start; flex-direction: column; gap: 5px; } .training-timeline-picker > section > header p { text-align: left; } }
@media (max-width: 560px) { .training-ranking-title { margin-bottom: 16px; } .training-ranking-board { gap: 12px; } .training-ranking-job-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .training-ranking-job-tabs a { min-height: 54px; padding: 7px 8px; } .training-ranking-current, .training-ranking-band-section { padding: 16px; } .training-ranking-current-job { align-items: flex-start; gap: 12px; } .training-ranking-current-job > .a2-job-icon { width: 44px; height: 44px; } .training-ranking-band-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .training-ranking-results-heading { padding: 16px; } }

.skill-history-detail-head img {
  width: 62px;
  height: 62px;
  border: 1px solid #365664;
  border-radius: 11px;
}

.skill-history-kicker {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.skill-history-detail-head h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 27px;
}

.skill-history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.skill-history-tags span {
  padding: 3px 7px;
  border: 1px solid #28414d;
  border-radius: 6px;
  color: #9fc0cd;
  font-size: 10px;
}

.skill-history-detail-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #21343d;
}

.skill-history-detail-block h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.skill-history-description {
  margin: 0;
  color: #dfe9ec;
  line-height: 1.8;
}

.skill-history-description .changes-with-level {
  padding: 1px 3px;
  color: #ffd75f;
  background: rgba(177, 127, 17, .3);
}

.skill-history-effect-list,
.skill-history-traits,
.skill-history-change-list {
  display: grid;
  gap: 7px;
}

.skill-history-effect-list > div,
.skill-history-traits > div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid #1d303a;
  border-radius: 8px;
  background: #0b171d;
  font-size: 12px;
}

.skill-history-effect-list span {
  color: var(--accent);
  font-weight: 800;
}

.skill-history-traits > div {
  grid-template-columns: 46px 1fr;
}

.skill-history-traits strong {
  color: #c894ff;
}

.skill-history-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid #20323b;
  border-radius: 9px;
  overflow: hidden;
}

.skill-history-specs div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-right: 1px solid #20323b;
  border-bottom: 1px solid #20323b;
}

.skill-history-specs dt {
  color: #7f96a1;
  font-size: 11px;
}

.skill-history-specs dd {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.skill-history-change-list article {
  padding: 13px;
  border: 1px solid #31444d;
  border-radius: 9px;
  background: #0c171d;
}

.skill-history-change-list article > header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.skill-history-change-list article > header strong {
  color: var(--accent);
  font-size: 12px;
}

.skill-history-change-list article > header span:not(.skill-history-new) {
  color: #8da2ab;
  font-size: 11px;
}

.skill-history-related-skill {
  display: flex;
  width: fit-content;
  margin: 0 0 9px;
  align-items: center;
  gap: 7px;
}

.skill-history-related-skill b {
  padding: 3px 7px;
  border: 1px solid rgba(47, 214, 207, .45);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(47, 214, 207, .1);
  font-size: 10px;
}

.skill-history-related-skill span {
  color: #d7e2e6;
  font-size: 12px;
  font-weight: 800;
}

.skill-history-official {
  color: #bdcbd0;
  font-size: 12px;
}

.skill-history-diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 9px;
}

.skill-history-diff pre {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border-radius: 7px;
  color: #d8e3e7;
  background: #101d23;
  white-space: pre-wrap;
}

.skill-history-diff .before {
  color: #d6929c;
  background: #24151a;
}

.skill-history-diff .after {
  color: #82ddc5;
  background: #10231f;
}

.skill-history-change-list a {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 11px;
}

@media (max-width: 980px) {
  .skill-history-jobs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .skill-history-columns {
    grid-template-columns: 1fr 1fr;
  }

  .skill-history-panel[data-category="stigma"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .skill-history-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .skill-history-jobs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .skill-history-summary {
    grid-template-columns: 1fr 1fr;
  }

  .skill-history-columns {
    grid-template-columns: 1fr;
  }

  .skill-history-panel[data-category="stigma"] {
    grid-column: auto;
  }

  .skill-history-dialog {
    padding: 22px 16px;
  }

  .skill-history-specs {
    grid-template-columns: 1fr;
  }

  .skill-history-diff {
    grid-template-columns: 1fr;
  }

  .skill-history-diff > span {
    transform: rotate(90deg);
    text-align: center;
  }
}

/* Full dungeon and boss catalog administration */
.catalog-summary.catalog-summary-full {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.catalog-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 22px;
}

.catalog-primary-actions form {
  margin: 0;
}

.catalog-primary-action {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 112px;
  padding: 20px 22px;
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    var(--panel);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.catalog-primary-action:hover {
  border-color: rgba(47, 214, 207, .48);
  background:
    linear-gradient(145deg, rgba(47, 214, 207, .1), rgba(255, 255, 255, .015)),
    var(--panel);
  transform: translateY(-1px);
}

.catalog-primary-action-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(47, 214, 207, .28);
  border-radius: 11px;
  color: #79e7df;
  background: rgba(47, 214, 207, .08);
  font-size: 25px;
  font-weight: 500;
}

.catalog-primary-action-copy {
  min-width: 0;
}

.catalog-primary-action-copy small,
.catalog-primary-action-copy > span {
  display: block;
  color: var(--muted);
}

.catalog-primary-action-copy small {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-primary-action-copy strong {
  display: block;
  margin-bottom: 6px;
  color: #edf7f8;
  font-size: 18px;
}

.catalog-primary-action-copy > span {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-primary-action-arrow {
  color: #5d7882;
  font-size: 20px;
}

.catalog-primary-action.publish.ready {
  border-color: rgba(240, 196, 108, .62);
  background: linear-gradient(145deg, rgba(72, 54, 18, .72), rgba(31, 27, 16, .92));
  box-shadow: inset 0 0 0 1px rgba(240, 196, 108, .08);
}

.catalog-primary-action.publish.ready .catalog-primary-action-icon {
  border-color: rgba(240, 196, 108, .38);
  color: #ffd978;
  background: rgba(240, 196, 108, .09);
}

.catalog-primary-action.publish.ready .catalog-primary-action-copy small,
.catalog-primary-action.publish.ready .catalog-primary-action-copy > span,
.catalog-primary-action.publish.ready .catalog-primary-action-arrow {
  color: #cfb77d;
}

.catalog-primary-action.publish.ready .catalog-primary-action-copy strong {
  color: #ffe29a;
}

.catalog-panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.catalog-panel-summary::-webkit-details-marker,
.catalog-dungeon-card > summary::-webkit-details-marker,
.catalog-boss-card > summary::-webkit-details-marker {
  display: none;
}

.catalog-panel-summary > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.catalog-panel-summary strong {
  color: #eef8f8;
  font-size: 18px;
}

.catalog-count-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid #29424b;
  border-radius: 999px;
  color: #9db3bb;
  background: #0a151a;
  font-size: 12px;
  font-weight: 800;
}

.catalog-proposal-panel[open] .catalog-panel-summary,
.catalog-create-panel[open] .catalog-panel-summary {
  border-bottom: 1px solid #22343d;
}

.catalog-proposal-panel .catalog-proposal-list {
  padding: 18px 22px 22px;
}

.catalog-create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 20px 22px 22px;
}

.catalog-create-grid > section {
  min-width: 0;
}

.catalog-create-grid h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.catalog-create-grid .catalog-entry-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: calc(100% - 30px);
}

.catalog-browser {
  margin-top: 18px;
}

.catalog-browser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #20323a;
}

.catalog-browser-head h2 {
  margin: 4px 0 5px;
}

.catalog-search-form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.catalog-search-form input[type="search"] {
  width: min(310px, 40vw);
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #30434d;
  border-radius: 8px;
  color: #e4eef0;
  background: #101b21;
}

.catalog-search-form label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: #9cafb7;
  font-size: 12px;
  white-space: nowrap;
}

.catalog-search-form button {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  color: #061113;
  background: #2fd6cf;
  font-weight: 900;
  cursor: pointer;
}

.catalog-category-tabs {
  display: flex;
  gap: 7px;
  padding: 16px 0 10px;
  overflow-x: auto;
}

.catalog-category-tabs a {
  flex: 0 0 auto;
  min-width: 70px;
  padding: 8px 12px;
  border: 1px solid #273a43;
  border-radius: 8px;
  color: #8fa5ae;
  background: #0a1419;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.catalog-category-tabs a:hover,
.catalog-category-tabs a.active {
  border-color: #2fd6cf;
  color: #2fe0d8;
  background: rgba(47, 214, 207, .08);
}

.catalog-category-tabs-counted a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.catalog-category-tabs-counted b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  color: #72ddd4;
  background: rgba(47, 214, 207, .1);
  font-size: 11px;
}

.catalog-category-tabs-counted a.unknown,
.catalog-category-tabs-counted a.unknown b {
  color: #ff9caf;
}

.catalog-category-tabs-counted a.unknown.active {
  border-color: rgba(255, 139, 160, .58);
  background: rgba(255, 139, 160, .1);
}

.catalog-category-tabs-two-lines {
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  grid-template-rows: repeat(2, auto);
  overflow-x: auto;
}

.catalog-category-tabs-fill {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  overflow-x: auto;
}

.catalog-category-tabs-fill a {
  width: 100%;
}

.catalog-filter-form {
  display: grid;
  grid-template-columns: 150px minmax(360px, 1fr) 88px 88px;
  align-items: end;
  gap: 10px;
  margin-bottom: 18px;
  padding: 15px;
  border: 1px solid #263a44;
  border-radius: 10px;
  background: #091217;
}

.catalog-filter-form label {
  display: grid;
  gap: 6px;
}

.catalog-filter-form label > span {
  color: #8da4ad;
  font-size: 11px;
  font-weight: 800;
}

.catalog-filter-form input,
.catalog-filter-form select {
  width: 100%;
  min-height: 41px;
  padding: 8px 10px;
  border: 1px solid #304650;
  border-radius: 8px;
  color: #e4eef1;
  background: #071015;
}

.catalog-filter-form button {
  width: 88px;
  min-height: 41px;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  color: #061719;
  background: #2fd6cf;
  font-weight: 900;
  cursor: pointer;
}

.catalog-filter-form .button {
  display: grid;
  place-items: center;
  min-height: 41px;
  padding-inline: 12px;
  white-space: nowrap;
}

.catalog-result-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: #839aa3;
  font-size: 12px;
}

.catalog-result-summary strong {
  color: #dce9ec;
  font-size: 13px;
}

.catalog-list-filters {
  display: flex;
  gap: 7px;
  margin-left: auto;
}

.catalog-list-filters button {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #2c414a;
  border-radius: 7px;
  color: #91a7af;
  background: #0b171d;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.catalog-list-filters button:hover,
.catalog-list-filters button[aria-pressed="true"] {
  border-color: #ff8ba0;
  color: #ff9caf;
  background: rgba(255, 139, 160, .1);
}

.catalog-summary .catalog-summary-warning {
  border-color: rgba(240, 196, 108, .62);
  background: linear-gradient(145deg, rgba(72, 54, 18, .72), rgba(31, 27, 16, .92));
  box-shadow: inset 0 0 0 1px rgba(240, 196, 108, .08);
}

.catalog-summary .catalog-summary-warning > span,
.catalog-summary .catalog-summary-warning > small {
  color: #dfbd72;
}

.catalog-summary .catalog-summary-warning > strong {
  color: #ffd978;
}

.catalog-bulk-save {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #2c5962;
  border-radius: 10px;
  background: rgba(8, 22, 27, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  color: #9cb2ba;
  font-size: 12px;
}

.catalog-bulk-save b {
  color: #e5f2f3;
}

.catalog-bulk-save button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 17px;
  border: 0;
  border-radius: 8px;
  color: #061113;
  background: #2fd6cf;
  font-weight: 900;
  cursor: pointer;
}

.catalog-bulk-save-bottom {
  position: static;
  margin: 16px 0 0;
}

.catalog-dungeon-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.catalog-dungeon-card[hidden],
.catalog-list-filter-empty[hidden] {
  display: none;
}

.catalog-dungeon-card {
  overflow: hidden;
  border: 1px solid #243740;
  border-radius: 11px;
  background: #091217;
}

.catalog-dungeon-card[open] {
  border-color: #32606a;
  box-shadow: 0 0 0 1px rgba(47, 214, 207, .06);
}

.catalog-dungeon-card > summary {
  display: grid;
  grid-template-columns: 42px 86px minmax(210px, 1fr) 82px 112px 88px 86px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.catalog-dungeon-card > summary:hover {
  background: rgba(47, 214, 207, .035);
}

.catalog-order-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #29404a;
  border-radius: 8px;
  color: #6d8791;
  background: #0d1a20;
  font-size: 12px;
  font-weight: 900;
}

.catalog-dungeon-card summary code,
.catalog-boss-card summary code,
.catalog-orphan-item code {
  color: #67cfff;
  font-size: 12px;
}

.catalog-dungeon-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.catalog-dungeon-title strong {
  overflow: hidden;
  color: #e9f3f4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-dungeon-title small,
.catalog-boss-count {
  color: #849ba4;
  font-size: 12px;
}

.catalog-boss-count b {
  color: #cddadd;
}

.catalog-list-state {
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 900;
}

.catalog-list-state.complete {
  color: #55dfb0;
  background: rgba(85, 223, 176, .1);
}

.catalog-list-state.incomplete {
  color: #ff8ba0;
  background: rgba(255, 139, 160, .1);
}

.catalog-dungeon-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px;
  border-top: 1px solid #22343d;
  background: #070e12;
}

.catalog-edit-section {
  min-width: 0;
}

.catalog-dungeon-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.catalog-dungeon-overview > .catalog-edit-section,
.catalog-linked-bosses {
  padding: 16px;
  border: 1px solid #20343c;
  border-radius: 11px;
  background: #091419;
}

.catalog-dungeon-info .catalog-entry-form.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: calc(100% - 34px);
}

.catalog-dungeon-background .catalog-background-editor {
  grid-template-columns: 180px minmax(0, 1fr);
  align-content: start;
  padding: 0;
  border: 0;
  background: transparent;
}

.catalog-dungeon-background .catalog-background-empty,
.catalog-dungeon-background .catalog-background-upload,
.catalog-dungeon-background .catalog-background-share,
.catalog-dungeon-background .catalog-background-remove {
  grid-column: 1 / -1;
}

.catalog-dungeon-background .catalog-background-remove {
  justify-self: start;
}

.catalog-linked-bosses {
  border-color: #29434d;
  background: #081217;
}

.catalog-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.catalog-section-title h3 {
  margin: 0;
  color: #e4eeee;
  font-size: 14px;
}

.catalog-section-title span {
  color: #78909a;
  font-size: 11px;
}

.catalog-section-title > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.catalog-boss-search {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.catalog-boss-search input {
  width: min(240px, 32vw);
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #30434d;
  border-radius: 8px;
  color: #e4eef0;
  background: #101b21;
}

.catalog-boss-search b {
  min-width: 34px;
  color: #71dcd6;
  font-size: 11px;
  text-align: right;
}

.catalog-boss-card[hidden],
.catalog-boss-search-empty[hidden] {
  display: none;
}

.catalog-dungeon-body .catalog-entry-form.compact,
.catalog-boss-card .catalog-entry-form.compact {
  margin: 0;
}

.catalog-background-editor {
  display: grid;
  grid-template-columns: 180px minmax(150px, .8fr) minmax(250px, 1.2fr) minmax(250px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #20343c;
  border-radius: 10px;
  background: #091419;
}

.catalog-background-preview {
  display: block;
  height: 105px;
  overflow: hidden;
  border: 1px solid #31505a;
  border-radius: 8px;
  background: #050a0d;
}

.catalog-background-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-background-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.catalog-background-meta strong {
  color: #5ce0ba;
}

.catalog-background-meta span,
.catalog-background-meta code {
  overflow: hidden;
  color: #8198a1;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-background-empty {
  display: grid;
  height: 105px;
  place-items: center;
  border: 1px dashed #30414a;
  border-radius: 8px;
  color: #71868f;
  font-size: 12px;
}

.catalog-background-upload,
.catalog-background-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}

.catalog-background-share-choice {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 6px 10px;
  align-items: center;
}

.catalog-background-share-choice > span {
  grid-column: 1 / -1;
  color: #8fa5ae;
  font-size: 12px;
  font-weight: 700;
}

.catalog-background-share-choice > small {
  overflow: hidden;
  color: #78909a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-background-share .catalog-background-picker-open {
  border: 1px solid #39717a;
  color: #83e3de;
  background: rgba(47, 214, 207, .08);
}

.catalog-background-upload label,
.catalog-background-share label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: #8fa5ae;
  font-size: 12px;
  font-weight: 700;
}

.catalog-background-upload input,
.catalog-background-share select {
  min-width: 0;
  min-height: 41px;
  padding: 8px;
  border: 1px solid #30434d;
  border-radius: 8px;
  color: #dce7e9;
  background: #101b21;
}

.catalog-background-upload button,
.catalog-background-share button,
.catalog-background-remove button {
  min-height: 41px;
  padding: 8px 13px;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.catalog-background-upload button,
.catalog-background-share button {
  border: 0;
  color: #061113;
  background: #2fd6cf;
}

.catalog-background-share button:disabled,
.catalog-background-share select:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.catalog-background-remove button {
  border: 1px solid rgba(255, 111, 135, .35);
  color: #ff8297;
  background: rgba(255, 111, 135, .06);
}

.catalog-background-picker-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #31545e;
  border-radius: 14px;
  color: #e4eef0;
  background: #081116;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
}

.catalog-background-picker-dialog::backdrop {
  background: rgba(2, 7, 10, .78);
  backdrop-filter: blur(4px);
}

.catalog-background-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #22363f;
  background: #081116;
}

.catalog-background-picker-head h2 {
  margin: 4px 0;
}

.catalog-background-picker-head p {
  margin: 0;
  color: #849ba4;
  font-size: 12px;
}

.catalog-background-picker-close {
  width: 38px;
  height: 38px;
  border: 1px solid #30454e;
  border-radius: 9px;
  color: #a9bbc1;
  background: #101c22;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.catalog-background-picker-body {
  display: flex;
  max-height: calc(100vh - 180px);
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
}

.catalog-background-picker-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #8fa5ae;
  font-size: 12px;
  font-weight: 800;
}

.catalog-background-picker-search input {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #30434d;
  border-radius: 8px;
  color: #e4eef0;
  background: #101b21;
}

.catalog-background-picker-search b {
  min-width: 42px;
  color: #71dcd6;
  text-align: right;
}

.catalog-background-picker-list {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.catalog-background-picker-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 9px;
  border: 1px solid #243943;
  border-radius: 10px;
  color: #dce8ea;
  background: #0b171c;
  text-align: left;
  cursor: pointer;
}

.catalog-background-picker-item:hover {
  border-color: #3b747c;
  background: #0d1d22;
}

.catalog-background-picker-item img {
  display: block;
  width: 112px;
  height: 64px;
  object-fit: cover;
  border-radius: 7px;
  background: #050a0d;
}

.catalog-background-picker-item > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.catalog-background-picker-item strong,
.catalog-background-picker-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-background-picker-item small {
  color: #8299a3;
}

.catalog-background-picker-item em {
  padding: 7px 9px;
  border-radius: 7px;
  color: #71dcd6;
  background: rgba(47, 214, 207, .08);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.catalog-background-picker-item.is-current {
  cursor: default;
  opacity: .5;
}

.catalog-background-picker-empty[hidden] {
  display: none;
}

.catalog-boss-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.catalog-boss-card {
  overflow: hidden;
  border: 1px solid #20323a;
  border-radius: 9px;
  background: #0b151a;
}

.catalog-boss-card[open] {
  border-color: #31535c;
}

.catalog-boss-card > summary {
  display: grid;
  grid-template-columns: 42px 86px minmax(170px, 1fr) minmax(120px, auto) 76px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.catalog-boss-card > summary:hover {
  background: rgba(103, 207, 255, .035);
}

.catalog-boss-card.is-inactive {
  border-color: #252d31;
  background: #101518;
}

.catalog-boss-card.is-inactive > summary,
.catalog-boss-card.is-inactive > summary strong,
.catalog-boss-card.is-inactive > summary code,
.catalog-boss-card.is-inactive > summary > span:not(.catalog-state) {
  color: #667178;
}

.catalog-boss-card.is-inactive .catalog-order-index {
  border-color: #293136;
  color: #59646a;
  background: #141a1d;
}

.catalog-boss-card > summary > span:not(.catalog-order-index, .catalog-state) {
  color: #8097a0;
  font-size: 11px;
  text-align: right;
}

.catalog-boss-card .catalog-entry-form {
  border: 0;
  border-top: 1px solid #20323a;
  border-radius: 0;
  background: #081116;
}

.catalog-create-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid #31545e;
  border-radius: 14px;
  color: #e4eef0;
  background: #081116;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
}

.catalog-create-dialog::backdrop {
  background: rgba(2, 7, 10, .78);
  backdrop-filter: blur(4px);
}

.catalog-create-dialog-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #22363f;
  background: rgba(8, 17, 22, .97);
}

.catalog-create-dialog-head h2 {
  margin: 4px 0;
}

.catalog-create-dialog-head p {
  margin: 0;
  color: #849ba4;
  font-size: 12px;
}

.catalog-create-close {
  width: 38px;
  height: 38px;
  border: 1px solid #30454e;
  border-radius: 9px;
  color: #a9bbc1;
  background: #101c22;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.catalog-create-dialog .catalog-create-grid {
  padding-top: 18px;
}

.catalog-create-dialog .catalog-entry-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalog-create-result {
  min-height: 46px;
  margin: 0 22px 22px;
  padding: 13px 15px;
  border: 1px solid #263a43;
  border-radius: 9px;
  color: #8fa5ae;
  background: #0b171c;
  font-size: 13px;
}

.catalog-create-result:empty {
  display: none;
}

.catalog-create-result.success {
  border-color: rgba(85, 223, 176, .35);
  color: #65e2b6;
  background: rgba(85, 223, 176, .07);
}

.catalog-create-result.error {
  border-color: rgba(255, 111, 135, .35);
  color: #ff8ba0;
  background: rgba(255, 111, 135, .07);
}

.catalog-create-form button:disabled {
  cursor: wait;
  opacity: .55;
}

.catalog-orphan-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 130, 151, .22);
  border-radius: 10px;
  color: #ff9aaa;
  background: rgba(255, 111, 135, .035);
}

.catalog-orphan-panel > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.catalog-orphan-panel .catalog-boss-list {
  margin-top: 12px;
}

.catalog-orphan-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #93a8b0;
  background: #091217;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .catalog-summary.catalog-summary-full {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-create-grid {
    grid-template-columns: 1fr;
  }

  .catalog-dungeon-overview {
    grid-template-columns: 1fr;
  }

  .catalog-dungeon-background .catalog-background-editor {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .catalog-background-editor {
    grid-template-columns: 160px minmax(130px, 1fr) minmax(240px, 1.4fr);
  }

  .catalog-background-share {
    grid-column: 2 / 4;
  }

  .catalog-background-remove {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .catalog-dungeon-info .catalog-entry-form.compact,
  .catalog-dungeon-background .catalog-background-editor {
    grid-template-columns: 1fr;
  }

  .catalog-dungeon-background .catalog-background-meta,
  .catalog-dungeon-background .catalog-background-empty,
  .catalog-dungeon-background .catalog-background-upload,
  .catalog-dungeon-background .catalog-background-share,
  .catalog-dungeon-background .catalog-background-remove {
    grid-column: auto;
  }

  .catalog-background-editor {
    grid-template-columns: 1fr;
  }

  .catalog-background-preview,
  .catalog-background-empty {
    height: 180px;
  }

  .catalog-background-remove {
    grid-column: auto;
    justify-self: start;
  }

  .catalog-background-share {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  .catalog-browser-head,
  .catalog-section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .catalog-search-form {
    width: 100%;
    justify-content: flex-start;
  }

  .catalog-search-form input[type="search"] {
    width: 100%;
  }

  .catalog-result-summary {
    flex-wrap: wrap;
  }

  .catalog-list-filters {
    width: 100%;
    margin-left: 0;
  }

  .catalog-dungeon-card > summary {
    grid-template-columns: 38px 78px minmax(150px, 1fr) 72px 102px 80px;
  }

  .catalog-dungeon-card > summary > .catalog-state {
    display: none;
  }

  .catalog-boss-card > summary {
    grid-template-columns: 38px 78px minmax(140px, 1fr) 68px;
  }

  .catalog-boss-card > summary > span:not(.catalog-order-index, .catalog-state) {
    display: none;
  }
}

@media (max-width: 560px) {
  .catalog-summary.catalog-summary-full {
    grid-template-columns: 1fr;
  }

  .catalog-primary-actions {
    grid-template-columns: 1fr;
  }

  .catalog-primary-action {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 102px;
    padding: 17px;
  }

  .catalog-primary-action-icon {
    width: 40px;
    height: 40px;
  }

  .catalog-create-grid {
    padding: 14px;
  }

  .catalog-background-picker-head {
    padding: 16px;
  }

  .catalog-background-picker-body {
    padding: 14px;
  }

  .catalog-background-picker-search {
    grid-template-columns: 1fr auto;
  }

  .catalog-background-picker-search > span {
    display: none;
  }

  .catalog-background-picker-item {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .catalog-background-picker-item img {
    width: 80px;
    height: 52px;
  }

  .catalog-background-picker-item em {
    display: none;
  }

  .catalog-dungeon-card > summary {
    grid-template-columns: 34px minmax(150px, 1fr) 96px 76px;
  }

  .catalog-dungeon-card > summary > code {
    display: none;
  }

  .catalog-boss-count {
    display: none;
  }

  .catalog-boss-card > summary {
    grid-template-columns: 34px minmax(150px, 1fr) 64px;
  }

  .catalog-boss-card > summary > code {
    display: none;
  }
}

.catalog-proposal-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.catalog-proposal-item {
  padding: 18px;
  border: 1px solid rgba(112, 200, 255, .18);
  border-radius: 14px;
  background: rgba(7, 18, 31, .78);
}

.catalog-proposal-main,
.catalog-proposal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.catalog-proposal-main strong {
  font-size: 1.08rem;
}

.catalog-proposal-support {
  margin-left: auto;
  color: var(--muted);
}

.catalog-proposal-support b {
  color: var(--accent);
}

.catalog-proposal-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 14px 0 0;
}

.catalog-proposal-detail div {
  display: flex;
  gap: 7px;
}

.catalog-proposal-detail dt {
  color: var(--muted);
}

.catalog-proposal-detail dd {
  margin: 0;
}

.catalog-proposal-description {
  margin: 12px 0 0;
}

.catalog-proposal-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.catalog-proposal-actions form {
  margin: 0;
}

.support-expense-icon.ai {
  color: #cf8cff;
  background: rgba(146, 91, 208, 0.13);
}

.support-expense-icon.labor {
  color: #ff9a72;
  background: rgba(215, 105, 65, 0.13);
}

.support-preview-actions #support-open-payment {
  color: #061113;
  background: linear-gradient(135deg, #54e0d1, #2fbfc7);
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 8px 26px rgba(47, 214, 207, 0.16);
}

.support-payment-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 5, 8, 0.82);
  backdrop-filter: blur(8px);
}

.support-payment-backdrop[hidden] { display: none; }
body.support-modal-open { overflow: hidden; }
.support-payment-modal {
  position: relative;
  width: min(100%, 560px);
  padding: 28px;
  border: 1px solid rgba(47, 214, 207, 0.4);
  border-radius: 18px;
  color: #e8f2f3;
  background: radial-gradient(circle at 90% 0, rgba(47, 214, 207, 0.15), transparent 37%), #091217;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.support-payment-modal h2 { margin: 5px 40px 8px 0; font-size: 28px; }
.support-payment-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border: 1px solid #30434c; border-radius: 9px; color: #a9bdc4; background: #101b21; font-size: 23px; cursor: pointer; }
.support-payment-intro,.support-payment-warning { color: #91a6af; font-size: 13px; line-height: 1.65; }
.support-payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.support-payment-options label { display: flex; flex-direction: column; gap: 6px; }
.support-payment-options label:last-child { grid-column: 1/-1; }
.support-payment-options label>span,.support-transfer-memo>span { color: #8da2ab; font-size: 12px; font-weight: 800; }
.support-payment-options select,.support-payment-options input { min-height: 42px; padding: 9px 11px; border: 1px solid #30434d; border-radius: 8px; color: #e5eff1; background: #101c22; }
.support-account-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 17px; border: 1px solid rgba(47,214,207,.3); border-radius: 12px; background: rgba(47,214,207,.06); }
.support-account-card>span { grid-column: 1; color: #76a9aa; font-size: 12px; }
.support-account-card>strong { grid-column: 1; font-size: 24px; letter-spacing: .04em; }
.support-account-card>small { grid-column: 1; color: #a9bbc0; }
.support-account-card>button { grid-column: 2; grid-row: 1/4; align-self: center; padding: 10px 12px; border: 0; border-radius: 8px; color: #061113; background: #47d7cb; font-weight: 900; cursor: pointer; }
.support-transfer-memo { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; margin-top: 11px; padding: 13px 15px; border: 1px solid #293b44; border-radius: 10px; background: #0d181e; }
.support-transfer-memo>span { grid-column: 1; }
.support-transfer-memo>strong { grid-column: 1; }
.support-transfer-memo>button { grid-column: 2; grid-row: 1/3; padding: 8px 10px; border: 1px solid #354a54; border-radius: 7px; color: #b8cbd0; background: #14232a; cursor: pointer; }
.support-payment-warning { margin: 15px 0 0; }
.support-copy-status { min-height: 20px; margin: 8px 0 0; color: #56ddbd; font-size: 12px; }
@media(max-width:520px){.support-payment-modal{padding:22px 18px}.support-payment-options{grid-template-columns:1fr}.support-payment-options label:last-child{grid-column:auto}.support-account-card>strong{font-size:19px}}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, "Malgun Gothic", sans-serif;
  background:
    radial-gradient(circle at 80% 8%, rgba(36, 224, 199, .12), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(227, 76, 95, .09), transparent 30%),
    linear-gradient(180deg, #080b10 0%, var(--bg) 48%, #030406 100%);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(5, 7, 11, .72);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand, nav, nav form {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.brand-text {
  font-weight: 800;
  letter-spacing: 0;
  color: var(--silver);
}

.brand-text .logo-i {
  color: var(--accent);
}

.brand-text .logo-l {
  color: var(--danger);
}

nav a, nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

nav .login {
  color: var(--text);
}

nav a:hover, nav button:hover {
  color: var(--accent);
}

main {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 220px);
  padding: 72px 0 42px;
}

.hero-simple {
  grid-template-columns: 1fr;
  min-height: auto;
  padding-bottom: 36px;
}

.eyebrow {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 12px;
}

h1 {
  font-size: clamp(42px, 7vw, 84px);
  line-height: 1;
  margin: 0 0 20px;
  letter-spacing: 0;
  color: var(--silver);
}

.hero-logo {
  font-weight: 900;
}

.hero-logo .logo-i {
  color: var(--accent);
}

.hero-logo .logo-l {
  color: var(--danger);
}

.hero-logo .logo-version {
  display: inline-block;
  margin-left: .08em;
  color: var(--accent);
  font-size: .54em;
  vertical-align: top;
  transform: translateY(.08em);
}

.hero-copy p:not(.eyebrow) {
  max-width: 620px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.hero-copy .hero-aliases {
  margin-top: 8px;
  color: rgba(230, 237, 247, .78);
  font-size: 15px;
  line-height: 1.55;
}

.migration-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(620px, 100%);
  margin-top: 20px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 111, 135, .32);
  border-radius: 10px;
  background: rgba(255, 111, 135, .07);
}

.migration-notice strong {
  color: #ff91a4;
  font-size: 14px;
}

.migration-notice span {
  color: rgba(230, 237, 247, .82);
  font-size: 14px;
  line-height: 1.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.release-note {
  margin-top: 18px;
  color: var(--muted);
}

.release-note strong {
  color: var(--text);
}

.primary, .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  font-weight: 700;
}

.primary {
  background: linear-gradient(135deg, var(--accent), #71f7e5);
  color: #03110f;
  border: 1px solid var(--accent);
  box-shadow: 0 14px 34px rgba(36, 224, 199, .18);
}

.secondary {
  border: 1px solid var(--line);
  color: var(--text);
}

.app-preview {
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 8px;
  background: linear-gradient(180deg, #121923, #080b10);
  padding: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04);
}

.app-preview img {
  width: 100%;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}

dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

dt { color: var(--muted); }
dd { margin: 0; font-weight: 800; }

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 0 0 72px;
}

.features article {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
  padding: 22px 0 0;
}

.features span {
  color: var(--accent);
  font-weight: 800;
}

.features h2 {
  margin-top: 14px;
  font-size: 22px;
}

.features p {
  color: var(--muted);
  line-height: 1.65;
}

.roadmap-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 0 72px;
}

.roadmap-board.single-panel {
  grid-template-columns: 1fr;
}

.roadmap-panel {
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    var(--panel);
  padding: 24px;
  min-width: 0;
}

.roadmap-panel.planned {
  box-shadow: inset 3px 0 0 var(--accent);
}

.roadmap-panel.known-issues {
  box-shadow: inset 3px 0 0 var(--danger);
}

.roadmap-panel.releases-panel {
  box-shadow: inset 3px 0 0 #f2c94c;
}

.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-head .eyebrow {
  margin: 0;
  font-size: 12px;
}

.panel-head h2 {
  font-size: 26px;
}

.status-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-list li {
  position: relative;
  min-height: 42px;
  padding: 10px 12px 10px 34px;
  border: 1px solid rgba(217, 222, 232, .1);
  border-radius: 8px;
  background: rgba(5, 7, 11, .35);
  color: var(--text);
  line-height: 1.45;
}

.status-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(36, 224, 199, .5);
}

.issue-list li::before {
  background: var(--danger);
  box-shadow: 0 0 18px rgba(227, 76, 95, .5);
}

.report-list li::before {
  background: #8aa4ff;
  box-shadow: 0 0 18px rgba(138, 164, 255, .5);
}

.release-list li::before {
  background: #f2c94c;
  box-shadow: 0 0 18px rgba(242, 201, 76, .45);
}

.report-list time {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}

.status-list strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
}

.release-list a {
  display: block;
  color: inherit;
}

.guide-title {
  align-items: flex-end;
}

.guide-title .muted {
  max-width: 720px;
  margin: 10px 0 0;
  line-height: 1.6;
}

.home-guide {
  padding: 10px 0 42px;
}

.guide-section-head {
  margin-bottom: 18px;
}

.guide-section-head h2 {
  margin: 0;
  font-size: 30px;
}

.guide-section-head .muted {
  max-width: 720px;
  margin: 10px 0 0;
  line-height: 1.6;
}

.guide-page {
  display: grid;
  gap: 24px;
  padding: 0;
}

.guide-card-block {
  --guide-accent: #2fd6cf;
  --guide-accent-rgb: 47, 214, 207;
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 14px;
}

.guide-card-block::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--guide-accent-rgb), .95), rgba(var(--guide-accent-rgb), .22));
  box-shadow: 0 0 16px rgba(var(--guide-accent-rgb), .22);
}

.guide-card-block + .guide-card-block {
  margin-top: 10px;
}

.guide-step-basic {
  --guide-accent: #2fd6cf;
  --guide-accent-rgb: 47, 214, 207;
}

.guide-step-ui {
  --guide-accent: #70c8ff;
  --guide-accent-rgb: 112, 200, 255;
}

.guide-step-detail {
  --guide-accent: #b070dd;
  --guide-accent-rgb: 176, 112, 221;
}

.guide-step-shortcut {
  --guide-accent: #e4a55b;
  --guide-accent-rgb: 228, 165, 91;
}

.guide-step-a2dil {
  --guide-accent: #86ddf3;
  --guide-accent-rgb: 134, 221, 243;
}

.guide-step-info {
  --guide-accent: #62b18f;
  --guide-accent-rgb: 98, 177, 143;
}

.guide-step-dps {
  --guide-accent: #be3642;
  --guide-accent-rgb: 190, 54, 66;
}

.guide-step-dps-screen {
  --guide-accent: #e7cf7d;
  --guide-accent-rgb: 231, 207, 125;
}

.guide-step-buff {
  --guide-accent: #7da0ff;
  --guide-accent-rgb: 125, 160, 255;
}

.guide-step-report {
  --guide-accent: #e7cf7d;
  --guide-accent-rgb: 231, 207, 125;
}

.settings-mockup {
  --mock-accent: var(--guide-accent, #2fd6cf);
  --mock-accent-rgb: var(--guide-accent-rgb, 47, 214, 207);
  --mock-text: #e0e0e0;
  --mock-bright: #f2f5f8;
  --mock-muted: #8899aa;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(var(--mock-accent-rgb), .28);
  border-radius: 8px;
  background: #010307;
  color: var(--mock-text);
  font-family: "Malgun Gothic", "Segoe UI", sans-serif;
}

.mock-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.detail-popup {
  gap: 12px;
}

.mock-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mock-popup-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--mock-bright);
  font-size: 16px;
  font-weight: 900;
}

.mock-popup-head h3::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mock-accent);
  box-shadow: 0 0 10px rgba(var(--mock-accent-rgb), .72);
}

.mock-close-button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(8, 12, 18, .72);
  color: var(--mock-muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
}

.mock-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.mock-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(var(--mock-accent-rgb), .28);
  border-radius: 8px;
  background: rgba(4, 9, 13, .74);
}

.shortcut-panel {
  gap: 12px;
}

.info-panel {
  gap: 14px;
}

.report-panel {
  gap: 14px;
}

.mock-panel-head,
.mock-row {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 8px;
}

.mock-panel-head h3 {
  margin: 0;
  color: var(--mock-accent);
  font-size: 15px;
  font-weight: 900;
}

.mock-panel-head .mock-soft-button {
  justify-self: end;
}

.mock-row > span {
  min-width: 0;
  color: var(--mock-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
}

.mock-row > span b {
  color: var(--mock-bright);
  font-size: 12px;
  font-weight: 900;
}

.mock-row > b {
  justify-self: end;
  color: var(--mock-bright);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.range-row {
  grid-template-columns: minmax(120px, .7fr) minmax(50px, auto);
}

.range-row .mock-range {
  grid-column: 1 / -1;
}

.mock-range {
  position: relative;
  display: block;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.mock-range::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(var(--mock-accent-rgb), .72);
  border-radius: 50%;
  background: var(--mock-accent);
  transform: translate(-50%, -50%);
}

.mock-range.half::after {
  left: 56%;
}

.mock-range.low::after {
  left: 34%;
}

.mock-range.icon-size::after {
  left: 50%;
}

.mock-toggle-group,
.mock-theme-presets,
.mock-color-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.mock-soft-button,
.mock-toggle,
.mock-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(8, 12, 18, .72);
  color: var(--mock-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mock-soft-button.accent {
  border-color: rgba(var(--mock-accent-rgb), .42);
  color: var(--mock-accent);
  background: rgba(var(--mock-accent-rgb), .08);
}

.mock-google-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 9px 0 6px;
  border: 1px solid rgba(112, 200, 255, .7);
  border-radius: 999px;
  background: rgba(14, 20, 28, .92);
  color: var(--mock-bright);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mock-google-button span {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font-size: 10px;
  font-weight: 900;
}

.mock-toggle.on {
  border-color: rgba(255, 255, 255, .36);
  background: rgba(255, 255, 255, .12);
  color: var(--mock-bright);
}

.mock-toggle.danger {
  border-color: rgba(220, 72, 86, .58);
  background: rgba(220, 72, 86, .18);
  color: #ff8e9a;
}

.mock-toggle.warning {
  border-color: rgba(231, 207, 125, .58);
  background: rgba(231, 207, 125, .18);
  color: #ffe088;
}

.mock-info-group {
  display: grid;
  gap: 8px;
}

.mock-info-group > strong,
.mock-level-row > span {
  color: var(--mock-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
}

.mock-info-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 46px;
  padding: 8px;
  border: 1px solid rgba(var(--mock-accent-rgb), .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.mock-icon-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(8, 12, 18, .72);
  opacity: .44;
}

.mock-icon-toggle.on {
  border-color: rgba(var(--guide-accent-rgb), .48);
  background: rgba(var(--guide-accent-rgb), .11);
  opacity: 1;
  box-shadow: 0 0 10px rgba(var(--guide-accent-rgb), .16);
}

.mock-icon-toggle img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.buff-panel {
  gap: 9px;
  background:
    linear-gradient(135deg, rgba(125, 160, 255, .08), rgba(4, 9, 13, .78)),
    rgba(4, 9, 13, .74);
}

.mock-buff-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.mock-shortcut-field,
.mock-audio-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-height: 26px;
  width: min(100%, 260px);
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(8, 12, 18, .82);
  color: var(--mock-bright);
  font-size: 10px;
  font-weight: 900;
}

.mock-audio-field {
  border-color: rgba(var(--mock-accent-rgb), .24);
}

.mock-kina-list {
  display: grid;
  gap: 8px;
}

.mock-kina-row {
  display: grid;
  grid-template-columns: minmax(42px, .62fr) auto auto minmax(56px, auto) minmax(120px, 1.3fr) minmax(56px, auto);
  align-items: center;
  gap: 6px;
}

.mock-kina-row span {
  min-width: 0;
  color: var(--mock-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.mock-kina-row strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 30px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: var(--mock-bright);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.mock-kina-row em,
.mock-level-options > em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(220, 72, 86, .5);
  border-radius: 8px;
  background: rgba(220, 72, 86, .12);
  color: #ff7d8c;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.mock-kina-row i {
  display: block;
}

.mock-report-field {
  display: grid;
  gap: 7px;
}

.mock-report-field > strong,
.mock-report-footer > span {
  color: var(--mock-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
}

.mock-report-field p {
  margin: 0;
  color: var(--mock-muted);
  font-size: 11px;
  line-height: 1.45;
  word-break: keep-all;
}

.mock-report-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.mock-report-picker span,
.mock-textarea {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: var(--mock-muted);
  font-size: 11px;
  font-weight: 900;
}

.mock-report-picker span {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
}

.mock-textarea {
  min-height: 82px;
  padding: 12px;
}

.mock-report-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.mock-report-footer b {
  color: var(--mock-bright);
}

.mock-skill-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mock-skill-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--skill-color) 62%, rgba(255, 255, 255, .2));
  border-radius: 8px;
  background: color-mix(in srgb, var(--skill-color) 22%, rgba(8, 12, 18, .8));
  color: var(--mock-bright);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 12px color-mix(in srgb, var(--skill-color) 28%, transparent);
}

.mock-skill-chip img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--skill-color) 46%, transparent));
}

.mock-level-list {
  display: grid;
  gap: 8px;
}

.mock-level-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.mock-level-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.mock-keybind-list {
  display: grid;
  gap: 8px;
}

.mock-keybind-row {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(160px, 1.2fr);
  align-items: center;
  gap: 12px;
}

.mock-keybind-row span {
  min-width: 0;
  color: var(--mock-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
}

.mock-keybind-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(8, 12, 18, .72);
  color: var(--mock-bright);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.mock-color-swatch {
  display: block;
  width: 28px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  background: var(--mock-accent);
  box-shadow: inset 0 0 0 3px rgba(1, 3, 7, .72);
}

.mock-color-swatch.fixed-default {
  background: #2fd6cf;
}

.mock-color-swatch.danger {
  background: #d32222;
}

.mock-color-control b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 88px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: var(--mock-text);
  font-size: 10px;
  font-weight: 900;
}

.mock-color-control code {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 88px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: var(--mock-text);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
}

.mock-select-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(100%, 210px);
  justify-self: end;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(8, 12, 18, .82);
  color: var(--mock-bright);
  font-size: 10px;
  font-weight: 900;
}

.mock-select-control i {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mock-muted);
  border-bottom: 2px solid var(--mock-muted);
  transform: rotate(45deg) translateY(-2px);
}

.mock-theme {
  gap: 4px;
  border-color: color-mix(in srgb, var(--theme-color, #2fd6cf) 42%, rgba(255, 255, 255, .18));
  background: color-mix(in srgb, var(--theme-color, #2fd6cf) 13%, transparent);
  color: var(--mock-text);
}

.mock-theme::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--theme-color, #2fd6cf);
  box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color, #2fd6cf) 54%, transparent);
}

.mock-theme.on {
  border-color: color-mix(in srgb, var(--theme-color, #2fd6cf) 72%, rgba(255, 255, 255, .24));
  background: color-mix(in srgb, var(--theme-color, #2fd6cf) 24%, transparent);
  color: var(--mock-bright);
}

.mock-color-list {
  display: grid;
  gap: 7px;
}

.mock-color-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 32px minmax(84px, 1.2fr);
  align-items: center;
  gap: 8px;
}

.mock-color-row span {
  min-width: 0;
  color: var(--mock-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.mock-color-row span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 4px;
  background: var(--chip-color);
  vertical-align: -1px;
}

.mock-color-row i {
  display: block;
  width: 28px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: var(--chip-color);
  box-shadow: inset 0 0 0 3px rgba(1, 3, 7, .72);
}

.mock-color-row code {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
  color: var(--mock-text);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
}

.guide-figure {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(var(--guide-accent-rgb), .24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--guide-accent-rgb), .06), rgba(255, 255, 255, .01)),
    var(--panel-2);
}

.guide-figure img {
  display: block;
  width: 100%;
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 6px;
  background: #05070b;
}

.guide-figure figcaption {
  margin: 0 0 10px;
  color: rgb(var(--guide-accent-rgb));
  font-size: 15px;
  font-weight: 900;
}

.buff-guide-figure img {
  max-height: 260px;
  object-fit: contain;
}

.dps-screen-guide {
  padding-top: 8px;
}

.dps-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  gap: 14px;
  align-items: stretch;
}

.dps-screen-figure img {
  max-height: 560px;
  object-fit: contain;
}

.dps-update-note {
  padding: 20px;
  border: 1px solid rgba(var(--guide-accent-rgb), .28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--guide-accent-rgb), .10), rgba(255, 255, 255, .015)),
    var(--panel-2);
  box-shadow:
    inset 3px 0 0 rgb(var(--guide-accent-rgb)),
    0 18px 42px rgba(0, 0, 0, .22);
}

.dps-update-note h2 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 28px;
}

.dps-update-note ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dps-update-note li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
  word-break: keep-all;
}

.dps-update-note li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--guide-accent-rgb));
  box-shadow: 0 0 14px rgba(var(--guide-accent-rgb), .55);
}

.dps-threshold-figure img {
  max-height: 320px;
  object-fit: contain;
}

.guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.guide-list-single {
  grid-template-columns: 1fr;
}

.guide-item-wide {
  grid-column: 1 / -1;
}

.guide-item {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(var(--guide-accent-rgb), .22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--guide-accent-rgb), .055), rgba(255, 255, 255, .01)),
    var(--panel);
}

.guide-item.guide-group {
  display: flex;
  align-items: center;
  min-height: 58px;
  border-color: rgba(36, 224, 199, .28);
  background: var(--accent-soft);
}

.guide-item h2 {
  margin: 0 0 12px;
  color: rgb(var(--guide-accent-rgb));
  font-size: 20px;
}

.guide-item.guide-group h2 {
  margin: 0;
}

.guide-item ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.guide-item li {
  color: var(--muted);
  line-height: 1.65;
  word-break: keep-all;
}

.guide-item li::marker {
  color: rgba(var(--guide-accent-rgb), .9);
}

.guide-item li.guide-highlight-item {
  padding: 10px 12px;
  border: 1px solid rgba(var(--guide-accent-rgb), .42);
  border-radius: 8px;
  background: rgba(var(--guide-accent-rgb), .13);
  color: #f5eac1;
  box-shadow: 0 0 18px rgba(var(--guide-accent-rgb), .08);
}

.guide-item li.guide-highlight-item strong {
  color: rgb(var(--guide-accent-rgb));
}

.guide-item li.guide-highlight-item::marker {
  color: rgb(var(--guide-accent-rgb));
}

.status-list .empty-state {
  color: var(--muted);
}

.status-list .empty-state::before {
  opacity: .45;
}

.status-list span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-right: 6px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.notice-update {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: 22px;
  align-items: start;
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid rgba(36, 224, 199, .28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(36, 224, 199, .08), rgba(255, 255, 255, .015)),
    var(--panel-2);
  box-shadow: inset 3px 0 0 var(--accent);
}

.notice-copy h2 {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 30px;
}

.notice-copy ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-copy li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.65;
  word-break: keep-all;
}

.notice-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(36, 224, 199, .6);
}

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

.notice-gallery button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: zoom-in;
}

.notice-gallery button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.notice-gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(217, 222, 232, .16);
  border-radius: 8px;
  background: #05070b;
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

body.lightbox-open {
  overflow: hidden;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.image-lightbox[hidden] {
  display: none;
}

.image-lightbox img {
  display: block;
  max-width: min(100%, 1180px);
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  border: 1px solid rgba(217, 222, 232, .22);
  border-radius: 8px;
  background: #05070b;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .62);
  cursor: default;
}

.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(217, 222, 232, .28);
  border-radius: 999px;
  background: rgba(12, 17, 24, .86);
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.image-lightbox-close:hover,
.image-lightbox-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.section, .page-title, .post-detail, .form, .message, .legal {
  padding: 48px 0;
}

.section-head, .page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

h2 {
  font-size: 28px;
  margin: 0;
}

.post-list {
  border-top: 1px solid var(--line);
}

.board-tabs {
  display: flex;
  gap: 8px;
  margin: -20px 0 28px;
}

.board-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: var(--panel-2);
}

.board-tabs a.active {
  color: #03110f;
  border-color: var(--accent);
  background: var(--accent);
  font-weight: 800;
}

.board-archive-notice {
  margin: -12px 0 24px;
  padding: 12px 14px;
  border: 1px solid rgba(140, 157, 166, .2);
  border-radius: 7px;
  color: #8fa1a9;
  background: rgba(140, 157, 166, .05);
  font-size: 13px;
}

.board-origin-badge {
  display: inline-flex;
  margin-right: 7px;
  padding: 3px 6px;
  border-radius: 5px;
  color: #9fb0b7;
  background: rgba(140, 157, 166, .1);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  vertical-align: 2px;
}

.board-origin-badge.bug {
  color: #ff91a3;
  background: rgba(255, 111, 135, .1);
}

.release-list {
  display: grid;
  gap: 18px;
  padding-bottom: 56px;
}

.release-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 24px;
}

.release-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.release-body {
  margin: 20px 0 0;
  padding: 18px;
  border-radius: 6px;
  background: #0c1014;
  color: var(--muted);
  white-space: pre-wrap;
  line-height: 1.6;
  font: inherit;
}

.asset-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.asset-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.github-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent);
}

.muted {
  color: var(--muted);
}

.admin-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 24px;
  padding: 8px;
  border: 1px solid rgba(217, 222, 232, .13);
  border-radius: 12px;
  background: rgba(5, 10, 15, .72);
}

.admin-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #8fa5ae;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.admin-menu a:hover {
  border-color: rgba(47, 214, 207, .22);
  color: #dce9ec;
  background: rgba(47, 214, 207, .04);
}

.admin-menu a.active {
  border-color: rgba(47, 214, 207, .48);
  color: #e9ffff;
  background: linear-gradient(135deg, rgba(47, 214, 207, .15), rgba(47, 214, 207, .04));
  box-shadow: inset 0 -2px #2fd6cf;
}

.admin-menu span {
  color: #55707b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.admin-menu a.active span {
  color: #69e5dc;
}

.admin-menu strong {
  font-size: 14px;
}

.admin-monitor-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: -10px 0 18px;
  padding: 6px;
  border: 1px solid rgba(133, 172, 185, .14);
  border-radius: 13px;
  background: rgba(5, 12, 17, .72);
}

.admin-monitor-tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.admin-monitor-tab:hover {
  border-color: rgba(47, 214, 207, .2);
  color: var(--text);
  background: rgba(47, 214, 207, .045);
}

.admin-monitor-tab.active {
  border-color: rgba(47, 214, 207, .4);
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(47, 214, 207, .15), rgba(47, 214, 207, .035)),
    rgba(7, 17, 22, .9);
  box-shadow: inset 0 -2px #2fd6cf;
}

.admin-monitor-tab > span {
  color: #5d7983;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.admin-monitor-tab.active > span {
  color: #63e5dc;
}

.admin-monitor-tab > strong {
  grid-column: 1;
  color: inherit;
  font-size: 16px;
  line-height: 1.3;
  word-break: keep-all;
}

.admin-monitor-tab > small {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #71858d;
  font-size: 11px;
  text-align: right;
  word-break: keep-all;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.admin-summary article, .admin-panel {
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    var(--panel);
}

.admin-summary article {
  min-height: 118px;
  padding: 22px;
}

.admin-summary span, .admin-summary small {
  display: block;
  color: var(--muted);
}

.admin-summary strong {
  display: block;
  margin: 10px 0 4px;
  color: var(--text);
  font-size: 34px;
}

.admin-product-monitor {
  margin-bottom: 26px;
}

.admin-product-head {
  align-items: center;
  margin-bottom: 14px;
}

.admin-summary-global {
  grid-template-columns: minmax(180px, 240px);
}

.admin-panel {
  padding: 24px;
  margin-bottom: 72px;
}

.server-monitor {
  margin-bottom: 32px;
}

.feature-usage-monitor {
  margin-bottom: 32px;
}

.feature-usage-head {
  align-items: flex-end;
  margin-bottom: 18px;
}

.feature-usage-head h2 {
  margin: 3px 0 0;
}

.feature-usage-head > p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.feature-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.feature-usage-card {
  padding: 18px;
  border: 1px solid rgba(83, 216, 198, .24);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(55, 209, 190, .11), transparent 42%),
    rgba(7, 16, 22, .84);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.feature-usage-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 12px;
}

.feature-usage-card header > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.feature-usage-card h3 {
  grid-column: 1;
  margin: 0;
  color: var(--text);
  font-size: 20px;
}

.feature-usage-card header small {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--muted);
  font-size: 11px;
}

.feature-usage-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
}

.feature-usage-card dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 11px 10px;
  border: 1px solid rgba(133, 172, 185, .14);
  border-radius: 9px;
  background: rgba(5, 12, 17, .68);
}

.feature-usage-card dt {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  word-break: keep-all;
}

.feature-usage-card dd {
  margin: 0;
  color: var(--text);
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.feature-usage-card .today {
  border-color: rgba(73, 225, 204, .28);
  background: rgba(18, 76, 72, .28);
}

.feature-usage-card .today dd {
  color: #74eee0;
}

.feature-usage-card footer {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.feature-usage-empty {
  margin: 0;
  padding: 20px;
  border: 1px dashed rgba(133, 172, 185, .2);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.statistics-sample-card {
  border-color: rgba(184, 133, 255, .28);
  background:
    radial-gradient(circle at 100% 0, rgba(163, 98, 255, .13), transparent 42%),
    rgba(10, 13, 24, .86);
}

.statistics-sample-card header > span,
.statistics-sample-card .today dd {
  color: #c9a1ff;
}

.statistics-sample-card .today {
  border-color: rgba(184, 133, 255, .26);
  background: rgba(91, 51, 139, .24);
}

.website-login-card {
  border-color: rgba(91, 146, 255, .25);
  background:
    radial-gradient(circle at 100% 0, rgba(76, 132, 255, .12), transparent 42%),
    rgba(7, 14, 24, .86);
}

.website-login-card header > span,
.website-login-card .today dd {
  color: #8cb7ff;
}

.website-login-card .today {
  border-color: rgba(91, 146, 255, .25);
  background: rgba(42, 76, 139, .22);
}

.website-login-card dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-usage-chart {
  margin-top: 18px;
}

.program-usage-monitor {
  margin-bottom: 72px;
}

.program-usage-head {
  align-items: flex-end;
  margin-bottom: 18px;
}

.program-usage-head h2 {
  margin: 3px 0 0;
}

.program-usage-head > p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.program-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.program-product-card {
  padding: 19px;
  border: 1px solid rgba(83, 216, 198, .2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(47, 214, 207, .09), transparent 42%),
    rgba(7, 15, 21, .82);
}

.program-product-card[data-product="a2dil2"] {
  border-color: rgba(255, 99, 198, .2);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 99, 198, .09), transparent 42%),
    rgba(14, 10, 22, .82);
}

.program-product-card header span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.program-product-card[data-product="a2dil2"] header span {
  color: #ff82d0;
}

.program-product-card h3 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 22px;
}

.program-product-card dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin: 17px 0 0;
}

.program-product-card dl > div {
  min-width: 0;
  padding: 11px 9px;
  border: 1px solid rgba(133, 172, 185, .13);
  border-radius: 9px;
  background: rgba(5, 12, 17, .66);
}

.program-product-card dl > div.online {
  border-color: rgba(73, 225, 204, .24);
  background: rgba(18, 76, 72, .23);
}

.program-product-card[data-product="a2dil2"] dl > div.online {
  border-color: rgba(255, 99, 198, .24);
  background: rgba(107, 39, 82, .2);
}

.program-product-card dt,
.program-product-card small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  word-break: keep-all;
}

.program-product-card dt {
  white-space: nowrap;
}

.program-product-card dd {
  margin: 6px 0 4px;
  color: var(--text);
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 800;
  white-space: nowrap;
}

.program-product-card .online dd {
  color: #74eee0;
}

.program-product-card[data-product="a2dil2"] .online dd {
  color: #ff9cda;
}

.program-chart-stack {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.monitor-chart-block {
  padding: 20px;
  border: 1px solid rgba(133, 172, 185, .15);
  border-radius: 12px;
  background: rgba(5, 12, 17, .54);
}

.monitor-chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.monitor-chart-head h3 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 19px;
}

.monitor-chart-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

@media (max-width: 680px) {
  .admin-monitor-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .admin-monitor-tab {
    flex: 0 0 190px;
    scroll-snap-align: start;
  }

  .program-usage-head,
  .monitor-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .program-usage-head > p {
    text-align: left;
  }

  .program-product-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-chart-legend {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .website-login-card dl {
    grid-template-columns: 1fr;
  }
}

.server-monitor-head {
  align-items: flex-start;
  margin-bottom: 18px;
}

.server-monitor-head h2,
.server-traffic-history h3 {
  margin: 3px 0 0;
}

.server-monitor-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.server-monitor-meta strong {
  color: #b9cbd1;
}

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

.server-metric-card {
  display: flex;
  flex-direction: column;
  min-height: 128px;
  padding: 17px;
  border: 1px solid #243741;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(18, 31, 38, .94), rgba(7, 14, 18, .96));
}

.server-metric-card > span,
.server-metric-card small {
  color: #8198a2;
  font-size: 12px;
}

.server-metric-card > strong {
  margin: 12px 0 5px;
  color: #e7f2f4;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1;
}

.server-metric-card.traffic > strong {
  color: #6fe3d4;
}

.server-metric-card.traffic.contract > i b {
  min-width: 3px;
  background: linear-gradient(90deg, #8a76ea, #d66fca);
}

.server-metric-card > i {
  height: 5px;
  margin-top: auto;
  border-radius: 999px;
  background: #17262e;
  overflow: hidden;
}

.server-metric-card > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2fb8d6, #48dfb0);
}

.server-traffic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.server-traffic-history {
  padding: 18px;
  border: 1px solid #22353e;
  border-radius: 11px;
  background: rgba(7, 15, 19, .72);
}

.server-contract-card {
  padding: 18px;
  border: 1px solid #2d354b;
  border-radius: 11px;
  background:
    radial-gradient(circle at 90% 0, rgba(142, 112, 232, .13), transparent 42%),
    rgba(8, 15, 21, .82);
}

.server-traffic-history > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e3038;
}

.server-contract-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #242c40;
}

.server-contract-card > header span {
  color: #817c9c;
  font-size: 11px;
  letter-spacing: .05em;
}

.server-contract-card > header h3 {
  margin: 3px 0 0;
}

.server-contract-card > header > strong {
  color: #b9a9ff;
  font-size: 13px;
}

.server-contract-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  color: #aabac0;
  font-size: 12px;
}

.server-contract-period b {
  color: #586a73;
}

.server-contract-progress {
  height: 13px;
  margin: 11px 0 17px;
  padding: 3px;
  border: 1px solid #2b344b;
  border-radius: 999px;
  background: #151c28;
  overflow: hidden;
}

.server-contract-progress i {
  display: block;
  min-width: 4px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8073e7, #ce6fcf);
  box-shadow: 0 0 14px rgba(153, 105, 226, .45);
}

.server-contract-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.server-contract-stats > div {
  min-height: 83px;
  padding: 11px;
  border: 1px solid #232d3c;
  border-radius: 8px;
  background: rgba(12, 22, 28, .72);
}

.server-contract-stats span,
.server-contract-stats small {
  display: block;
  color: #718791;
  font-size: 10px;
}

.server-contract-stats strong {
  display: block;
  margin: 7px 0 4px;
  color: #e1eaf0;
  font-size: 15px;
}

.server-contract-note {
  margin: 13px 0 0;
  padding: 10px 11px;
  border: 1px dashed #30374a;
  border-radius: 8px;
  color: #778993;
  font-size: 10px;
  line-height: 1.55;
}

.server-traffic-history > header span,
.server-traffic-history > header small {
  color: #718a95;
  font-size: 11px;
  letter-spacing: .05em;
}

.server-traffic-list {
  display: grid;
  gap: 9px;
  padding-top: 14px;
}

.server-traffic-row {
  display: grid;
  grid-template-columns: 48px minmax(50px, 1fr) 72px;
  align-items: center;
  gap: 9px;
}

.server-traffic-row time {
  color: #9aadb4;
  font-size: 11px;
}

.server-traffic-row > div {
  height: 7px;
  border-radius: 999px;
  background: #17262d;
  overflow: hidden;
}

.server-traffic-row > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2fb8d6, #42d9b4);
}

.server-traffic-history.monthly .server-traffic-row > div i {
  background: linear-gradient(90deg, #9176ee, #d66ecc);
}

.server-traffic-row > strong {
  color: #dbe8eb;
  font-size: 12px;
  text-align: right;
}

.server-traffic-row > small {
  grid-column: 2 / -1;
  margin-top: -5px;
  color: #637b85;
  font-size: 10px;
}

.server-traffic-row > small.confirmed {
  color: #74cbb7;
}

.server-traffic-empty {
  margin: 0;
  padding: 26px 8px 12px;
  color: #748b95;
  text-align: center;
  font-size: 12px;
}

.traffic-usage-breakdown {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid #233842;
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(54, 206, 190, .08), transparent 34%),
    rgba(6, 14, 18, .76);
}

.traffic-usage-breakdown-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #20323a;
}

.traffic-usage-breakdown-head span,
.traffic-usage-daily-card > header span,
.traffic-usage-detail-card > header span {
  color: #45d4c5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.traffic-usage-breakdown-head h3,
.traffic-usage-daily-card h4,
.traffic-usage-detail-card h4 {
  margin: 4px 0 0;
}

.traffic-usage-breakdown-head p {
  margin: 7px 0 0;
  color: #728993;
  font-size: 11px;
}

.traffic-usage-breakdown-head > small {
  flex: 0 0 auto;
  color: #78909a;
  font-size: 11px;
}

.traffic-usage-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.traffic-usage-summary-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid #21343d;
  border-radius: 10px;
  background: rgba(10, 20, 25, .88);
}

.traffic-usage-summary-card > span,
.traffic-usage-summary-card > small {
  display: block;
  color: #78909a;
  font-size: 10px;
}

.traffic-usage-summary-card > strong {
  display: block;
  margin: 9px 0 5px;
  color: #e0eef0;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1;
}

.traffic-usage-summary-card.program-api > strong {
  color: #b59aff;
}

.traffic-usage-summary-card.static > strong {
  color: #66d8ee;
}

.traffic-usage-summary-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 12px 0 0;
}

.traffic-usage-summary-card dl > div {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 7px;
  background: #0d1a20;
}

.traffic-usage-summary-card dt {
  color: #617984;
  font-size: 9px;
}

.traffic-usage-summary-card dd {
  margin: 3px 0 0;
  color: #b8cbd0;
  font-size: 11px;
  white-space: nowrap;
}

.traffic-usage-daily-card,
.traffic-usage-detail-card {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #20343d;
  border-radius: 10px;
  background: rgba(7, 15, 20, .84);
}

.traffic-usage-daily-card > header,
.traffic-usage-detail-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1d3038;
}

.traffic-usage-legend {
  display: flex;
  gap: 12px;
  color: #7d929a;
  font-size: 10px;
}

.traffic-usage-legend span::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 3px;
  content: '';
}

.traffic-usage-legend .request::before {
  background: #41d5bd;
}

.traffic-usage-legend .response::before {
  background: #9b7bf2;
}

.traffic-usage-chart-viewport {
  overflow-x: auto;
  padding: 16px 0 3px;
  scrollbar-color: #1d706d #101c21;
  scrollbar-width: thin;
}

.traffic-usage-chart {
  display: grid;
  grid-template-columns: repeat(30, minmax(30px, 1fr));
  gap: 7px;
  min-width: 1080px;
  height: 220px;
  padding: 0 14px;
  box-sizing: border-box;
}

.traffic-usage-day {
  display: grid;
  grid-template-rows: 24px 1fr 18px;
  min-width: 0;
  text-align: center;
}

.traffic-usage-day > strong {
  align-self: start;
  color: #718992;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.traffic-usage-day time {
  align-self: end;
  color: #687e87;
  font-size: 9px;
  white-space: nowrap;
}

.traffic-usage-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  min-height: 0;
  border-bottom: 1px solid #1c3038;
}

.traffic-usage-bars i {
  width: 9px;
  min-height: 0;
  border-radius: 4px 4px 1px 1px;
}

.traffic-usage-bars .request {
  background: linear-gradient(180deg, #55dfc9, #268f89);
}

.traffic-usage-bars .response {
  background: linear-gradient(180deg, #ad89ff, #6951bf);
}

.traffic-usage-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.traffic-usage-detail-card > header {
  display: block;
}

.traffic-usage-route-list {
  display: grid;
  gap: 7px;
  padding-top: 12px;
}

.traffic-usage-route-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 10px 11px;
  border: 1px solid #1b2e36;
  border-radius: 8px;
  background: #0b181e;
}

.traffic-usage-route-list span {
  min-width: 0;
  color: #a9bdc2;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.traffic-usage-route-list strong {
  color: #dce9eb;
  font-size: 12px;
  white-space: nowrap;
}

.traffic-usage-route-list small {
  grid-column: 1 / -1;
  color: #647c86;
  font-size: 9px;
}

.traffic-usage-note {
  margin: 12px 0 0;
  color: #667e87;
  font-size: 10px;
  line-height: 1.6;
}

.server-monitor-footnote {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  color: #718791;
  font-size: 11px;
}

.server-monitor-footnote .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6f7d83;
}

.server-monitor-footnote .status-dot.active {
  background: #43dbab;
  box-shadow: 0 0 9px rgba(67, 219, 171, .65);
}

.skill-catalog-summary article:last-child strong {
  font-size: 24px;
}

.skill-catalog-job-filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.skill-catalog-job-filter a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #293d47;
  border-radius: 8px;
  color: #91a8b1;
  background: #091318;
  text-decoration: none;
}

.skill-catalog-job-filter a:hover,
.skill-catalog-job-filter a.active {
  border-color: rgba(47, 214, 207, .52);
  color: #e1fbf8;
  background: rgba(47, 214, 207, .09);
}

.skill-catalog-job-filter b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  color: #72ddd4;
  background: rgba(47, 214, 207, .1);
  font-size: 11px;
}

.skill-catalog-table-wrap {
  max-height: 760px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 0;
  border: 1px solid #20323b;
  border-radius: 10px;
}

.skill-catalog-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.skill-catalog-table thead {
  position: static;
  background: #111c22;
}

.skill-catalog-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #111c22;
  vertical-align: middle;
}

.skill-catalog-table th:first-child {
  width: 21%;
}

.skill-catalog-table th,
.skill-catalog-table td {
  padding: 9px 6px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
}

.skill-catalog-table th {
  color: #8fa6af;
  text-align: center;
  white-space: nowrap;
}

.skill-catalog-table th:first-child,
.skill-catalog-table td:first-child,
.skill-catalog-table th:nth-child(7),
.skill-catalog-table td:nth-child(7) {
  text-align: left;
}

.skill-catalog-table th:nth-child(2) { width: 9%; }
.skill-catalog-table th:nth-child(3) { width: 7%; }
.skill-catalog-table th:nth-child(4),
.skill-catalog-table th:nth-child(5) { width: 7%; }
.skill-catalog-table th:nth-child(6) { width: 9%; }
.skill-catalog-table th:nth-child(7) { width: 18%; }
.skill-catalog-table th:nth-child(8) { width: 9%; }
.skill-catalog-table th:nth-child(9) { width: 13%; }

.skill-catalog-table td {
  vertical-align: middle;
  text-align: center;
}

.skill-catalog-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.skill-catalog-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #304c58;
  border-radius: 9px;
  color: #77dcd5;
  background: linear-gradient(145deg, #10222a, #071116);
  font-weight: 900;
}

.skill-catalog-icon.small {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.skill-catalog-icon img {
  position: absolute;
  inset: 0;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skill-catalog-identity div,
.skill-catalog-type {
  display: grid;
  gap: 4px;
}

.skill-catalog-identity strong,
.skill-catalog-type strong {
  display: block;
  overflow: hidden;
  color: #e5eff2;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-catalog-identity code {
  color: #6f8b96;
  font-size: 11px;
}

.skill-catalog-identity small {
  color: #78909a;
  font-size: 11px;
}

.skill-catalog-raw-count {
  color: #36ded2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.skill-catalog-tristate {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: #66747b;
  box-shadow: 0 0 8px rgba(102, 116, 123, .42);
}

.skill-catalog-tristate.yes {
  border-color: #7bf0b7;
  background: #48d88d;
  box-shadow: 0 0 9px rgba(72, 216, 141, .62);
}

.skill-catalog-tristate.no {
  border-color: #ff8996;
  background: #ef5267;
  box-shadow: 0 0 9px rgba(239, 82, 103, .58);
}

.skill-catalog-parent {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.skill-catalog-parent > span:last-child {
  display: grid;
  gap: 2px;
}

.skill-catalog-parent strong {
  max-width: 92px;
  overflow: hidden;
  color: #dbe9ec;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-catalog-parent code {
  color: #708891;
  font-size: 10px;
}

.skill-catalog-type span {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(180, 119, 255, .6);
  border-radius: 999px;
  color: #c28bff;
  font-size: 10px;
  font-weight: 900;
}

.skill-catalog-type span.passive {
  border-color: rgba(255, 207, 70, .68);
  color: #ffd558;
}

.skill-catalog-type span.stigma {
  border-color: rgba(255, 83, 99, .68);
  color: #ff6978;
}

.skill-catalog-index {
  color: #9cb1ba;
  font-variant-numeric: tabular-nums;
}

.skill-catalog-cooldown {
  color: #dce9ec;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.skill-catalog-cooldown.unknown {
  color: #667b84;
}

.skill-catalog-flag {
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid #344851;
  border-radius: 999px;
  color: #70858e;
  font-size: 10px;
  font-weight: 900;
}

.skill-catalog-flag.yes {
  border-color: rgba(66, 220, 169, .46);
  color: #69e0b7;
  background: rgba(66, 220, 169, .07);
}

.skill-catalog-flag.no {
  color: #98a8ae;
}

.skill-catalog-flag.unknown {
  border-style: dashed;
  color: #687c85;
}

.skill-catalog-release-panel {
  margin-bottom: 18px;
}

.skill-catalog-release-state {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.skill-catalog-release-state article {
  padding: 16px;
  border: 1px solid #263b45;
  border-radius: 9px;
  background: #091318;
}

.skill-catalog-release-state span,
.skill-catalog-release-state small {
  display: block;
  color: #7f969f;
}

.skill-catalog-release-state strong {
  display: block;
  margin: 7px 0 3px;
  color: #72ddd4;
  font-size: 20px;
}

.skill-catalog-import,
.skill-catalog-create,
.skill-catalog-item-editor {
  border: 1px solid #2a414b;
  border-radius: 9px;
  background: #081217;
}

.skill-catalog-item-editor summary {
  font-size: 10px;
  white-space: nowrap;
}

.skill-catalog-import {
  padding: 13px 15px;
}

.skill-catalog-import-dialog {
  width: min(620px, calc(100vw - 32px));
}

.skill-catalog-import-dialog .skill-catalog-import {
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.skill-catalog-import-dialog .skill-catalog-import form {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 0;
}

.skill-catalog-import summary,
.skill-catalog-create summary,
.skill-catalog-item-editor summary {
  color: #b9cbd1;
  font-weight: 900;
  cursor: pointer;
}

.skill-catalog-import form,
.skill-catalog-create form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 14px;
}

.skill-catalog-import label,
.skill-catalog-create label {
  display: grid;
  gap: 6px;
  color: #8ea5ad;
  font-size: 11px;
  font-weight: 800;
}

.skill-catalog-import input,
.skill-catalog-create input,
.skill-catalog-create select,
.skill-catalog-create textarea,
.skill-catalog-item-editor textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #304650;
  border-radius: 8px;
  color: #e4eef1;
  background: #071015;
}

.skill-catalog-import button,
.skill-catalog-create button,
.skill-catalog-item-editor button {
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  color: #061719;
  background: #2fd6cf;
  font-weight: 900;
  cursor: pointer;
}

.skill-catalog-create {
  margin-bottom: 0;
  padding: 13px 15px;
}

.skill-catalog-create form {
  grid-template-columns: 180px 180px minmax(280px, 1fr) auto;
}

.skill-catalog-create .wide {
  grid-column: span 1;
}

.skill-catalog-kind {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid #3a525c;
  border-radius: 999px;
  color: #a9bbc1;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.skill-catalog-kind.group,
.skill-catalog-kind.irregular {
  border-color: rgba(183, 113, 255, .65);
  color: #c790ff;
}

.skill-catalog-kind.food,
.skill-catalog-kind.scroll {
  border-color: rgba(255, 203, 82, .68);
  color: #ffd36a;
}

.skill-catalog-kind.buff {
  border-color: rgba(62, 211, 180, .62);
  color: #66e3c5;
}

.skill-catalog-kind.godstone {
  border-color: rgba(255, 87, 105, .68);
  color: #ff7180;
}

.skill-catalog-kind.skill-catalog-type-active {
  border-color: rgba(169, 112, 255, .68);
  color: #a970ff;
  background: rgba(169, 112, 255, .1);
}

.skill-catalog-kind.skill-catalog-type-passive {
  border-color: rgba(240, 200, 90, .7);
  color: #f0c85a;
  background: rgba(240, 200, 90, .1);
}

.skill-catalog-kind.skill-catalog-type-stigma {
  border-color: rgba(255, 95, 109, .7);
  color: #ff5f6d;
  background: rgba(255, 95, 109, .1);
}

.skill-catalog-item-editor {
  position: relative;
  min-width: 0;
  padding: 6px 7px;
}

.skill-catalog-editor-popover {
  position: fixed;
  z-index: 30;
  top: 14vh;
  left: 50%;
  width: min(560px, calc(100vw - 40px));
  min-width: 0;
  max-height: 72vh;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid #31505b;
  border-radius: 10px;
  background: #071116;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72);
  transform: translateX(-50%);
}

.skill-catalog-editor-popover form {
  margin: 0;
}

.skill-catalog-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.skill-catalog-editor-head strong {
  overflow: hidden;
  color: #e5eff2;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-catalog-item-editor .skill-catalog-editor-close {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #39525d;
  color: #b9cbd1;
  background: #101c22;
}

.skill-catalog-item-editor textarea {
  min-height: 280px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}

.skill-catalog-item-editor form > div {
  margin-top: 8px;
}

.skill-catalog-item-editor button.danger {
  min-height: 32px;
  margin-top: 8px;
  color: #ffd9de;
  background: #8a2635;
}

.skill-catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.skill-catalog-pagination strong {
  color: #b7c9cf;
}

.skill-catalog-pagination .disabled {
  pointer-events: none;
  opacity: .35;
}

@media (max-width: 900px) {
  .admin-menu {
    grid-template-columns: 1fr 1fr;
  }

  .server-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .server-traffic-grid {
    grid-template-columns: 1fr;
  }

  .traffic-usage-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skill-catalog-job-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  .catalog-filter-form .wide {
    grid-column: 1 / -1;
  }

  .skill-catalog-release-state,
  .skill-catalog-import form,
  .skill-catalog-create form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .admin-menu,
  .skill-catalog-job-filter,
  .skill-catalog-release-state,
  .skill-catalog-import form,
  .skill-catalog-create form,
  .catalog-filter-form {
    grid-template-columns: 1fr;
  }

  .server-monitor-head {
    flex-direction: column;
  }

  .feature-usage-head {
    align-items: flex-start;
  }

  .feature-usage-head > p {
    text-align: left;
  }

  .feature-usage-grid {
    grid-template-columns: 1fr;
  }

  .feature-usage-card header {
    grid-template-columns: 1fr;
  }

  .feature-usage-card header small {
    grid-column: 1;
    grid-row: auto;
  }

  .feature-usage-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .server-monitor-meta {
    align-items: flex-start;
  }

  .server-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .server-contract-period {
    align-items: flex-start;
    flex-direction: column;
  }

  .server-contract-period b {
    display: none;
  }

  .server-contract-stats {
    grid-template-columns: 1fr;
  }

  .traffic-usage-breakdown {
    padding: 15px;
  }

  .traffic-usage-breakdown-head {
    flex-direction: column;
  }

  .traffic-usage-summary-grid,
  .traffic-usage-detail-grid {
    grid-template-columns: 1fr;
  }

  .traffic-usage-daily-card > header {
    flex-direction: column;
  }

  .catalog-filter-form .wide {
    grid-column: auto;
  }
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(30, minmax(18px, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 1080px;
  min-height: 240px;
  padding: 18px 10px 24px;
}

.bar-chart-viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.bar-item {
  display: grid;
  grid-template-rows: 170px 32px 18px;
  gap: 6px;
  min-width: 22px;
  text-align: center;
}

.bar-track {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 170px;
  border-bottom: 1px solid var(--line);
}

.bar-fill {
  display: block;
  width: 100%;
  max-width: 22px;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--accent), #71f7e5);
  box-shadow: 0 0 18px rgba(36, 224, 199, .24);
}

.admin-chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
}

.admin-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.admin-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(36, 224, 199, .3);
}

.admin-chart-legend i.a2dil2 {
  background: #ff63c6;
  box-shadow: 0 0 12px rgba(255, 99, 198, .3);
}

.admin-chart-legend i.feature-character-info {
  background: #5da8ff;
  box-shadow: 0 0 12px rgba(93, 168, 255, .3);
}

.admin-chart-legend i.feature-arcana {
  background: #35dfc8;
  box-shadow: 0 0 12px rgba(53, 223, 200, .3);
}

.admin-chart-legend i.feature-devanion {
  background: #9d7cff;
  box-shadow: 0 0 12px rgba(157, 124, 255, .3);
}

.bar-track.product-bars {
  gap: 3px;
}

.bar-fill.a2dil,
.bar-fill.a2dil2 {
  max-width: 10px;
}

.bar-fill.a2dil2 {
  background: linear-gradient(180deg, #ff63c6, #bc66ff);
  box-shadow: 0 0 18px rgba(255, 99, 198, .24);
}

.bar-fill.feature-character-info,
.bar-fill.feature-arcana,
.bar-fill.feature-devanion {
  max-width: 10px;
}

.bar-fill.feature-character-info {
  background: linear-gradient(180deg, #5da8ff, #75d6ff);
  box-shadow: 0 0 18px rgba(93, 168, 255, .23);
}

.bar-fill.feature-arcana {
  background: linear-gradient(180deg, #35dfc8, #55f2d3);
  box-shadow: 0 0 18px rgba(53, 223, 200, .23);
}

.bar-fill.feature-devanion {
  background: linear-gradient(180deg, #9d7cff, #c56cff);
  box-shadow: 0 0 18px rgba(157, 124, 255, .23);
}

.bar-fill.is-empty {
  min-height: 0;
  box-shadow: none;
}

.bar-item strong.bar-product-values {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}

.bar-product-values span:first-child {
  color: var(--accent);
}

.bar-product-values span:last-child {
  color: #ff82d0;
}

.bar-product-values.feature-values span:first-child {
  color: #55ead7;
}

.bar-product-values.feature-values span:last-child {
  color: #b99aff;
}

.bar-item strong {
  color: var(--text);
  font-size: 12px;
}

.bar-item span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.admin-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th, .admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.admin-table th {
  color: var(--muted);
  font-size: 13px;
}

/* Admin-only support page concept */
.server-life-card{position:relative;margin:0 0 18px;padding:27px;border:1px solid rgba(80,220,174,.28);border-radius:18px;overflow:hidden;background:radial-gradient(circle at 85% 0,rgba(46,214,172,.13),transparent 34%),linear-gradient(145deg,#101d21,#080f13)}.server-life-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent);transform:translateX(-100%);animation:server-life-scan 5s ease-in-out infinite}.server-life-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px}.server-life-head h2{margin:4px 0 5px;font-size:29px}.server-life-head p{margin:0;color:#9fb2ba}.server-life-head p strong{color:#65e1bb}.server-life-number{text-align:right;white-space:nowrap}.server-life-number strong{font-size:clamp(30px,5vw,48px);line-height:1;color:#d9fff0}.server-life-number span{color:#728891}.server-life-gauge{position:relative;height:30px;margin:24px 0 20px;padding:4px;border:1px solid #2b4547;border-radius:8px;background:#101c21;box-shadow:inset 0 2px 7px rgba(0,0,0,.45)}.server-life-gauge span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#1ba878,#58e0ad);box-shadow:0 0 22px rgba(58,221,170,.35)}.server-life-gauge i{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:12px;font-style:normal;font-weight:900;text-shadow:0 1px 3px #000}.server-combat-log{display:grid;grid-template-columns:1fr 1fr;gap:10px}.server-combat-log>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;padding:13px;border:1px solid #24343d;border-radius:11px;background:rgba(6,12,15,.48)}.server-combat-log span{font-size:16px;font-weight:900}.server-combat-log .damage{color:#ff788e}.server-combat-log .heal{color:#53dfae}.server-combat-log p{margin:0;color:#8fa4ad;font-size:12px;line-height:1.45}.server-combat-log b{display:block;color:#dbe8eb}.server-life-rule{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid #203038}.server-life-rule p{margin:0;color:#95a9b1;font-size:12px}.server-life-rule p b{margin-right:7px;color:#ffc06f}.server-life-rule code{padding:8px 10px;border:1px solid #293a42;border-radius:7px;color:#7fcfc5;background:#091116;font-size:11px}.server-life-card.watch{border-color:rgba(240,187,94,.35)}.server-life-card.watch .server-life-gauge span{background:linear-gradient(90deg,#bd7b26,#f0c35f)}.server-life-card.danger,.server-life-card.critical,.server-life-card.ended{border-color:rgba(255,101,126,.38)}.server-life-card.danger .server-life-gauge span,.server-life-card.critical .server-life-gauge span,.server-life-card.ended .server-life-gauge span{background:linear-gradient(90deg,#a52e47,#ff667d)}@keyframes server-life-scan{0%,70%,100%{transform:translateX(-100%)}85%{transform:translateX(100%)}}
.support-ledger-admin{margin-top:18px}.support-entry-form,.support-entry-edit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:18px;border:1px solid #263842;border-radius:13px;background:#091116}.support-entry-form label,.support-entry-edit label{display:flex;flex-direction:column;gap:6px}.support-entry-form label>span,.support-entry-edit label>span{color:#8fa5ae;font-size:12px;font-weight:700}.support-entry-form input,.support-entry-form select,.support-entry-edit input,.support-entry-edit select{width:100%;min-height:41px;padding:9px 11px;border:1px solid #30434d;border-radius:8px;color:#e4eef0;background:#101b21}.support-entry-form .wide,.support-entry-edit .wide{grid-column:span 2}.support-entry-form .support-public-check,.support-entry-edit .support-public-check{flex-direction:row;align-items:center;align-self:end;min-height:41px}.support-public-check input{width:17px;min-height:auto}.support-entry-form>button,.support-entry-edit>button{align-self:end;min-height:41px;border:0;border-radius:8px;background:#2fd6cf;color:#061113;font-weight:900;cursor:pointer}.support-form-notice{padding:11px 13px;border-radius:9px;font-size:13px}.support-form-notice.success{border:1px solid rgba(66,220,169,.3);color:#6be0b9;background:rgba(66,220,169,.08)}.support-form-notice.deleted{border:1px solid rgba(255,119,142,.3);color:#ff8ba0;background:rgba(255,119,142,.08)}.support-entry-list{display:flex;flex-direction:column;gap:8px;margin-top:18px}.support-entry-item{border:1px solid #243640;border-radius:10px;background:#0b1419}.support-entry-item summary{display:grid;grid-template-columns:55px 90px 1fr auto;align-items:center;gap:10px;padding:13px;cursor:pointer}.support-entry-item summary::marker{color:#708791}.support-entry-item summary>span:nth-child(2){color:#8299a3;font-size:12px}.support-entry-item summary>b{font-size:13px}.support-entry-type{padding:5px 7px;border-radius:6px;text-align:center;font-size:11px;font-weight:900}.support-entry-type.income{color:#55dfb0;background:rgba(85,223,176,.1)}.support-entry-type.expense{color:#ff8198;background:rgba(255,129,152,.1)}.support-entry-edit{margin:0 13px 10px}.support-entry-delete{display:flex;justify-content:flex-end;padding:0 13px 13px}.support-entry-delete button{padding:8px 11px;border:1px solid rgba(255,111,135,.3);border-radius:7px;color:#ff8297;background:rgba(255,111,135,.06);cursor:pointer}.support-empty{margin:0;padding:20px;border:1px dashed #2b3d46;border-radius:10px;color:#8298a2;text-align:center;font-size:13px}
@media(max-width:760px){.support-entry-form,.support-entry-edit{grid-template-columns:1fr 1fr}.support-entry-form .wide,.support-entry-edit .wide{grid-column:1/-1}.support-entry-item summary{grid-template-columns:48px 1fr auto}.support-entry-item summary>span:nth-child(2){display:none}}@media(max-width:500px){.support-entry-form,.support-entry-edit{grid-template-columns:1fr}.support-entry-form .wide,.support-entry-edit .wide{grid-column:auto}.support-entry-form .support-public-check,.support-entry-edit .support-public-check{align-self:start}.support-entry-item summary{grid-template-columns:45px 1fr}.support-entry-item summary>b{grid-column:2}.support-entry-item summary>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

.admin-title-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.admin-title-actions form{margin:0}.admin-title-actions .button{min-height:40px}.catalog-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-admin-panel{margin-top:18px}.catalog-entry-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;padding:18px;border:1px solid #263842;border-radius:13px;background:#091116}.catalog-entry-form label{display:flex;flex-direction:column;gap:6px}.catalog-entry-form label>span{color:#8fa5ae;font-size:12px;font-weight:700}.catalog-entry-form input,.catalog-entry-form select{width:100%;min-height:41px;padding:9px 11px;border:1px solid #30434d;border-radius:8px;color:#e4eef0;background:#101b21}.catalog-entry-form .wide{grid-column:span 2}.catalog-entry-form .catalog-check{flex-direction:row;align-items:center;align-self:end;min-height:41px}.catalog-entry-form .catalog-check input{width:17px;min-height:auto}.catalog-entry-form .catalog-check.verified span{color:#73dfb9}.catalog-entry-form>button{align-self:end;min-height:41px;border:0;border-radius:8px;background:#2fd6cf;color:#061113;font-weight:900;cursor:pointer}.catalog-entry-list{display:flex;flex-direction:column;gap:8px;margin-top:18px}.catalog-entry-item{border:1px solid #243640;border-radius:10px;background:#0b1419}.catalog-entry-item summary{display:grid;grid-template-columns:100px minmax(160px,1fr) minmax(160px,1fr) 90px;align-items:center;gap:12px;padding:13px;cursor:pointer}.catalog-entry-item summary code{color:#67cfff}.catalog-entry-item summary>span:not(.catalog-state){color:#8299a3;font-size:12px}.catalog-state{padding:5px 7px;border-radius:6px;text-align:center;font-size:11px;font-weight:900}.catalog-state.active{color:#55dfb0;background:rgba(85,223,176,.1)}.catalog-state.retired{color:#a1adb3;background:rgba(161,173,179,.1)}.catalog-entry-form.compact{margin:0 13px 10px}.catalog-delete-form{display:flex;justify-content:flex-end;padding:0 13px 13px}.catalog-delete-form button{padding:8px 11px;border:1px solid rgba(255,111,135,.3);border-radius:7px;color:#ff8297;background:rgba(255,111,135,.06);cursor:pointer}

@media(max-width:900px){.catalog-summary{grid-template-columns:1fr 1fr}.catalog-entry-form{grid-template-columns:1fr 1fr}.catalog-entry-form .wide{grid-column:1/-1}.catalog-entry-item summary{grid-template-columns:90px 1fr auto}.catalog-entry-item summary>span:not(.catalog-state){display:none}}@media(max-width:560px){.catalog-summary{grid-template-columns:1fr}.catalog-entry-form{grid-template-columns:1fr}.catalog-entry-form .wide{grid-column:auto}.catalog-entry-item summary{grid-template-columns:80px 1fr}.catalog-entry-item .catalog-state{display:none}}
.support-hero,.support-card-heading,.support-panel-head,.support-money-pair,.support-preview-actions{display:flex;align-items:center;justify-content:space-between;gap:20px}.support-hero{padding:38px 0 28px}.support-hero h1{margin:5px 0 8px;font-size:clamp(34px,5vw,58px);letter-spacing:-.05em}.support-hero p{margin:0}.support-status-badge{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(47,214,207,.28);border-radius:999px;color:#8feae5;background:rgba(47,214,207,.07);font-size:13px}.support-status-badge span{width:7px;height:7px;border-radius:50%;background:#2fd6cf;box-shadow:0 0 12px #2fd6cf}.support-overview{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:18px}.support-balance-card,.support-leader-card,.support-panel,.support-preview-actions{border:1px solid #24343e;background:linear-gradient(145deg,rgba(14,24,30,.97),rgba(7,13,18,.98));border-radius:18px}.support-balance-card{padding:25px}.support-card-heading h2,.support-panel-head h2{margin:4px 0 0}.support-balance{font-size:30px}.support-balance.positive{color:#51dfb3}.support-balance.negative{color:#ff7187}.support-life-track{height:14px;margin:24px 0 17px;padding:3px;background:#17242c;border:1px solid #2a3c47;border-radius:999px;overflow:hidden}.support-life-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2fd6cf,#70e39d);box-shadow:0 0 18px rgba(47,214,207,.5)}.support-money-pair>div{display:flex;flex-direction:column;gap:4px}.support-money-pair span,.support-flavor,.support-panel small,.support-private-note,.support-preview-actions span{color:#8fa3ae}.support-money-pair strong{font-size:20px}.support-flavor{margin:21px 0 0;padding-top:17px;border-top:1px solid #1d2a32}.support-flavor b{color:#d9fff5}.support-leader-card{position:relative;overflow:hidden;padding:27px;background:radial-gradient(circle at 85% 10%,rgba(47,214,207,.2),transparent 45%),linear-gradient(145deg,#101e23,#080e12)}.support-leader-card:after{content:"01";position:absolute;right:16px;bottom:-22px;font-size:110px;font-weight:900;color:rgba(255,255,255,.035)}.support-crown{display:block;margin-bottom:26px;color:#f4cd66;font-size:32px}.support-leader-card h2{margin:5px 0;font-size:38px}.support-leader-card>strong{font-size:22px;color:#61ded0}.support-leader-card>p:last-child{color:#a6bbc2}.support-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:18px;margin-top:18px}.support-panel{padding:24px}.support-panel-head{margin-bottom:22px}.support-panel-head>span,.support-legend{padding:6px 10px;border:1px solid #283a45;border-radius:999px;color:#93aab4;font-size:12px}.support-ranking ol{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.support-ranking li{display:grid;grid-template-columns:28px 145px minmax(80px,1fr) 82px;align-items:center;gap:12px;padding:10px;border-radius:11px}.support-ranking li:first-child{background:rgba(47,214,207,.07);border:1px solid rgba(47,214,207,.14)}.support-rank{color:#748993;font-weight:800;text-align:center}.support-ranking li:first-child .support-rank{color:#f4cd66}.support-class-copy{display:flex;flex-direction:column}.support-class-copy small{margin-top:2px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.support-class-meter{height:7px;background:#17252d;border-radius:999px;overflow:hidden}.support-class-meter span{display:block;height:100%;border-radius:inherit}.support-class-amount{text-align:right;font-size:13px}.support-expenses{display:flex;flex-direction:column;gap:10px}.support-expense-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #1b2931}.support-expense-row>div{display:flex;flex-direction:column}.support-expense-row>b{font-size:13px;color:#ff8798}.support-expense-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#162730;color:#65d9cf}.support-expense-icon.domain{color:#a48cff}.support-expense-icon.coffee{color:#f2bc68}.support-ledger-total{display:flex;justify-content:space-between;padding:18px 0 5px}.support-ledger-total strong{color:#ff8798}.support-private-note{margin:18px 0 0;padding:12px;border:1px dashed #2a3a43;border-radius:10px;font-size:12px;line-height:1.6}.support-history{margin-top:18px}.support-legend{display:flex;gap:14px}.support-legend span:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;background:#3ed6bd}.support-legend .expense:before{background:#ef7189}.support-month-chart{display:flex;align-items:flex-end;justify-content:space-around;min-height:235px;padding:18px 8px 0;border-bottom:1px solid #273943;background:repeating-linear-gradient(to top,transparent 0,transparent 44px,rgba(118,151,165,.08) 45px)}.support-month{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:70px}.support-month-bars{display:flex;align-items:flex-end;gap:6px;height:180px}.support-month-bars span{display:block;width:18px;border-radius:5px 5px 0 0;background:linear-gradient(#4be5ca,#229e91)}.support-month-bars .expense{background:linear-gradient(#f28aa0,#b94761)}.support-month small{font-size:10px;color:#7e949e}.support-preview-actions{margin:18px 0 34px;padding:20px 24px}.support-preview-actions>div{display:flex;flex-direction:column;gap:4px}.support-preview-actions button{padding:12px 18px;border:0;border-radius:10px;background:#26333a;color:#74858d;cursor:not-allowed}@media(max-width:850px){.support-overview,.support-grid{grid-template-columns:1fr}.support-ranking li{grid-template-columns:25px 100px 1fr 70px}.support-class-copy small{display:none}.server-combat-log{grid-template-columns:1fr}.server-life-rule{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.support-hero,.support-preview-actions,.server-life-head{align-items:flex-start;flex-direction:column}.server-life-number{text-align:left}.server-life-rule code{max-width:100%;white-space:normal}.support-status-badge{align-self:flex-start}.support-money-pair{align-items:flex-start;flex-direction:column}.support-ranking li{grid-template-columns:22px 75px 1fr}.support-class-amount{display:none}.support-month{min-width:44px}.support-month-bars span{width:12px}}

.my-page-title {
  padding-bottom: 28px;
}

.my-backup-section {
  margin: -10px 0 34px;
  padding: 22px;
  border: 1px solid rgba(112, 200, 255, .24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(17, 33, 50, .94), rgba(8, 13, 20, .96));
}

.my-backup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.my-backup-head h2 { margin: 3px 0 5px; }
.my-backup-head p { margin: 0; color: var(--muted); }

.my-backup-state {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.my-backup-state.saved {
  border-color: rgba(36, 224, 199, .38);
  background: rgba(36, 224, 199, .1);
  color: #7de8d8;
}

.my-backup-empty {
  padding: 18px;
  border: 1px dashed rgba(217, 222, 232, .18);
  border-radius: 8px;
  background: rgba(8, 12, 18, .54);
}

.my-backup-empty p { margin: 5px 0 0; color: var(--muted); }

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

.my-backup-summary article {
  padding: 14px;
  border: 1px solid rgba(217, 222, 232, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
}

.my-backup-summary span { color: var(--muted); font-size: 12px; }
.my-backup-summary strong { display: block; margin-top: 7px; font-size: 17px; }

.my-backup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.my-backup-meta span {
  padding: 6px 10px;
  border: 1px solid rgba(217, 222, 232, .13);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.my-backup-meta strong { color: var(--text); }

.my-backup-settings { display: flex; flex-wrap: wrap; gap: 6px; }
.my-backup-settings code { padding: 5px 8px; font-size: 11px; }

.my-backup-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.my-backup-detail-grid > article {
  padding: 16px;
  border: 1px solid rgba(217, 222, 232, .13);
  border-radius: 8px;
  background: rgba(8, 12, 18, .48);
}

.my-backup-detail-grid h3 { margin: 0 0 12px; font-size: 16px; }
.my-backup-account-list, .my-backup-task-list { display: grid; gap: 8px; }
.my-backup-account-list > div, .my-backup-task-list > div { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid rgba(217, 222, 232, .09); }
.my-backup-account-list > div:last-child, .my-backup-task-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.my-backup-account-list span, .my-backup-task-list span { color: var(--muted); font-size: 12px; }
.my-backup-character-guide { margin: -4px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.my-backup-character-saved { margin: 0 0 12px; padding: 8px 10px; border: 1px solid rgba(36, 224, 199, .28); border-radius: 7px; background: rgba(36, 224, 199, .08); color: #7de8d8; font-size: 12px; }
.my-backup-character-list { display: grid; gap: 7px; margin-top: 7px; }
.my-backup-character-row { display: flex; min-width: 0; padding: 9px 10px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(217, 222, 232, .1); border-radius: 7px; background: rgba(255, 255, 255, .018); }
.my-backup-character-row > span { display: grid; min-width: 0; gap: 3px; }
.my-backup-character-row b { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.my-backup-character-row small { color: var(--muted); }
.my-backup-character-row button { flex: 0 0 auto; min-width: 128px; height: 32px; padding: 0 10px; border-color: rgba(217, 222, 232, .18); color: var(--muted); background: rgba(8, 12, 18, .72); }
.my-backup-character-row button.enabled { border-color: rgba(36, 224, 199, .38); color: #7de8d8; background: rgba(36, 224, 199, .08); }
.my-backup-character-row.unverified { opacity: .7; }
.my-backup-character-row .my-backup-character-unverified { display: inline-flex; min-width: 128px; min-height: 32px; align-items: center; justify-content: center; border: 1px solid rgba(217, 222, 232, .12); border-radius: 6px; color: var(--muted); }
.my-backup-private-note { margin: 16px 0 0; color: #8fa9c4; font-size: 12px; }

.my-device-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -12px 0 20px;
}

.my-device-tabs a {
  display: inline-grid;
  gap: 4px;
  min-width: 180px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 17, 24, .72);
  color: var(--muted);
}

.my-device-tabs a.active {
  border-color: rgba(36, 224, 199, .76);
  background: var(--accent-soft);
  color: var(--text);
}

.my-device-tabs span {
  font-weight: 800;
}

.my-device-tabs small {
  font-size: 12px;
}

.my-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.my-summary-grid article {
  min-height: 102px;
  padding: 18px;
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    var(--panel);
}

.my-summary-grid article.wealth {
  border-color: rgba(36, 224, 199, .34);
  background:
    linear-gradient(135deg, rgba(36, 224, 199, .18), rgba(16, 23, 32, .9)),
    var(--panel);
}

.my-summary-grid span,
.my-state-meta span,
.my-money-grid span {
  color: var(--muted);
}

.my-summary-grid strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 28px;
}

.my-state-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.my-state-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 999px;
  background: rgba(12, 17, 24, .72);
  font-size: 13px;
}

.my-state-meta strong {
  color: var(--text);
}

.my-character-list {
  display: grid;
  gap: 14px;
  padding-bottom: 72px;
}

.my-character-card {
  border: 1px solid rgba(36, 224, 199, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008)),
    rgba(8, 12, 18, .9);
  padding: 16px;
  box-shadow: inset 3px 0 0 rgba(36, 224, 199, .5);
}

.my-character-card.current {
  border-color: rgba(245, 200, 91, .42);
  box-shadow: inset 3px 0 0 var(--gold);
}

.my-character-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.my-character-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.my-character-title img,
.my-character-placeholder {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(217, 222, 232, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  object-fit: contain;
}

.my-character-title h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.my-character-title p {
  margin: 0;
  color: var(--muted);
}

.my-character-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.my-character-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(112, 200, 255, .28);
  border-radius: 999px;
  background: rgba(112, 200, 255, .1);
  color: #b9dcff;
  font-size: 13px;
}

.my-character-chips strong {
  margin-left: 4px;
  color: var(--text);
}

.my-progress-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.my-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 10px 4px 6px;
  border: 1px solid rgba(217, 222, 232, .18);
  border-radius: 999px;
  background: rgba(16, 23, 32, .82);
}

.my-progress-pill img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.my-progress-pill span {
  color: var(--muted);
  font-size: 12px;
}

.my-progress-pill strong {
  color: var(--gold);
  font-size: 13px;
}

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

.my-money-grid div {
  min-height: 68px;
  padding: 12px;
  border: 1px solid rgba(245, 200, 91, .22);
  border-radius: 8px;
  background: rgba(245, 200, 91, .08);
}

.my-money-grid strong {
  display: block;
  margin-top: 8px;
  color: #ffd47a;
  font-size: 17px;
}

.my-empty-state {
  margin: 0 0 72px;
  padding: 28px;
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 8px;
  background: var(--panel);
}

.my-empty-state.compact {
  margin-top: 18px;
}

.my-empty-state h2 {
  margin-bottom: 8px;
}

.my-empty-state p {
  margin: 0;
  color: var(--muted);
}

.post-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.post-row span {
  font-weight: 700;
}

.reply-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid rgba(36, 224, 199, .45);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
}

.post-row time, .post-row small, .meta, .empty {
  color: var(--muted);
}

.post-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.post-owner-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(36, 224, 199, .4);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.admin-delete-form {
  margin: 0;
}

.post-delete-form {
  margin-top: 14px;
}

.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(227, 76, 95, .64);
  border-radius: 6px;
  background: var(--danger-soft);
  color: #ffbdc7;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.danger-button:hover,
.danger-button:focus-visible {
  border-color: var(--danger);
  color: var(--text);
}

.danger-button.small {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.back {
  color: var(--accent);
  display: inline-block;
  margin-bottom: 24px;
}

.post-detail h1, .page-title h1, .message h1 {
  font-size: 42px;
}

.content {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  white-space: pre-wrap;
  line-height: 1.8;
}

.replies-section {
  padding: 0 0 72px;
}

.reply-count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.reply-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.reply-card,
.admin-reply-form {
  border: 1px solid rgba(217, 222, 232, .14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(36, 224, 199, .06), rgba(255, 255, 255, .01)),
    var(--panel);
}

.reply-card {
  padding: 18px;
  box-shadow: inset 3px 0 0 var(--accent);
}

.reply-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
}

.reply-meta strong {
  color: var(--text);
}

.reply-meta time {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.reply-content {
  color: var(--text);
  line-height: 1.75;
  white-space: pre-wrap;
}

.admin-reply-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
}

.admin-reply-form .primary {
  justify-self: start;
  cursor: pointer;
}

.form {
  display: grid;
  gap: 18px;
  max-width: 720px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0c1014;
  color: var(--text);
  padding: 14px;
  font: inherit;
}

select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0c1014;
  color: var(--text);
  padding: 14px;
  font: inherit;
}

.error {
  color: var(--gold);
}

.arcana-page-title {
  padding-bottom: 24px;
}

.arcana-page-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arcana-usage-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  border-radius: 8px;
  background: #080b10;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
  overflow: auto;
}

.arcana-usage-dialog::backdrop {
  background: rgba(2, 4, 8, .82);
  backdrop-filter: blur(3px);
}

.arcana-usage-guide {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 28px;
  margin: 0;
  padding: 32px 72px 34px 32px;
}

.arcana-usage-guide h2 {
  margin: 0;
  color: var(--accent);
  font-size: 18px;
  line-height: 1.5;
}

.arcana-usage-guide ol {
  margin: 0;
  padding-left: 24px;
  columns: 2;
  column-gap: 48px;
  column-rule: 1px solid rgba(255, 255, 255, .07);
}

.arcana-usage-guide li {
  break-inside: avoid;
  margin: 0 0 12px;
  padding-left: 4px;
  color: #d9e0e9;
  font-size: 14px;
  line-height: 1.65;
}

.arcana-usage-guide li::marker {
  color: var(--accent);
  font-weight: 800;
}

.arcana-usage-guide li:last-child {
  margin-bottom: 0;
}

.arcana-usage-guide span,
.arcana-usage-guide small {
  color: var(--muted);
}

.arcana-usage-guide small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.55;
}

.arcana-tool {
  display: grid;
  gap: 34px;
  padding-bottom: 72px;
}

.arcana-character-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  max-height: min(860px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  border-radius: 8px;
  background: #080b10;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .72);
  overflow: auto;
}

.arcana-character-dialog::backdrop {
  background: rgba(2, 4, 8, .82);
  backdrop-filter: blur(3px);
}

.arcana-character-dialog-content {
  display: grid;
}

.arcana-character-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #10151b;
  color: var(--muted);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.arcana-character-dialog-close:hover,
.arcana-character-dialog-close:focus-visible {
  border-color: var(--accent);
  color: #fff;
  outline: none;
}

.arcana-search-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 24px;
}

.arcana-character-dialog .arcana-search-panel {
  padding-right: 64px;
  border: 0;
  border-radius: 0;
  background: #0b1015;
}

.arcana-character-dialog .arcana-result {
  padding: 22px 24px 24px;
  border-top: 1px solid var(--line);
}

.arcana-panel-heading,
.arcana-result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.arcana-panel-heading h2,
.arcana-result-heading h2 {
  margin: 0;
}

.arcana-panel-heading p {
  margin: 7px 0 0;
  color: var(--muted);
}

.arcana-saved-characters {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.arcana-saved-characters-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.arcana-saved-character-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: thin;
}

.arcana-saved-character {
  display: grid;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0c1014;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.arcana-saved-character strong,
.arcana-saved-character small {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcana-saved-character strong {
  font-size: 14px;
}

.arcana-saved-character small {
  color: var(--muted);
  font-size: 11px;
}

.arcana-saved-character:hover,
.arcana-saved-character:focus-visible,
.arcana-saved-character[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.arcana-saved-character.current {
  box-shadow: inset 3px 0 0 var(--accent);
}

.arcana-search-form {
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(260px, 1.4fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 22px;
}

.arcana-search-form label {
  min-width: 0;
  color: var(--text);
  font-weight: 700;
}

.arcana-search-form label small {
  color: var(--muted);
  font-weight: 400;
}

.arcana-search-form .primary {
  min-height: 49px;
  cursor: pointer;
}

.arcana-search-form > .primary { margin-top: 27px; }

.arcana-search-form .primary:disabled {
  cursor: wait;
  opacity: .6;
}

.arcana-search-status {
  min-height: 22px;
  margin: 14px 0 0;
  color: var(--muted);
}

.arcana-search-status.error {
  color: var(--gold);
}

.arcana-result {
  display: grid;
  gap: 20px;
}

.arcana-result[hidden] {
  display: none;
}

.arcana-result-heading .eyebrow {
  margin-bottom: 8px;
}

.arcana-count {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(36, 224, 199, .4);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.arcana-slot-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(96px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.arcana-stigma-section[hidden] {
  display: none;
}

.arcana-stigma-section {
  display: grid;
  gap: 10px;
}

.arcana-stigma-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.arcana-stigma-section h2,
.arcana-stigma-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.arcana-stigma-section > header > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.arcana-search-stigmas {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.arcana-saved-stigmas {
  margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--arcana-job-color) 35%, var(--line));
  border-bottom: 1px solid var(--line);
}

.arcana-saved-arcana {
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--arcana-job-color) 35%, var(--line));
}

.arcana-saved-arcana .arcana-slot-grid {
  margin-top: 12px;
}

.arcana-saved-stigmas > header > span {
  color: var(--arcana-job-color);
}

.arcana-stigma-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.arcana-stigma-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a0f15;
}

.arcana-stigma-item img {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #05070b;
  object-fit: cover;
}

.arcana-stigma-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.arcana-stigma-item strong {
  overflow: hidden;
  color: #eef3f8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcana-stigma-item span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
}

.arcana-stigma-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.arcana-result-actions {
  display: flex;
  justify-content: flex-end;
}

.arcana-apply-button {
  min-width: 120px;
  min-height: 44px;
  cursor: pointer;
}

.arcana-apply-button:disabled {
  cursor: wait;
  opacity: .6;
}

.arcana-slot {
  display: grid;
  grid-template-rows: auto 60px minmax(38px, auto);
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(245, 200, 91, .5);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(245, 200, 91, .08), var(--panel-2));
}

.arcana-slot.empty {
  border-color: var(--line);
  background: var(--panel-2);
}

.arcana-slot-label {
  color: var(--muted);
  font-size: 11px;
}

.arcana-slot-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 60px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #080b10;
  overflow: hidden;
}

.arcana-slot-media img {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
}

.arcana-slot-empty-mark {
  color: var(--line-strong);
  font-size: 24px;
}

.arcana-item-name {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.arcana-item-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.arcana-item-footer .arcana-item-name {
  min-width: 0;
}

.arcana-slot .arcana-item-footer {
  flex-direction: column;
  gap: 2px;
}

.arcana-enchant {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}

.arcana-skill-planner {
  --arcana-job-color: #7da0f9;
  display: grid;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.arcana-cloud-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.arcana-cloud-status {
  min-width: 0;
  min-height: 18px;
  margin: 0 auto 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.arcana-cloud-status.success {
  color: #83f0bc;
}

.arcana-cloud-status.error {
  color: var(--gold);
}

.arcana-cloud-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 4px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #080c11;
}

.arcana-job-tabs {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}

.arcana-job-tab {
  min-width: 0;
  min-height: 42px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.arcana-job-tab:hover,
.arcana-job-tab:focus-visible {
  border-color: var(--arcana-job-color);
  color: var(--text);
  outline: none;
}

.arcana-job-tab.active {
  border-color: var(--arcana-job-color);
  background: color-mix(in srgb, var(--arcana-job-color) 16%, #0b1015);
  color: var(--arcana-job-color);
  box-shadow: inset 0 -2px 0 var(--arcana-job-color);
}

.arcana-planner-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-top: -6px;
}

.arcana-plan-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 4px;
  min-width: min(100%, 420px);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #080c11;
}

.arcana-plan-tab {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.arcana-plan-tab:hover,
.arcana-plan-tab:focus-visible {
  border-color: color-mix(in srgb, var(--arcana-job-color) 66%, var(--line));
  color: var(--text);
  outline: none;
}

.arcana-plan-tab.active {
  border-color: var(--arcana-job-color);
  background: color-mix(in srgb, var(--arcana-job-color) 14%, #10151b);
  color: var(--arcana-job-color);
  box-shadow: inset 0 -2px 0 var(--arcana-job-color);
}

.arcana-planner-actions {
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(132px, auto) minmax(76px, auto);
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #080c11;
}

.arcana-planner-action-button {
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.arcana-planner-action-button:hover,
.arcana-planner-action-button:focus-visible {
  border-color: var(--arcana-job-color);
  background: color-mix(in srgb, var(--arcana-job-color) 14%, #10151b);
  color: #fff;
  outline: none;
}

.arcana-planner-action-button.active {
  border-color: var(--arcana-job-color);
  background: color-mix(in srgb, var(--arcana-job-color) 14%, #10151b);
  color: var(--arcana-job-color);
  box-shadow: inset 0 -2px 0 var(--arcana-job-color);
}

.arcana-planner-action-button:disabled {
  cursor: wait;
  opacity: .58;
}

.arcana-skill-table-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #070a0e;
  overflow: hidden;
}

.arcana-skill-table-scroll {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.arcana-skill-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--text);
}

.arcana-skill-table .arcana-col-rank {
  width: 68px;
}

.arcana-skill-table .arcana-col-skill {
  width: 210px;
}

.arcana-skill-table .arcana-col-level,
.arcana-skill-table .arcana-col-arcana,
.arcana-skill-table .arcana-col-bonus,
.arcana-skill-table .arcana-col-total {
  width: 76px;
}

.arcana-skill-table th,
.arcana-skill-table td {
  height: 39px;
  padding: 5px 8px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px dotted rgba(255, 255, 255, .28);
  text-align: center;
  vertical-align: middle;
}

.arcana-skill-table th:last-child,
.arcana-skill-table td:last-child {
  border-right: 0;
}

.arcana-skill-group + .arcana-skill-group .arcana-skill-group-header th {
  border-top: 5px solid #070a0e;
}

.arcana-skill-group-header th {
  height: 34px;
  background: #0b0e13;
  color: var(--gold);
  font-size: 13px;
  white-space: nowrap;
}

.arcana-skill-group-header th:first-child,
.arcana-skill-group-header th:last-child {
  color: var(--text);
}

.arcana-skill-group-header .arcana-skill-group-name {
  color: #f0a1c7;
  font-size: 14px;
}

.arcana-skill-group-header .arcana-header-level {
  color: #fff;
}

.arcana-header-with-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.arcana-header-reset-button {
  display: inline-grid;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  place-items: center;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.arcana-header-reset-button:hover {
  border-color: currentColor;
  background: rgba(255, 255, 255, .14);
}

.arcana-header-reset-button:focus-visible {
  outline: 2px solid var(--arcana-job-color);
  outline-offset: 1px;
}

.arcana-skill-group-header .arcana-header-equipment,
.arcana-skill-group-header .arcana-header-devanion {
  color: #aebdff;
}

.arcana-skill-group-header th.arcana-header-total {
  color: #83f0bc;
}

.arcana-skill-group.passive .arcana-skill-group-name {
  color: #b9acf4;
}

.arcana-skill-group tr[data-skill-code] {
  transition: opacity .14s ease, background .14s ease;
}

.arcana-skill-group tr[data-skill-code]:hover td {
  background: color-mix(in srgb, var(--arcana-job-color) 8%, #14181d);
}

.arcana-skill-group tr[data-skill-code].dragging {
  opacity: .42;
}

.arcana-skill-table td {
  background: #15191e;
}

.arcana-skill-table td.arcana-skill-rank {
  padding: 0 6px;
  background: color-mix(in srgb, var(--arcana-job-color) 48%, #342a3d);
  color: #fff;
}

.arcana-skill-rank-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.arcana-skill-table td.is-different {
  background: rgba(245, 200, 91, .08);
  outline: 1px solid rgba(245, 200, 91, .48);
  outline-offset: -2px;
}

.arcana-comparison-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid rgba(245, 200, 91, .58);
  color: #ffe39a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.arcana-skill-rank-number {
  font-size: 15px;
}

.arcana-skill-table td.arcana-skill-name {
  min-width: 0;
  background: #090c10;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
}

.arcana-skill-name-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

button.arcana-skill-name-inner {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.arcana-skill-name-inner.has-detail {
  cursor: pointer;
}

.arcana-skill-name-inner.has-detail:hover,
.arcana-skill-name-inner.has-detail:focus-visible {
  color: var(--arcana-job-color);
  outline: none;
}

.arcana-skill-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcana-skill-target-level {
  flex: 0 0 auto;
  color: var(--arcana-job-color);
  font-size: 12px;
  font-weight: 900;
}

.arcana-skill-target-comparison {
  flex: 0 0 auto;
  padding-left: 6px;
  border-left: 1px solid rgba(245, 200, 91, .58);
  color: #ffe39a;
  font-size: 11px;
  font-weight: 900;
}

.arcana-skill-detail-indicator {
  margin-left: auto;
  color: var(--arcana-job-color);
  font-size: 22px;
  line-height: 1;
}

.arcana-skill-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid rgba(250, 204, 21, 0.65);
  border-radius: 999px;
  color: #fde047;
  background: rgba(234, 179, 8, 0.12);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.arcana-skill-new-badge.inline {
  flex: 0 0 auto;
  margin-left: 7px;
}

.arcana-skill-detail-updated {
  text-decoration: underline;
  text-decoration-color: rgba(250, 204, 21, 0.65);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.arcana-skill-name-inner img {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  object-fit: cover;
  background: #05070a;
}

.arcana-skill-table td.arcana-skill-value {
  padding: 3px;
}

.arcana-skill-table td.arcana-skill-value:has(.arcana-value-button:not(:disabled)) {
  cursor: pointer;
}

.arcana-skill-table td.arcana-skill-value:has(.arcana-value-button:not(:disabled)):hover .arcana-value-button {
  border-color: var(--arcana-value-color);
  background: color-mix(in srgb, var(--arcana-value-color) 20%, transparent);
  color: #fff;
}

.arcana-value-button {
  --arcana-value-color: var(--gold);
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--arcana-value-color) 62%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--arcana-value-color) 10%, transparent);
  color: var(--arcana-value-color);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.arcana-value-button.has-comparison {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  padding: 0 5px;
}

.arcana-value-button.arcana {
  --arcana-value-color: var(--arcana-job-color);
}

.arcana-value-button.level {
  --arcana-value-color: #fff;
}

.arcana-value-button.arcana.is-empty,
.arcana-value-button.equipment.is-empty {
  border-color: transparent;
  background: transparent;
  color: transparent;
}

.arcana-value-button.equipment {
  --arcana-value-color: #7da0f9;
}

.arcana-value-button.devanion {
  --arcana-value-color: #7da0f9;
}

.arcana-value-button:hover,
.arcana-value-button:focus-visible,
.arcana-value-button[aria-expanded="true"] {
  border-color: var(--arcana-value-color);
  background: color-mix(in srgb, var(--arcana-value-color) 20%, transparent);
  color: #fff;
  outline: none;
}

.arcana-value-button:disabled {
  border-color: transparent;
  background: transparent;
  color: transparent;
  cursor: not-allowed;
  opacity: .18;
}

.arcana-value-button.has-comparison:disabled {
  border-color: color-mix(in srgb, var(--arcana-value-color) 62%, transparent);
  background: color-mix(in srgb, var(--arcana-value-color) 10%, transparent);
  color: var(--arcana-value-color);
  opacity: 1;
}

.arcana-value-picker {
  --arcana-picker-color: var(--gold);
  --arcana-picker-columns: 5;
  position: fixed;
  z-index: 1200;
  display: grid;
  grid-template-columns: repeat(var(--arcana-picker-columns), 36px);
  gap: 5px;
  width: max-content;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--arcana-picker-color) 65%, transparent);
  border-radius: 6px;
  background: #0b0f14;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}

.arcana-value-picker[data-value-type="arcana"] {
  --arcana-picker-color: var(--arcana-job-color);
}

.arcana-value-picker[data-value-type="equipment"] {
  --arcana-picker-color: #69d7c1;
}

.arcana-value-picker[data-value-type="devanion"] {
  --arcana-picker-color: #7da0f9;
}

.arcana-value-picker[hidden] {
  display: none;
}

.arcana-value-option {
  width: 36px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #151a20;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.arcana-value-option.clear {
  color: #f17d8a;
}

.arcana-value-option:hover,
.arcana-value-option:focus-visible,
.arcana-value-option.active {
  border-color: var(--arcana-picker-color);
  background: color-mix(in srgb, var(--arcana-picker-color) 18%, transparent);
  color: #fff;
  outline: none;
}

.arcana-skill-total {
  color: var(--arcana-job-color);
  font-size: 15px;
  font-weight: 800;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.arcana-skill-total.is-different {
  outline: 1px solid rgba(245, 200, 91, .68);
  outline-offset: -2px;
}

.arcana-skill-total.is-threshold {
  background: rgba(38, 185, 126, .2);
  box-shadow: inset 3px 0 0 #62e3aa, inset 0 0 18px rgba(38, 185, 126, .1);
  color: #83f0bc;
  font-size: 17px;
  font-weight: 900;
}

.arcana-skill-total.is-peak {
  background: rgba(245, 200, 91, .24);
  box-shadow: inset 3px 0 0 #f5c85b, inset 0 0 22px rgba(245, 200, 91, .14);
  color: #ffe39a;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(245, 200, 91, .36);
}

.arcana-skill-detail-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid color-mix(in srgb, #e4a55b 62%, var(--line-strong));
  border-radius: 8px;
  background: #080b10;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
  overflow: auto;
}

.arcana-skill-detail-dialog::backdrop {
  background: rgba(2, 4, 8, .82);
  backdrop-filter: blur(3px);
}

.arcana-skill-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #10151b;
  color: var(--muted);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.arcana-skill-detail-close:hover,
.arcana-skill-detail-close:focus-visible {
  border-color: #e4a55b;
  color: #fff;
  outline: none;
}

.arcana-skill-detail-content {
  padding: 20px 26px;
}

.arcana-skill-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 44px;
}

.arcana-skill-detail-kicker {
  margin: 0 0 4px;
  color: #e4a55b;
  font-size: 13px;
  font-weight: 800;
}

.arcana-skill-detail-header h2 {
  margin: 0;
  color: #fff;
  font-size: 27px;
  line-height: 1.25;
}

.arcana-skill-detail-tags {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.arcana-skill-detail-tags span {
  padding: 4px 8px;
  border: 1px solid rgba(112, 200, 255, .42);
  border-radius: 4px;
  background: rgba(112, 200, 255, .1);
  color: #9cd8ff;
  font-size: 13px;
  font-weight: 800;
}

.arcana-skill-detail-summary,
.arcana-skill-detail-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.arcana-skill-detail-description {
  margin: 0;
  color: #edf2f7;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}

.arcana-skill-detail-variable {
  padding: 1px 3px;
  background: rgba(245, 200, 91, .1);
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(245, 200, 91, .55);
  text-underline-offset: 3px;
}

.arcana-skill-detail-mobility {
  margin: 9px 0 0;
  color: var(--gold);
  font-weight: 800;
}

.arcana-skill-detail-section h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 15px;
}

.arcana-skill-detail-changes {
  border-left: 3px solid #69d7c1;
  background: rgba(105, 215, 193, .06);
}

.arcana-skill-detail-changes > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  padding: 6px 12px;
}

.arcana-skill-detail-changes strong {
  color: #fff;
}

.arcana-skill-detail-changes span {
  color: #69d7c1;
  font-weight: 800;
}

.arcana-skill-detail-section ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arcana-skill-detail-section li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-left: 16px;
  color: #b7c3d2;
  line-height: 1.55;
}

.arcana-skill-detail-trait-level {
  flex: 0 0 auto;
  color: #b070dd;
  font-size: 12px;
  font-weight: 800;
}

.arcana-skill-detail-section li::before {
  position: absolute;
  left: 0;
  color: #b070dd;
  content: "·";
  font-weight: 900;
}

.arcana-skill-detail-trait-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.arcana-skill-detail-trait-heading h3 {
  margin-bottom: 0;
}

.arcana-skill-detail-trait-summary {
  color: var(--arcana-job-color);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.arcana-skill-detail-section .arcana-skill-detail-trait-list {
  gap: 7px;
}

.arcana-skill-detail-section .arcana-skill-detail-trait-list li {
  display: block;
  padding-left: 0;
}

.arcana-skill-detail-section .arcana-skill-detail-trait-list li::before {
  content: none;
}

.arcana-skill-detail-trait-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 5px;
  background: rgba(255, 255, 255, .025);
  color: #b7c3d2;
  cursor: pointer;
}

.arcana-skill-detail-trait-option:hover,
.arcana-skill-detail-trait-option:focus-within {
  border-color: color-mix(in srgb, var(--arcana-job-color) 60%, transparent);
  background: color-mix(in srgb, var(--arcana-job-color) 8%, transparent);
}

.arcana-skill-detail-trait-option.selected {
  border-color: color-mix(in srgb, var(--arcana-job-color) 72%, transparent);
  background: color-mix(in srgb, var(--arcana-job-color) 13%, transparent);
  color: #fff;
}

.arcana-skill-detail-trait-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: .45;
}

.arcana-skill-detail-trait-option input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--arcana-job-color);
}

.arcana-skill-detail-trait-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.arcana-skill-detail-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.arcana-skill-detail-specs > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.arcana-skill-detail-specs > div:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.arcana-skill-detail-specs dt {
  color: var(--muted);
}

.arcana-skill-detail-specs dd {
  margin: 0;
  color: #fff;
  font-weight: 800;
  text-align: right;
}

.legal {
  max-width: 860px;
}

.legal .updated {
  color: var(--muted);
  margin: -8px 0 26px;
}

.legal h1 {
  font-size: clamp(34px, 5vw, 56px);
}

.legal h2 {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 22px;
}

.legal p,
.legal li {
  color: var(--muted);
  line-height: 1.75;
}

.legal ul {
  padding-left: 20px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-links a {
  color: var(--muted);
}

.footer-links a:hover {
  color: var(--accent);
}

@media (max-width: 760px) {
  .site-header, .site-footer, .page-title, .post-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .arcana-usage-guide {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 48px 24px 20px;
  }

  .arcana-page-title-actions {
    width: 100%;
  }

  .arcana-page-title-actions .secondary {
    flex: 1 1 0;
    text-align: center;
  }

  .arcana-usage-guide ol {
    columns: 1;
    column-rule: 0;
  }

  .site-header {
    padding: 18px;
  }

  nav {
    flex-wrap: wrap;
  }

  .arcana-saved-characters {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .arcana-search-form {
    grid-template-columns: 1fr;
  }

  .arcana-result-heading {
    align-items: flex-start;
  }

  .arcana-apply-button {
    width: 100%;
  }

  .arcana-job-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .arcana-cloud-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .arcana-cloud-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .arcana-cloud-actions .arcana-planner-action-button {
    padding-inline: 4px;
    font-size: 11px;
  }

  .arcana-planner-controls {
    align-items: stretch;
    flex-direction: column;
    margin-top: -4px;
  }

  .arcana-plan-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .arcana-planner-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #arcana-compare-values {
    grid-column: 1 / -1;
  }

  .arcana-planner-action-button {
    width: 100%;
  }

  .arcana-character-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .arcana-character-dialog .arcana-search-panel {
    padding: 18px 54px 18px 18px;
  }

  .arcana-character-dialog .arcana-result {
    padding: 18px;
  }

  .arcana-character-dialog-close {
    top: 12px;
    right: 12px;
  }

  .arcana-skill-detail-content {
    padding: 18px;
  }

  .arcana-skill-detail-header {
    display: block;
  }

  .arcana-skill-detail-specs {
    grid-template-columns: 1fr;
  }

  .arcana-skill-detail-specs > div:nth-child(odd) {
    border-right: 0;
  }

  .arcana-skill-table-panel {
    margin-right: -18px;
    border-radius: 6px 0 0 6px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 42px;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .roadmap-board {
    grid-template-columns: 1fr;
    padding-bottom: 48px;
  }

  .roadmap-panel {
    padding: 18px;
  }

  .guide-list {
    grid-template-columns: 1fr;
  }

  .guide-figure {
    padding: 8px;
  }

  .settings-mockup {
    padding: 10px;
  }

  .mock-toolbar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .mock-detail-grid {
    grid-template-columns: 1fr;
  }

  .mock-popup-head {
    align-items: flex-start;
  }

  .mock-panel-head,
  .mock-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .mock-panel-head .mock-soft-button,
  .mock-row > b,
  .mock-toggle-group,
  .mock-theme-presets,
  .mock-color-control,
  .mock-select-control {
    justify-self: start;
    justify-content: flex-start;
  }

  .mock-select-control {
    width: min(100%, 260px);
  }

  .mock-color-row {
    grid-template-columns: minmax(64px, 1fr) 30px minmax(82px, 1fr);
    gap: 6px;
  }

  .mock-keybind-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mock-level-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mock-level-options {
    justify-content: flex-start;
  }

  .mock-kina-row {
    grid-template-columns: minmax(42px, auto) auto auto;
    justify-content: start;
  }

  .mock-kina-row strong {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 190px;
  }

  .mock-report-picker,
  .mock-report-footer {
    grid-template-columns: 1fr;
  }

  .mock-report-footer .mock-soft-button {
    justify-self: start;
  }

  .range-row {
    grid-template-columns: 1fr auto;
  }

  .range-row .mock-range {
    grid-column: 1 / -1;
  }

  .notice-update {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .notice-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-summary {
    grid-template-columns: 1fr;
  }

  .my-summary-grid,
  .my-money-grid,
  .my-backup-summary,
  .my-backup-detail-grid {
    grid-template-columns: 1fr;
  }

  .my-backup-head { flex-direction: column; }
  .my-backup-character-row { align-items: stretch; flex-direction: column; }
  .my-backup-character-row button { width: 100%; }

  .my-character-head {
    flex-direction: column;
  }

  .my-character-chips {
    justify-content: flex-start;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 980px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dps-overview-grid {
    grid-template-columns: 1fr;
  }

  .roadmap-board {
    grid-template-columns: 1fr;
  }

  .notice-update {
    grid-template-columns: 1fr;
  }
}

.arcana-stats-page-title {
  align-items: flex-end;
  padding-bottom: 30px;
}

.arcana-stats-page-title h1 {
  margin-bottom: 14px;
}

.arcana-stats-intro {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.arcana-statistics {
  --arcana-stats-job-color: var(--accent);
  display: grid;
  gap: 28px;
  padding-bottom: 72px;
}

.arcana-stats-filter-band {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.arcana-stats-filter-group {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.arcana-stats-filter-group > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.arcana-stats-job-tabs,
.arcana-stats-plan-tabs {
  display: grid;
  gap: 6px;
}

.arcana-stats-job-tabs {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.arcana-stats-plan-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 300px;
}

.arcana-stats-job-tabs button,
.arcana-stats-plan-tabs button {
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0b1016;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.arcana-stats-job-tabs button:hover,
.arcana-stats-plan-tabs button:hover,
.arcana-stats-job-tabs button:focus-visible,
.arcana-stats-plan-tabs button:focus-visible {
  border-color: var(--arcana-stats-job-color);
  color: #fff;
  outline: none;
}

.arcana-stats-job-tabs button.active,
.arcana-stats-plan-tabs button.active {
  border-color: var(--arcana-stats-job-color);
  background: color-mix(in srgb, var(--arcana-stats-job-color) 20%, #0b1016);
  color: #fff;
  box-shadow: inset 0 -2px var(--arcana-stats-job-color);
}

.arcana-stats-status {
  min-height: 22px;
  margin: -12px 0 -14px;
  color: #d9e0e9;
  font-size: 14px;
}

.arcana-stats-status:empty {
  display: none;
}

.arcana-stats-status.empty {
  color: var(--muted);
}

.arcana-stats-status.error {
  color: var(--danger);
}

.arcana-stats-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.arcana-stats-summary article {
  min-width: 0;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--arcana-stats-job-color);
  border-radius: 6px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--arcana-stats-job-color) 12%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
}

.arcana-stats-summary article > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.arcana-stats-summary article > strong {
  display: block;
  margin-top: 15px;
  color: #fff;
  font-size: 28px;
  line-height: 1.1;
}

.arcana-stats-summary article > small {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

#arcana-stats-latest {
  font-size: 18px;
  line-height: 1.35;
}

.arcana-stats-ranking-section,
.arcana-stats-stigma-section {
  display: grid;
  gap: 28px;
  border: 0;
}

.arcana-stats-ranking-section > header,
.arcana-stats-stigma-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-inline: 14px;
}

.arcana-stats-ranking-section .eyebrow,
.arcana-stats-stigma-section .eyebrow {
  margin-bottom: 6px;
  color: var(--arcana-stats-job-color);
  font-size: 12px;
}

.arcana-stats-ranking-section h2,
.arcana-stats-stigma-section h2 {
  margin: 0;
  font-size: 24px;
}

.arcana-stats-ranking-section > header > span,
.arcana-stats-stigma-section > header > span {
  color: var(--muted);
  font-size: 12px;
}

.arcana-stats-ranking-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.arcana-stats-ranking-groups article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--arcana-stats-job-color) 10%, transparent), transparent 48%),
    #0b1016;
}

.arcana-stats-ranking-groups article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.arcana-stats-ranking-groups h3 {
  margin: 0;
  color: #fff;
  font-size: 14px;
}

.arcana-stats-ranking-groups article > header span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
}

.arcana-stats-ranking-groups ol {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.arcana-stats-ranking-groups li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.arcana-stats-ranking-groups li img {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #05070b;
  object-fit: cover;
}

.arcana-stats-ranking-groups li div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.arcana-stats-ranking-groups li strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #e9eef5;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcana-stats-ranking-groups li span {
  flex: 0 0 auto;
  color: var(--arcana-stats-job-color);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
}

.arcana-stats-empty {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.arcana-stats-stigma-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.arcana-stats-stigma-grid > .arcana-stats-empty {
  grid-column: 1 / -1;
  margin: 0;
}

.arcana-stats-stigma-grid article {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--arcana-stats-job-color);
  border-radius: 6px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--arcana-stats-job-color) 10%, transparent), transparent 52%),
    #0b1016;
}

.arcana-stats-stigma-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.arcana-stats-stigma-icon {
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #05070b;
  overflow: hidden;
}

.arcana-stats-stigma-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arcana-stats-stigma-heading > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.arcana-stats-stigma-heading strong,
.arcana-stats-stigma-heading span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcana-stats-stigma-heading strong {
  color: #fff;
  font-size: 13px;
}

.arcana-stats-stigma-heading span {
  flex: 0 0 auto;
  color: var(--arcana-stats-job-color);
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .arcana-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arcana-stats-ranking-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arcana-stats-stigma-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .arcana-stats-page-title {
    align-items: stretch;
  }

  .arcana-stats-page-title .secondary {
    width: 100%;
  }

  .arcana-stats-filter-group {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .arcana-stats-job-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .arcana-stats-plan-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .arcana-stats-summary,
  .arcana-stats-ranking-groups,
  .arcana-stats-stigma-grid {
    grid-template-columns: 1fr;
  }

  .arcana-stats-summary article {
    min-height: 116px;
  }

  .arcana-stats-ranking-section > header,
  .arcana-stats-stigma-section > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

}

/* Daevanion node comparison */
.devanion-page-title p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
}

.devanion-page-title .eyebrow,
.arcana-page-title .eyebrow {
  color: var(--a2-accent);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--a2-accent) 32%, transparent);
}

.devanion-tool {
  display: grid;
  gap: 24px;
  padding-bottom: 72px;
}

.devanion-search-panel,
.devanion-workspace,
.devanion-budget-panel,
.devanion-effect-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.devanion-search-panel { padding: 24px; }

.devanion-panel-heading,
.devanion-character-header,
.devanion-budget-panel,
.devanion-effect-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.devanion-panel-heading h2,
.devanion-character-header h2,
.devanion-budget-panel h3,
.devanion-effect-panel h3 { margin: 4px 0 0; }

.devanion-panel-heading p,
.devanion-character-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.devanion-search-form {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.25fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 22px;
}

.devanion-search-form > .primary {
  height: 54px;
  min-height: 54px;
  margin-top: 31px;
}

.devanion-search-form label,
.devanion-budget-input {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 700;
}

.devanion-search-form select,
.devanion-search-form input,
.devanion-budget-input input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  padding: 9px 11px;
}

.devanion-workspace {
  min-width: 0;
  overflow: hidden;
  padding: 24px;
}

.devanion-character-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.devanion-group-tabs,
.devanion-board-tabs,
.devanion-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.devanion-group-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 22px;
}

.devanion-group-tab,
.devanion-board-tab {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  padding: 11px 14px;
  cursor: pointer;
}

.devanion-group-tab.active,
.devanion-board-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.devanion-group-tab:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.devanion-budget-panel {
  align-items: center;
  margin-top: 18px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--job-color, var(--a2-accent)) 42%, var(--a2-border));
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--job-color, var(--a2-accent)) 16%, transparent), transparent 58%),
    var(--panel-2);
  box-shadow:
    inset 3px 0 color-mix(in srgb, var(--job-color, var(--a2-accent)) 72%, transparent),
    0 12px 30px color-mix(in srgb, var(--job-color, var(--a2-accent)) 8%, transparent);
}

.devanion-budget-input {
  grid-template-columns: auto minmax(190px, 240px);
  align-items: center;
}

.devanion-budget-input > span {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.devanion-budget-input small {
  color: var(--muted);
  white-space: nowrap;
}

.devanion-board-message.error { color: #ff8299; }

.devanion-budget-calculate { min-width: 180px; }

.devanion-priority-panel {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--job-color, var(--a2-accent)) 42%, var(--a2-border));
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--job-color, var(--a2-accent)) 14%, transparent), transparent 58%),
    var(--panel-2);
  box-shadow:
    inset 3px 0 color-mix(in srgb, var(--job-color, var(--a2-accent)) 68%, transparent),
    0 12px 30px color-mix(in srgb, var(--job-color, var(--a2-accent)) 7%, transparent);
  padding: 18px;
}

.devanion-priority-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.devanion-priority-panel h3,
.devanion-priority-panel h4 { margin: 4px 0 0; }

.devanion-priority-detail-toggle { min-width: 104px; }

.devanion-priority-overview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.devanion-priority-overview[hidden],
.devanion-priority-groups[hidden] { display: none; }

.devanion-priority-overview li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.devanion-priority-overview li:not(:last-child)::after {
  content: '→';
  color: var(--muted);
  font-size: 12px;
}

.devanion-priority-overview strong {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 5px 12px;
  font-size: 13px;
}

.devanion-priority-overview .grade-unique strong {
  border-color: rgba(215, 106, 20, .58);
  color: #ffc17f;
}

.devanion-priority-overview .grade-legend strong {
  border-color: rgba(79, 149, 212, .58);
  color: #bfe0ff;
}

.devanion-priority-overview .grade-rare strong {
  border-color: rgba(74, 158, 112, .58);
  color: #bce8cd;
}

.devanion-priority-overview .connector-only {
  gap: 6px;
}

.devanion-priority-overview .connector-only strong {
  border-style: dashed;
  border-color: rgba(112, 200, 255, .34);
  background: rgba(112, 200, 255, .06);
  color: #b8c9d4;
}

.devanion-priority-overview .connector-only small,
.devanion-priority-connector-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid rgba(112, 200, 255, .3);
  border-radius: 999px;
  background: rgba(112, 200, 255, .08);
  color: #9dd9ff;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
}

.devanion-priority-groups {
  min-width: 0;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 10, 15, .45);
  padding: 14px;
}

.devanion-priority-subheading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.devanion-priority-subheading small { color: var(--muted); }

.devanion-priority-group-list {
  display: grid;
  gap: 7px;
  max-height: 590px;
  overflow-y: auto;
  margin: 0;
  padding: 0 3px 0 0;
  list-style: none;
  scrollbar-color: var(--line-strong) transparent;
}

.devanion-priority-group-item {
  display: grid;
  position: relative;
  grid-template-columns: 28px 48px minmax(0, 1fr) 32px auto;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 6px 8px;
}

.devanion-priority-group-item.is-dragging { opacity: .42; }
.devanion-priority-group-item.is-drop-before::before,
.devanion-priority-group-item.is-drop-after::after {
  position: absolute;
  right: 4px;
  left: 4px;
  height: 3px;
  border-radius: 999px;
  background: #69baff;
  box-shadow: 0 0 10px rgba(105, 186, 255, .75);
  content: '';
}
.devanion-priority-group-item.is-drop-before::before { top: -5px; }
.devanion-priority-group-item.is-drop-after::after { bottom: -5px; }

.devanion-priority-group-item.is-disabled {
  border-color: rgba(255, 102, 132, .22);
  opacity: .56;
}

.devanion-priority-group-item.is-connector-only {
  border-style: dashed;
  border-color: rgba(112, 200, 255, .3);
  background: rgba(112, 200, 255, .045);
}

.devanion-priority-group-item.is-connector-only .devanion-priority-rank {
  background: rgba(112, 200, 255, .1);
  color: #9dd9ff;
}

.devanion-priority-group-item.is-connector-only .devanion-priority-grade {
  background: rgba(112, 200, 255, .12);
  color: #bde4ff;
}

.devanion-priority-rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.devanion-priority-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  background: #34404c;
  color: #e9edf2;
  font-size: 10px;
  font-weight: 900;
}

.devanion-priority-grade.grade-unique { background: #8b3e12; color: #ffd6a3; }
.devanion-priority-grade.grade-legend { background: #243d56; color: #bfe0ff; }
.devanion-priority-grade.grade-rare { background: #214737; color: #bce8cd; }
.devanion-priority-grade.grade-common { background: #32404b; color: #e1e7ed; }

.devanion-priority-group-label { display: grid; gap: 3px; min-width: 0; }
.devanion-priority-group-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devanion-priority-group-label small { color: var(--muted); font-size: 11px; }

.devanion-priority-move-actions { display: inline-flex; gap: 4px; }

.devanion-priority-drag-handle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: #9fc5d9;
  font-size: 22px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}
.devanion-priority-drag-handle:active { cursor: grabbing; }
.devanion-priority-drag-handle.disabled { opacity: .25; cursor: default; }

.devanion-priority-move {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  padding: 0;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.devanion-priority-move:disabled { opacity: .3; cursor: default; }

.devanion-priority-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 102, 132, .08);
  color: #ff9caf;
  padding: 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.devanion-priority-group-item.is-connector-only .devanion-priority-toggle {
  border-color: rgba(36, 224, 199, .38);
  background: rgba(36, 224, 199, .08);
  color: var(--accent);
}

.devanion-board-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-top: 18px;
}
.devanion-board-tab { width: 100%; }
.devanion-board-tabs[hidden] { display: none; }

.devanion-comparison-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(190px, 1.35fr);
  gap: 10px;
  margin-top: 18px;
}

.devanion-comparison-summary article {
  display: grid;
  gap: 5px;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  padding: 13px;
}

.devanion-comparison-summary span {
  color: var(--muted);
  font-size: 13px;
}

.devanion-comparison-summary article > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.devanion-node-view-filter {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  padding: 3px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.devanion-node-view-filter:hover,
.devanion-node-view-filter[aria-pressed="true"] {
  border-color: currentColor;
  color: #fff;
  background: rgba(105, 186, 255, .16);
}

.devanion-comparison-summary .removed .devanion-node-view-filter[aria-pressed="true"] {
  background: rgba(255, 102, 132, .16);
}

.devanion-comparison-summary strong { font-size: 21px; }
.devanion-comparison-summary .preserved strong { color: #6ce5b1; }
.devanion-comparison-summary .added strong { color: #69baff; }
.devanion-comparison-summary .removed strong { color: #ff8299; }

.devanion-clear-current-view {
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--muted);
  padding: 13px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.devanion-clear-current-view:hover {
  border-color: rgba(105, 186, 255, .7);
  color: #d8efff;
  transform: translateY(-1px);
}

.devanion-clear-current-view[aria-pressed="true"] {
  border-color: #69baff;
  background: linear-gradient(145deg, rgba(46, 155, 255, .3), rgba(7, 60, 130, .42));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(105, 186, 255, .2), 0 0 20px rgba(46, 155, 255, .18), inset 0 1px rgba(255, 255, 255, .08);
}

.devanion-clear-current-view:focus-visible {
  outline: 3px solid rgba(105, 186, 255, .52);
  outline-offset: 2px;
}

.devanion-legend {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

.devanion-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.devanion-legend i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4b5664;
}

.devanion-legend i.preserved { background: #39d89a; }
.devanion-legend i.added { background: #4aa9ff; }
.devanion-legend i.removed { background: #ff6684; }

.devanion-node.is-filter-hidden,
.devanion-board-lines .is-filter-hidden {
  opacity: .42;
  filter: grayscale(1);
  pointer-events: none;
}

.devanion-board-message {
  min-height: 22px;
  margin-top: 12px;
}

.devanion-board-scroll {
  overflow: auto;
  max-width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: radial-gradient(circle at center, rgba(36, 224, 199, .07), transparent 34%), #070b10;
  padding: 18px;
  scrollbar-color: var(--line-strong) transparent;
}

.devanion-board-canvas {
  position: relative;
  margin: 0 auto;
}

.devanion-board-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.devanion-board-lines line {
  stroke: #24303b;
  stroke-width: 5;
  stroke-linecap: round;
}

.devanion-board-lines line.is-preserved { stroke: rgba(57, 216, 154, .58); }
.devanion-board-lines line.is-added { stroke: rgba(74, 169, 255, .9); }
.devanion-board-lines line.is-removed { stroke: rgba(255, 102, 132, .62); }

.devanion-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #d5c48b;
  border-radius: 11px;
  background: linear-gradient(145deg, #137f91, #075466);
  color: #e8fbff;
  padding: 2px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(235, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .28);
}

.devanion-node-label {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.devanion-node.grade-rare {
  border-radius: 50%;
  border-color: #b9aa78;
  background: linear-gradient(145deg, #27664b, #153a2d);
  color: #e9f7d8;
}

.devanion-node.grade-legend {
  border-radius: 50% 50% 8px 8px;
  border-color: #b8aa7d;
  background: linear-gradient(145deg, #29445d, #142538);
  color: #e7f4ff;
}

.devanion-node.grade-unique {
  transform: rotate(45deg);
  border-radius: 8px;
  border-color: #c99b56;
  background: linear-gradient(145deg, #d76a14, #71320e);
  color: #fff0c5;
}

.devanion-node.grade-unique .devanion-node-label { transform: rotate(-45deg); }

.devanion-board-canvas[data-node-group="ariel"] .devanion-node.grade-common {
  border-color: #e2b76f;
  background: linear-gradient(145deg, #dc623d, #7b251e);
  color: #fff6e8;
}

.devanion-board-canvas[data-node-group="markutan"] .devanion-node.grade-common {
  border-color: #c8bd8e;
  background: linear-gradient(145deg, #718453, #30442d);
  color: #f1f7dc;
}

.devanion-board-canvas[data-node-group="yustiel"] .devanion-node.grade-common {
  border-color: #efc57f;
  background: linear-gradient(145deg, #f06c5c 0%, #cd493e 52%, #8b2829 100%);
  color: #fff8f3;
}

.devanion-board-canvas[data-node-group="aspel"] .devanion-node.grade-common {
  border-color: #cbbd9b;
  background: linear-gradient(145deg, #77648c, #3c3152);
  color: #f5edff;
}

.devanion-node.is-start {
  border-color: #f1c66f;
  background: #2b2418;
  color: #ffe7a8;
  font-size: 8px;
  cursor: default;
}

.devanion-node.is-preserved {
  box-shadow: 0 0 0 3px rgba(57, 216, 154, .58), inset 0 0 0 1px rgba(255, 255, 255, .13), 0 7px 16px rgba(0, 0, 0, .35);
}

.devanion-board-canvas[data-node-group] .devanion-node.is-added {
  border-color: #b8e2ff;
  background: linear-gradient(145deg, #2e9bff 0%, #126bcf 55%, #073c82 100%);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(74, 169, 255, .9), 0 0 22px rgba(46, 155, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 7px 16px rgba(0, 0, 0, .35);
}

.devanion-board-canvas[data-node-group] .devanion-node.is-removed {
  border-color: #ffc1ce;
  background: linear-gradient(145deg, #f04f70 0%, #bd2648 55%, #70142d 100%);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 102, 132, .82), 0 0 22px rgba(240, 79, 112, .42), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 7px 16px rgba(0, 0, 0, .35);
  opacity: .9;
}

.devanion-board-canvas[data-node-group] .devanion-node.is-unselected {
  border-color: #606872;
  background: linear-gradient(145deg, #3b424a, #20252b);
  color: #a9b0b8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 10px rgba(0, 0, 0, .22);
  opacity: .72;
}

.devanion-node:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.devanion-effect-panel {
  margin-top: 22px;
  padding: 20px;
}

.devanion-effect-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.devanion-effect-overview article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  padding: 10px 14px;
}

.devanion-effect-overview span { color: var(--muted); font-size: 13px; }
.devanion-effect-overview strong { font-size: 20px; }
.devanion-effect-overview .positive strong { color: #6ce5b1; }
.devanion-effect-overview .negative strong { color: #ff8299; }

.devanion-effect-highlights {
  min-height: 22px;
  margin: 12px 0 0;
  color: #d9e9f1;
  font-size: 14px;
  font-weight: 700;
}

.devanion-effect-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.devanion-effect-filters button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 14, 21, .76);
  color: var(--muted);
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.devanion-effect-filters button.active {
  border-color: rgba(105, 186, 255, .68);
  background: rgba(105, 186, 255, .14);
  color: #e9f7ff;
}

.devanion-effect-filters span { color: #fff; }

.devanion-effect-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.devanion-effect-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 16, 24, .82);
  padding: 13px;
}

.devanion-effect-card.positive { border-color: rgba(108, 229, 177, .35); }
.devanion-effect-card.negative { border-color: rgba(255, 130, 153, .4); }

.devanion-effect-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.devanion-effect-card > header strong { flex: none; font-size: 17px; }
.devanion-effect-card.positive > header strong { color: #6ce5b1; }
.devanion-effect-card.negative > header strong { color: #ff8299; }
.devanion-effect-card.unchanged > header strong { color: var(--muted); }

.devanion-effect-card p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 17px;
}

.devanion-effect-card p span { color: var(--muted); }
.devanion-effect-card p i { color: #6c8290; font-style: normal; }
.devanion-effect-card p b { color: #fff; }
.devanion-effect-card small { color: var(--muted); font-size: 12px; }

.devanion-effect-details {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

.devanion-effect-details > summary {
  width: fit-content;
  color: #9fb7c5;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.devanion-effect-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}

.devanion-effect-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.devanion-effect-table th,
.devanion-effect-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: right;
}

.devanion-effect-table th:first-child { text-align: left; }
.devanion-effect-table td:not(:first-child) { white-space: nowrap; }

.devanion-effect-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.devanion-effect-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 3px 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.devanion-effect-grade.grade-unique { background: linear-gradient(145deg, #d76a14, #71320e); }
.devanion-effect-grade.grade-legend { background: linear-gradient(145deg, #29445d, #142538); }
.devanion-effect-grade.grade-rare { background: linear-gradient(145deg, #27664b, #153a2d); }
.devanion-effect-grade.grade-common { background: linear-gradient(145deg, #137f91, #075466); }
#devanion-effect-rows[data-node-group="ariel"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #dc623d, #7b251e); }
#devanion-effect-rows[data-node-group="markutan"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #718453, #30442d); }
#devanion-effect-rows[data-node-group="yustiel"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #f06c5c 0%, #cd493e 52%, #8b2829 100%); }
#devanion-effect-rows[data-node-group="aspel"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #77648c, #3c3152); }
.devanion-effect-cards[data-node-group="ariel"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #dc623d, #7b251e); }
.devanion-effect-cards[data-node-group="markutan"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #718453, #30442d); }
.devanion-effect-cards[data-node-group="yustiel"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #f06c5c 0%, #cd493e 52%, #8b2829 100%); }
.devanion-effect-cards[data-node-group="aspel"] .devanion-effect-grade.grade-common { background: linear-gradient(145deg, #77648c, #3c3152); }

.devanion-effect-table thead th { color: var(--muted); font-size: 12px; }
.devanion-effect-table td.positive { color: #6ce5b1; }
.devanion-effect-table td.negative { color: #ff8299; }
.devanion-effect-table td.remaining-nodes { color: #f1c66f; font-weight: 800; }

.devanion-effect-empty {
  margin: 16px 0 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .devanion-effect-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .devanion-budget-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .devanion-budget-calculate { width: 100%; }
  .devanion-priority-panel > header { flex-direction: column; }
  .devanion-priority-detail-toggle { width: 100%; }
}

@media (max-width: 620px) {
  .devanion-effect-overview,
  .devanion-effect-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .devanion-search-panel,
  .devanion-workspace { padding: 18px; }

  .devanion-panel-heading,
  .devanion-character-header {
    align-items: stretch;
    flex-direction: column;
  }

  .devanion-search-form { grid-template-columns: 1fr; }

  .devanion-search-form button {
    flex: 1;
    width: 100%;
  }

  .arcana-search-form > .primary,
  .devanion-search-form > .primary { margin-top: 0; }

  .devanion-group-tabs,
  .devanion-board-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .devanion-budget-input { grid-template-columns: 1fr; }
  .devanion-priority-panel {
    width: 100%;
    max-width: calc(100vw - 40px);
    overflow: hidden;
    padding: 14px;
  }
  .devanion-priority-groups { min-width: 0; max-width: 100%; padding: 10px; }
  .devanion-priority-subheading { align-items: flex-start; flex-direction: column; }
  .devanion-priority-subheading small { max-width: 100%; overflow-wrap: anywhere; }
  .devanion-priority-group-list { min-width: 0; max-width: 100%; }
  .devanion-priority-group-item {
    grid-template-columns: 26px 42px minmax(0, 1fr) 32px;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 8px 6px;
  }
  .devanion-priority-group-item .devanion-priority-move-actions {
    grid-column: 2 / -1;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }
  .devanion-comparison-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .devanion-clear-current-view {
    grid-column: 1 / -1;
    min-height: 54px;
  }
  .devanion-board-scroll { padding: 12px; }
}
.my-a2dil2-state {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid rgba(212, 185, 94, 0.28);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(9, 20, 27, 0.96), rgba(5, 13, 19, 0.98));
}
.my-a2dil2-overall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.my-a2dil2-overall article { padding: 16px; border: 1px solid rgba(138, 173, 188, 0.2); border-radius: 14px; background: rgba(5, 12, 17, 0.72); }
.my-a2dil2-overall span, .my-a2dil2-account header span { display: block; color: #8da4af; font-size: 12px; }
.my-a2dil2-overall strong { display: block; margin-top: 6px; color: #f1d879; font-size: 20px; }
.my-a2dil2-updated { margin: 12px 0 0; color: #8198a3; font-size: 12px; }
.my-a2dil2-account-list { display: grid; gap: 16px; margin-top: 20px; }
.my-a2dil2-account { padding: 18px; border: 1px solid rgba(138, 173, 188, 0.22); border-radius: 16px; background: rgba(4, 11, 16, 0.7); }
.my-a2dil2-account > header, .my-a2dil2-character > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.my-a2dil2-account > header strong { font-size: 18px; color: #eef6f8; }
.my-a2dil2-account > header small, .my-a2dil2-verified { color: #78909a; font-size: 11px; }
.my-a2dil2-account-values, .my-a2dil2-character-values { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.my-a2dil2-account-values span, .my-a2dil2-character-values span { padding: 9px 10px; border-radius: 9px; background: rgba(19, 38, 47, 0.64); color: #8fa5ae; font-size: 11px; }
.my-a2dil2-account-values b, .my-a2dil2-character-values b { display: block; margin-top: 3px; color: #e9f0f2; font-size: 13px; }
.my-a2dil2-character-list { display: grid; gap: 12px; margin-top: 14px; }
.my-a2dil2-character { padding: 14px; border-left: 3px solid #d2b84f; border-radius: 12px; background: rgba(10, 24, 31, 0.76); }
.my-a2dil2-character-name { display: flex; align-items: center; gap: 10px; }
.my-a2dil2-character-name img { width: 34px; height: 34px; border-radius: 8px; }
.my-a2dil2-character-name span, .my-a2dil2-character-name small { display: block; }
.my-a2dil2-character-name small { margin-top: 2px; color: #869ca5; font-size: 11px; }
.my-a2dil2-homework { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.my-a2dil2-homework span { padding: 7px 9px; border: 1px solid rgba(123, 166, 181, 0.2); border-radius: 8px; color: #9fb2b9; font-size: 11px; }
.my-a2dil2-homework span.complete { opacity: 0.58; }
.my-a2dil2-homework b { margin-right: 6px; color: #e5ecee; }
.my-a2dil2-privacy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(138, 173, 188, 0.14); color: #8fa4ad; font-size: 12px; }
.my-a2dil2-privacy button { padding: 8px 12px; border: 1px solid rgba(210, 184, 79, 0.45); border-radius: 8px; background: transparent; color: #d9c46d; cursor: pointer; }
.my-a2dil2-privacy button.enabled { background: rgba(210, 184, 79, 0.16); }
@media (max-width: 900px) {
  .my-a2dil2-overall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-a2dil2-account-values, .my-a2dil2-character-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A2DIL2 product theme for the public website. */
html {
  min-height: 100%;
  background: var(--a2-bg-app);
  scrollbar-color: rgba(var(--a2-accent-rgb), .32) transparent;
  scrollbar-width: thin;
}

body {
  min-height: 100vh;
  color: var(--a2-text-primary);
  background:
    radial-gradient(circle at 82% 4%, rgba(var(--a2-accent-rgb), .085), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(112, 200, 255, .045), transparent 34%),
    linear-gradient(155deg, #02060b 0%, var(--a2-bg-app) 52%, #02050a 100%);
  font-family: var(--a2-font-family);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--a2-text-bright);
  background: rgba(var(--a2-accent-rgb), .28);
}

* {
  scrollbar-color: rgba(var(--a2-accent-rgb), .32) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--a2-accent-rgb), .32);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--a2-accent-rgb), .52); }

:where(a, button, input, select, textarea, summary, [role="button"]) {
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--a2-accent);
  outline-offset: 2px;
  box-shadow: var(--a2-focus-ring);
}

:where(button, input, select, textarea):disabled,
:where(button, input, select, textarea)[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.55);
  opacity: .46;
}

main {
  width: min(1180px, calc(100% - 40px));
}

.site-header {
  min-height: 66px;
  padding: 0 28px;
  border-bottom: 1px solid var(--a2-border);
  background: rgba(2, 5, 10, .88);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .22), inset 0 -1px rgba(var(--a2-accent-rgb), .025);
  backdrop-filter: blur(18px) saturate(125%);
}

.brand { gap: 10px; }
.brand img { width: 36px; height: 36px; }
.brand-text {
  color: var(--a2-text-bright);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

.brand-text .logo-i { color: var(--a2-accent); }
.brand-text .logo-l { color: var(--a2-red); }

.site-header nav { gap: 4px; }

.site-header nav a,
.site-header nav button {
  display: inline-flex;
  min-height: 34px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--a2-radius);
  color: var(--a2-text-secondary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.site-header nav a:hover,
.site-header nav button:hover {
  border-color: color-mix(in srgb, var(--a2-accent) 28%, var(--a2-border));
  color: var(--a2-text-bright);
  background: rgba(var(--a2-accent-rgb), .07);
}

.site-header nav .login {
  border-color: color-mix(in srgb, var(--a2-accent) 38%, var(--a2-border));
  color: var(--a2-accent);
  background: rgba(var(--a2-accent-rgb), .055);
}

.site-header nav .login:hover {
  border-color: rgba(var(--a2-accent-rgb), .66);
  color: var(--a2-text-bright);
  background: rgba(var(--a2-accent-rgb), .12);
}

.eyebrow {
  color: var(--a2-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.35;
}

.page-title {
  padding: 48px 2px 26px;
  align-items: flex-end;
  border-bottom: 1px solid var(--a2-border);
}

.page-title h1,
.post-detail h1,
.message h1 {
  margin: 4px 0 0;
  color: var(--a2-text-bright);
  font-size: clamp(32px, 4.3vw, 48px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.page-title p:not(.eyebrow) {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--a2-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

h2,
h3,
h4 { color: var(--a2-text-bright); }
h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.02em; }

.muted,
.meta,
.empty { color: var(--a2-text-secondary); }

.hero-simple {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, .8fr);
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  min-height: auto;
  margin: 36px 0 24px;
  padding: clamp(32px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--a2-accent) 22%, var(--a2-border));
  border-radius: var(--a2-frame-radius);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--a2-accent-rgb), .11), transparent 34%),
    linear-gradient(145deg, rgba(9, 18, 27, .98), rgba(3, 9, 15, .98));
  box-shadow: var(--a2-shadow-raised), inset 0 1px rgba(255, 255, 255, .035);
}

.hero-simple::after {
  position: absolute;
  right: -120px;
  top: -180px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(var(--a2-accent-rgb), .16);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(var(--a2-accent-rgb), .09), inset 0 0 60px rgba(var(--a2-accent-rgb), .045);
  content: "";
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 1; }
.hero-logo { color: var(--a2-text-bright); letter-spacing: -.045em; }
.hero-copy p:not(.eyebrow) { color: var(--a2-text-secondary); }
.hero-copy .hero-aliases { color: color-mix(in srgb, var(--a2-text-primary) 80%, var(--a2-text-secondary)); }

.home-feature-visual {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 180px;
  align-items: start;
  justify-self: end;
  width: min(100%, 480px);
  transform: translateX(clamp(32px, 5vw, 58px));
}

.home-launcher-shot {
  position: relative;
  overflow: hidden;
  width: 180px;
  border: 1px solid rgba(var(--a2-accent-rgb), .5);
  border-radius: 13px;
  background: #06151b;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38), 0 0 30px rgba(var(--a2-accent-rgb), .08);
}

.home-launcher-shot img { display: block; width: 100%; height: auto; }

.home-feature-labels {
  position: relative;
  height: 556px;
}

.home-feature-label {
  position: absolute;
  right: 56px;
  display: grid;
  justify-items: end;
  width: calc(100% - 56px);
  text-align: right;
  transform: translateY(-50%);
}

.home-feature-label::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(236, 247, 249, .95), rgba(var(--a2-accent-rgb), .75));
  box-shadow: 0 0 10px rgba(var(--a2-accent-rgb), .18);
  content: "";
}

.home-feature-label strong { color: var(--a2-text-bright); font-size: 15px; line-height: 1.25; }
.home-feature-label span { margin-top: 4px; color: var(--a2-text-tertiary); font-size: 10px; line-height: 1.35; }
.home-feature-tasks { top: 161px; }
.home-feature-party { top: 222px; }
.home-feature-dps { top: 282px; }
.home-feature-buff { top: 343px; }
.home-feature-dps strong { color: var(--a2-accent); }

.home-menu-guide {
  margin: 0 0 24px;
  padding: 0;
}

.home-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.home-menu-card {
  display: grid;
  grid-template-columns: minmax(300px, 42%) minmax(0, 1fr) 32px;
  align-items: center;
  gap: clamp(20px, 3vw, 38px);
  min-height: 246px;
  padding: 0 26px 0 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--job-color, var(--a2-border)) 26%, var(--a2-border));
  border-radius: var(--a2-card-radius);
  color: inherit;
  background: rgba(3, 11, 16, .72);
  box-shadow: inset 3px 0 color-mix(in srgb, var(--job-color) 76%, transparent);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.home-menu-card:hover,
.home-menu-card:focus-visible {
  border-color: color-mix(in srgb, var(--job-color) 66%, var(--a2-border));
  background: color-mix(in srgb, var(--job-color) 6%, rgba(3, 11, 16, .9));
  transform: translateY(-2px);
  box-shadow: inset 4px 0 var(--job-color), 0 12px 32px color-mix(in srgb, var(--job-color) 10%, transparent);
}

.home-menu-card figure { align-self: stretch; min-height: 246px; margin: 0; overflow: hidden; border-right: 1px solid var(--a2-border); background: #02080c; }
.home-menu-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .82; transition: opacity .2s ease, transform .35s ease; }
.home-menu-card:hover figure img,
.home-menu-card:focus-visible figure img { opacity: 1; transform: scale(1.025); }
.home-menu-number { display: block; margin-bottom: 11px; color: var(--job-color, var(--a2-accent)); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.home-menu-card > div { min-width: 0; }
.home-menu-card strong { display: block; color: color-mix(in srgb, var(--job-color) 26%, var(--a2-text-bright)); font-size: clamp(27px, 3vw, 35px); line-height: 1.2; letter-spacing: -.04em; }
.home-menu-card p { max-width: 560px; margin: 14px 0 20px; color: var(--a2-text-secondary); font-size: 15px; line-height: 1.7; }
.home-menu-card small { color: var(--job-color, var(--a2-accent)); font-size: 13px; font-weight: 900; }
.home-menu-arrow { color: var(--a2-text-tertiary); font-size: 24px; transition: color .18s ease, transform .18s ease; }
.home-menu-card:hover .home-menu-arrow,
.home-menu-card:focus-visible .home-menu-arrow { color: var(--job-color, var(--a2-accent)); transform: translateX(3px); }

.migration-notice {
  border-color: color-mix(in srgb, var(--a2-red) 42%, var(--a2-border));
  border-radius: var(--a2-card-radius);
  background: rgba(var(--a2-red-rgb), .075);
}

.migration-notice strong { color: #ef7373; }
.migration-notice span { color: var(--a2-text-secondary); }

.primary,
.secondary,
.button {
  min-height: 40px;
  border-radius: var(--a2-radius);
  font-family: var(--a2-font-family);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.primary {
  border: 1px solid color-mix(in srgb, var(--a2-accent) 58%, var(--a2-border));
  color: var(--a2-accent);
  background: rgba(var(--a2-accent-rgb), .095);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 10px 28px rgba(0, 0, 0, .18);
}

.primary:hover,
.primary:focus-visible {
  border-color: rgba(var(--a2-accent-rgb), .82);
  color: var(--a2-text-bright);
  background: rgba(var(--a2-accent-rgb), .17);
  box-shadow: var(--a2-focus-ring), 0 12px 30px rgba(0, 0, 0, .22);
}

.secondary,
.button.secondary {
  border: 1px solid var(--a2-border-strong);
  color: var(--a2-text-primary);
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}

.secondary:hover,
.button.secondary:hover,
.secondary:focus-visible,
.button.secondary:focus-visible {
  border-color: color-mix(in srgb, var(--a2-accent) 42%, var(--a2-border));
  color: var(--a2-accent);
  background: rgba(var(--a2-accent-rgb), .075);
}

.primary:active,
.secondary:active,
.button:active { transform: translateY(1px); }

.danger-button,
button.danger {
  border-color: color-mix(in srgb, var(--a2-red) 54%, var(--a2-border));
  border-radius: var(--a2-radius);
  color: #ef7373;
  background: rgba(var(--a2-red-rgb), .075);
}

.danger-button:hover,
button.danger:hover {
  border-color: var(--a2-red);
  color: var(--a2-text-bright);
  background: rgba(var(--a2-red-rgb), .14);
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body select,
body textarea {
  min-height: 42px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius);
  color: var(--a2-text-primary);
  background: rgba(3, 9, 15, .72);
  font-family: var(--a2-font-family);
  caret-color: var(--a2-accent);
}

body textarea { line-height: 1.6; }

body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
body select:hover,
body textarea:hover { border-color: var(--a2-border-strong); }

body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body select:focus,
body textarea:focus {
  border-color: color-mix(in srgb, var(--a2-accent) 58%, var(--a2-border));
  outline: none;
  background: color-mix(in srgb, var(--a2-accent) 4%, rgba(3, 9, 15, .78));
  box-shadow: var(--a2-focus-ring);
}

body input::placeholder,
body textarea::placeholder { color: color-mix(in srgb, var(--a2-text-secondary) 72%, transparent); }

body input[type="checkbox"],
body input[type="radio"] { accent-color: var(--a2-accent); }

:where(
  .roadmap-panel,
  .release-item,
  .admin-summary article,
  .admin-panel,
  .reply-card,
  .admin-reply-form,
  .message,
  .my-empty-state,
  .my-a2dil2-state,
  .my-a2dil2-account,
  .skill-history-panel,
  .support-panel,
  .support-balance-card,
  .server-life-card,
  .support-leader-card,
  .support-account-card,
  .arcana-search-panel,
  .arcana-skill-planner,
  .arcana-result,
  .arcana-stats-filter-band,
  .arcana-stats-summary,
  .arcana-stats-ranking-section,
  .arcana-stats-stigma-section,
  .devanion-search-panel,
  .devanion-workspace,
  .devanion-budget-panel,
  .devanion-priority-panel,
  .devanion-effect-panel
) {
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .022), transparent 52%),
    var(--a2-surface);
  box-shadow: var(--a2-shadow-card), inset 0 1px rgba(255, 255, 255, .025);
}

:where(
  .server-metric-card,
  .server-contract-card,
  .my-summary-grid article,
  .my-progress-grid article,
  .my-money-grid div,
  .my-a2dil2-overall article,
  .arcana-stats-summary article,
  .devanion-comparison-summary article,
  .catalog-dungeon-card,
  .catalog-boss-card,
  .catalog-proposal-item,
  .skill-catalog-item-editor,
  .skill-report-content
) {
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(7, 14, 21, .76);
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}

:where(
  .server-metric-card,
  .catalog-dungeon-card,
  .catalog-boss-card,
  .catalog-proposal-item,
  .skill-history-card,
  .post-row,
  .asset-list a
):hover {
  border-color: color-mix(in srgb, var(--a2-accent) 30%, var(--a2-border));
  background-color: rgba(12, 23, 31, .82);
}

.panel-head,
.arcana-panel-heading,
.devanion-panel-heading,
.support-panel-head,
.support-card-heading {
  border-bottom-color: var(--a2-border);
}

.panel-head h2,
.arcana-panel-heading h2,
.devanion-panel-heading h2,
.support-panel-head h2 { color: var(--a2-text-bright); }

[class*="-tabs"] > button,
[class*="-tabs"] > a,
[class*="-tabs"] > label > span,
.skill-history-jobs button,
.skill-report-filter a {
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius);
  color: var(--a2-text-secondary);
  background: rgba(255, 255, 255, .025);
  font-weight: 700;
}

[class*="-tabs"] > button:hover,
[class*="-tabs"] > a:hover,
[class*="-tabs"] > label:hover > span,
.skill-history-jobs button:hover,
.skill-report-filter a:hover {
  border-color: color-mix(in srgb, var(--a2-accent) 30%, var(--a2-border));
  color: var(--a2-text-primary);
  background: rgba(var(--a2-accent-rgb), .055);
}

[class*="-tabs"] > button.active,
[class*="-tabs"] > a.active,
[class*="-tabs"] > button[aria-selected="true"],
[class*="-tabs"] > label > input:checked + span,
.skill-history-jobs button.active,
.skill-report-filter a.active {
  border-color: color-mix(in srgb, var(--a2-accent) 48%, var(--a2-border));
  color: var(--a2-accent);
  background: rgba(var(--a2-accent-rgb), .1);
  box-shadow: inset 0 -2px 0 var(--a2-accent);
}

.board-tabs {
  padding: 6px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(3, 9, 15, .58);
}

.post-list {
  display: grid;
  gap: 8px;
  border-top: 0;
}

.post-row {
  min-height: 62px;
  padding: 0 16px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(5, 11, 18, .72);
}

.post-row:hover {
  color: var(--a2-text-bright);
  transform: translateY(-1px);
}

.board-archive-notice,
.support-form-notice,
.skill-report-admin-notice {
  border: 1px solid color-mix(in srgb, var(--a2-accent) 22%, var(--a2-border));
  border-radius: var(--a2-card-radius);
  color: var(--a2-text-secondary);
  background: rgba(var(--a2-accent-rgb), .045);
}

.reply-badge,
.board-origin-badge,
.catalog-state,
.catalog-count-badge,
.support-status-badge,
.skill-catalog-kind,
.skill-catalog-type span,
.devanion-effect-grade,
.devanion-priority-grade {
  border-radius: 999px;
  font-weight: 800;
}

.reply-badge {
  border-color: rgba(var(--a2-accent-rgb), .42);
  color: var(--a2-accent);
  background: rgba(var(--a2-accent-rgb), .085);
}

.release-list { gap: 12px; }
.release-item { padding: 22px; }

.release-body {
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius);
  color: var(--a2-text-secondary);
  background: rgba(3, 9, 15, .72);
}

.asset-list a {
  padding: 11px 12px;
  border: 1px solid transparent;
  border-top-color: var(--a2-border);
  border-radius: var(--a2-radius);
}

.asset-list a:hover {
  color: var(--a2-accent);
  transform: translateX(2px);
}

.github-link { color: var(--a2-blue); }

.roadmap-panel { padding: 22px; }
.roadmap-panel.releases-panel { box-shadow: inset 3px 0 0 var(--a2-yellow), var(--a2-shadow-card); }

.status-list li {
  border-color: var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(3, 9, 15, .52);
}

.status-list li::before {
  background: var(--a2-accent);
  box-shadow: 0 0 16px rgba(var(--a2-accent-rgb), .5);
}

.admin-menu {
  border-color: var(--a2-border);
  border-radius: var(--a2-panel-radius);
  background: rgba(3, 9, 15, .68);
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}

.admin-menu a {
  border-color: transparent;
  border-radius: var(--a2-radius);
  color: var(--a2-text-secondary);
}

.admin-menu a:hover {
  border-color: color-mix(in srgb, var(--a2-accent) 26%, var(--a2-border));
  color: var(--a2-text-primary);
  background: rgba(var(--a2-accent-rgb), .055);
}

.admin-menu a.active {
  border-color: color-mix(in srgb, var(--a2-accent) 48%, var(--a2-border));
  color: var(--a2-text-bright);
  background: rgba(var(--a2-accent-rgb), .1);
  box-shadow: inset 0 -2px 0 var(--a2-accent);
}

.admin-menu a.active span { color: var(--a2-accent); }
.admin-panel { border-radius: var(--a2-panel-radius); }

.server-metric-card {
  border-color: var(--a2-border);
  background: linear-gradient(145deg, rgba(11, 20, 31, .9), rgba(5, 11, 18, .9));
}

.server-metric-card > span,
.server-metric-card small { color: var(--a2-text-secondary); }
.server-metric-card > strong { color: var(--a2-text-bright); }
.server-metric-card.traffic > strong { color: var(--a2-accent); }
.server-metric-card > i { background: rgba(255, 255, 255, .07); }
.server-metric-card > i b { background: linear-gradient(90deg, var(--a2-accent-dim), var(--a2-accent)); }

.admin-table-wrap,
.skill-catalog-table-wrap,
.devanion-effect-table-wrap,
.arcana-skill-table-scroll {
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(3, 9, 15, .52);
}

.admin-table-wrap.skill-catalog-table-wrap {
  padding-top: 0;
  border-top: 1px solid var(--a2-border);
}

body table { border-color: var(--a2-border); }
body table th,
body table td { border-color: var(--a2-border); }
body table thead th {
  color: var(--a2-text-secondary);
  background: rgba(255, 255, 255, .025);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .025em;
}
body table tbody tr:hover { background: rgba(var(--a2-accent-rgb), .035); }

.catalog-entry-form,
.catalog-create-form,
.catalog-background-editor,
.catalog-filter-form,
.skill-catalog-import {
  border-color: var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(3, 9, 15, .58);
}

.catalog-dungeon-card,
.catalog-boss-card,
.catalog-proposal-item,
.skill-catalog-item-editor { border-color: var(--a2-border); }

.message {
  width: min(620px, 100%);
  margin: 56px auto;
  padding: 32px;
  border: 1px solid color-mix(in srgb, var(--a2-accent) 24%, var(--a2-border));
  border-radius: var(--a2-panel-radius);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--a2-accent-rgb), .08), transparent 36%),
    var(--a2-surface-raised);
  box-shadow: var(--a2-shadow-raised);
}

.message p {
  margin: 12px 0 22px;
  color: var(--a2-text-secondary);
  line-height: 1.7;
}

.post-detail {
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-panel-radius);
  background: var(--a2-surface);
  box-shadow: var(--a2-shadow-card);
}

.content { border-top-color: var(--a2-border); color: var(--a2-text-primary); }

.form:not(.support-entry-form):not(.support-entry-edit):not(.catalog-entry-form):not(.catalog-create-form) {
  padding: 24px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-panel-radius);
  background: var(--a2-surface);
  box-shadow: var(--a2-shadow-card);
}

dialog {
  border-color: color-mix(in srgb, var(--a2-accent) 26%, var(--a2-border));
  border-radius: var(--a2-panel-radius);
  color: var(--a2-text-primary);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--a2-accent-rgb), .075), transparent 34%),
    linear-gradient(155deg, rgba(10, 19, 28, .99), rgba(3, 8, 13, .99));
  box-shadow: var(--a2-shadow-raised);
}

dialog::backdrop {
  background: rgba(0, 3, 7, .76);
  backdrop-filter: blur(4px);
}

.skill-history-jobs,
.skill-history-panel,
.skill-history-card {
  border-color: var(--a2-border);
}

.skill-history-jobs { background: rgba(3, 9, 15, .62); }
.skill-history-panel { background: linear-gradient(160deg, rgba(10, 21, 28, .92), rgba(4, 11, 16, .92)); }
.skill-history-card { background: rgba(8, 17, 24, .82); }
.skill-history-card:hover { background: var(--a2-surface-hover); }

.support-hero,
.support-overview,
.support-history,
.support-ledger { color: var(--a2-text-primary); }

.support-panel,
.support-balance-card,
.server-life-card,
.support-leader-card,
.support-account-card {
  border-color: var(--a2-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .02), transparent 54%),
    rgba(5, 11, 18, .82);
}

.arcana-search-panel,
.arcana-skill-planner,
.arcana-result,
.devanion-search-panel,
.devanion-workspace { border-radius: var(--a2-panel-radius); }

.arcana-character-dialog-content,
.arcana-skill-detail-content,
.devanion-priority-groups,
.devanion-board-scroll {
  border-color: var(--a2-border);
  background: rgba(3, 9, 15, .58);
}

.my-a2dil2-state {
  border-color: color-mix(in srgb, var(--a2-yellow) 30%, var(--a2-border));
  border-radius: var(--a2-panel-radius);
  background: linear-gradient(145deg, rgba(9, 18, 27, .96), rgba(3, 9, 15, .98));
}

.my-a2dil2-account,
.my-a2dil2-overall article,
.my-a2dil2-account-values span,
.my-a2dil2-character-values span {
  border-color: var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(7, 14, 21, .74);
}

.my-a2dil2-overall strong { color: var(--a2-yellow); }

.legal p,
.legal li { color: var(--a2-text-secondary); }
.legal h2 { border-top-color: var(--a2-border); }

.site-footer {
  margin-top: 30px;
  padding: 22px 28px;
  border-top: 1px solid var(--a2-border);
  color: var(--a2-text-secondary);
  background: rgba(2, 5, 10, .66);
}

.footer-links a { color: var(--a2-text-secondary); }
.footer-links a:hover { color: var(--a2-accent); }

.error,
.form-message.error { color: #ef7373; }
.success,
.form-message.success { color: var(--a2-green); }

/* Shared A2DIL2 job identity */
[data-job-key="gladiator"] { --job-color: var(--a2-job-color-gladiator); }
[data-job-key="ranger"] { --job-color: var(--a2-job-color-ranger); }
[data-job-key="sorcerer"] { --job-color: var(--a2-job-color-sorcerer); }
[data-job-key="assassin"] { --job-color: var(--a2-job-color-assassin); }
[data-job-key="templar"] { --job-color: var(--a2-job-color-templar); }
[data-job-key="spiritmaster"] { --job-color: var(--a2-job-color-spiritmaster); }
[data-job-key="cleric"] { --job-color: var(--a2-job-color-cleric); }
[data-job-key="chanter"] { --job-color: var(--a2-job-color-chanter); }
[data-job-key="gwonseong"] { --job-color: var(--a2-job-color-gwonseong); }

.a2-job-icon {
  --job-icon: none;
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  background: var(--job-color, var(--a2-text-secondary));
  -webkit-mask: var(--job-icon) center / contain no-repeat;
  mask: var(--job-icon) center / contain no-repeat;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--job-color, var(--a2-accent)) 34%, transparent));
}

.a2-job-icon.a2-job-icon-large { width: 44px; height: 44px; }
.a2-job-icon:not([data-job-key]) { display: none; }
.a2-job-icon[data-job-key="gladiator"] { --job-icon: url('/class-icons/gladiator.svg'); }
.a2-job-icon[data-job-key="ranger"] { --job-icon: url('/class-icons/ranger.svg'); }
.a2-job-icon[data-job-key="sorcerer"] { --job-icon: url('/class-icons/sorcerer.svg'); }
.a2-job-icon[data-job-key="assassin"] { --job-icon: url('/class-icons/assassin.svg'); }
.a2-job-icon[data-job-key="templar"] { --job-icon: url('/class-icons/templar.svg'); }
.a2-job-icon[data-job-key="spiritmaster"] { --job-icon: url('/class-icons/spiritmaster.svg'); }
.a2-job-icon[data-job-key="cleric"] { --job-icon: url('/class-icons/cleric.svg'); }
.a2-job-icon[data-job-key="chanter"] { --job-icon: url('/class-icons/chanter.svg'); }
.a2-job-icon[data-job-key="gwonseong"] { --job-icon: url('/class-icons/gwonseong.svg'); }

[data-job-theme][data-job-key] {
  border-color: color-mix(in srgb, var(--job-color) 38%, var(--a2-border));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--job-color) 12%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(10, 19, 28, .94), rgba(4, 10, 16, .94));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--job-color) 76%, transparent);
}

.skill-history-jobs button,
.arcana-job-tab,
.arcana-stats-job-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.skill-history-jobs button[data-job-key],
.arcana-job-tab[data-job-key],
.arcana-stats-job-tabs button[data-job-key] {
  border-color: color-mix(in srgb, var(--job-color) 20%, var(--a2-border));
  background: color-mix(in srgb, var(--job-color) 7%, #0b1016);
}

.skill-history-jobs button[data-job-key]:hover,
.skill-history-jobs button[data-job-key]:focus-visible,
.skill-history-jobs button[data-job-key].active,
.arcana-job-tab[data-job-key]:hover,
.arcana-job-tab[data-job-key]:focus-visible,
.arcana-job-tab[data-job-key].active,
.arcana-stats-job-tabs button[data-job-key]:hover,
.arcana-stats-job-tabs button[data-job-key]:focus-visible,
.arcana-stats-job-tabs button[data-job-key].active {
  border-color: color-mix(in srgb, var(--job-color) 74%, white 8%);
  color: var(--job-color);
  background: color-mix(in srgb, var(--job-color) 13%, rgba(7, 16, 23, .96));
  box-shadow: inset 0 -2px var(--job-color), 0 0 15px color-mix(in srgb, var(--job-color) 13%, transparent);
}

.skill-history-jobs button[data-job-key]:focus-visible,
.arcana-job-tab[data-job-key]:focus-visible,
.arcana-stats-job-tabs button[data-job-key]:focus-visible {
  outline: 2px solid var(--job-color);
  outline-offset: 2px;
}

.skill-history-jobs button .a2-job-icon,
.arcana-job-tab .a2-job-icon,
.arcana-stats-job-tabs button .a2-job-icon { width: 24px; height: 24px; }

.skill-history-summary .skill-history-current-job {
  justify-content: flex-start;
  gap: 11px;
  border-color: color-mix(in srgb, var(--job-color) 42%, var(--a2-border));
  background: linear-gradient(90deg, color-mix(in srgb, var(--job-color) 11%, rgba(7, 16, 23, .94)), rgba(7, 16, 23, .94));
  box-shadow: inset 3px 0 var(--job-color);
}

.skill-history-summary-copy { display: grid; gap: 2px; }
.skill-history-summary .skill-history-summary-copy span { color: var(--a2-text-secondary); }
.skill-history-summary .skill-history-summary-copy strong { color: var(--job-color); font-size: 15px; }

.skill-history-columns[data-job-key] .skill-history-panel {
  border-top-color: color-mix(in srgb, var(--job-color) 58%, var(--a2-border));
}

.skill-history-columns[data-job-key] .skill-history-card {
  border-left-color: color-mix(in srgb, var(--job-color) 48%, var(--a2-border));
}

.skill-history-columns[data-job-key] .skill-history-card:hover,
.skill-history-dialog[data-job-key] {
  border-color: color-mix(in srgb, var(--job-color) 55%, var(--a2-border));
  box-shadow: 0 18px 52px rgba(0, 0, 0, .42), 0 0 24px color-mix(in srgb, var(--job-color) 8%, transparent);
}

.skill-history-dialog[data-job-key] .skill-history-kicker { color: var(--job-color); }

.skill-history-panel[data-category="active"],
.skill-history-summary [data-category="active"],
.skill-history-dialog[data-skill-category="active"] {
  --skill-type-color: #a970ff;
  --skill-type-rgb: 169, 112, 255;
}

.skill-history-panel[data-category="passive"],
.skill-history-summary [data-category="passive"],
.skill-history-dialog[data-skill-category="passive"] {
  --skill-type-color: #f0c85a;
  --skill-type-rgb: 240, 200, 90;
}

.skill-history-panel[data-category="stigma"],
.skill-history-summary [data-category="stigma"],
.skill-history-dialog[data-skill-category="stigma"] {
  --skill-type-color: #ff5f6d;
  --skill-type-rgb: 255, 95, 109;
}

.skill-history-summary [data-category] {
  border-color: rgba(var(--skill-type-rgb), .34);
  background: linear-gradient(90deg, rgba(var(--skill-type-rgb), .1), rgba(7, 16, 23, .94));
  box-shadow: inset 3px 0 var(--skill-type-color);
}

.skill-history-summary [data-category] strong,
.skill-history-panel[data-category] h2,
.skill-history-panel[data-category] .skill-history-arrow {
  color: var(--skill-type-color);
}

.skill-history-columns[data-job-key] .skill-history-panel[data-category] {
  border-top-color: rgba(var(--skill-type-rgb), .72);
}

.skill-history-panel[data-category] > header {
  background: linear-gradient(90deg, rgba(var(--skill-type-rgb), .1), transparent 58%);
}

.skill-history-columns[data-job-key] .skill-history-panel[data-category] .skill-history-card {
  border-left-color: rgba(var(--skill-type-rgb), .58);
  box-shadow: inset 3px 0 var(--skill-type-color);
}

.skill-history-columns[data-job-key] .skill-history-panel[data-category] .skill-history-card:hover {
  border-color: rgba(var(--skill-type-rgb), .7);
  box-shadow: inset 3px 0 var(--skill-type-color), 0 10px 28px rgba(var(--skill-type-rgb), .1);
}

.skill-history-dialog[data-skill-category] {
  border-color: rgba(var(--skill-type-rgb), .62);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .42), 0 0 28px rgba(var(--skill-type-rgb), .1);
}

.skill-history-dialog[data-skill-category] .skill-history-kicker {
  color: var(--skill-type-color);
}

.arcana-skill-planner[data-job-key],
.arcana-statistics[data-job-key] {
  border-top-color: color-mix(in srgb, var(--job-color) 66%, var(--a2-border));
}

/* Arcana single-character calculator */
.arcana-app { display: grid; gap: 22px; padding-bottom: 72px; }
.arcana-search-panel { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: var(--panel); }
.devanion-search-form .arcana-statistics-consent { grid-column: 1 / -1; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.devanion-search-form .arcana-statistics-consent[hidden] { display: none; }
.devanion-search-form .arcana-statistics-consent > input[type="checkbox"] { align-self: center; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--accent); }
.arcana-statistics-consent-copy { display: grid; gap: 2px; min-width: 0; }
.arcana-statistics-consent-copy strong { color: var(--text); font-weight: 700; }
.arcana-statistics-consent-copy a { color: var(--accent); font-weight: 900; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.arcana-statistics-consent-copy a:hover, .arcana-statistics-consent-copy a:focus-visible { color: #8ff7ee; }
.arcana-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; --job-color: var(--accent); --arcana-job-color: var(--job-color); }
.arcana-workspace[hidden] { display: none; }
.arcana-character-header { align-items: flex-end; padding-bottom: 0; border-bottom: 0; }
.arcana-character-header .a2-job-icon { width: 76px; height: 76px; }
.arcana-workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.arcana-calculator-controls { display: grid; justify-items: end; gap: 6px; }
.arcana-calculator-controls #arcana-target-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.arcana-calculator-controls #arcana-action-status { min-height: 0; margin: 0; font-size: 11px; line-height: 1.4; }
.arcana-calculator-controls #arcana-action-status:empty { display: none; }
.arcana-equipped-panel, .arcana-calculator-panel { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--panel); }
.arcana-equipped-panel > header, .arcana-calculator-panel > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.arcana-equipped-panel h3, .arcana-calculator-panel h3 { margin: 2px 0 0; }
.arcana-equipped-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.arcana-equipped-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--job-color) 7%, var(--panel)); color: var(--text); text-align: left; }
.arcana-equipped-card:hover, .arcana-equipped-card:focus-visible { border-color: var(--job-color); }
.arcana-equipped-card img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; }
.arcana-equipped-card span { display: grid; min-width: 0; gap: 2px; }
.arcana-equipped-card strong, .arcana-equipped-card small, .arcana-equipped-card em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcana-equipped-card small, .arcana-equipped-card em { color: var(--muted); font-size: 11px; font-style: normal; }
.arcana-equipped-card .arcana-equipped-detail-label { flex: 0 0 auto; margin-left: auto; color: var(--job-color); font-size: 11px; font-weight: 900; }
.arcana-equipped-set-effects { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.arcana-equipped-set-effects > h4 { margin: 0 0 10px; color: var(--text); font-size: 14px; }
.arcana-equipped-set-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arcana-equipped-set-list > article { overflow: hidden; border: 1px solid color-mix(in srgb, #f3c94f 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, #f3c94f 4%, var(--panel)); }
.arcana-equipped-set-list article > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.arcana-equipped-set-list header strong { color: #f0d377; font-size: 13px; }
.arcana-equipped-set-list header span { color: var(--muted); font-size: 11px; }
.arcana-equipped-set-list article > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.arcana-equipped-set-list article > div:last-child { border-bottom: 0; }
.arcana-equipped-set-list b { color: var(--job-color); font-size: 11px; }
.arcana-equipped-set-list p, .arcana-equipped-set-empty { margin: 0; color: var(--text); font-size: 12px; line-height: 1.55; }
.arcana-equipped-set-empty { grid-column: 1 / -1; color: var(--muted); }
.arcana-skill-group-header th.arcana-header-target { color: #83f0bc; }
.arcana-skill-table td.arcana-skill-target { padding: 3px; }
.arcana-target-button { display: grid; justify-items: center; width: 62px; min-height: 30px; margin: auto; padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--arcana-job-color) 62%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--arcana-job-color) 10%, transparent); color: var(--arcana-job-color); }
.arcana-target-button strong { font-size: 14px; line-height: 1; }.arcana-target-button small { color: var(--muted); font-size: 9px; line-height: 1.15; }
.arcana-target-button.has-target strong { font-size: 20px; }
.arcana-target-button.achieved { border-color: #57d59b; }
.arcana-target-button.unmet { border-color: #ff647c; }
.arcana-passive-target-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arcana-passive-target-options label { position: relative; display: grid; place-items: center; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(255, 255, 255, .025); color: var(--muted); cursor: pointer; }
.arcana-passive-target-options label:hover, .arcana-passive-target-options label:focus-within { border-color: var(--arcana-job-color); color: var(--text); }
.arcana-passive-target-options label:has(input:checked) { border-color: var(--arcana-job-color); background: color-mix(in srgb, var(--arcana-job-color) 13%, transparent); color: #fff; }
.arcana-passive-target-options input { position: absolute; opacity: 0; pointer-events: none; }
.arcana-passive-target-options span { font-size: 20px; font-weight: 900; }
.arcana-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.arcana-stat-table-wrap { overflow-x: auto; }
.arcana-stat-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.arcana-stat-table th, .arcana-stat-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: center; }
.arcana-stat-table th:first-child { text-align: left; }
.arcana-stat-skill { display: flex; align-items: center; gap: 10px; }
.arcana-stat-skill img { width: 38px; height: 38px; border-radius: 8px; }

@media (max-width: 1050px) { .arcana-equipped-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .arcana-search-panel, .arcana-equipped-panel, .arcana-calculator-panel { padding: 15px; border-radius: 14px; }
  .arcana-statistics-consent { font-size: 12px; }
  .arcana-character-header { align-items: flex-start; }
  .arcana-character-header .a2-job-icon { width: 58px; height: 58px; }
  .arcana-workspace-actions { width: 100%; }.arcana-workspace-actions button { flex: 1; }
  .arcana-calculator-controls { width: 100%; justify-items: stretch; }
  .arcana-calculator-controls #arcana-target-status { text-align: left; }
  .arcana-equipped-list { grid-template-columns: 1fr; }
  .arcana-equipped-set-list { grid-template-columns: 1fr; }
  .arcana-calculator-panel > header { align-items: flex-start; flex-direction: column; }
}

.arcana-result-heading .arcana-character-identity,
.devanion-character-identity {
  display: flex;
  align-items: center;
  gap: 13px;
}

.arcana-result[data-job-key],
.devanion-workspace[data-job-key] {
  border-color: color-mix(in srgb, var(--job-color) 38%, var(--a2-border));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--job-color) 9%, transparent), transparent 34%),
    var(--a2-surface);
}

.arcana-result[data-job-key] .arcana-character-identity .a2-job-icon { width: 48px; height: 48px; }
.devanion-character-identity .a2-job-icon { width: 96px; height: 96px; }

.devanion-workspace[data-job-key] :is(.devanion-group-tab, .devanion-board-tab) {
  border-color: color-mix(in srgb, var(--job-color) 30%, var(--a2-border));
  background: color-mix(in srgb, var(--job-color) 5%, var(--a2-surface-raised));
  color: color-mix(in srgb, var(--job-color) 72%, var(--a2-text-bright));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.devanion-workspace[data-job-key] :is(.devanion-group-tab, .devanion-board-tab):not(:disabled):hover {
  border-color: color-mix(in srgb, var(--job-color) 72%, var(--a2-border));
  background: color-mix(in srgb, var(--job-color) 11%, var(--a2-surface-raised));
  color: var(--a2-text-bright);
}

.devanion-workspace[data-job-key] :is(.devanion-group-tab, .devanion-board-tab).active,
.devanion-workspace[data-job-key] .devanion-budget-calculate {
  border-color: var(--job-color);
  background: color-mix(in srgb, var(--job-color) 18%, var(--a2-surface-raised));
  color: color-mix(in srgb, var(--job-color) 68%, white);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--job-color) 28%, transparent),
    0 0 22px color-mix(in srgb, var(--job-color) 16%, transparent);
}

.devanion-workspace[data-job-key] :is(.devanion-group-tab, .devanion-board-tab):focus-visible {
  outline: 2px solid var(--job-color);
  outline-offset: 2px;
}

.devanion-workspace[data-job-key] .devanion-budget-calculate {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}

.devanion-workspace[data-job-key] .devanion-budget-calculate:hover,
.devanion-workspace[data-job-key] .devanion-budget-calculate:focus-visible {
  border-color: var(--job-color);
  background: color-mix(in srgb, var(--job-color) 24%, var(--a2-surface-raised));
  color: #fff;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--job-color) 36%, transparent),
    0 0 0 3px color-mix(in srgb, var(--job-color) 20%, transparent),
    0 0 28px color-mix(in srgb, var(--job-color) 22%, transparent);
}

.devanion-workspace[data-job-key] .devanion-budget-calculate:disabled {
  cursor: wait;
  opacity: .62;
  filter: saturate(.5);
}

.devanion-workspace[data-job-key] .devanion-clear-current-view {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--job-color) 78%, white 8%);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--job-color) 34%, #17232c) 0%,
      color-mix(in srgb, var(--job-color) 16%, #071017) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .58);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--job-color) 24%, transparent),
    inset 0 1px rgba(255, 255, 255, .12),
    0 0 0 1px color-mix(in srgb, var(--job-color) 14%, transparent),
    0 8px 24px color-mix(in srgb, var(--job-color) 18%, rgba(0, 0, 0, .48));
}

.devanion-workspace[data-job-key] .devanion-clear-current-view::before {
  content: '◆';
  position: relative;
  z-index: 1;
  color: color-mix(in srgb, var(--job-color) 72%, white);
  font-size: 11px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--job-color) 74%, transparent));
}

.devanion-workspace[data-job-key] .devanion-clear-current-view::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 16%, rgba(255, 255, 255, .12) 44%, transparent 68%);
  transform: translateX(-72%);
  transition: transform .22s ease;
  pointer-events: none;
}

.devanion-workspace[data-job-key] .devanion-clear-current-view:hover,
.devanion-workspace[data-job-key] .devanion-clear-current-view:focus-visible {
  border-color: color-mix(in srgb, var(--job-color) 72%, white 24%);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--job-color) 44%, #1a2832) 0%,
      color-mix(in srgb, var(--job-color) 22%, #08121a) 100%);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--job-color) 34%, transparent),
    0 0 0 3px color-mix(in srgb, var(--job-color) 18%, transparent),
    0 0 30px color-mix(in srgb, var(--job-color) 28%, transparent);
}

.devanion-workspace[data-job-key] .devanion-clear-current-view:hover::after,
.devanion-workspace[data-job-key] .devanion-clear-current-view:focus-visible::after {
  transform: translateX(72%);
}

.devanion-workspace[data-job-key] .devanion-clear-current-view[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--job-color) 58%, white 34%);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--job-color) 60%, #24323b) 0%,
      color-mix(in srgb, var(--job-color) 38%, #09131a) 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--job-color) 44%, white 8%),
    inset 0 0 18px color-mix(in srgb, var(--job-color) 24%, transparent),
    0 0 30px color-mix(in srgb, var(--job-color) 34%, transparent);
}

.devanion-workspace[data-job-key] .devanion-clear-current-view[aria-pressed="true"]::before {
  content: '✓';
  color: #fff;
  font-size: 14px;
}

.arcana-stats-status[data-job-key] {
  color: var(--job-color);
}

.support-leader-card[data-job-key] {
  border-color: color-mix(in srgb, var(--job-color) 46%, var(--a2-border));
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--job-color) 25%, transparent), transparent 46%),
    linear-gradient(145deg, #101e23, #080e12);
  box-shadow: inset 3px 0 var(--job-color);
}

.support-leader-job {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 6px;
}

.support-leader-job .a2-job-icon { width: 48px; height: 48px; }
.support-leader-job h2 { color: var(--job-color); }

.support-ranking li[data-job-key] {
  grid-template-columns: 28px 30px 145px minmax(80px, 1fr) 82px;
  border: 1px solid color-mix(in srgb, var(--job-color) 15%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--job-color) 6%, transparent), transparent 46%);
}

.support-ranking li[data-job-key]:first-child {
  border-color: color-mix(in srgb, var(--job-color) 36%, var(--a2-border));
  background: linear-gradient(90deg, color-mix(in srgb, var(--job-color) 14%, transparent), transparent 58%);
}

.support-ranking li[data-job-key] .support-class-copy strong { color: var(--job-color); }
.support-ranking li[data-job-key] .support-class-meter span { background: var(--job-color); }
.support-month-bars span.empty { height: 0; border-top: 2px solid rgba(126, 148, 158, .35); border-radius: 0; background: none; }
.support-month-bars .expense.empty { background: none; }
.support-payment-modal form { display: grid; gap: 14px; }
.support-donor-message { display: grid; gap: 7px; }
.support-donor-message span { color: var(--a2-text-secondary); font-size: 12px; font-weight: 800; }
.support-donor-message textarea { width: 100%; resize: vertical; padding: 11px 12px; border: 1px solid var(--a2-border); border-radius: 9px; color: var(--a2-text-primary); background: #0b151b; font: inherit; line-height: 1.5; }
.support-transfer-completed { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--a2-text-secondary); font-size: 12px; line-height: 1.5; }
.support-transfer-completed input { width: 18px; height: 18px; margin: 0; accent-color: #2fd6cf; }
.support-claim-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.support-claim-submit { width: 100%; min-height: 46px; border: 0; border-radius: 10px; color: #061113; background: linear-gradient(135deg, #54e0d1, #2fbfc7); cursor: pointer; font-weight: 900; }
.support-donation-submitted { margin: -18px 0 34px; }
.support-donation-claims { margin-top: 18px; }
.support-claim-list { display: grid; gap: 10px; }
.support-claim-item { padding: 15px; border: 1px solid #263842; border-radius: 12px; background: #091116; }
.support-claim-item.confirmed { opacity: .72; }
.support-claim-item.rejected { opacity: .58; }
.support-claim-item > header { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.support-claim-item > header b { color: #62dfb7; }
.support-claim-item dl { display: grid; gap: 7px; margin: 13px 0; }
.support-claim-item dl div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
.support-claim-item dt { color: #8299a3; font-size: 12px; }
.support-claim-item dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-claim-confirm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 13px; border-top: 1px solid #203038; }
.support-claim-confirm label { display: grid; gap: 5px; }
.support-claim-confirm label > span { color: #8fa5ae; font-size: 11px; font-weight: 700; }
.support-claim-confirm input, .support-claim-confirm select, .support-claim-reject input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #30434d; border-radius: 8px; color: #e4eef0; background: #101b21; }
.support-claim-confirm button { min-height: 39px; border: 0; border-radius: 8px; color: #061113; background: #2fd6cf; cursor: pointer; font-weight: 900; }
.support-claim-reject { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.support-claim-reject input { max-width: 300px; }
.support-claim-reject button { border: 1px solid rgba(255,111,135,.3); border-radius: 8px; color: #ff8297; background: rgba(255,111,135,.06); cursor: pointer; }
.support-claim-note { margin: 10px 0 0; color: #8299a3; font-size: 12px; }
@media (max-width: 760px) { .support-claim-confirm { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .support-claim-item > header { grid-template-columns: 72px 1fr; } .support-claim-item > header b { grid-column: 2; } .support-claim-confirm { grid-template-columns: 1fr; } .support-claim-reject { align-items: stretch; flex-direction: column; } .support-claim-reject input { max-width: none; } }

/* My A2DIL2 live homework and wealth dashboard */
.my-a2dil2-state {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border-color: color-mix(in srgb, var(--a2-yellow) 34%, var(--a2-border));
  background:
    radial-gradient(circle at 88% -8%, rgba(242, 200, 91, .14), transparent 28%),
    radial-gradient(circle at 2% 4%, rgba(47, 214, 207, .09), transparent 34%),
    linear-gradient(145deg, rgba(9, 20, 27, .98), rgba(4, 11, 17, .99));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
}
.my-a2dil2-state::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 64%, rgba(255, 255, 255, .018) 64% 65%, transparent 65%);
}
.my-live-head { align-items: center; margin-bottom: 22px; }
.my-live-title { display: flex; align-items: center; gap: 14px; }
.my-live-title-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(242, 200, 91, .34);
  border-radius: 15px;
  color: var(--a2-yellow);
  background: linear-gradient(145deg, rgba(242, 200, 91, .17), rgba(242, 200, 91, .035));
  box-shadow: 0 0 24px rgba(242, 200, 91, .09);
  font-size: 15px;
}
.my-live-title h2 { font-size: clamp(24px, 3vw, 31px); letter-spacing: -.035em; }
.my-a2dil2-state .my-backup-state { padding: 8px 13px; border-radius: 999px; }
.my-a2dil2-state .my-backup-state.saved::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #65e1bb; box-shadow: 0 0 10px #65e1bb; vertical-align: 1px; }

.my-a2dil2-overall {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}
.my-a2dil2-overall article {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 108px;
  padding: 16px;
  overflow: hidden;
  border-color: var(--a2-border);
  background: linear-gradient(145deg, rgba(15, 31, 39, .92), rgba(6, 14, 20, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.my-a2dil2-overall article.primary { grid-column: span 2; }
.my-a2dil2-overall article::after { content: ''; position: absolute; right: -18px; bottom: -24px; width: 78px; height: 78px; border-radius: 50%; background: color-mix(in srgb, var(--card-accent, var(--a2-accent)) 10%, transparent); filter: blur(2px); }
.my-a2dil2-overall article[data-tone="kinah"] { --card-accent: #f1cb66; border-color: rgba(241, 203, 102, .28); }
.my-a2dil2-overall article[data-tone="ode"] { --card-accent: #64d9f0; border-color: rgba(100, 217, 240, .26); }
.my-a2dil2-overall article[data-tone="account"] { --card-accent: #73e0c0; }
.my-a2dil2-overall article[data-tone="character"] { --card-accent: #b59cff; }
.my-a2dil2-overall img, .my-a2dil2-overall i {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
}
.my-a2dil2-overall img { object-fit: contain; filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .4)); }
.my-a2dil2-overall i { display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent); color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 9%, transparent); font-style: normal; font-weight: 900; }
.my-a2dil2-overall article > div { min-width: 0; }
.my-a2dil2-overall strong { margin-top: 3px; color: var(--card-accent, var(--a2-yellow)); font-size: clamp(19px, 2.2vw, 27px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.my-a2dil2-overall small { display: block; margin-top: 3px; color: var(--a2-text-tertiary); font-size: 10px; }
.my-a2dil2-updated { margin: 10px 2px 0; text-align: right; }

.my-a2dil2-account-list { gap: 18px; margin-top: 24px; }
.my-a2dil2-account {
  padding: 0;
  overflow: hidden;
  border-color: var(--a2-border);
  background: rgba(5, 13, 19, .82);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
}
.my-a2dil2-account > header { padding: 16px 18px; border-bottom: 1px solid var(--a2-border); background: linear-gradient(90deg, rgba(47, 214, 207, .07), transparent 48%); }
.my-a2dil2-account-name { display: flex; align-items: center; gap: 11px; }
.my-a2dil2-account-name > i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(47, 214, 207, .26); border-radius: 11px; color: var(--a2-accent); background: rgba(47, 214, 207, .08); font-style: normal; font-weight: 900; }
.my-a2dil2-account-name > span { display: grid; gap: 1px; }
.my-a2dil2-account-name small { color: var(--a2-text-tertiary); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.my-a2dil2-account > header .my-a2dil2-account-time { display: grid; gap: 2px; text-align: right; }
.my-a2dil2-account-time b { color: var(--a2-text-secondary); font-size: 11px; font-weight: 700; }
.my-a2dil2-account-values { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 0; padding: 0 10px; border-bottom: 1px solid var(--a2-border); background: rgba(8, 18, 24, .58); }
.my-a2dil2-account-values > span { position: relative; padding: 14px 10px; border: 0; border-right: 1px solid var(--a2-border); border-radius: 0; background: transparent; }
.my-a2dil2-account-values > span:last-child { border-right: 0; }
.my-a2dil2-account-values small { color: var(--a2-text-tertiary); font-size: 10px; }
.my-a2dil2-account-values b { color: var(--a2-text-primary); font-size: 14px; font-variant-numeric: tabular-nums; }
.my-a2dil2-account-values [data-stat="income"] b { color: #65dfb3; }
.my-a2dil2-account-values [data-stat="expense"] b { color: #ff8a9e; }
.my-a2dil2-account-values [data-stat="assets"] b { color: #f1cb66; }
.my-a2dil2-account-values [data-stat="expedition"] b, .my-a2dil2-account-values [data-stat="transcendence"] b { color: #79cfff; }

.my-a2dil2-character-list { gap: 14px; margin: 0; padding: 16px; }
.my-a2dil2-character { padding: 16px; border: 1px solid var(--a2-border); border-left-width: 3px; border-radius: 14px; background: rgba(8, 18, 25, .88); }
.my-a2dil2-character > header { padding-bottom: 13px; border-bottom: 1px solid color-mix(in srgb, var(--job-color, var(--a2-accent)) 18%, var(--a2-border)); }
.my-a2dil2-character-name .a2-job-icon { width: 46px; height: 46px; padding: 4px; border: 1px solid color-mix(in srgb, var(--job-color) 28%, transparent); border-radius: 13px; background-color: color-mix(in srgb, var(--job-color) 7%, transparent); }
.my-a2dil2-character-name strong { font-size: 17px; }
.my-a2dil2-verified { padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .028); }
.my-a2dil2-character-values { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.my-a2dil2-character-values > span { padding: 10px 11px; border: 1px solid rgba(138, 173, 188, .11); border-radius: 9px; background: rgba(15, 32, 40, .55); }
.my-a2dil2-character-values small { display: block; color: var(--a2-text-tertiary); font-size: 10px; }
.my-a2dil2-character-values b { font-variant-numeric: tabular-nums; }
.my-a2dil2-character-values [data-stat="kinah"] b, .my-a2dil2-character-values [data-stat="bound"] b { color: #f1cb66; }
.my-a2dil2-character-values [data-stat="ode"] b, .my-a2dil2-character-values [data-stat="charged"] b { color: #71d9ee; }
.my-a2dil2-character-values [data-stat="combat"] b { color: color-mix(in srgb, var(--job-color, var(--a2-accent)) 76%, white); }

.my-a2dil2-homework { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.my-a2dil2-homework .my-a2dil2-homework-item {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 10px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--job-color, var(--a2-accent)) 19%, var(--a2-border));
  border-radius: 10px;
  color: var(--a2-text-secondary);
  background: color-mix(in srgb, var(--job-color, var(--a2-accent)) 4%, rgba(7, 16, 22, .88));
  opacity: 1;
}
.my-a2dil2-homework .my-a2dil2-homework-item::after { content: ''; position: absolute; left: 0; bottom: 0; width: var(--homework-progress); height: 3px; background: var(--job-color, var(--a2-accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--job-color, var(--a2-accent)) 45%, transparent); }
.my-a2dil2-homework .my-a2dil2-homework-item > i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid color-mix(in srgb, var(--job-color, var(--a2-accent)) 28%, var(--a2-border)); border-radius: 50%; color: var(--job-color, var(--a2-accent)); font-size: 11px; font-style: normal; }
.my-a2dil2-homework .my-a2dil2-homework-item > span { display: grid; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; }
.my-a2dil2-homework .my-a2dil2-homework-item b { overflow: hidden; margin: 0; color: var(--a2-text-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.my-a2dil2-homework .my-a2dil2-homework-item small { color: var(--a2-text-tertiary); font-size: 9px; }
.my-a2dil2-homework .my-a2dil2-homework-item > strong { color: var(--a2-text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.my-a2dil2-homework .my-a2dil2-homework-item.complete { border-color: rgba(101, 225, 187, .2); background: rgba(101, 225, 187, .045); }
.my-a2dil2-homework .my-a2dil2-homework-item.complete::after { background: #65e1bb; }
.my-a2dil2-homework .my-a2dil2-homework-item.complete > i { border-color: rgba(101, 225, 187, .32); color: #65e1bb; background: rgba(101, 225, 187, .08); }
.my-a2dil2-privacy { margin-top: 13px; padding: 11px 2px 0; }
.my-a2dil2-privacy button { border-radius: 999px; }
.my-a2dil2-privacy button:disabled { opacity: .6; cursor: wait; }

@media (max-width: 980px) {
  .my-a2dil2-overall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-a2dil2-overall article.primary { grid-column: span 1; }
  .my-a2dil2-account-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .my-a2dil2-account-values > span:nth-child(3) { border-right: 0; }
  .my-a2dil2-account-values > span:nth-child(-n+3) { border-bottom: 1px solid var(--a2-border); }
  .my-a2dil2-homework { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .my-a2dil2-state { padding: 16px; }
  .my-live-head, .my-a2dil2-account > header, .my-a2dil2-character > header, .my-a2dil2-privacy { align-items: flex-start; flex-direction: column; }
  .my-live-title-icon { width: 42px; height: 42px; }
  .my-a2dil2-account > header .my-a2dil2-account-time { text-align: left; }
  .my-a2dil2-account-values, .my-a2dil2-character-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-a2dil2-account-values > span { border-right: 1px solid var(--a2-border); border-bottom: 1px solid var(--a2-border); }
  .my-a2dil2-account-values > span:nth-child(even) { border-right: 0; }
  .my-a2dil2-account-values > span:nth-last-child(-n+2) { border-bottom: 0; }
  .my-a2dil2-character-list { padding: 12px; }
  .my-a2dil2-homework { grid-template-columns: 1fr; }
  .my-a2dil2-verified { white-space: normal; }
}
@media (max-width: 420px) {
  .my-a2dil2-overall { grid-template-columns: 1fr; }
  .my-a2dil2-overall article { min-height: 90px; }
  .my-a2dil2-homework .my-a2dil2-homework-item { grid-template-columns: 24px minmax(0, 1fr); }
  .my-a2dil2-homework .my-a2dil2-homework-item > strong { grid-column: 2; }
}

.my-page-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: -8px 0 22px;
  padding: 6px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(3, 9, 15, .82);
}
.my-page-tabs a { display: grid; gap: 3px; padding: 13px 16px; border: 1px solid transparent; border-radius: 9px; color: var(--a2-text-secondary); }
.my-page-tabs a strong { color: var(--a2-text-primary); font-size: 14px; }
.my-page-tabs a span { font-size: 11px; }
.my-page-tabs a:hover, .my-page-tabs a:focus-visible { border-color: color-mix(in srgb, var(--a2-accent) 38%, var(--a2-border)); outline: none; }
.my-page-tabs a.active { border-color: color-mix(in srgb, var(--a2-accent) 62%, var(--a2-border)); background: rgba(var(--a2-accent-rgb), .1); box-shadow: inset 0 -2px var(--a2-accent); }
.my-page-tabs a.active strong { color: var(--a2-accent); }

.my-training-privacy, .my-training-trends, .my-training-records { margin-bottom: 22px; padding: 22px; border: 1px solid var(--a2-border); border-radius: var(--a2-frame-radius); background: var(--a2-surface); box-shadow: var(--a2-shadow-card); }
.my-training-privacy { padding: 16px 18px; }
.my-training-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.my-training-section-head .eyebrow { margin: 0 0 4px; }
.my-training-section-head h2 { margin: 0; color: var(--a2-text-bright); font-size: 22px; }
.my-training-section-head p { margin: 6px 0 0; color: var(--a2-text-secondary); font-size: 12px; line-height: 1.6; }
.my-training-section-head > span { max-width: 280px; color: var(--a2-text-tertiary); font-size: 11px; text-align: right; }
.my-training-privacy-head { align-items: center; margin-bottom: 10px; }
.my-training-privacy-head h2 { font-size: 17px; }
.my-training-privacy-head > span { max-width: none; }
.my-training-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.my-training-summary article { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 14px 16px; border: 1px solid var(--a2-border); border-radius: var(--a2-card-radius); background: var(--a2-surface-soft); }
.my-training-summary article span { color: var(--a2-text-secondary); font-size: 11px; }
.my-training-summary article strong { color: var(--a2-accent); font-size: 22px; }
.my-training-summary article small { margin-left: 3px; color: var(--a2-text-tertiary); font-size: 10px; }
.my-training-character-grid { display: grid; gap: 7px; }
.my-training-character-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 54px; padding: 8px 10px 8px 12px; border: 1px solid var(--a2-border); border-left: 3px solid var(--a2-accent); border-radius: var(--a2-card-radius); background: var(--a2-surface-soft); }
.my-training-character-card[data-job-key] { border-left-color: var(--job-color); background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--job-color) 9%, transparent), transparent 34%), var(--a2-surface-soft); }
.my-training-character-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.my-training-character-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.my-training-character-identity .a2-job-icon { width: 42px; height: 42px; }
.my-training-character-identity > div { display: grid; gap: 3px; min-width: 0; }
.my-training-character-identity strong { color: var(--job-color, var(--a2-text-bright)); font-size: 16px; }
.my-training-character-identity small, .my-training-character-status small { color: var(--a2-text-tertiary); font-size: 11px; }
.my-training-character-card > .my-a2dil2-privacy { flex: 1 1 auto; justify-content: flex-end; margin: 0; padding: 0; border: 0; }
.my-training-character-card > .my-a2dil2-privacy > span { white-space: nowrap; }
.my-training-character-card > .my-a2dil2-privacy button { padding: 6px 10px; }
.my-training-character-status { display: grid; justify-items: end; gap: 5px; text-align: right; }
.my-training-character-status > span { padding: 4px 8px; border: 1px solid rgba(var(--a2-accent-rgb), .28); border-radius: 999px; color: var(--a2-accent); background: rgba(var(--a2-accent-rgb), .07); font-size: 10px; }
.my-training-empty { display: grid; justify-items: center; gap: 7px; min-height: 170px; padding: 36px 20px; place-content: center; border: 1px dashed var(--a2-border); border-radius: var(--a2-card-radius); text-align: center; }
.my-training-empty strong { color: var(--a2-text-bright); font-size: 16px; }
.my-training-empty p { max-width: 620px; margin: 0; color: var(--a2-text-secondary); font-size: 12px; line-height: 1.7; }
.my-training-table-wrap { overflow-x: auto; margin: 0 -22px -22px; border-top: 1px solid var(--a2-border); }
.my-training-ranking-table { width: 100%; min-width: 1080px; border-collapse: collapse; white-space: nowrap; }
.my-training-ranking-table th, .my-training-ranking-table td { padding: 13px 14px; border-bottom: 1px solid var(--a2-border); color: var(--a2-text-primary); font-size: 12px; text-align: center; }
.my-training-ranking-table th { color: var(--a2-text-secondary); background: rgba(3, 9, 15, .62); font-size: 10px; letter-spacing: .03em; }
.my-training-ranking-table th:first-child, .my-training-ranking-table td:first-child { padding-left: 22px; text-align: left; }
.my-training-ranking-table th:last-child, .my-training-ranking-table td:last-child { padding-right: 22px; }
.my-training-ranking-table tbody tr:last-child td { border-bottom: 0; }
.my-training-ranking-table tbody tr[data-job-key]:hover { background: color-mix(in srgb, var(--job-color) 5%, transparent); }
.my-training-record-character { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.my-training-record-character .a2-job-icon { width: 32px; height: 32px; }
.my-training-record-character > span { display: grid; gap: 2px; }
.my-training-record-character strong { color: var(--job-color, var(--a2-text-bright)); }
.my-training-record-character small, .my-training-ranking-table time { color: var(--a2-text-tertiary); font-size: 10px; }
.my-training-rank { display: grid; gap: 2px; }
.my-training-rank b { color: var(--job-color, var(--a2-accent)); font-size: 14px; }
.my-training-rank small { color: var(--a2-text-tertiary); font-size: 9px; }
.my-training-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.my-training-trend-card { min-width: 0; padding: 16px; border: 1px solid var(--a2-border); border-top: 2px solid var(--job-color, var(--a2-accent)); border-radius: var(--a2-card-radius); background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--job-color, var(--a2-accent)) 8%, transparent), transparent 38%), var(--a2-surface-soft); }
.my-training-trend-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.my-training-trend-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 7px; min-height: 218px; margin: 0; padding: 14px 10px 10px; border: 1px solid var(--a2-border); border-radius: 9px; background: linear-gradient(to top, rgba(var(--a2-accent-rgb), .045) 1px, transparent 1px); background-size: 100% 25%; list-style: none; }
.my-training-trend-chart li { min-width: 0; }
.my-training-trend-chart a { display: grid; grid-template-rows: 38px 116px 28px 18px; gap: 5px; min-width: 0; color: inherit; text-align: center; text-decoration: none; }
.my-training-trend-chart a:hover .my-training-trend-bar, .my-training-trend-chart a:focus-visible .my-training-trend-bar { border-color: var(--job-color, var(--a2-accent)); outline: none; }
.my-training-trend-value { display: grid; align-content: end; gap: 2px; min-width: 0; }
.my-training-trend-value small { color: var(--job-color, var(--a2-accent)); font-size: 8px; font-weight: 900; }
.my-training-trend-value strong { overflow: hidden; color: var(--a2-text-bright); font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.my-training-trend-bar { display: flex; align-items: flex-end; height: 116px; padding: 3px; border: 1px solid var(--a2-border); border-radius: 7px 7px 3px 3px; background: rgba(1, 6, 11, .58); transition: border-color .18s ease; }
.my-training-trend-bar i { width: 100%; height: var(--trend-height); min-height: 8px; border-radius: 4px 4px 1px 1px; background: linear-gradient(to top, color-mix(in srgb, var(--job-color, var(--a2-accent)) 68%, #071019), var(--job-color, var(--a2-accent))); box-shadow: 0 0 13px color-mix(in srgb, var(--job-color, var(--a2-accent)) 22%, transparent); }
.my-training-trend-chart time { align-self: start; color: var(--a2-text-tertiary); font-size: 8px; line-height: 1.35; }
.my-training-trend-change { overflow: hidden; color: var(--a2-text-tertiary); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.my-training-trend-change.up { color: #4fd9aa; }
.my-training-trend-change.down { color: #ff7485; }

@media (max-width: 700px) {
  .my-page-tabs { grid-template-columns: 1fr; }
  .my-training-privacy, .my-training-trends, .my-training-records { padding: 16px; }
  .my-training-section-head, .my-training-character-card > header { align-items: flex-start; flex-direction: column; }
  .my-training-section-head > span, .my-training-character-status { justify-items: start; text-align: left; }
  .my-training-privacy-head { gap: 5px; }
  .my-training-character-card { align-items: flex-start; flex-direction: column; gap: 8px; }
  .my-training-character-card > .my-a2dil2-privacy { align-items: flex-start; justify-content: space-between; width: 100%; }
  .my-training-summary { grid-template-columns: 1fr; }
  .my-training-trend-grid { grid-template-columns: 1fr; }
  .my-training-table-wrap { margin: 0 -16px -16px; }
}

.my-character-card[data-job-key],
.my-a2dil2-character[data-job-key] {
  border-color: color-mix(in srgb, var(--job-color) 32%, var(--a2-border));
  border-left: 3px solid var(--job-color);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--job-color) 10%, transparent), transparent 38%),
    rgba(8, 17, 24, .9);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
}

.my-character-card[data-job-key].current {
  outline: 1px solid color-mix(in srgb, var(--a2-yellow) 42%, transparent);
  outline-offset: 2px;
  box-shadow: inset 3px 0 var(--job-color), 0 0 20px color-mix(in srgb, var(--job-color) 8%, transparent);
}

.my-character-title .a2-job-icon,
.my-a2dil2-character-name .a2-job-icon { width: 42px; height: 42px; }

.my-character-card[data-job-key] .my-character-title h2,
.my-a2dil2-character[data-job-key] .my-a2dil2-character-name strong { color: var(--job-color); }

.skill-catalog-job-label,
.skill-report-admin-identity {
  display: flex;
  align-items: center;
  gap: 9px;
}

.skill-catalog-job-label .a2-job-icon { width: 24px; height: 24px; }
.skill-catalog-job-label[data-job-key] strong { color: var(--job-color); }

.skill-report-admin-list article[data-job-key] {
  border-left: 3px solid var(--job-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--job-color) 8%, rgba(8, 17, 24, .9)), rgba(8, 17, 24, .9) 42%);
}

.skill-report-admin-identity > div { display: grid; gap: 4px; }
.skill-report-admin-identity[data-job-key] strong { color: var(--job-color); }

@media (max-width: 900px) {
  main { width: min(100% - 28px, 1180px); }
  .site-header { padding-inline: 18px; }
  .site-header nav a,
  .site-header nav button { padding-inline: 8px; font-size: 12px; }
  .hero-simple { grid-template-columns: 1fr; margin-top: 24px; }
  .home-feature-visual { grid-template-columns: minmax(210px, 1fr) 134px; justify-self: center; width: min(100%, 440px); transform: none; }
  .home-launcher-shot { width: 134px; }
  .home-feature-labels { height: 414px; }
  .home-feature-tasks { top: 120px; }
  .home-feature-party { top: 165px; }
  .home-feature-dps { top: 210px; }
  .home-feature-buff { top: 255px; }

  .skill-history-jobs,
  .arcana-job-tabs,
  .arcana-stats-job-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .support-ranking li[data-job-key] {
    grid-template-columns: 25px 28px 100px minmax(70px, 1fr) 70px;
  }
}

@media (max-width: 760px) {
  main { width: calc(100% - 20px); }

  .arcana-skill-table-panel {
    width: 100%;
    margin-right: 0;
    border-radius: var(--a2-card-radius);
  }

  .site-header {
    position: static;
    gap: 12px;
    padding: 14px;
    align-items: stretch;
  }

  .site-header nav {
    width: 100%;
    padding-bottom: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .site-header nav a,
  .site-header nav button { flex: 0 0 auto; }

  .page-title {
    gap: 18px;
    padding: 34px 2px 22px;
    align-items: stretch;
  }

  .page-title h1,
  .post-detail h1,
  .message h1 { font-size: clamp(30px, 10vw, 40px); }

  .hero-simple {
    margin-top: 18px;
    padding: 28px 22px;
  }

  .home-feature-visual {
    grid-template-columns: 1fr 112px;
    gap: 14px;
    align-items: center;
  }

  .home-launcher-shot { width: 112px; }
  .home-feature-labels { display: grid; height: auto; gap: 8px; }
  .home-feature-label { position: static; width: auto; padding: 10px 12px; border: 1px solid var(--a2-border); border-radius: 10px; background: rgba(5, 14, 20, .72); transform: none; }
  .home-feature-label::after { display: none; }
  .home-feature-label strong { font-size: 12px; }
  .home-feature-label span { font-size: 9px; }

  .home-menu-grid { grid-template-columns: 1fr; }
  .home-menu-card { grid-template-columns: 1fr 24px; min-height: 0; padding: 0 16px 18px 0; }
  .home-menu-card figure { grid-column: 1 / -1; min-height: 170px; border-right: 0; border-bottom: 1px solid var(--a2-border); }
  .home-menu-card > div { padding-left: 16px; }
  .home-menu-number { font-size: 10px; }
  .home-menu-card strong { font-size: 25px; }
  .home-menu-card p { margin-block: 10px 15px; font-size: 14px; }
  .home-menu-card small { font-size: 12px; }

  .hero-simple::after {
    right: -190px;
    top: -210px;
  }

  .roadmap-panel,
  .release-item,
  .admin-panel,
  .post-detail,
  .message { padding: 20px; }

  .post-row {
    padding: 13px 14px;
    align-items: flex-start;
  }

  .release-head { align-items: stretch; flex-direction: column; }
  .release-head .primary { align-self: flex-start; }
}

@media (max-width: 560px) {
  .admin-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-menu a { min-width: 0; }

  .page-title > .primary,
  .page-title > .secondary,
  .page-title .admin-title-actions,
  .page-title .admin-title-actions .button { width: 100%; }

  .actions > .primary,
  .actions > .secondary { flex: 1 1 100%; }

  .board-tabs { width: 100%; overflow-x: auto; }
  .message { margin-block: 28px; }

  .support-ranking li[data-job-key] {
    grid-template-columns: 22px 28px 75px minmax(64px, 1fr);
  }

  .support-ranking li[data-job-key] .support-class-amount { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Shared official character server picker */
.a2-server-field {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 7px;
  color: var(--a2-text-primary, var(--text));
  font-weight: 700;
}

.a2-character-field {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: var(--a2-text-primary, var(--text));
  font-weight: 700;
}

.a2-character-field > input {
  width: 100%;
  min-height: 49px;
}

:is(.arcana-search-form, .devanion-search-form) .a2-server-toggle,
:is(.arcana-search-form, .devanion-search-form) .a2-character-field > input {
  height: 54px;
  min-height: 54px;
}

.a2-server-field-label,
.a2-server-helper-label {
  color: var(--a2-text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.a2-server-field-label {
  color: var(--a2-text-primary, var(--text));
  font-size: inherit;
}

.a2-server-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 49px;
  border: 1px solid var(--a2-border-strong, var(--line-strong));
  border-radius: var(--a2-control-radius, 8px);
  background: var(--a2-input-bg, var(--panel-2));
  color: var(--a2-text-primary, var(--text));
  padding: 8px 11px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.a2-server-toggle:hover,
.a2-server-field.is-open .a2-server-toggle {
  border-color: var(--a2-accent, var(--accent));
  background: color-mix(in srgb, var(--a2-accent, var(--accent)) 8%, var(--a2-input-bg, var(--panel-2)));
}

.a2-server-toggle:focus-visible,
.a2-server-chip:focus-visible,
.a2-character-chip:focus-visible,
.a2-character-chip-remove:focus-visible,
.a2-server-result:focus-visible,
.a2-server-search:focus-visible {
  outline: 2px solid var(--a2-focus, #78fff2);
  outline-offset: 2px;
}

.a2-server-toggle:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.a2-server-current {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.a2-server-current small {
  color: var(--a2-text-muted, var(--muted));
  font-size: 10px;
  font-weight: 600;
}

.a2-server-current strong {
  overflow: hidden;
  color: var(--a2-text-primary, var(--text));
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2-server-toggle-action {
  flex: 0 0 auto;
  color: var(--a2-accent, var(--accent));
  font-size: 11px;
  font-weight: 800;
}

.a2-recent-characters,
.a2-recent-servers {
  display: grid;
  gap: 5px;
}

.a2-recent-characters[hidden],
.a2-recent-servers[hidden],
.a2-server-search-panel[hidden] { display: none !important; }

.a2-character-chip-list,
.a2-server-chip-list {
  display: flex;
  min-width: 0;
  gap: 5px;
  flex-wrap: wrap;
}

.a2-character-chip-item {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  gap: 3px;
}

.a2-character-chip,
.a2-server-chip {
  min-width: 0;
  border: 1px solid var(--a2-border, var(--line));
  border-radius: 999px;
  background: rgba(4, 13, 20, .74);
  color: var(--a2-text-secondary, var(--muted));
  padding: 5px 9px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.a2-character-chip {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  border-radius: var(--a2-control-radius, 8px);
  text-align: left;
}

.a2-character-chip strong {
  overflow: hidden;
  color: var(--a2-text-primary, var(--text));
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2-character-chip small {
  color: var(--a2-text-muted, var(--muted));
  font-size: 9px;
}

.a2-character-chip[data-job-key] strong {
  color: var(--job-color);
}

.a2-character-chip-remove {
  flex: 0 0 27px;
  width: 27px;
  min-height: 100%;
  border: 1px solid color-mix(in srgb, #ff6684 26%, var(--a2-border, var(--line)));
  border-radius: var(--a2-control-radius, 8px);
  background: rgba(255, 102, 132, .07);
  color: #ff9caf;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.a2-character-chip-remove:hover {
  border-color: #ff8299;
  background: rgba(255, 102, 132, .14);
  color: #ffd2da;
}

.a2-character-chip:hover,
.a2-server-chip:hover,
.a2-server-chip[aria-pressed="true"] {
  border-color: var(--a2-accent, var(--accent));
  background: color-mix(in srgb, var(--a2-accent, var(--accent)) 10%, rgba(4, 13, 20, .88));
  color: var(--a2-text-primary, var(--text));
}

.a2-server-search-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  width: min(360px, calc(100vw - 40px));
  gap: 8px;
  border: 1px solid var(--a2-border-strong, var(--line-strong));
  border-radius: var(--a2-card-radius, 12px);
  background: rgba(3, 10, 16, .98);
  padding: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .48), 0 0 0 1px rgba(47, 214, 207, .05);
}

.a2-server-search {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--a2-border, var(--line));
  border-radius: var(--a2-control-radius, 8px);
  background: var(--a2-input-bg, var(--panel-2));
  color: var(--a2-text-primary, var(--text));
  padding: 8px 10px;
}

.a2-server-search::placeholder { color: var(--a2-text-muted, var(--muted)); }

.a2-server-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  max-height: 280px;
  gap: 6px;
  overflow-y: auto;
  padding: 1px;
  scrollbar-color: var(--a2-border-strong, var(--line-strong)) transparent;
}

.a2-server-race-column {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

.a2-server-race-heading {
  position: sticky;
  z-index: 1;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--server-race-color) 42%, var(--a2-border, var(--line)));
  background: rgba(3, 10, 16, .96);
  color: var(--server-race-color);
  padding: 5px 7px 7px;
  font-size: 12px;
  letter-spacing: .08em;
}

.a2-server-race-column[data-race="elyos"] { --server-race-color: var(--a2-race-color-elyos); }
.a2-server-race-column[data-race="asmodian"] { --server-race-color: var(--a2-race-color-asmodian); }

.a2-server-race-column .a2-server-result { width: 100%; }

.a2-server-race-empty {
  margin: 0;
  padding: 12px 7px;
  color: var(--a2-text-muted, var(--muted));
  font-size: 10px;
  text-align: center;
}

.a2-server-result {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid var(--a2-border, var(--line));
  border-radius: var(--a2-control-radius, 8px);
  background: rgba(7, 17, 25, .82);
  color: var(--a2-text-primary, var(--text));
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.a2-server-result strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2-server-result small {
  color: var(--a2-text-muted, var(--muted));
  font-size: 9px;
}

.a2-server-result:hover,
.a2-server-result[aria-pressed="true"] {
  border-color: var(--a2-accent, var(--accent));
  background: color-mix(in srgb, var(--a2-accent, var(--accent)) 10%, rgba(7, 17, 25, .92));
}

.a2-server-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 8px;
  color: var(--a2-text-muted, var(--muted));
  text-align: center;
}

:is(.a2-server-toggle, .a2-server-chip, .a2-character-chip, .a2-server-result)[data-race="elyos"] {
  --server-race-color: var(--a2-race-color-elyos);
}

:is(.a2-server-toggle, .a2-server-chip, .a2-character-chip, .a2-server-result)[data-race="asmodian"] {
  --server-race-color: var(--a2-race-color-asmodian);
}

.a2-server-toggle[data-race] {
  border-color: color-mix(in srgb, var(--server-race-color) 42%, var(--a2-border, var(--line)));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--server-race-color) 78%, transparent), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.a2-server-toggle[data-race] .a2-server-current strong,
.a2-server-chip[data-race],
.a2-server-result[data-race] strong,
.a2-character-chip[data-race] small {
  color: var(--server-race-color);
}

.a2-server-chip[data-race],
.a2-character-chip[data-race],
.a2-server-result[data-race] {
  border-color: color-mix(in srgb, var(--server-race-color) 28%, var(--a2-border, var(--line)));
}

.a2-character-chip[data-race] {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--server-race-color) 72%, transparent);
}

.a2-server-toggle[data-race]:hover,
.a2-server-field.is-open .a2-server-toggle[data-race],
.a2-server-chip[data-race]:hover,
.a2-server-chip[data-race][aria-pressed="true"],
.a2-server-result[data-race]:hover,
.a2-server-result[data-race][aria-pressed="true"] {
  border-color: var(--server-race-color);
  background: color-mix(in srgb, var(--server-race-color) 11%, rgba(4, 13, 20, .9));
}

@media (min-width: 761px) {
  .arcana-search-form:has(.a2-server-field.is-open),
  .devanion-search-form:has(.a2-server-field.is-open) {
    margin-bottom: 360px;
  }
}

@media (max-width: 760px) {
  .a2-server-search-panel {
    position: static;
    width: 100%;
    margin-top: 1px;
  }

  .a2-server-results { max-height: 220px; }

  :is(.arcana-search-form, .devanion-search-form) .a2-character-chip-item {
    flex: 1 1 130px;
    width: auto;
  }

  :is(.arcana-search-form, .devanion-search-form) .a2-character-chip { width: 100%; }

  :is(.arcana-search-form, .devanion-search-form) .a2-character-chip-remove {
    flex: 0 0 32px;
    width: 32px;
  }

  .devanion-search-form .a2-server-chip {
    flex: 0 1 auto;
    width: auto;
  }
}

@media (max-width: 420px) {
  .a2-server-results { grid-template-columns: 1fr; }
}

/* A2DIL2 guide selector */
.a2dil2-guide-heading { margin-bottom: 18px; }
.a2dil2-guide-heading .muted { max-width: 720px; }

.a2dil2-guide-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(3, 9, 15, .86);
  box-shadow: var(--a2-shadow-card), inset 0 1px rgba(255, 255, 255, .025);
}

.a2dil2-guide-tabs button {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--a2-text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.a2dil2-guide-tabs button strong { color: var(--a2-text-bright); font-size: 17px; }
.a2dil2-guide-tabs button span { font-size: 12px; line-height: 1.45; }
.a2dil2-guide-tabs button:hover,
.a2dil2-guide-tabs button:focus-visible {
  border-color: color-mix(in srgb, var(--a2-accent) 42%, var(--a2-border));
  color: var(--a2-text);
  outline: none;
  transform: translateY(-1px);
}

.a2dil2-guide-tabs button.active {
  border-color: color-mix(in srgb, var(--a2-accent) 64%, var(--a2-border));
  background: linear-gradient(135deg, rgba(var(--a2-accent-rgb), .16), rgba(var(--a2-accent-rgb), .045));
  color: var(--a2-accent);
  box-shadow: inset 0 -2px var(--a2-accent), 0 8px 24px rgba(0, 0, 0, .18);
}

.a2dil2-guide-tabs button.active strong { color: var(--a2-accent); }
.a2dil2-guide-panel[hidden] { display: none; }
.a2dil2-install-guide {
  --a2-accent: #2fd6cf;
  --a2-accent-rgb: 47, 214, 207;
  margin: 0 0 32px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--a2-accent) 28%, var(--a2-border));
  border-radius: var(--a2-frame-radius);
  background: radial-gradient(circle at 0 0, rgba(var(--a2-accent-rgb), .15), transparent 42%), linear-gradient(145deg, rgba(7, 24, 29, .98), rgba(3, 9, 15, .98));
  box-shadow: var(--a2-shadow-raised), inset 0 1px rgba(255, 255, 255, .035);
}
.a2dil2-install-head { max-width: 820px; margin-bottom: 28px; }
.a2dil2-install-head h2 { margin: 4px 0 10px; font-size: clamp(24px, 3.4vw, 34px); }
.a2dil2-install-head > p:last-of-type { color: var(--a2-text-secondary); line-height: 1.75; }
.a2dil2-install-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.a2dil2-install-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 8px; font-weight: 800; text-decoration: none; }
.a2dil2-install-actions .primary { border: 1px solid var(--a2-accent); background: rgba(var(--a2-accent-rgb), .14); color: var(--a2-accent); }
.a2dil2-install-actions .secondary { border: 1px solid var(--a2-border); color: var(--a2-text-bright); }
.a2dil2-install-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.a2dil2-install-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 18px; border: 1px solid var(--a2-border); border-radius: var(--a2-card-radius); background: rgba(2, 9, 14, .72); }
.a2dil2-install-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(var(--a2-accent-rgb), .58); border-radius: 50%; background: rgba(var(--a2-accent-rgb), .12); color: var(--a2-accent); font-weight: 900; }
.a2dil2-install-steps strong { color: var(--a2-text-bright); font-size: 16px; }
.a2dil2-install-steps p { margin: 6px 0 0; color: var(--a2-text-secondary); line-height: 1.65; }
.a2dil2-install-note { margin-top: 14px; padding: 16px 18px; border-left: 3px solid var(--a2-accent); border-radius: 0 8px 8px 0; background: rgba(var(--a2-accent-rgb), .07); }
.a2dil2-install-note strong { color: var(--a2-accent); }
.a2dil2-install-note p { margin: 5px 0 0; color: var(--a2-text-secondary); line-height: 1.65; }
.dps-training-introduction .dps-combat-introduction-head h2 { margin: 4px 0 8px; font-size: clamp(21px, 3vw, 28px); }

.catalog-guide-introduction {
  --a2-accent: #6f9dff;
  --a2-accent-rgb: 111, 157, 255;
}

.catalog-guide-introduction .dps-combat-introduction-head h2 {
  margin: 4px 0 8px;
  font-size: clamp(23px, 3vw, 31px);
}

.catalog-guide-steps {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-guide-step {
  padding-top: 28px;
  border-top: 1px solid var(--a2-border);
}

.catalog-guide-step:first-child { padding-top: 0; border-top: 0; }

.catalog-guide-copy {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  width: min(1000px, 100%);
  margin: 0 auto 16px;
}

.catalog-guide-number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(var(--a2-accent-rgb), .58);
  border-radius: 50%;
  background: rgba(var(--a2-accent-rgb), .14);
  color: var(--a2-accent);
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(var(--a2-accent-rgb), .18);
}

.catalog-guide-copy h3 { margin: 3px 0 7px; color: var(--a2-text-bright); font-size: clamp(18px, 2vw, 22px); }
.catalog-guide-copy p { margin: 0; color: var(--a2-text-secondary); line-height: 1.7; }
.catalog-guide-copy b { color: var(--a2-text-bright); }
.catalog-guide-figure { margin-bottom: 0; }
.catalog-guide-dialog-figure { width: min(900px, 100%); }
.catalog-guide-summary { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--a2-border); }

@media (max-width: 900px) {
  .a2dil2-guide-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .a2dil2-guide-tabs { grid-template-columns: 1fr; }
  .a2dil2-guide-tabs button { min-height: 0; }
  .a2dil2-install-steps { grid-template-columns: 1fr; }
  .a2dil2-install-actions a { width: 100%; }
}

/* Tasks corridor help */
.dps-introduction.corridor-guide-introduction {
  --a2-accent: #4fd7e9;
  --a2-accent-rgb: 79, 215, 233;
  background:
    radial-gradient(circle at 0 0, rgba(79, 215, 233, .14), transparent 38%),
    radial-gradient(circle at 100% 0, rgba(196, 89, 226, .12), transparent 34%),
    linear-gradient(145deg, rgba(7, 25, 32, .98), rgba(5, 10, 18, .99));
}

.corridor-guide-introduction .dps-combat-introduction-head h2 {
  margin: 4px 0 8px;
  font-size: clamp(23px, 3vw, 31px);
}

.corridor-guide-notice {
  display: grid;
  margin: 22px 0;
  padding: 18px 20px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  border: 1px solid rgba(232, 181, 77, .42);
  border-radius: var(--a2-card-radius);
  background: linear-gradient(120deg, rgba(100, 69, 14, .22), rgba(8, 17, 24, .76));
}

.corridor-guide-notice > span {
  padding: 6px 9px;
  border: 1px solid rgba(232, 181, 77, .5);
  border-radius: 999px;
  color: #f2c96f;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.corridor-guide-notice strong { color: #ffe6aa; font-size: 17px; }
.corridor-guide-notice p { margin: 6px 0 0; color: var(--a2-text-secondary); line-height: 1.65; }
.corridor-setup-steps { margin-bottom: 0; }
.corridor-setup-steps p b { color: var(--a2-text-bright); }
.corridor-guide-figure,
.corridor-character-guide-figure { width: min(760px, 100%); margin-top: 22px; }
.corridor-guide-figure img { width: min(710px, 100%); }
.corridor-character-guide-figure { margin-bottom: 24px; }
.corridor-character-guide-figure img { width: min(681px, 100%); }

.corridor-guide-reset-note {
  margin: 14px 0 24px;
  padding: 15px 18px;
  border-left: 3px solid var(--a2-accent);
  border-radius: 0 9px 9px 0;
  background: rgba(var(--a2-accent-rgb), .07);
}

.corridor-guide-reset-note strong { color: var(--a2-accent); }
.corridor-guide-reset-note p { margin: 5px 0 0; color: var(--a2-text-secondary); line-height: 1.65; }
.corridor-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.corridor-manual-card { border-color: rgba(79, 215, 233, .28); }
.corridor-auto-card { border-color: rgba(196, 89, 226, .3); }
.corridor-auto-card > header span { color: #d88bed; }

.corridor-manual-card ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.corridor-manual-card ol li {
  display: grid;
  padding: 9px 0;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border-top: 1px solid var(--a2-border);
}

.corridor-manual-card ol li:first-child { border-top: 0; }
.corridor-manual-card ol b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(var(--a2-accent-rgb), .5);
  border-radius: 50%;
  color: var(--a2-accent);
  font-size: 11px;
}
.corridor-manual-card ol span { color: var(--a2-text-secondary); line-height: 1.55; }
.corridor-manual-card ol strong { color: var(--a2-text-bright); }
.corridor-manual-card > small { display: block; margin-top: 10px; color: #d9ae61; line-height: 1.55; }

.corridor-support-section,
.corridor-report-section {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--a2-border);
}

.corridor-support-section > header {
  display: flex;
  margin-bottom: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.corridor-support-section h3,
.corridor-report-section h3 { margin: 4px 0 0; font-size: clamp(20px, 2.5vw, 26px); }
.corridor-support-section > header > span {
  padding: 7px 10px;
  border: 1px solid rgba(var(--a2-accent-rgb), .46);
  border-radius: 999px;
  color: var(--a2-accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.corridor-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.corridor-support-grid article {
  padding: 18px;
  border: 1px solid rgba(var(--a2-accent-rgb), .3);
  border-radius: var(--a2-card-radius);
  background: rgba(4, 15, 21, .78);
}

.corridor-support-grid article.pending { border-color: rgba(196, 89, 226, .34); }
.corridor-support-grid article > strong { color: var(--a2-accent); font-size: 16px; }
.corridor-support-grid article.pending > strong { color: #d88bed; }
.corridor-support-grid ul { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.corridor-support-grid li {
  display: grid;
  padding: 10px 0;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--a2-border);
}
.corridor-support-grid li:first-child { border-top: 0; }
.corridor-support-grid li span { color: var(--a2-text-secondary); font-size: 12px; font-weight: 800; }
.corridor-support-grid li b { color: var(--a2-text-bright); }
.corridor-support-grid code,
.corridor-support-grid em { color: var(--a2-accent); font-size: 12px; font-style: normal; }
.corridor-support-grid .pending em { color: #d88bed; }

.corridor-report-section {
  display: grid;
  padding: 24px;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 22px 30px;
  border: 1px solid rgba(232, 181, 77, .35);
  border-radius: var(--a2-card-radius);
  background: linear-gradient(135deg, rgba(94, 63, 12, .16), rgba(6, 14, 21, .84));
}

.corridor-report-section > div > p:last-child { margin: 9px 0 0; color: var(--a2-text-secondary); line-height: 1.68; }
.corridor-report-section ol { display: grid; margin: 0; padding: 0; list-style: none; }
.corridor-report-section li {
  display: grid;
  padding: 9px 0;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  border-top: 1px solid var(--a2-border);
}
.corridor-report-section li:first-child { border-top: 0; }
.corridor-report-section li > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: rgba(232, 181, 77, .13);
  color: #f2c96f;
  font-size: 11px;
  font-weight: 900;
}
.corridor-report-section li p { margin: 1px 0 0; color: var(--a2-text-secondary); line-height: 1.58; }
.corridor-report-section li b { color: var(--a2-text-bright); }
.corridor-report-section > a {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 9px 13px;
  border: 1px solid rgba(232, 181, 77, .48);
  border-radius: 8px;
  color: #f2c96f;
  font-weight: 800;
  text-decoration: none;
}
.corridor-report-section > a:hover { background: rgba(232, 181, 77, .09); }

@media (max-width: 760px) {
  .corridor-guide-notice { grid-template-columns: 1fr; }
  .corridor-guide-notice > span { justify-self: start; }
  .corridor-action-grid,
  .corridor-support-grid,
  .corridor-report-section { grid-template-columns: 1fr; }
  .corridor-report-section > a { grid-column: auto; }
  .corridor-support-section > header { align-items: flex-start; flex-direction: column; }
}

/* A2DIL2 mini launcher introduction */
.launcher-introduction {
  --a2-accent: var(--a2-job-color-cleric);
  --a2-accent-rgb: 231, 207, 125;
  margin: 0 0 32px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--a2-accent) 22%, var(--a2-border));
  border-radius: var(--a2-frame-radius);
  background:
    radial-gradient(circle at 0 0, rgba(var(--a2-accent-rgb), .16), transparent 40%),
    linear-gradient(145deg, rgba(22, 20, 12, .98), rgba(3, 9, 15, .98));
  box-shadow: var(--a2-shadow-raised), inset 0 1px rgba(255, 255, 255, .035);
}

.launcher-introduction-head { margin-bottom: 22px; }
.launcher-introduction-head h2 { margin: 4px 0 8px; }
.launcher-introduction-head > p:last-child { margin: 0; color: var(--a2-text-secondary); line-height: 1.7; }

.launcher-introduction-visual {
  display: grid;
  width: min(760px, 100%);
  margin: 0 auto 22px;
  padding: 12px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--a2-accent) 28%, var(--a2-border));
  border-radius: var(--a2-card-radius);
  background: rgba(2, 7, 12, .78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.launcher-introduction-visual img { display: block; width: 100%; height: auto; border-radius: 10px; }
.launcher-introduction-visual figcaption { margin-top: 10px; color: var(--a2-text-secondary); font-size: 12px; text-align: center; }

.launcher-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 14px;
}

.launcher-guide-card {
  padding: 20px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(5, 13, 21, .88);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.launcher-guide-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.launcher-guide-card > header h3 { margin: 0; font-size: 17px; }
.launcher-guide-card > header span { color: var(--a2-text-secondary); font-size: 12px; font-weight: 700; }
.launcher-guide-card > header span.is-new { color: var(--a2-accent); }

.launcher-state-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid var(--a2-border);
}

.launcher-state-row:first-of-type { border-top: 0; }
.launcher-state-row > i {
  display: grid;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  place-items: center;
  border-radius: 50%;
  background: #26313a;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.launcher-state-row.is-visible > i { background: #43d978; box-shadow: 0 0 9px rgba(67, 217, 120, .75); }
.launcher-state-row.is-background > i { background: #e2b84f; box-shadow: 0 0 9px rgba(226, 184, 79, .7); }
.launcher-state-row.is-stop > i { box-sizing: border-box; border: 2px solid #e34f5f; background: transparent; color: #e34f5f; }
.launcher-state-row strong,
.launcher-guide-card li strong { color: var(--a2-text-bright); }
.launcher-state-row p { margin: 4px 0 0; color: var(--a2-text-secondary); line-height: 1.55; }

.launcher-button-card dl,
.launcher-guide-card ul { display: grid; margin: 0; padding: 0; gap: 0; list-style: none; }
.launcher-button-card dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--a2-border);
}
.launcher-button-card dl > div:first-child { border-top: 0; }
.launcher-button-card dt { color: var(--a2-accent); font-weight: 800; }
.launcher-button-card dd { margin: 0; color: var(--a2-text-secondary); }
.launcher-guide-card li { display: grid; gap: 4px; padding: 8px 0; }
.launcher-guide-card li span,
.launcher-guide-card small { color: var(--a2-text-secondary); line-height: 1.55; }
.launcher-guide-card small { display: block; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--a2-border); }
.launcher-hotkey-card { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .launcher-introduction { padding: 22px 18px; }
  .launcher-guide-grid { grid-template-columns: 1fr; }
  .launcher-hotkey-card { grid-column: auto; }
}

/* Homepage DPS introduction */
.dps-introduction {
  --a2-accent: var(--a2-job-color-gwonseong);
  --a2-accent-rgb: 216, 104, 104;
  margin: 0 0 32px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid color-mix(in srgb, var(--a2-accent) 22%, var(--a2-border));
  border-radius: var(--a2-frame-radius);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--a2-accent-rgb), .16), transparent 38%),
    linear-gradient(145deg, rgba(24, 12, 15, .98), rgba(3, 9, 15, .98));
  box-shadow: var(--a2-shadow-raised), inset 0 1px rgba(255, 255, 255, .035);
}

.dps-introduction-head { margin-bottom: 22px; }
.dps-introduction-head h2 { margin: 4px 0 8px; }
.dps-introduction-head > p:not(.eyebrow) { margin: 0; color: var(--a2-text-secondary); line-height: 1.7; }
.dps-introduction-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dps-introduction-nav span { padding: 7px 11px; border: 1px solid var(--a2-border); border-radius: 999px; color: var(--a2-text-secondary); font-size: 12px; font-weight: 700; }
.dps-introduction-nav span.active { border-color: color-mix(in srgb, var(--a2-accent) 58%, var(--a2-border)); background: rgba(var(--a2-accent-rgb), .1); color: var(--a2-accent); }

.dps-introduction-visual {
  display: grid;
  width: min(1000px, 100%);
  margin: 0 auto 22px;
  padding: 12px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--a2-accent) 28%, var(--a2-border));
  border-radius: var(--a2-card-radius);
  background: rgba(2, 7, 12, .78);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.dps-introduction-visual img { display: block; width: 100%; height: auto; border-radius: 10px; }
.dps-introduction-visual figcaption { margin-top: 10px; color: var(--a2-text-secondary); font-size: 12px; text-align: center; }

.dps-guide-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; }
.dps-guide-card { padding: 20px; border: 1px solid var(--a2-border); border-radius: var(--a2-card-radius); background: rgba(5, 13, 21, .88); box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.dps-guide-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.dps-guide-card > header h3 { margin: 0; font-size: 17px; }
.dps-guide-card > header span { color: var(--a2-text-secondary); font-size: 12px; font-weight: 700; }
.dps-guide-card dl,
.dps-guide-card ul { display: grid; margin: 0; padding: 0; gap: 0; list-style: none; }
.dps-guide-card dl > div { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--a2-border); }
.dps-guide-card dl > div:first-child { border-top: 0; }
.dps-guide-card dt,
.dps-guide-card li strong { color: var(--a2-text-bright); font-weight: 800; }
.dps-guide-card dd { margin: 0; color: var(--a2-text-secondary); line-height: 1.55; }
.dps-guide-card li { display: grid; gap: 4px; padding: 8px 0; }
.dps-guide-card li span { color: var(--a2-text-secondary); line-height: 1.55; }
.dps-new-label { display: inline-block; margin-left: 6px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--a2-accent) 52%, var(--a2-border)); border-radius: 999px; color: var(--a2-accent); font-size: 10px; vertical-align: 1px; }
.dps-state-guide { grid-row: span 2; }
.dps-combat-introduction { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--a2-border); }
.dps-combat-introduction-head { margin-bottom: 20px; }
.dps-combat-introduction-head h3 { margin: 4px 0 8px; font-size: clamp(21px, 3vw, 28px); }
.dps-combat-introduction-head > p:not(.eyebrow) { margin: 0; color: var(--a2-text-secondary); line-height: 1.7; }
.dps-combat-visual { width: min(1120px, 100%); }
.dps-combat-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dps-combat-window-guide { grid-column: 1 / -1; }
.dps-records-privacy-guide { display: grid; align-content: start; }
.dps-records-privacy-guide p { margin: 0; color: var(--a2-text-secondary); line-height: 1.65; }
.dps-records-privacy-guide strong { color: var(--a2-accent); }

@media (max-width: 760px) {
  .dps-introduction { padding: 22px 18px; }
  .dps-guide-grid { grid-template-columns: 1fr; }
  .dps-state-guide { grid-row: auto; }
  .dps-combat-guide-grid { grid-template-columns: 1fr; }
  .dps-combat-window-guide { grid-column: auto; }
}

/* Private bug-report inbox */
.bug-report-admin-panel { padding: 18px; }
.bug-report-admin-list { display: grid; gap: 14px; }
.bug-report-admin-list > article {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(4, 12, 19, .88);
}
.bug-report-admin-list > article > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.bug-report-admin-list > article > header > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bug-report-admin-list > article > header time,
.bug-report-admin-list > article > header small { color: var(--a2-text-secondary); font-size: 12px; }
.bug-report-description { margin: 0; color: var(--a2-text-bright); line-height: 1.65; white-space: pre-wrap; }
.bug-report-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 8px 16px; }
.bug-report-meta > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.bug-report-meta dt { color: var(--a2-text-secondary); font-size: 12px; font-weight: 800; }
.bug-report-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.bug-report-meta code { color: var(--a2-accent); font-size: 10px; }
.bug-report-diagnostics { border: 1px solid var(--a2-border); border-radius: 8px; background: rgba(0, 0, 0, .16); }
.bug-report-diagnostics summary { padding: 10px 12px; cursor: pointer; color: var(--a2-text-secondary); font-weight: 800; }
.bug-report-diagnostics pre { max-height: 240px; margin: 0; padding: 12px; overflow: auto; border-top: 1px solid var(--a2-border); color: #9bc9d5; font-size: 11px; white-space: pre-wrap; }
.bug-report-attachment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bug-report-attachment-actions form { margin: 0; }
.bug-report-admin-form { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.bug-report-admin-form label { display: grid; gap: 6px; }
.bug-report-admin-form label > span { color: var(--a2-text-secondary); font-size: 11px; font-weight: 800; }
.bug-report-admin-form select,
.bug-report-admin-form textarea { width: 100%; }

@media (max-width: 760px) {
  .bug-report-admin-list > article > header { display: grid; }
  .bug-report-meta { grid-template-columns: 1fr; }
  .bug-report-admin-form { grid-template-columns: 1fr; }
}

/* Arcana calculator guide */
.arcana-guide-page-title {
  gap: 24px;
}

.arcana-guide-page-title .arcana-page-title-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.arcana-guide-page {
  display: grid;
  gap: 18px;
  padding: 22px 0 72px;
}

.arcana-guide-quick-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.arcana-guide-quick-nav a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius);
  background: rgba(4, 12, 19, .76);
  color: var(--a2-text-secondary);
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}

.arcana-guide-quick-nav a:hover,
.arcana-guide-quick-nav a:focus-visible {
  border-color: color-mix(in srgb, var(--a2-accent) 52%, var(--a2-border));
  background: rgba(var(--a2-accent-rgb), .08);
  color: var(--a2-text-bright);
}

.arcana-guide-quick-nav strong {
  color: var(--a2-accent);
  font-size: 11px;
  letter-spacing: .08em;
}

.arcana-guide-quick-nav span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcana-guide-overview,
.arcana-guide-step,
.arcana-guide-features,
.arcana-guide-note {
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-frame-radius);
  background: rgba(3, 10, 17, .9);
  box-shadow: var(--a2-shadow-raised), inset 0 1px rgba(255, 255, 255, .025);
}

.arcana-guide-overview {
  padding: clamp(22px, 4vw, 36px);
  border-color: color-mix(in srgb, var(--a2-accent) 24%, var(--a2-border));
  background:
    radial-gradient(circle at 100% 0, rgba(var(--a2-accent-rgb), .13), transparent 38%),
    linear-gradient(145deg, rgba(4, 17, 24, .98), rgba(2, 8, 14, .98));
}

.arcana-guide-overview > header h2,
.arcana-guide-features > header h2 {
  margin: 4px 0 8px;
  font-size: clamp(22px, 3vw, 30px);
}

.arcana-guide-overview > header > p:not(.eyebrow) {
  max-width: 820px;
  margin: 0;
  color: var(--a2-text-secondary);
  line-height: 1.7;
}

.arcana-guide-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.arcana-guide-principles section,
.arcana-guide-features > div > section {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-card-radius);
  background: rgba(5, 14, 22, .84);
}

.arcana-guide-principles strong,
.arcana-guide-features strong {
  color: var(--a2-text-bright);
  font-size: 14px;
}

.arcana-guide-principles span,
.arcana-guide-features p {
  margin: 0;
  color: var(--a2-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.arcana-guide-step {
  display: grid;
  gap: 24px;
  padding: clamp(20px, 3.5vw, 32px);
  scroll-margin-top: 88px;
}

.arcana-guide-step-heading {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.arcana-guide-step-heading > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--a2-accent) 52%, var(--a2-border));
  border-radius: 999px;
  background: rgba(var(--a2-accent-rgb), .08);
  color: var(--a2-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.arcana-guide-step-heading h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.8vw, 28px);
}

.arcana-guide-step-heading p {
  max-width: 880px;
  margin: 0;
  color: var(--a2-text-secondary);
  line-height: 1.7;
}

.arcana-guide-step-heading p strong,
.arcana-guide-step-heading li strong {
  color: var(--a2-accent);
}

.arcana-guide-step-heading ul {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--a2-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.arcana-guide-media-stack {
  display: grid;
  gap: 20px;
}

.arcana-guide-figure {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.arcana-guide-figure-portrait {
  width: min(100%, 900px);
}

.arcana-guide-figure > a {
  display: block;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--a2-accent) 26%, var(--a2-border));
  border-radius: var(--a2-card-radius);
  background: #02070c;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.arcana-guide-figure > a:hover,
.arcana-guide-figure > a:focus-visible {
  border-color: color-mix(in srgb, var(--a2-accent) 66%, var(--a2-border));
  box-shadow: var(--a2-focus-ring), 0 20px 52px rgba(0, 0, 0, .34);
}

.arcana-guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}

.arcana-guide-figure figcaption {
  margin-top: 10px;
  color: var(--a2-text-secondary);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.arcana-guide-features {
  padding: clamp(22px, 4vw, 34px);
}

.arcana-guide-features > header {
  margin-bottom: 18px;
}

.arcana-guide-features > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.arcana-guide-features strong {
  color: var(--a2-accent);
}

.arcana-guide-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-color: color-mix(in srgb, var(--a2-accent) 28%, var(--a2-border));
}

.arcana-guide-note > div {
  display: grid;
  gap: 5px;
}

.arcana-guide-note strong {
  color: var(--a2-text-bright);
}

.arcana-guide-note span {
  color: var(--a2-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.arcana-guide-note > a {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .arcana-guide-page-title .arcana-page-title-actions,
  .arcana-guide-page-title .arcana-page-title-actions a {
    width: 100%;
  }

  .arcana-guide-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arcana-guide-quick-nav a:last-child {
    grid-column: 1 / -1;
  }

  .arcana-guide-principles,
  .arcana-guide-features > div {
    grid-template-columns: 1fr;
  }

  .arcana-guide-step-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .arcana-guide-step-heading > span {
    justify-self: start;
  }

  .arcana-guide-figure > a {
    padding: 5px;
  }

  .arcana-guide-note {
    align-items: stretch;
    flex-direction: column;
  }
}