.gamification-head { margin-bottom: 18px; }
.gamification-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--portal-border, #25323a); margin-bottom: 24px; overflow-x: auto; scrollbar-width: thin; }
.gamification-tabs button { min-height: 48px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--portal-muted, #8fa2ad); font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.gamification-tabs button:hover { color: var(--portal-text, #f4f7f8); }
.gamification-tabs button.active { color: var(--portal-text, #f4f7f8); border-bottom-color: #ef233c; }
.gamification-tabs button:focus-visible,
.gamification-row-actions button:focus-visible,
.gamification-tier-line button:focus-visible,
.gamification-badges button:focus-visible { outline: 2px solid #4cc9f0; outline-offset: 3px; }
.gamification-workspace { display: grid; gap: 22px; }
.gamification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gamification-toolbar > div:first-child { display: grid; gap: 4px; }
.gamification-toolbar > div:first-child strong { font-size: 18px; }
.gamification-toolbar > div:first-child span { color: var(--portal-muted, #8fa2ad); font-size: 13px; }
.gamification-toolbar > div:last-child { display: flex; gap: 8px; }
.gamification-list,
.gamification-season-list { display: grid; border-top: 1px solid var(--portal-border, #25323a); }
.gamification-row,
.gamification-season-list > article { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--portal-border, #25323a); }
.gamification-row-main,
.gamification-season-list article > div:nth-child(2) { display: grid; gap: 5px; }
.gamification-row-main span,
.gamification-season-list article > div:nth-child(2) span { color: var(--portal-muted, #8fa2ad); font-size: 12px; }
.gamification-count { color: var(--portal-muted, #8fa2ad); font-size: 12px; font-variant-numeric: tabular-nums; }
.gamification-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #242b30; color: #c7d1d7; font-size: 11px; font-weight: 800; }
.gamification-status.is-active { background: #103a2c; color: #73e2b4; }
.gamification-status.is-draft,
.gamification-status.is-scheduled { background: #3a3012; color: #f6ce63; }
.gamification-status.is-archived,
.gamification-status.is-inactive,
.gamification-status.is-ended { background: #292d30; color: #9ba5ab; }
.gamification-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.gamification-row-actions button { min-height: 38px; padding: 0 12px; border: 1px solid var(--portal-border, #34434c); border-radius: 6px; background: transparent; color: var(--portal-text, #f4f7f8); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.gamification-row-actions button:hover { border-color: #ef233c; color: #ff6478; }
.gamification-tier-line { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.gamification-tier-line button { display: grid; gap: 2px; min-width: 112px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--portal-border, #34434c); border-radius: 6px; background: var(--portal-surface, #11171b); color: var(--portal-text, #f4f7f8); text-align: left; cursor: pointer; }
.gamification-tier-line button span { color: var(--portal-muted, #8fa2ad); font-size: 11px; }
.gamification-badges { display: grid; gap: 14px; padding-top: 8px; }
.gamification-badges > header { display: flex; align-items: baseline; justify-content: space-between; }
.gamification-badges h2,
.gamification-task-groups h2,
.gamification-curve h2 { margin: 0; font-size: 16px; }
.gamification-badges > header span { color: var(--portal-muted, #8fa2ad); font-size: 12px; }
.gamification-badges > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.gamification-badges > div > button { display: grid; justify-items: center; gap: 5px; min-height: 136px; padding: 14px 10px; border: 1px solid var(--portal-border, #2a3840); border-radius: 8px; background: var(--portal-surface, #11171b); color: var(--portal-text, #f4f7f8); cursor: pointer; }
.gamification-badges i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #23171a; color: #ff5067; font-style: normal; font-weight: 900; }
.gamification-badges img { width: 100%; height: 100%; object-fit: contain; }
.gamification-badges span { color: var(--portal-muted, #8fa2ad); font-size: 11px; }
.gamification-task-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gamification-task-groups > section { border-top: 2px solid #ef233c; background: var(--portal-surface, #10161a); }
.gamification-task-groups section > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.gamification-task-groups section > header span { color: var(--portal-muted, #8fa2ad); font-variant-numeric: tabular-nums; }
.gamification-task-groups article { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--portal-border, #26333a); }
.gamification-task-groups article > div:first-child { display: grid; gap: 4px; }
.gamification-task-groups article > div:first-child span { color: var(--portal-muted, #8fa2ad); font-size: 11px; }
.gamification-task-groups .gamification-row-actions { grid-column: 1 / -1; }
.gamification-xp { display: grid; justify-items: end; color: #ff5269; font-variant-numeric: tabular-nums; }
.gamification-xp.season { color: #4cc9f0; }
.gamification-xp span { color: var(--portal-muted, #8fa2ad); font-size: 9px; text-transform: uppercase; }
.gamification-season-list > article { grid-template-columns: 48px minmax(220px, 1fr) auto auto; }
.gamification-season-index { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; background: #2a1117; color: #ff4f67; font-weight: 900; }
.gamification-curve { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--portal-border, #2a3840); border-radius: 8px; background: var(--portal-surface, #10161a); }
.gamification-curve > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.gamification-curve > header > div { display: grid; gap: 4px; }
.gamification-curve > header span { color: var(--portal-muted, #8fa2ad); font-size: 12px; }
.gamification-curve-chart { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 10px; height: 190px; padding: 14px 8px 0; border-bottom: 1px solid var(--portal-border, #2a3840); }
.gamification-curve-chart > div { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: end; height: 100%; gap: 5px; }
.gamification-curve-chart i { width: min(34px, 70%); height: var(--height); min-height: 4px; background: linear-gradient(180deg, #ff3852, #8d1728); border-radius: 3px 3px 0 0; }
.gamification-curve-chart span { color: var(--portal-muted, #8fa2ad); font-size: 10px; }
.gamification-curve-chart b { font-size: 10px; font-variant-numeric: tabular-nums; }
.gamification-curve-form { display: grid; grid-template-columns: 160px 160px auto; align-items: end; gap: 10px; }
.gamification-curve-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--portal-border, #2a3840); }
.gamification-curve-table span,
.gamification-curve-table strong { padding: 8px; background: var(--portal-surface, #10161a); font-size: 10px; text-align: center; }
.gamification-curve-table strong { font-variant-numeric: tabular-nums; }
.gamification-level-editor { border-top: 1px solid var(--portal-border, #2a3840); padding-top: 14px; }
.gamification-level-editor summary { width: fit-content; color: var(--portal-text, #f4f7f8); font-size: 12px; font-weight: 800; cursor: pointer; }
.gamification-level-editor form { display: grid; gap: 14px; margin-top: 14px; }
.gamification-level-table { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 8px; max-height: 390px; overflow: auto; padding-right: 5px; scrollbar-width: thin; }
.gamification-level-table header,
.gamification-level-table label { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 42px; padding: 5px 8px; border: 1px solid var(--portal-border, #2a3840); border-radius: 6px; }
.gamification-level-table header { grid-column: 1 / -1; border: 0; min-height: auto; color: var(--portal-muted, #8fa2ad); font-size: 10px; text-transform: uppercase; }
.gamification-level-table b { text-align: center; font-variant-numeric: tabular-nums; }
.gamification-level-table input { min-width: 0; width: 100%; height: 32px; padding: 4px 7px; border: 1px solid #34434c; border-radius: 4px; background: #0b1013; color: #f4f7f8; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.gamification-level-editor footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gamification-level-editor footer span { color: var(--portal-muted, #8fa2ad); font-size: 11px; }
.gamification-empty { display: grid; place-items: center; gap: 5px; min-height: 112px; color: var(--portal-muted, #8fa2ad); text-align: center; }
.gamification-empty strong { color: var(--portal-text, #f4f7f8); }
.gamification-editor-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(3, 6, 8, .78); }
.gamification-editor { width: min(720px, 100%); max-height: min(780px, calc(100vh - 48px)); overflow: auto; border: 1px solid #34434c; border-radius: 10px; background: #0d1215; color: #f4f7f8; box-shadow: 0 24px 64px rgba(0, 0, 0, .48); }
.gamification-editor > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #29363d; background: #0d1215; }
.gamification-editor header h2 { margin: 0 0 4px; font-size: 20px; }
.gamification-editor header span { color: #93a4ad; font-size: 12px; }
.gamification-editor header button { width: 44px; height: 44px; border: 1px solid #34434c; border-radius: 50%; background: transparent; color: #f4f7f8; font-size: 22px; cursor: pointer; }
.gamification-editor form { padding: 22px; }
.gamification-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gamification-field { display: grid; gap: 7px; }
.gamification-field.span-2 { grid-column: 1 / -1; }
.gamification-field span { color: #aab7bd; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.gamification-field input,
.gamification-field select,
.gamification-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #34434c; border-radius: 6px; background: #11181c; color: #f5f7f8; font: inherit; }
.gamification-field textarea { resize: vertical; }
.gamification-field input:focus,
.gamification-field select:focus,
.gamification-field textarea:focus { border-color: #4cc9f0; outline: 2px solid rgba(76, 201, 240, .24); }
.gamification-editor footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; margin-top: 22px; }
@media (max-width: 980px) {
  .gamification-task-groups { grid-template-columns: 1fr; }
  .gamification-row { grid-template-columns: minmax(0, 1fr) auto; }
  .gamification-season-list > article { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .gamification-season-list article > div:nth-child(2) { min-width: 0; }
  .gamification-season-list article > div:nth-child(2) strong,
  .gamification-season-list article > div:nth-child(2) span { overflow-wrap: anywhere; }
  .gamification-season-list .gamification-status,
  .gamification-season-list .gamification-row-actions { grid-column: 1 / -1; width: fit-content; }
  .gamification-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .gamification-count { display: none; }
}
@media (max-width: 680px) {
  .gamification-toolbar,
  .gamification-curve > header { align-items: stretch; flex-direction: column; }
  .gamification-toolbar > div:last-child { flex-wrap: wrap; }
  .gamification-task-groups article { grid-template-columns: 1fr auto auto; }
  .gamification-task-groups article > div:first-child { grid-column: 1 / -1; }
  .gamification-curve-form,
  .gamification-form-grid { grid-template-columns: 1fr; }
  .gamification-field.span-2 { grid-column: auto; }
  .gamification-curve-table { grid-template-columns: repeat(3, 1fr); }
  .gamification-level-table { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .gamification-level-editor footer { align-items: stretch; flex-direction: column; }
  .gamification-editor footer { grid-template-columns: 1fr 1fr; }
  .gamification-editor footer > span { display: none; }
  .gamification-curve-chart b { display: none; }
}