:root {
      --bg: #07070a;
      --panel: #101014;
      --panel-2: #15151b;
      --panel-3: #1f1720;
      --text: #f7f7fb;
      --muted: #aaa8b3;
      --line: rgba(148, 163, 184, .18);
      --accent: #ff0050;
      --accent-2: #7f0028;
      --success: #22c55e;
      --info: #f59e0b;
      --danger: #dc2626;
      --shadow: 0 22px 70px rgba(0, 0, 0, .45);
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    html {
      min-height: 100%;
      background: var(--bg);
    }

    body {
      min-height: 100vh;
      margin: 0;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0;
      background:
        linear-gradient(90deg, rgba(255, 0, 80, .1), transparent 34%),
        linear-gradient(180deg, #0a090d 0%, #050507 100%);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
      background-size: 100% 42px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 75%);
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      min-height: 44px;
      border: 0;
      cursor: pointer;
    }

    .icon {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    .login {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(7, 11, 18, .94);
      z-index: 10;
    }

    .login-card {
      width: min(440px, 100%);
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(13, 20, 34, .88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

    .brand-mark {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: var(--radius);
      color: #fff;
      background: #09090d;
      border: 1px solid rgba(255, 0, 80, .55);
      box-shadow: 0 12px 32px rgba(255, 0, 80, .22);
      font-weight: 900;
      overflow: hidden;
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      padding: 3px;
      object-fit: contain;
      display: block;
    }

    .brand h1,
    .brand h2 {
      margin: 0;
      font-size: 1.45rem;
      line-height: 1.1;
    }

    .brand p,
    .panel-subtitle,
    .muted {
      color: var(--muted);
    }

    .brand p {
      margin: 4px 0 0;
      font-size: .92rem;
    }

    .field {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }

    label {
      color: #cbd5e1;
      font-size: .84rem;
      font-weight: 700;
    }

    input {
      width: 100%;
      min-height: 46px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: var(--text);
      background: rgba(15, 23, 42, .78);
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }

    input[readonly] {
      background: rgba(15, 23, 42, .4);
      color: var(--muted);
      cursor: not-allowed;
      border-color: rgba(148, 163, 184, .1);
    }

    input[readonly]:focus {
      border-color: rgba(148, 163, 184, .1);
      box-shadow: none;
    }

    input:focus {
      border-color: rgba(56, 189, 248, .74);
      background: rgba(15, 23, 42, .95);
      box-shadow: 0 0 0 4px rgba(56, 189, 248, .12);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px 16px;
      border-radius: var(--radius);
      color: #fff;
      background: linear-gradient(135deg, var(--accent), #b00039);
      font-weight: 800;
      text-decoration: none;
      transition: transform .18s, filter .18s, background .18s;
    }

    .btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
    }

    .btn.secondary {
      color: var(--text);
      border: 1px solid var(--line);
      background: rgba(15, 23, 42, .72);
    }

    .btn.discord-login-btn {
      width: 100%;
      background: #5865f2;
    }

    .btn.danger {
      background: #7f1d1d;
    }

    .btn.icon-only {
      width: 44px;
      padding: 0;
    }

    .app {
      display: none;
      min-height: 100vh;
    }

    .app.is-ready {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 22px 14px;
      border-right: 1px solid var(--line);
      background: rgba(8, 8, 12, .92);
      backdrop-filter: blur(20px);
      overflow-y: auto;
    }

    .sidebar .brand {
      padding: 0 10px 18px;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }

    .nav {
      display: grid;
      gap: 8px;
      margin-top: 16px;
    }

    .navbtn {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 46px;
      padding: 12px;
      border-radius: var(--radius);
      color: #cbd5e1;
      background: transparent;
      text-align: left;
      transition: background .2s, color .2s;
    }

    .navbtn:hover,
    .navbtn.active {
      color: #fff;
      background: linear-gradient(90deg, rgba(255, 0, 80, .9), rgba(127, 0, 40, .38));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }

    .sidebar-footer {
      display: grid;
      gap: 10px;
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .main {
      min-width: 0;
      padding: 28px;
    }

    .main::before {
      content: "";
      position: fixed;
      top: 0;
      right: 0;
      left: 280px;
      height: 88px;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(5, 5, 7, .92), rgba(255, 0, 80, .12));
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      z-index: -1;
    }

    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 24px;
    }

    .topbar h1 {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2.35rem);
      line-height: 1.1;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
      animation: fadeIn .18s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .grid {
      display: grid;
      gap: 16px;
    }

    .hero-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 22px;
      align-items: center;
      margin-bottom: 18px;
      padding: 28px;
      border: 1px solid rgba(255, 0, 80, .28);
      border-radius: 18px;
      background:
        linear-gradient(100deg, rgba(16, 16, 20, .96), rgba(54, 0, 18, .88)),
        var(--panel);
      box-shadow: var(--shadow);
    }

    .hero-panel h2 {
      margin: 8px 0 8px;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      line-height: 1;
    }

    .eyebrow {
      color: var(--accent);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .action-box {
      min-width: 270px;
      padding: 18px;
      border: 1px solid rgba(255, 0, 80, .38);
      border-radius: 16px;
      background: rgba(68, 0, 22, .62);
    }

    .action-box strong {
      display: block;
      font-size: 2.8rem;
      line-height: 1;
    }

    .stats-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 16px;
    }

    .two-cols {
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
      align-items: start;
    }

    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(14, 14, 19, .86);
      box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
    }

    .card-pad {
      padding: 18px;
    }

    .metric {
      min-height: 118px;
      padding: 18px;
      position: relative;
      overflow: hidden;
    }

    .metric::after {
      content: "";
      position: absolute;
      top: -42px;
      right: -32px;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: rgba(255, 0, 80, .22);
    }

    .metric span {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: .86rem;
      font-weight: 800;
    }

    .metric strong {
      display: block;
      margin-top: 16px;
      font-size: 2rem;
      line-height: 1;
    }

    .metric small {
      display: block;
      margin-top: 8px;
      color: var(--muted);
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .section-title h2,
    .section-title h3 {
      margin: 0;
      font-size: 1.05rem;
    }

    .active-sessions-card {
      grid-column: 1 / -1;
    }

    .sessions-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 12px;
    }

    .session-item {
      min-width: 0;
      padding: 12px 10px;
      border: 1px solid rgba(153, 174, 210, .12);
      border-radius: 10px;
      background: rgba(8, 10, 16, .62);
      text-align: center;
    }

    .session-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, .18);
      object-fit: cover;
      background: rgba(153, 174, 210, .08);
    }

    .session-username {
      display: block;
      margin-top: 7px;
      overflow: hidden;
      color: var(--text);
      font-size: .78rem;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .session-item small {
      display: block;
      margin-top: 3px;
      overflow: hidden;
      color: var(--muted);
      font-size: .68rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

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

    .discord-lookup {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      gap: 8px;
    }

    .discord-preview {
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid rgba(88, 101, 242, .5);
      border-radius: var(--radius);
      background: rgba(88, 101, 242, .1);
    }

    .discord-preview:not([hidden]) {
      display: grid;
    }

    .discord-preview img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }

    .discord-preview strong,
    .discord-preview small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .discord-preview small {
      margin-top: 3px;
      color: var(--muted);
    }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      margin-bottom: 14px;
    }

    .list {
      display: grid;
      gap: 12px;
    }

    .ban-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(17, 27, 45, .76);
    }

    .ban-main {
      min-width: 0;
    }

    .ban-title {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .license {
      max-width: 100%;
      overflow-wrap: anywhere;
      color: #7dd3fc;
      font-family: "Cascadia Code", Consolas, monospace;
      font-size: .92rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border-radius: 999px;
      color: #fecaca;
      background: rgba(239, 68, 68, .14);
      font-size: .76rem;
      font-weight: 800;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      margin-top: 10px;
      color: var(--muted);
      font-size: .88rem;
    }

    .item-actions {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .empty {
      padding: 28px;
      border: 1px dashed rgba(148, 163, 184, .28);
      border-radius: var(--radius);
      color: var(--muted);
      text-align: center;
      background: rgba(15, 23, 42, .38);
    }

    .weekly-grid {
      display: grid;
      grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
      gap: 16px;
      align-items: start;
    }

    .period-trend {
      display: block;
      margin-top: 10px;
      color: #fca5a5;
      font-size: .78rem;
      font-weight: 800;
    }

    .period-cycle {
      display: block;
      margin-top: 7px;
      color: #7dd3fc;
      font-size: .78rem;
      font-weight: 800;
    }

    .period-metrics {
      margin-bottom: 14px;
    }

    .period-podium-card,
    .period-chart-card {
      margin-bottom: 16px;
    }

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

    .podium-grid > .empty {
      grid-column: 1 / -1;
    }

    .podium-item {
      display: grid;
      grid-template-columns: auto 42px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 14px;
      border: 1px solid rgba(153, 174, 210, .16);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .035);
    }

    .podium-1 {
      border-color: rgba(245, 158, 11, .48);
      background: linear-gradient(90deg, rgba(245, 158, 11, .12), rgba(255, 255, 255, .025));
    }

    .podium-rank {
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: rgba(229, 62, 62, .82);
      font-size: .76rem;
      font-weight: 900;
    }

    .podium-copy {
      min-width: 0;
    }

    .podium-copy strong,
    .podium-copy span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .podium-copy span {
      margin-top: 3px;
      color: var(--muted);
      font-size: .78rem;
    }

    .podium-total {
      color: #fff;
      font-size: 1.6rem;
    }

    .staff-ranking {
      display: grid;
      gap: 10px;
    }

    .staff-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .035);
    }

    .rank {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: rgba(255, 0, 80, .88);
      font-weight: 900;
    }

    .staff-row strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .staff-total {
      color: #fff;
      font-size: 1.35rem;
      font-weight: 900;
    }

    .admin-grid {
      display: grid;
      grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
      gap: 16px;
      align-items: start;
    }

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

    .check-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .035);
      color: #d8d8df;
      font-weight: 700;
    }

    .check-row input {
      width: 18px;
      min-height: 18px;
      accent-color: var(--accent);
    }

    select {
      width: 100%;
      min-height: 46px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: var(--text);
      background: rgba(15, 15, 20, .9);
      outline: none;
    }

    .user-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .035);
    }

    .user-row small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      overflow-wrap: anywhere;
    }

    .user-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .role-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .role-badge {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 999px;
      color: #fff;
      background: rgba(255, 0, 80, .22);
      border: 1px solid rgba(255, 0, 80, .38);
      font-size: .78rem;
      font-weight: 900;
    }

    .role-badge.role-admin,
    .role-badge.role-developer {
      color: #3b0808;
      background: #ff9696;
      border-color: #ffb4b4;
    }

    .role-badge.role-manager {
      color: #302500;
      background: #ffd94a;
      border-color: #ffe580;
    }

    .role-badge.role-staff {
      color: #fff;
      background: #3498db;
      border-color: #6db7e8;
    }

    .session-item .role-badge,
    .podium-copy .role-badge,
    .staff-row .role-badge {
      min-height: 20px;
      margin-top: 5px;
      padding: 2px 6px;
      font-size: .62rem;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(0, 0, 0, .64);
      z-index: 30;
    }

    .modal-backdrop.open {
      display: grid;
    }

    .modal-panel {
      width: min(560px, 100%);
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(14, 14, 19, .98);
      box-shadow: var(--shadow);
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      padding: 18px;
      border-bottom: 1px solid var(--line);
    }

    .modal-head h2 {
      margin: 0;
      font-size: 1.1rem;
    }

    .modal-body {
      display: grid;
      gap: 16px;
      padding: 18px;
    }

    .detail-line {
      display: grid;
      gap: 5px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .035);
    }

    .detail-line span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .detail-line strong {
      overflow-wrap: anywhere;
    }

    .log-item {
      padding: 13px 14px;
      border-bottom: 1px solid var(--line);
    }

    .log-item:last-child {
      border-bottom: 0;
    }

    .log-item p {
      margin: 4px 0 0;
    }

    .chart-wrap {
      height: 300px;
      padding: 12px;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      display: none;
      max-width: min(440px, calc(100vw - 36px));
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-left: 5px solid var(--accent);
      border-radius: var(--radius);
      color: #fff;
      background: rgba(15, 23, 42, .96);
      box-shadow: var(--shadow);
      z-index: 20;
    }

    .toast.show {
      display: block;
      animation: fadeIn .18s ease-out;
    }

    .mobile-menu {
      display: none;
    }

    .file-input {
      display: none;
    }

    @media (max-width: 1120px) {
      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .two-cols {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      body {
        background:
          linear-gradient(180deg, rgba(255, 0, 80, .12), transparent 220px),
          #070b12;
      }

      .app.is-ready {
        display: block;
      }

      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(320px, 86vw);
        transform: translateX(-102%);
        transition: transform .22s ease;
        z-index: 9;
      }

      .sidebar.open {
        transform: translateX(0);
      }

      .main {
        padding: 18px;
      }

      .main::before {
        left: 0;
      }

      .mobile-menu {
        display: inline-flex;
      }

      .topbar {
        align-items: stretch;
        flex-direction: column;
      }

      .top-actions {
        justify-content: flex-start;
      }

      .stats-grid,
      .form-grid,
      .toolbar,
      .weekly-grid,
      .admin-grid,
      .permission-grid,
      .hero-panel {
        grid-template-columns: 1fr;
      }

      .hero-panel {
        padding: 22px;
      }

      .action-box {
        min-width: 0;
      }

      .ban-item {
        grid-template-columns: 1fr;
      }

      .item-actions {
        width: 100%;
      }

      .item-actions .btn {
        flex: 1;
      }
    }

    .whitelist-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 8px;
      margin-bottom: 8px;
      transition: background 0.2s;
    }
    .whitelist-item:hover {
      background: rgba(255, 255, 255, 0.05);
    }
    .avatar-whitelist {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin-right: 12px;
    }
    .whitelist-username {
      color: #EAF1FF;
      font-weight: 500;
      margin-right: 8px;
    }
    .whitelist-id {
      color: #99AED2;
      font-size: 0.85em;
    }

    /* UX refresh: stronger hierarchy and readable lists */
    :root {
      --surface: rgba(30, 30, 46, .82);
      --surface-strong: rgba(45, 45, 68, .92);
      --text-soft: #eaf1ff;
      --muted-blue: #99aed2;
    }

    .sidebar {
      background:
        linear-gradient(180deg, rgba(18, 18, 28, .96), rgba(8, 8, 12, .94)),
        var(--panel);
    }

    .navbtn {
      position: relative;
      border-left: 3px solid transparent;
      border-radius: 0 var(--radius) var(--radius) 0;
    }

    .navbtn:hover,
    .navbtn.active {
      border-left-color: #e53e3e;
      background: linear-gradient(90deg, rgba(229, 62, 62, .18), rgba(229, 62, 62, .04));
      box-shadow: inset 0 0 0 1px rgba(229, 62, 62, .18);
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 8;
      margin: -12px -12px 24px;
      padding: 12px;
      border: 1px solid rgba(153, 174, 210, .12);
      border-radius: 12px;
      background: rgba(7, 7, 10, .74);
      backdrop-filter: blur(18px);
    }

    .top-actions {
      padding: 8px;
      border: 1px solid rgba(153, 174, 210, .12);
      border-radius: 12px;
      background: rgba(10, 13, 20, .62);
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: .55;
      transform: none;
      filter: none;
    }

    .hero-panel,
    .card,
    .action-box {
      border-radius: 12px;
    }

    .metric {
      min-height: 132px;
      border-color: rgba(153, 174, 210, .14);
      background:
        linear-gradient(135deg, rgba(30, 30, 46, .96), rgba(45, 45, 68, .76)),
        var(--panel);
    }

    .metric::after {
      width: 118px;
      height: 118px;
      background:
        radial-gradient(circle at center, rgba(229, 62, 62, .25), transparent 64%),
        radial-gradient(circle at 70% 30%, rgba(0, 255, 136, .14), transparent 55%);
    }

    .metric:nth-child(2)::after {
      background: radial-gradient(circle at center, rgba(56, 189, 248, .22), transparent 64%);
    }

    .metric:nth-child(3)::after {
      background: radial-gradient(circle at center, rgba(245, 158, 11, .24), transparent 64%);
    }

    .metric:nth-child(4)::after {
      background: radial-gradient(circle at center, rgba(0, 255, 136, .18), transparent 64%);
    }

    .toolbar {
      grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) auto;
      padding: 12px;
      border: 1px solid rgba(153, 174, 210, .12);
      border-radius: 12px;
      background: rgba(14, 18, 29, .58);
    }

    .toolbar select {
      min-width: 190px;
    }

    .toolbar.period-toolbar {
      grid-template-columns: minmax(190px, 1.2fr) minmax(180px, 1fr) minmax(170px, .8fr) auto auto auto;
    }

    .period-chart-card .chart-wrap {
      height: 260px;
    }

    .ban-item {
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: start;
      padding: 14px;
      border-color: rgba(153, 174, 210, .14);
      background:
        linear-gradient(90deg, rgba(229, 62, 62, .08), transparent 38%),
        rgba(17, 27, 45, .72);
    }

    .item-avatar {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(229, 62, 62, .92), rgba(45, 45, 68, .92));
      border: 1px solid rgba(255, 255, 255, .16);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .item-avatar.avatar-image {
      display: block;
      object-fit: cover;
      padding: 0;
    }

    .ban-avatar {
      box-shadow: 0 10px 24px rgba(229, 62, 62, .12);
    }

    .whitelist-item {
      min-height: 60px;
      border: 1px solid rgba(153, 174, 210, .12);
      background:
        linear-gradient(90deg, rgba(0, 255, 136, .05), transparent 48%),
        rgba(255, 255, 255, .025);
    }

    .avatar-whitelist {
      width: 38px;
      height: 38px;
      box-shadow: 0 0 0 3px rgba(153, 174, 210, .08);
    }

    .whitelist-username {
      display: block;
      color: var(--text-soft);
      font-weight: 800;
    }

    .logs-card {
      overflow-x: auto;
    }

    .log-item {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      min-width: 0;
      padding: 14px 16px;
    }

    .logs-card .log-item {
      min-width: 520px;
    }

    .log-avatar {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, rgba(56, 189, 248, .82), rgba(45, 45, 68, .92));
      font-size: .72rem;
    }

    .log-item p {
      color: var(--text-soft);
      line-height: 1.45;
    }

    @media (max-width: 760px) {
      .top-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .toolbar {
        grid-template-columns: 1fr;
      }

      .toolbar.period-toolbar,
      .podium-grid {
        grid-template-columns: 1fr;
      }

      .toolbar select {
        min-width: 0;
      }

      .ban-item {
        grid-template-columns: 42px minmax(0, 1fr);
      }

      .ban-item .item-actions {
        grid-column: 1 / -1;
      }

      .log-item {
        min-width: 420px;
      }
    }

    @media (min-width: 761px) and (max-width: 1280px) {
      .toolbar.period-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .podium-grid {
        grid-template-columns: 1fr;
      }
    }

    @media print {
      body {
        background: #fff;
        color: #111;
      }

      .sidebar,
      .topbar,
      .period-toolbar,
      .period-archive-card,
      .item-actions,
      .toast {
        display: none !important;
      }

      .app,
      .main,
      #weekly {
        display: block !important;
        width: 100%;
        padding: 0;
      }

      .card,
      .hero-panel,
      .action-box,
      .podium-item,
      .ban-item,
      .staff-row {
        break-inside: avoid;
        border-color: #bbb;
        color: #111;
        background: #fff;
        box-shadow: none;
      }

      .muted,
      .panel-subtitle,
      .meta,
      .podium-copy span {
        color: #444;
      }
    }