* { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: #0f0f1a;
      color: #e0e0e0;
      font-family: 'Segoe UI', sans-serif;
      min-height: 100vh;
      padding: 20px;
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M2 1 L2 20 L7.5 15.5 L10.5 22.5 L13.5 21.2 L10.5 14.5 L17 14.5 Z" fill="%23a78bfa" stroke="%230f0f1a" stroke-width="1.4" stroke-linejoin="round"/></svg>') 2 1, auto;
    }

    h1 {
      text-align: center;
      font-size: 1.8rem;
      color: #a78bfa;
      margin-bottom: 24px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .version-badge {
      font-size: 0.35em;
      color: #7c7c9e;
      vertical-align: middle;
      margin-left: 8px;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: none;
    }

    .toolbar { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }

    .profile-switcher {
      display: none;
      align-items: center;
      gap: 4px;
      border: 1px solid #3a3a5a;
      border-radius: 8px;
      padding: 4px 6px;
      background: transparent;
    }
    .profile-switcher select {
      width: auto;
      min-width: 100px;
      max-width: 140px;
      background: transparent;
      border: none;
      color: #e0e0e0;
      font-size: 0.8rem;
    }
    .profile-action-btn {
      background: none;
      border: none;
      color: #7c7c9e;
      font-size: 0.85rem;
      padding: 2px 5px;
      cursor: pointer;
    }
    .profile-action-btn:hover { background: #2a2a4a; color: #a78bfa; border-radius: 4px; }

    .pages-menu-wrap { position: fixed; top: 20px; left: 20px; z-index: 200; }
    .pages-menu-btn {
      background: #1a1a2e; border: 1px solid #2a2a4a; color: #a78bfa;
      font-size: 1.1rem; padding: 8px 12px; border-radius: 8px; cursor: pointer;
    }
    .pages-menu-btn:hover { background: #2a2a4a; }
    .pages-menu-dropdown {
      display: none; position: absolute; top: calc(100% + 6px); left: 0;
      background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 10px;
      min-width: 150px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,0.5);
    }
    .pages-menu-dropdown.open { display: block; }
    .pages-menu-item {
      padding: 10px 14px; font-size: 0.85rem; color: #e0e0e0 !important;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none !important;
    }
    .pages-menu-item:hover { background: #2a2a4a; }
    .pages-menu-item:visited { color: #e0e0e0 !important; }
    .pages-menu-item.active { color: #a78bfa !important; font-weight: 600; }
    .pages-menu-item.disabled { color: #5a5a7a; cursor: default; }
    .pages-menu-item.disabled:hover { background: none; }

    .corner-actions {
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 60;
      display: flex;
      align-items: stretch;
      border: 1px solid #3a3a5a;
      border-radius: 8px;
      overflow: visible;
      background: transparent;
    }
    .corner-actions .corner-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-size: 0.8rem;
      border: none;
      border-radius: 0;
    }
    .corner-actions .corner-btn:not(:last-child) {
      border-right: 1px solid #2a2a4a;
    }
    .corner-actions .corner-btn:last-child {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    .corner-actions .corner-btn-icon {
      padding: 6px 12px;
      font-size: 0.95rem;
    }
    .corner-actions .corner-btn:disabled {
      opacity: 0.65;
    }

    /* Hovering anywhere in the group gives every button a faint glow... */
    .corner-actions:hover .corner-btn:not(:hover),
    .corner-actions:hover .lang-menu-btn:not(:hover) {
      background: rgba(167, 139, 250, 0.12);
      opacity: 0.85;
    }
    /* ...while the exact button under the cursor lights up more strongly. */
    .corner-actions .corner-btn:hover,
    .corner-actions .corner-btn:disabled:hover {
      background: #2a2a4a;
      color: #a78bfa;
      opacity: 1;
    }

    .lang-menu-wrap {
      position: relative;
      border-right: 1px solid #2a2a4a;
    }
    .lang-menu-btn {
      background: transparent; border: none; color: #7c7c9e;
      padding: 6px 12px; font-size: 0.8rem; cursor: pointer;
      display: flex; align-items: center; gap: 6px;
      opacity: 0.45; transition: opacity 0.15s, background 0.15s, color 0.15s;
    }
    .lang-menu-btn svg { display: block; border-radius: 2px; }
    .lang-menu-btn:hover { opacity: 1; background: #2a2a4a; color: #a78bfa; }
    .lang-menu-dropdown {
      display: none; position: absolute; top: calc(100% + 6px); left: 0;
      background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 10px;
      min-width: 140px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,0.5); z-index: 210;
    }
    .lang-menu-dropdown.open { display: block; }
    .lang-menu-item {
      padding: 9px 14px; font-size: 0.8rem; color: #e0e0e0; cursor: pointer;
      display: flex; align-items: center; gap: 8px; justify-content: flex-start;
    }
    .lang-menu-item svg { display: block; border-radius: 2px; flex-shrink: 0; }
    .lang-menu-item .wip-badge { margin-left: auto; }
    .lang-menu-item:hover { background: #2a2a4a; }
    .lang-menu-item.active { color: #a78bfa; font-weight: 600; }
    .lang-menu-item.disabled { color: #5a5a7a; cursor: default; }
    .lang-menu-item.disabled:hover { background: none; }

    .data-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid #2a2a4a;
    }

    button {
      background: #1e1e2e;
      color: #a78bfa;
      border: 1px solid #a78bfa;
      padding: 8px 18px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s;
    }

    button:hover { background: #a78bfa; color: #0f0f1a; }
    button.active { background: #a78bfa; color: #0f0f1a; }
    button:disabled { opacity: 0.4; cursor: not-allowed; border-color: #3a3a5a; color: #5a5a7a; }
    button:disabled:hover { background: #1e1e2e; color: #5a5a7a; }

    label { font-size: 0.7rem; color: #7c7c9e; margin-bottom: 3px; display: block; }

    input, select, textarea {
      background: #0f0f1a;
      border: 1px solid #2a2a4a;
      border-radius: 6px;
      color: #e0e0e0;
      padding: 5px 8px;
      font-size: 0.85rem;
      width: 100%;
      font-family: inherit;
      transition: border-color 0.2s;
    }

    input:focus, select:focus, textarea:focus { outline: none; border-color: #a78bfa; }
    input:disabled, select:disabled, textarea:disabled { opacity: 0.4; cursor: not-allowed; }
    select option { background: #1a1a2e; }

    .field-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
    .field-group { display: flex; flex-direction: column; flex: 1; min-width: 80px; margin-bottom: 8px; }
    .field-group.full { flex: 1 1 100%; }

    /* Custom number spinner */
    input[type="number"] { -moz-appearance: textfield; }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .num-input-wrap { position: relative; width: 100%; }
    .num-input-wrap .num-input { padding-right: 22px; }
    .num-arrows {
      position: absolute; right: 2px; top: 2px; bottom: 2px;
      display: flex; flex-direction: column; justify-content: center;
      border-left: 1px solid #2a2a4a; padding-left: 3px;
    }
    .num-arrow { background: transparent; border: none; color: #7c7c9e; font-size: 0.5rem; line-height: 1; padding: 2px 4px; cursor: pointer; }
    .num-arrow:hover { background: transparent; color: #a78bfa; }
    .num-arrow:disabled { color: #3a3a5a; cursor: not-allowed; }
    .num-arrow:disabled:hover { color: #3a3a5a; }

    /* Icon-chip filter groups (Code / Faction / Class / Burst) — chips live
       inside one shared bordered box per category, no separate borders. */
    .filter-group { display: flex; flex-direction: column; gap: 4px; }
    .filter-group-label {
      font-size: 0.62rem; color: #7c7c9e; text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: 0;
    }
    .filter-dropdown-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .filter-dropdown { position: relative; }
    .filter-dropdown-btn {
      display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
      border: 1px solid #2a2a4a; background: #15152a; color: #e0e0e0; font-weight: 600; cursor: pointer;
      font-size: 0.85rem;
    }
    .filter-dropdown-btn:hover { border-color: #a78bfa; color: #a78bfa; }
    .filter-dropdown-btn.active { border-color: #a78bfa; background: #a78bfa; color: #0f0f1a; }
    .filter-clear-all-btn {
      display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
      border: 1px solid #3a2a2a; background: #15152a; color: #d99; font-weight: 600; cursor: pointer;
      font-size: 0.85rem;
    }
    .filter-clear-all-btn:hover { border-color: #e88; color: #fff; background: #b64545; }
    .filter-clear-all-btn:disabled { opacity: 0.4; cursor: default; }
    .filter-clear-all-btn:disabled:hover { border-color: #3a2a2a; color: #d99; background: #15152a; }
    .builder-picker-filters-right #bpResetBtn { order: 999; margin-top: 4px; }
    .modal .discord-login-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      background: #1f1f1f; color: #fff; text-decoration: none; font-weight: 500; font-size: 0.875rem;
      padding: 9px 24px; border-radius: 999px; margin: 0 auto 16px; width: fit-content;
      border: 1px solid #3a3a3a; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .modal .discord-login-btn svg { color: #5865F2; flex-shrink: 0; }
    .modal .discord-login-btn:hover { background: #2a2a2a; border-color: #4a4a4a; }

    /* SiteLock trust badge - small, muted, doesn't compete with the footer */
    .sitelock-badge { display: block; margin-top: 10px; opacity: 0.45; transition: opacity 0.2s; }
    .sitelock-badge:hover { opacity: 1; }
    .sitelock-badge img { height: 20px; width: auto; display: block; margin: 0 auto; }
    .filters-active-badge {
      background: #a78bfa; color: #0f0f1a; border-radius: 10px; padding: 1px 7px; font-size: 0.7rem; font-weight: 700;
    }
    .filter-dropdown-panel {
      display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 50;
      background: #1a1a2e; border: 1px solid #a78bfa; border-radius: 10px; padding: 10px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.5); min-width: 200px;
    }
    .filter-dropdown.open .filter-dropdown-panel { display: block; }
    .cube-filter-col { display: flex; flex-direction: column; gap: 10px; }
    .gear-filter-panel { min-width: 0; width: auto; max-width: 92vw; overflow: hidden; box-sizing: border-box; }
    .gear-filter-row, .gear-filter-header-row {
      display: grid; grid-template-columns: 92px 46px 46px 34px 34px 34px 34px;
      gap: 3px; align-items: center; margin-bottom: 6px; width: max-content;
    }
    .gear-filter-row:last-child { margin-bottom: 0; }
    .gear-filter-panel .gear-filter-row select, .gear-filter-panel .gear-filter-row input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 0.65rem; padding: 3px 1px; }
    .gear-filter-header-row { margin-bottom: 4px; }
    .gear-filter-header-row span {
      font-size: 0.56rem; color: #7c7c9e; text-align: center; text-transform: uppercase;
      letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .gear-filter-legend { font-size: 0.66rem; color: #7c7c9e; margin-bottom: 10px; line-height: 1.5; }
    .gear-filter-legend b { color: #a78bfa; }
    .gear-tier-input { width: 34px; }
    .cube-icon-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); flex-wrap: unset !important; overflow: visible !important; }
    .cube-level-row { display: flex; gap: 6px; justify-content: center; }
    .cube-level-input {
      width: 44px; padding: 4px 2px; text-align: center; font-size: 0.75rem;
      background: #15152a; border: 1px solid #2a2a4a; border-radius: 6px; color: #e0e0e0;
    }
    .icon-chip-box {
      display: flex; flex-wrap: wrap; gap: 4px; padding: 4px;
      border: 1px solid #2a2a4a; border-radius: 8px; background: #15152a;
    }
    .icon-chip {
      display: flex; align-items: center; justify-content: center;
      width: 52px; height: 40px; padding: 4px; border-radius: 6px;
      background: #15152a; border: 1px solid #2a2a4a;
      cursor: pointer; transition: background 0.15s, border-color 0.15s; color: #7c7c9e;
      font-size: 0.8rem;
    }
    .icon-chip:hover { background: #2a2a4a; border-color: #a78bfa; }
    .icon-chip.active { background: #a78bfa; border-color: #a78bfa; color: #0f0f1a; }
    .icon-chip img {
      width: auto; height: auto; max-width: 36px; max-height: 28px;
      object-fit: contain; display: block; margin: 0 auto;
    }
    .icon-chip.rarity-icon-chip img { height: auto; width: auto; max-width: 36px; max-height: 16px; margin: 0 auto; }

    .builder-picker-subheading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: #7c7c9e; margin: 10px 0 4px; }
    .text-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
    .text-chip {
      padding: 4px 10px; border-radius: 999px; background: #15152a; border: 1px solid #2a2a4a;
      cursor: pointer; transition: background 0.15s, border-color 0.15s; color: #a9a9c9; font-size: 0.75rem;
    }
    .text-chip:hover { background: #2a2a4a; border-color: #a78bfa; }
    .text-chip.active { background: #a78bfa; border-color: #a78bfa; color: #0f0f1a; font-weight: 600; }
    .builder-picker-filter-footer {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid #2a2a4a;
    }
    .builder-picker-result-count { font-size: 0.75rem; color: #7c7c9e; }
    .builder-picker-filters-right { display: flex; flex-direction: column; gap: 6px; width: 260px; flex-shrink: 0; margin-top: 40px; }
    .builder-picker-filters-title { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; color: #7c7c9e; margin-bottom: 2px; }
    .builder-picker-filters-right .filter-dropdown { width: 100%; }
    .builder-picker-filters-right .filter-dropdown-btn { width: 100%; box-sizing: border-box; text-align: left; }
    .builder-picker-filters-right .filter-dropdown-panel { left: auto; right: 0; }
    .grid-card-armed { border: 2px solid #a78bfa; border-radius: 8px; box-shadow: 0 0 12px rgba(167,139,250,0.6); }

    .filter-toggle { display: flex; align-items: center; gap: 8px; }
    .filter-toggle label { margin-bottom: 0; white-space: nowrap; }

    .column-settings-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 12px 0; }
    .column-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.85rem; }
    .column-settings-row label { margin-bottom: 0; }

    .wizard-identity { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #2a2a4a; }
    .wizard-identity-top { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .wizard-identity-img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid #2a2a4a; background: #2a2a4a; flex-shrink: 0; }
    .wizard-identity-name { font-size: 1.1rem; color: #e0e0e0; font-weight: 600; }
    .wizard-identity-name.rarity-R   { color: #4fa8e8; }
    .wizard-identity-name.rarity-SR  { color: #b768e8; }
    .wizard-identity-name.rarity-SSR { color: #f5a623; }
    .wizard-identity-name.is-treasure { color: #3ddad0; }
    .wizard-identity-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .id-tag {
      background: #15152a; border: 1px solid #2a2a4a; color: #c4b5fd;
      font-size: 0.7rem; padding: 3px 9px; border-radius: 10px;
      text-transform: uppercase; letter-spacing: 0.5px;
    }

    /* Custom themed autocomplete (replaces native datalist) */
    .combobox-wrap { position: relative; }
    .combobox-list {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      margin-top: 2px;
      max-height: 220px;
      overflow-y: auto;
      background: #0f0f1a;
      border: 1px solid #a78bfa;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.45);
      z-index: 150;
    }
    .combobox-list.active { display: block; }
    /* ── Themed scrollbars everywhere ─────────────────── */
    * { scrollbar-width: thin; scrollbar-color: #2a2a4a #0f0f1a; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: #0f0f1a; border-radius: 8px; }
    ::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 8px; border: 2px solid #0f0f1a; }
    ::-webkit-scrollbar-thumb:hover { background: #a78bfa; }
    ::-webkit-scrollbar-corner { background: #0f0f1a; }

    .combobox-list::-webkit-scrollbar { width: 8px; }
    .combobox-list::-webkit-scrollbar-track { background: #0f0f1a; }
    .combobox-list::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 8px; }
    .combobox-list::-webkit-scrollbar-thumb:hover { background: #a78bfa; }
    .combobox-item { padding: 7px 10px; font-size: 0.85rem; color: #e0e0e0; cursor: pointer; }
    .combobox-item:hover { background: #a78bfa; color: #0f0f1a; }
    .combobox-empty { padding: 7px 10px; font-size: 0.8rem; color: #7c7c9e; font-style: italic; }

    /* Oval treasure switch */
    .switch { position: relative; display: inline-block; width: 46px; height: 24px; margin-top: 4px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch-slider {
      position: absolute; inset: 0; cursor: pointer;
      background: #2a2a4a; transition: 0.2s; border-radius: 24px;
    }
    .switch-slider::before {
      content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
      background: #7c7c9e; transition: 0.2s; border-radius: 50%;
    }
    .switch input:checked + .switch-slider { background: #a78bfa; }
    .switch input:checked + .switch-slider::before { transform: translateX(22px); background: #0f0f1a; }
    .switch input:disabled + .switch-slider { opacity: 0.35; cursor: not-allowed; }
    .switch input:disabled + .switch-slider::before { cursor: not-allowed; }

    .wip-badge {
      font-size: 0.6rem; color: #7c7c9e; border: 1px solid #2a2a4a;
      padding: 1px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    }

    .extension-btn-row { display: flex; align-items: stretch; gap: 6px; }
    .ext-download-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 10px 16px; border-radius: 8px; border: 1px solid #a78bfa;
      background: transparent; color: #a78bfa; text-decoration: none; font-weight: 600;
      flex: 1;
    }
    .ext-download-btn:hover { background: #a78bfa; color: #0f0f1a; }
    .extension-btn-row button:first-child { flex: 1; }
    .info-icon-btn {
      background: #15152a; border: 1px solid #2a2a4a; color: #7c7c9e;
      width: 34px; flex-shrink: 0; border-radius: 8px; font-size: 0.9rem; cursor: pointer;
    }
    .info-icon-btn:hover { color: #a78bfa; border-color: #a78bfa; }

    .equip-block { background: #15152a; border-radius: 10px; padding: 12px; border: 1px solid #2a2a4a; }
    .equip-block h3 { font-size: 0.8rem; color: #c4b5fd; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
    .equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .line-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
    .line-row select { flex: 2; }
    .line-row .num-input-wrap { flex: 1; }

    .section-title {
      font-size: 0.75rem; color: #7c7c9e; text-transform: uppercase; letter-spacing: 1px;
      margin: 14px 0 6px; border-bottom: 1px solid #2a2a4a; padding-bottom: 4px;
      display: flex; align-items: center; gap: 6px;
    }

    /* ── Modal / Overlay ─────────────────────────────── */
    .modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
      z-index: 100; justify-content: center; align-items: center;
    }
    .modal-overlay.active { display: flex; }

    .modal { background: #1a1a2e; border: 1px solid #a78bfa; border-radius: 14px; padding: 28px; width: 90%; max-width: 440px; max-height: 85vh; overflow-y: auto; position: relative; }
    .modal-close-x {
      position: absolute; top: 14px; right: 14px; background: none; border: none;
      color: #7c7c9e; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px;
    }
    .modal-close-x:hover { color: #e0e0e0; }
    .modal a { color: #c9b6ff; text-decoration: underline; text-underline-offset: 2px; }
    .modal a:visited { color: #c9b6ff; }
    .modal a:hover { color: #e6d9ff; }
    .add-all-account-box {
      background: #15152a; border: 1px solid #a78bfa; border-radius: 8px;
      padding: 12px 14px; margin-top: 10px; font-size: 0.85rem; color: #e0e0e0;
    }
    .add-all-account-box div:first-child { color: #a78bfa; font-size: 0.95rem; margin-bottom: 4px; }
    .modal-wizard { max-width: 540px; }
    .modal-columns { max-width: 480px; }
    .modal-gear-dashboard { max-width: 600px; max-height: 85vh; overflow-y: auto; }

    .gear-dashboard-tabs { display: flex; gap: 8px; margin: 12px 0 16px; }
    .gear-dashboard-tab {
      background: none; border: 1px solid #3a3a5c; color: #a0a0c0;
      padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
    }
    .gear-dashboard-tab.active { background: #a78bfa; color: #0f0f1a; border-color: #a78bfa; font-weight: 600; }

    .gear-dashboard-section {
      background: #15152a; border: 1px solid #2a2a4a; border-radius: 8px;
      padding: 10px 14px; margin-bottom: 10px;
    }
    .gear-dashboard-overall { border-color: #a78bfa; }
    .gear-dashboard-section-header {
      display: flex; align-items: center; gap: 8px; font-weight: 600;
      color: #e0e0e0; margin-bottom: 6px; font-size: 0.9rem;
    }
    .gear-dashboard-manufacturer-icon { width: 20px; height: 20px; object-fit: contain; }
    .gear-dashboard-row {
      padding: 6px 0; font-size: 0.82rem; color: #c0c0d8;
      border-bottom: 1px solid #21213c;
    }
    .gear-dashboard-row:last-child { border-bottom: none; }
    .gear-dashboard-row-top { display: flex; justify-content: space-between; align-items: center; }
    .gear-dashboard-row-label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
    .gear-dashboard-row-counts { display: flex; gap: 12px; font-family: monospace; }
    .gear-dashboard-row-combined { font-size: 0.9rem; }
    .gear-dashboard-equipped { color: #58d68d; }
    .gear-dashboard-missing { color: #f56c6c; }
    .gear-dashboard-class-rows { margin-top: 4px; padding-left: 14px; border-left: 2px solid #2a2a4a; }

    /* Per-slot (Head/Chest/Arms/Legs) breakdown shown under every row -
       the combined total above hides which specific slot is behind, so
       this is the actual actionable detail. */
    .gear-dashboard-slot-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
      margin-top: 4px;
    }
    .gear-dashboard-slot-cell {
      display: flex; flex-direction: column; align-items: center; gap: 1px;
      background: #1a1a30; border-radius: 5px; padding: 4px 2px;
      font-family: monospace; font-size: 0.72rem;
    }
    .gear-dashboard-slot-name {
      font-family: inherit; color: #7c7c9e; font-size: 0.68rem; margin-bottom: 1px;
    }

    .gear-dashboard-lines-section, .gear-dashboard-exclude-section { margin-top: 18px; }
    .gear-dashboard-exclude-section { text-align: center; }

    .gear-dashboard-exclude-list {
      max-height: 320px; overflow-y: auto; margin-top: 10px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .gear-dashboard-exclude-item {
      display: flex; align-items: center; gap: 10px; padding: 6px 8px;
      border-radius: 6px; cursor: pointer; font-size: 0.85rem; color: #e0e0e0;
    }
    .gear-dashboard-exclude-item:hover { background: #1e1e38; }
    /* The edit-pick modal is short and never needs internal scrolling — let its
       autocomplete dropdown overlap outside the box instead of being clipped. */
    #editPickOverlay .modal { overflow: visible; }
    .modal h2 { color: #a78bfa; margin-bottom: 16px; font-size: 1.1rem; }
    .choice-text { color: #7c7c9e; font-size: 0.85rem; margin-bottom: 16px; }
    .choice-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
    .choice-buttons button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; }
    .wizard-step h3 { color: #a78bfa; font-size: 0.95rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
    .modal-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
    .btn-cancel { border-color: #ff6b6b; color: #ff6b6b; }
    .btn-cancel:hover { background: #ff6b6b; color: #0f0f1a; }

    .empty-state { text-align: center; color: #3a3a5a; font-size: 1rem; padding: 40px 0; }

    /* ── Changelog ────────────────────────────────────── */
    .changelog-list { display: flex; flex-direction: column; gap: 10px; }
    .changelog-entry { border: 1px solid #2a2a4a; border-radius: 8px; padding: 10px 12px; background: #15152a; }
    .changelog-entry-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .changelog-date { font-size: 0.72rem; color: #7c7c9e; }
    .changelog-category {
      font-size: 0.65rem; color: #a78bfa; border: 1px solid #a78bfa;
      padding: 1px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .changelog-app-tag {
      font-size: 0.65rem; border: 1px solid; padding: 1px 8px; border-radius: 10px;
      text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px;
    }
    .changelog-app-tag-tracker { color: #4fa8e8; border-color: #4fa8e8; }
    .changelog-app-tag-builder { color: #4ade80; border-color: #4ade80; }
    .changelog-app-tag-both { color: #f5a623; border-color: #f5a623; }
    .changelog-app-tag-teamfinder { color: #ff8fb1; border-color: #ff8fb1; }

    /* ── Boss Team Finder page ─────────────────────────────── */
    .page-subtitle { text-align: center; color: #7c7c9e; font-size: 0.85rem; max-width: 640px; margin: -14px auto 24px; line-height: 1.5; }
    .code-badge { display: inline-block; font-size: 0.78rem; padding: 1px 9px; border-radius: 10px; border: 1px solid #3ddad0; color: #3ddad0; }
    .boss-category-layout { display: flex; gap: 28px; max-width: 900px; margin: 0 auto; align-items: flex-start; }
    .boss-category-menu { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; }
    .boss-category-group-label {
      font-size: 0.72rem; color: #5a5a7a; text-transform: uppercase; letter-spacing: 0.5px;
      padding: 6px 10px 2px;
    }
    .boss-category-item {
      padding: 8px 10px 8px 22px; border-radius: 6px; font-size: 0.85rem; color: #5a5a7a;
      display: flex; align-items: center; gap: 8px; cursor: default;
    }
    .boss-category-item.active { color: #a78bfa; font-weight: 600; background: #211d3a; }
    .boss-category-item.disabled { color: #5a5a7a; }
    /* Top-level items (Union Raid, Solo Raid, ...) are direct children of
       the menu, outside the "Interception" group, so they get the
       un-indented base padding instead of the group's 22px indent. */
    .boss-category-menu > .boss-category-item { padding-left: 10px; }
    .boss-category-content { flex: 1; min-width: 0; }
    .boss-picker-grid { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
    .boss-picker-card {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 10px; padding: 16px 20px;
      cursor: pointer; color: #e0e0e0; width: 130px;
    }
    .boss-picker-card:hover { border-color: #a78bfa; }
    .boss-picker-card.active { border-color: #a78bfa; background: #211d3a; }
    .boss-picker-code-icon { width: 36px; height: 36px; }
    .boss-picker-name { font-size: 0.85rem; font-weight: 600; text-align: center; }
    .boss-detail-panel {
      max-width: 640px; margin: 0; background: #15152a; border: 1px solid #2a2a4a;
      border-radius: 12px; padding: 22px 26px;
    }
    .boss-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
    .boss-detail-code-icon { width: 44px; height: 44px; }
    .boss-detail-head h3 { color: #e0e0e0; font-size: 1.1rem; margin-bottom: 4px; }
    .boss-detail-matchup { font-size: 0.82rem; color: #a0a0c0; }
    .boss-detail-warning {
      background: #2a1a1a; border: 1px solid #d9534f; color: #f0a8a5; border-radius: 8px;
      padding: 10px 14px; font-size: 0.82rem; margin-bottom: 14px; line-height: 1.5;
    }
    .boss-experimental-banner {
      background: #3a1414; border: 2px solid #e5484d; color: #ffb4b4; border-radius: 8px;
      padding: 12px 16px; font-size: 0.85rem; line-height: 1.6; margin: 12px 0 16px;
    }
    .boss-experimental-banner b { color: #ff6b6b; }
    .boss-req-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .boss-req-badge { font-size: 0.75rem; padding: 3px 10px; border-radius: 10px; border: 1px solid; }
    .boss-req-badge.boss-req-active { color: #4ade80; border-color: #4ade80; }
    .boss-req-badge.boss-req-inactive { color: #5a5a7a; border-color: #2a2a4a; }
    .boss-detail-notes { font-size: 0.82rem; color: #a0a0c0; line-height: 1.6; }
    .boss-generate-btn {
      display: block; width: 100%; margin-top: 16px; padding: 11px; border-radius: 8px;
      border: 1px solid #a78bfa; background: transparent; color: #a78bfa; font-weight: 600;
      font-size: 0.88rem; cursor: pointer;
    }
    .boss-generate-btn:hover { background: #a78bfa; color: #0f0f1a; }
    .boss-generate-btn:disabled { opacity: 0.5; cursor: default; background: transparent; color: #a78bfa; }
    .boss-generated-team { margin-top: 16px; }
    .boss-team-reasons { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
    .boss-team-reason { font-size: 0.78rem; color: #a0a0c0; }
    .boss-team-reason b { color: #e0e0e0; }
    .changelog-desc { font-size: 0.85rem; color: #e0e0e0; line-height: 1.5; white-space: pre-line; margin-top: 6px; }
    .changelog-entry-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2a2a4a; }
    .changelog-entry-item:first-child { margin-top: 0; padding-top: 0; border-top: none; }

    .changelog-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid #2a2a4a; }
    .changelog-tab {
      background: none; border: none; color: #7c7c9e; padding: 8px 14px; font-size: 0.85rem;
      cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
    }
    .changelog-tab:hover { color: #e0e0e0; }
    .changelog-tab.active { background: none; color: #a78bfa; border-bottom-color: #a78bfa; font-weight: 600; }

    .changelog-app-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
    .changelog-app-tab {
      background: #15152a; border: 1px solid #2a2a4a; color: #7c7c9e; padding: 5px 12px;
      font-size: 0.75rem; border-radius: 20px; cursor: pointer;
    }
    .changelog-app-tab:hover { border-color: #a78bfa; color: #a78bfa; }
    .changelog-app-tab.active { background: #a78bfa; border-color: #a78bfa; color: #0f0f1a; font-weight: 600; }
    .my-changes-search {
      width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 8px 12px;
      border-radius: 8px; border: 1px solid #2a2a4a; background: #15152a; color: #e0e0e0; font-size: 0.85rem;
    }
    .changelog-panel { /* no own scroll/height limit - the outer .modal already handles scrolling */ }
    .changelog-subheading {
      font-size: 0.8rem; color: #7c7c9e; text-transform: uppercase; letter-spacing: 0.5px;
      margin: 16px 0 8px; }
    .changelog-subheading:first-child { margin-top: 0; }

    .changelog-collapsible { border: 1px solid #2a2a4a; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
    .changelog-collapsible-head {
      display: flex; justify-content: space-between; align-items: center; cursor: pointer;
      padding: 8px 12px; font-size: 0.82rem; color: #cfcfe0; background: #15152a;
    }
    .changelog-collapsible-head:hover { background: #1a1a2e; }
    .changelog-collapse-arrow { color: #7c7c9e; font-size: 0.7rem; }
    .changelog-collapsible-body { padding: 8px; background: #0f0f1a; }
    .changelog-collapsible-body .changelog-collapsible { margin: 0 0 8px; }
    .changelog-collapsible-body .changelog-collapsible:last-child { margin-bottom: 0; }
    .changelog-entry-item-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
    .changelog-entry-item-head:hover .changelog-category { color: #c4b5fd; }
    .changelog-entry-item-head .changelog-collapse-arrow { margin-left: auto; }

    /* ── Filter bar ───────────────────────────────────── */
    .filter-bar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; }
    .filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
    .filter-bar input, .filter-bar select { width: auto; min-width: 150px; }
    .filter-bar button { white-space: nowrap; }
    .filter-search { align-self: center; }
    .filter-search-wrap { position: relative; align-self: center; }
    .filter-search-wrap .filter-search { padding-right: 26px; }
    .search-clear-btn {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: #7c7c9e; cursor: pointer;
      font-size: 0.75rem; align-items: center; justify-content: center; padding: 2px;
    }
    .search-clear-btn:hover { color: #a78bfa; }
    .filter-search::selection { background: #a78bfa; color: #0f0f1a; }
    .filter-search::-moz-selection { background: #a78bfa; color: #0f0f1a; }

    /* ── Table view (custom scrollbars) ──────────────── */
    .table-wrap {
      overflow: auto; max-height: 72vh;
      background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 14px; padding: 4px;
      scrollbar-width: thin; scrollbar-color: #2a2a4a #0f0f1a;
    }
    .table-wrap::-webkit-scrollbar { width: 11px; height: 11px; }
    .table-wrap::-webkit-scrollbar-track { background: #0f0f1a; border-radius: 8px; }
    .table-wrap::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 8px; border: 2px solid #0f0f1a; }
    .table-wrap::-webkit-scrollbar-thumb:hover { background: #a78bfa; }
    .table-wrap::-webkit-scrollbar-corner { background: #0f0f1a; }

    .data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
    .data-table th, .data-table td { padding: 8px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid #2a2a4a; white-space: nowrap; }
    .data-table td.name-cell { padding-top: 0; padding-bottom: 0; }
    .data-table td.equip-cell { white-space: normal; vertical-align: middle; text-align: center; min-width: 220px; }
    .data-table td.centered-cell, .data-table th.centered-cell { text-align: center; }
    .data-table th {
      color: #a78bfa; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 1px;
      position: sticky; top: 0; background: #1a1a2e; cursor: grab; user-select: none; z-index: 2;
    }
    .data-table th.dragging { opacity: 0.35; }
    .data-table th.action-col { cursor: default; }
    .data-table th.sortable-col-header:hover { color: #fff; }
    .data-table th.sortable-col-header-active { color: #fff; }
    .data-table tbody tr:hover { background: #15152a; }
    .data-table tr.unedited-row { font-style: italic; opacity: 0.55; }
    .data-table tr.unedited-row td:not(.centered-cell):not(.action-cell) { color: #5a5a7a; }
    .data-table tr.unedited-row:hover { opacity: 0.85; }

    .action-cell { position: relative; height: 100%; min-height: 90px; }
    .row-edit-btn {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: none; border: 1px solid #3ddad0; color: #3ddad0; font-size: 1.05rem; cursor: pointer;
      width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .row-edit-btn:hover { background: #3ddad0; color: #0f0f1a; }
    .card-delete {
      position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
      background: none; border: 1px solid #e88; color: #e88; font-size: 0.7rem; cursor: pointer;
      width: 20px; height: 20px; border-radius: 6px; padding: 0; display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .card-delete:hover { background: #e88; color: #0f0f1a; }

    .inline-icon-only { width: 24px; height: 24px; object-fit: contain; display: inline-block; vertical-align: middle; }
    .bond-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
    .bond-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.9)) drop-shadow(0 0 1.5px rgba(0,0,0,0.9)); }
    .bond-number { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 0.95rem; text-shadow: 0 0 3px rgba(0,0,0,0.95), 0 0 1px rgba(0,0,0,0.95); }
    .table-icon-cell { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto; cursor: default; }
    .gear-totals-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px;
      max-width: 260px;
    }
    .gear-totals-item { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .doll-icon-cell { border-radius: 8px; padding: 4px; }
    .doll-icon-cell.rarity-R   { background: radial-gradient(circle, rgba(79, 168, 232, 0.35) 0%, rgba(79, 168, 232, 0) 75%); }
    .doll-icon-cell.rarity-SR  { background: radial-gradient(circle, rgba(183, 104, 232, 0.35) 0%, rgba(183, 104, 232, 0) 75%); }
    .doll-icon-cell.rarity-SSR { background: radial-gradient(circle, rgba(245, 166, 35, 0.35) 0%, rgba(245, 166, 35, 0) 75%); }
    .doll-icon-needed { opacity: 0.35; filter: grayscale(70%); border: 1px dashed #5a5a7a; }
    .doll-icon-needed:hover { opacity: 0.6; }

    /* Equipment tier background tint — muted at low tiers, progressively
       more saturated, rainbow at T10 (matching the max-tier glow) */
    .equip-slot-icon.tier-t1, .equip-slot-icon.tier-t2, .loadout-icon.tier-t1, .loadout-icon.tier-t2 { background: radial-gradient(circle, rgba(160, 160, 170, 0.2) 0%, rgba(160, 160, 170, 0) 75%); border-radius: 8px; }
    .equip-slot-icon.tier-t3, .equip-slot-icon.tier-t4, .loadout-icon.tier-t3, .loadout-icon.tier-t4 { background: radial-gradient(circle, rgba(79, 168, 232, 0.28) 0%, rgba(79, 168, 232, 0) 75%); border-radius: 8px; }
    .equip-slot-icon.tier-t5, .equip-slot-icon.tier-t6, .loadout-icon.tier-t5, .loadout-icon.tier-t6 { background: radial-gradient(circle, rgba(88, 214, 141, 0.28) 0%, rgba(88, 214, 141, 0) 75%); border-radius: 8px; }
    .equip-slot-icon.tier-t7, .equip-slot-icon.tier-t8, .loadout-icon.tier-t7, .loadout-icon.tier-t8 { background: radial-gradient(circle, rgba(183, 104, 232, 0.3) 0%, rgba(183, 104, 232, 0) 75%); border-radius: 8px; }
    .equip-slot-icon.tier-t9, .loadout-icon.tier-t9 { background: radial-gradient(circle, rgba(245, 108, 108, 0.32) 0%, rgba(245, 108, 108, 0) 75%); border-radius: 8px; }
    .equip-slot-icon.tier-t10, .loadout-icon.tier-t10 {
      background: radial-gradient(circle, rgba(245,166,35,0.35) 0%, rgba(183,104,232,0.18) 55%, rgba(79,168,232,0) 78%);
      border-radius: 8px;
    }

    /* Gear with a manufacturer bonus that doesn't match this Nikke's own
       faction - a real mistake a player can make, flagged so it stands
       out in the table at a glance. Border takes priority visually over
       the tier-based background glow above (same rule, just an added
       ring on top). */
    .equip-slot-icon.equip-slot-wrong-manufacturer {
      outline: 2px solid #f56c6c;
      outline-offset: -1px;
      border-radius: 8px;
    }

    /* Portrait + name side by side, colored by rarity (Treasure gets its own color) */
    .name-card {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 0 6px;
      position: relative;
      cursor: default;
      height: 112px;
    }
    .name-card-row { display: flex; align-items: center; gap: 6px; }
    .portrait-icon-grid {
      display: grid; grid-template-columns: repeat(2, 28px); grid-auto-rows: 28px;
      gap: 3px; flex-shrink: 0;
    }
    .portrait-grid-cell { display: flex; align-items: center; justify-content: center; }
    .portrait-grid-cell img { width: 28px; height: 28px; object-fit: contain; }
    .name-card-portrait-wrap { position: relative; flex-shrink: 0; }
    .name-card-portrait-wrap > img {
      width: 112px;
      height: 112px;
      object-fit: cover;
      border-radius: 0;
      border: 2px solid #2a2a4a;
      background: #2a2a4a;
      flex-shrink: 0;
      display: block;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
    /* Shared portrait icon overlay: Faction/Code/Weapon/Class stacked down
       the left edge, Burst in the top-right corner. Sizes scale with the
       portrait container. Uses a fixed size matching the original table
       column icons (24px) 1:1, regardless of which portrait it's on. */
    .portrait-icon-overlay { position: absolute; inset: 2px; pointer-events: none; }
    .portrait-bond-badge {
      position: absolute; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center;
      width: 38%; height: 38%; min-width: 26px; min-height: 26px; background: transparent;
    }
    .portrait-bond-badge .bond-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; border: none; }
    .portrait-bond-badge .bond-number { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 0.65em; }
    .name-card .name-text {
      font-size: 0.85rem;
      font-weight: 600;
      text-align: left;
      color: #e0e0e0;
    }
    .name-card.rarity-R   .name-card-portrait-wrap > img, .char-preview-img.rarity-R,   .wizard-identity-img.rarity-R   { border-color: #4fa8e8; background: rgba(79, 168, 232, 0.45); }
    .name-card.rarity-SR  .name-card-portrait-wrap > img, .char-preview-img.rarity-SR,  .wizard-identity-img.rarity-SR  { border-color: #b768e8; background: rgba(183, 104, 232, 0.45); }
    .name-card.rarity-SSR .name-card-portrait-wrap > img, .char-preview-img.rarity-SSR, .wizard-identity-img.rarity-SSR { border-color: #f5a623; background: rgba(245, 166, 35, 0.45); }
    .name-card.rarity-R   .name-text, .name-text.rarity-R   { color: #4fa8e8; }
    .name-card.rarity-SR  .name-text, .name-text.rarity-SR  { color: #b768e8; }
    .name-card.rarity-SSR .name-text, .name-text.rarity-SSR { color: #f5a623; }
    /* Treasure gets its own distinct color, overriding the rarity color */
    .name-card.is-treasure .name-card-portrait-wrap > img, .char-preview-img.is-treasure, .wizard-identity-img.is-treasure { border-color: #3ddad0; background: rgba(61, 218, 208, 0.25); }
    .name-card.is-treasure .name-text, .name-text.is-treasure { color: #3ddad0; }

    /* Portal tooltip: a single fixed-position element outside the scrollable
       table, positioned via JS on hover so it can never be clipped. */
    .hover-tooltip-box {
      position: fixed;
      z-index: 10500;
      background: #1a1a2e;
      border: 1px solid #a78bfa;
      color: #e0e0e0;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.72rem;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.1s;
    }
    .hover-tooltip-box.visible { opacity: 1; }

    /* Rich character preview card (portrait + tags + tier bars) shown on
       hovering a character's portrait in the table. */
    .char-preview-card, .equip-preview-card, .skill-ref-card { position: relative; }
    .pinned-window {
      position: fixed; z-index: 9999 !important; opacity: 0.96 !important; pointer-events: auto !important;
      cursor: move;
    }
    .pin-counter-badge {
      position: absolute; bottom: 6px; right: 6px; background: #2a2a4a; color: #a78bfa;
      font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 10px;
    }
    .pin-min-btn {
      position: absolute; top: 6px; right: 30px; width: 20px; height: 20px;
      background: #2a2a4a; color: #e0e0e0; border: none; border-radius: 4px;
      font-size: 0.7rem; cursor: pointer; z-index: 2; padding: 0; margin: 0;
      line-height: 20px; display: flex; align-items: center; justify-content: center;
    }
    .pin-min-btn:hover { background: #a78bfa; color: #0f0f1a; }
    .pin-min-title { display: none; }
    .pinned-window.minimized {
      width: 180px !important; height: 40px !important; padding: 8px 40px 8px 12px !important;
      overflow: hidden !important; display: flex !important; align-items: center !important;
    }
    .pinned-window.minimized > *:not(.pin-close-btn):not(.pin-min-btn):not(.pin-min-title) { display: none !important; }
    .pinned-window.minimized .pin-min-title {
      display: block; color: #e0e0e0; font-size: 0.8rem; font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .pin-close-btn {
      position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
      background: #2a2a4a; color: #e0e0e0; border: none; border-radius: 4px;
      font-size: 0.7rem; cursor: pointer; z-index: 2; padding: 0; margin: 0;
      line-height: 20px; display: flex; align-items: center; justify-content: center;
    }
    .pin-close-btn:hover { background: #a78bfa; color: #0f0f1a; }

    .char-preview-card {
      position: fixed;
      z-index: 10500;
      width: 240px;
      background: #1a1a2e;
      border: 1px solid #a78bfa;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.5);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.1s;
      text-align: center;
    }
    .char-preview-card.visible { opacity: 1; }

    .equip-preview-card {
      position: fixed;
      z-index: 10500;
      width: 300px;
      background: #1a1a2e;
      border: 1px solid #a78bfa;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.5);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.1s;
      text-align: left;
      overflow: hidden;
    }
    .equip-preview-card.visible { opacity: 1; }
    .equip-preview-bg-icon {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 70%; height: 70%; object-fit: contain; opacity: 0.16;
      z-index: 0; pointer-events: none;
    }
    .equip-preview-body { position: relative; z-index: 1; display: grid; grid-template-columns: 30% 1fr; gap: 8px; align-items: stretch; }
    .equip-stats-col { display: flex; flex-direction: column; gap: 6px; }
    .equip-tier-level-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .equip-preview-class-icon { width: 16px; height: 16px; object-fit: contain; }
    .equip-tier-badge, .equip-level-badge {
      background: #2a2a4a; color: #c4b5fd; font-size: 0.62rem; font-weight: 600;
      padding: 1px 5px; border-radius: 4px;
    }
    .equip-stat-box {
      background: #2a2a4a; border-radius: 8px; padding: 6px 4px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2px; min-height: 34px; flex: 1;
    }
    .equip-stat-box span:first-child { color: #7c7c9e; font-size: 0.6rem; text-transform: uppercase; }
    .equip-stat-box span:last-child { color: #e0e0e0; font-size: 0.8rem; font-weight: 600; }
    .equip-stat-box-empty span { color: #5a5a7a; }
    .equip-effects-col { display: flex; flex-direction: column; gap: 6px; justify-content: center; }

    .equip-manufacturer-warning {
      margin-top: 10px;
      padding: 8px 10px;
      background: rgba(245, 108, 108, 0.15);
      border: 1px solid #f56c6c;
      border-radius: 6px;
      color: #ffb3b3;
      font-size: 0.78rem;
      line-height: 1.4;
    }
    .equip-manufacturer-info {
      margin-top: 10px;
      padding: 6px 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid #2a2a4a;
      border-radius: 6px;
      color: #a0a0c0;
      font-size: 0.76rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .equip-manufacturer-info.equip-manufacturer-ok { color: #58d68d; border-color: rgba(88, 214, 141, 0.35); }
    .equip-manufacturer-icon { width: 16px; height: 16px; object-fit: contain; }
    .equip-effect-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      background: #15152a; border-radius: 6px; padding: 5px 8px;
      font-size: 0.7rem; color: #a9a9c9;
    }
    .equip-effect-row span:last-child { color: #c4b5fd; font-weight: 600; white-space: nowrap; }
    .equip-effect-row-empty { justify-content: center; }
    .equip-effect-row-empty span { color: #5a5a7a; font-style: italic; }
    .equip-effect-row-near-max span:last-child { color: #00b5ff; }
    .equip-effect-row-max { border: 1px solid #f5a623; }
    .equip-effect-row-max span:last-child { color: #f5a623; }
    .equip-max-badge {
      background: #f5a623; color: #0f0f1a; font-size: 0.6rem; font-weight: 700;
      padding: 1px 4px; border-radius: 4px; margin-left: 4px; vertical-align: middle;
    }

    .skill-ref-card {
      position: fixed; z-index: 10500; width: 360px; max-height: 60vh; overflow-y: auto;
      background: #1a1a2e; border: 1px solid #4fa8e8; border-radius: 12px; padding: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.5); pointer-events: none; opacity: 0;
      transition: opacity 0.1s; text-align: left;
    }
    .skill-ref-card.visible { opacity: 1; }
    .skill-ref-loading { color: #7c7c9e; font-size: 0.8rem; text-align: center; padding: 10px; }
    .skill-ref-block { margin-bottom: 12px; }
    .skill-ref-block:last-child { margin-bottom: 0; }
    .skill-ref-name { color: #4fa8e8; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; border-bottom: 1px solid #2a2a4a; padding-bottom: 4px; }
    .skill-ref-levels { display: flex; flex-direction: column; gap: 4px; }
    .skill-ref-level-row { display: flex; gap: 8px; font-size: 0.7rem; color: #a9a9c9; }
    .skill-ref-level-badge { color: #c4b5fd; font-weight: 600; flex-shrink: 0; width: 36px; }
    .skill-ref-desc { line-height: 1.4; }
    .skill-slot-label { color: #7c7c9e; font-weight: 400; }
    .skill-duration { color: #4fa8e8; font-size: 0.75rem; font-weight: 600; }
    .skill-bullet-group { margin-bottom: 8px; }
    .skill-bullet-group:last-child { margin-bottom: 0; }
    .skill-condition-line { color: #a9a9c9; line-height: 1.4; }
    .skill-stat-line { color: #f5d76e; font-weight: 600; line-height: 1.5; }

    .equip-cell-inner { display: flex; width: 100%; gap: 6px; align-items: center; justify-content: center; }
    .equip-slot-block { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .equip-slot-class-icon {
      position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
      object-fit: contain; background: #0f0f1acc; border-radius: 3px; padding: 1px;
    }
    .equip-slot-icon { width: 64px; height: 64px; object-fit: contain; cursor: default; }
    .equip-slot-empty { color: #5a5a7a; font-size: 0.8rem; width: 34px; text-align: center; }

    /* Icon-only grid view */
    .grid-wrap {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 14px; padding: 16px;
      background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 14px;
    }
    .grid-card { cursor: pointer; text-align: center; }
    .grid-card-img {
      position: relative;
      width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
      border: 2px solid #2a2a4a; background: #2a2a4a; margin-bottom: 6px;
      transition: transform 0.1s, border-color 0.1s;
    }
    .grid-card:hover .grid-card-img { transform: scale(1.04); border-color: #a78bfa; }
    .grid-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .grid-card.rarity-R   .grid-card-img { border-color: #4fa8e8; background: rgba(79, 168, 232, 0.45); }
    .grid-card.rarity-SR  .grid-card-img { border-color: #b768e8; background: rgba(183, 104, 232, 0.45); }
    .grid-card.rarity-SSR .grid-card-img { border-color: #f5a623; background: rgba(245, 166, 35, 0.45); }
    .grid-card.is-treasure .grid-card-img { border-color: #3ddad0; background: rgba(61, 218, 208, 0.45); }
    .grid-card-name { font-size: 0.8rem; color: #e0e0e0; font-weight: 600; }

    .grid-card.unedited-card { opacity: 0.55; }
    .grid-card.unedited-card:hover { opacity: 0.85; }
    .grid-card.unedited-card .grid-card-name { color: #5a5a7a; font-style: italic; }

    /* Planner page */
    .planner-login-notice {
      text-align: center; color: #7c7c9e; padding: 40px; background: #1a1a2e;
      border: 1px solid #2a2a4a; border-radius: 14px; margin-top: 16px;
    }
    .team-card {
      background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 14px; padding: 18px;
      max-width: 640px; flex: 1 1 480px;
    }
    .builder-layout { display: flex; align-items: flex-start; justify-content: center; gap: 16px; max-width: 1220px; margin: 16px auto 0; flex-wrap: wrap; }
    .buff-panel-left { display: flex; flex-direction: column; gap: 10px; width: 260px; flex-shrink: 0; }
    .buff-box-rows { display: flex; flex-direction: column; gap: 6px; }
    .buff-row { display: flex; align-items: center; gap: 8px; }
    .buff-row img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; border: 1px solid #2a2a4a; flex-shrink: 0; }
    .buff-row-text { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.68rem; }
    .buff-box-icon-clickable { cursor: pointer; }
    .buff-box-icon-clickable:hover img { border-color: #a78bfa; }
    .buff-box-icon-selected {
      border: 2px solid #a78bfa; border-radius: 8px; box-shadow: 0 0 8px rgba(167,139,250,0.6);
    }
    .self-buff-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2a2a4a; }
    .touch-drag-ghost {
      position: fixed; width: 56px; height: 56px; border-radius: 8px; pointer-events: none;
      z-index: 999; transform: translate(-50%, -50%) scale(1.1); opacity: 0.85;
      box-shadow: 0 6px 18px rgba(0,0,0,0.6); border: 2px solid #a78bfa;
    }
    .touch-drag-ghost img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
    .planner-slot-dragging-source { opacity: 0.35; }
    .self-buff-detail-loading { color: #7c7c9e; font-size: 0.78rem; font-style: italic; }
    .buff-box-details-link { font-size: 0.6rem; text-transform: none; letter-spacing: 0; color: #a78bfa; text-decoration: underline; margin-left: 4px; }
    .buff-pct-list { max-height: 55vh; overflow-y: auto; margin: 12px 0; }
    .buff-pct-char { background: #15152a; border: 1px solid #2a2a4a; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
    .buff-pct-char-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
    .buff-pct-char-head img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
    .buff-pct-line { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 2px 0; color: #c9c9e0; }
    .buff-pct-line b { color: #4ade80; }
    .buff-pct-line b.buff-pct-down { color: #38bdf8; }
    .buff-pct-empty { color: #7c7c9e; font-style: italic; }
    .mobile-team-rail { display: none; }
    .buff-box { background: #15152a; border: 1px solid #2a2a4a; border-radius: 10px; padding: 10px; }
    .buff-box-large { min-height: 168px; }
    .buff-box-small { min-height: 84px; }
    .buff-box-title { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; color: #7c7c9e; margin-bottom: 6px; text-align: center; }
    .buff-box-icons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .buff-box-icons-role { flex-direction: column; align-items: stretch; }
    .buff-box-icons-role .role-pill { text-align: center; }
    .buff-box-icon { display: flex; flex-direction: column; align-items: center; width: 34px; }
    .buff-box-icon img { width: 28px; height: 28px; object-fit: cover; border-radius: 5px; border: 1px solid #2a2a4a; }
    .buff-box-text { font-size: 0.55rem; color: #a9a9c9; text-align: center; line-height: 1.1; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .buff-box-empty { color: #5a5a7a; font-size: 0.75rem; align-self: center; }

    .builder-picker-box {
      background: #1a1a2e; border: 1px solid #a78bfa; border-radius: 14px; padding: 16px;
      max-width: 640px; margin: 0 auto 16px;
    }
    .builder-picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; color: #a78bfa; }
    .builder-picker-chip-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .icon-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .builder-picker-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px;
      max-height: 320px; overflow-y: auto; padding: 4px;
    }
    .team-capture-zone { position: relative; padding: 4px; }
    .team-trash-zone {
      position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 20;
      display: none; align-items: center; justify-content: center; gap: 6px;
      background: #b64545; color: #fff; font-weight: 700; font-size: 0.9rem;
      border-radius: 8px; border: 2px dashed #ff8a8a;
    }
    .team-trash-zone.visible { display: flex; }
    .team-card.capturing .planner-slot-clear, .team-card.capturing .team-copy-btn { visibility: hidden; }
    .team-copy-btn {
      position: absolute; top: 0; right: 0; background: #15152a; border: 1px solid #2a2a4a;
      color: #a78bfa; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 0.9rem;
    }
    .team-copy-btn:hover { background: #2a2a4a; }
    .team-name-input {
      display: block; width: 100%; font-weight: 700; font-size: 1.15rem; color: #a78bfa;
      text-align: center; margin-bottom: 14px; background: transparent; border: 1px solid transparent;
    }
    .team-name-input:hover, .team-name-input:focus { border-color: #2a2a4a; background: #0f0f1a; }
    .planner-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
    .planner-slot {
      position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
      border: 2px solid #2a2a4a; background: #15152a; cursor: pointer;
    }
    .planner-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .planner-slot-empty { display: flex; align-items: center; justify-content: center; color: #5a5a7a; font-size: 1.8rem; }
    .planner-slot-empty:hover { border-color: #a78bfa; color: #a78bfa; }
    .planner-slot-clear {
      position: absolute; top: 2px; right: 2px; background: #0f0f1acc; color: #ff6b6b;
      border: none; border-radius: 4px; width: 18px; height: 18px; font-size: 0.65rem; cursor: pointer;
      -webkit-appearance: none; appearance: none; padding: 0; margin: 0; line-height: 1;
      display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    }
    .team-stats-row { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: #a9a9c9; }
    .team-code-counts { display: flex; gap: 8px; margin-left: auto; }
    .team-code-count { display: flex; align-items: center; gap: 3px; }
    .team-code-count img { width: 16px; height: 16px; }
    .team-burst-counts { display: flex; gap: 8px; align-items: center; }
    .team-burst-timing { color: #7c7c9e; font-size: 0.78rem; }
    .team-burst-count { font-size: 0.75rem; color: #a9a9c9; }
    .burst-warning-icon { cursor: help; font-size: 0.9rem; }
    .burst-repeat-badge {
      position: absolute; bottom: 2px; left: 2px; background: #0f0f1acc; border-radius: 4px;
      width: 18px; height: 18px; align-items: center; justify-content: center; font-size: 0.65rem; cursor: help;
    }
    .team-description-input {
      display: block; width: 100%; min-height: 50px; resize: vertical; margin-top: 12px;
      font-size: 0.8rem; color: #a9a9c9; background: #0f0f1a; border: 1px solid #2a2a4a;
    }
    .team-card-footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid #2a2a4a; margin-top: 12px; padding-top: 10px; }
    .team-icon-btn { background: none; border: none; color: #7c7c9e; cursor: pointer; font-size: 0.95rem; margin-left: auto; }
    .team-icon-btn:hover { color: #a78bfa; }

    .planner-gallery-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #7c7c9e; margin: 4px 0 8px; }
    .planner-gallery {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
      max-height: 260px; overflow-y: auto; padding: 4px;
      background: #15152a; border: 1px solid #2a2a4a; border-radius: 12px;
    }
    .team-card-compact {
      background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 10px; padding: 8px; cursor: pointer;
    }
    .team-card-compact:hover { border-color: #a78bfa; }
    .team-card-compact.active { border-color: #a78bfa; box-shadow: 0 0 0 1px #a78bfa; }
    .team-name-compact { font-size: 0.75rem; font-weight: 600; color: #a78bfa; text-align: center; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .planner-slots-compact { gap: 3px; margin-bottom: 6px; }
    .planner-slots-compact .planner-slot { cursor: default; border-width: 1px; }
    .team-stats-row-compact { justify-content: center; font-size: 0.7rem; }

    .modal-slot-picker { max-width: 480px; }
    .slot-picker-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .slot-picker-filter-bar input { flex: 1 1 100%; }
    .slot-picker-filter-bar select { flex: 1; min-width: 90px; }
    .slot-picker-tag-toggle { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #a9a9c9; width: auto; }
    .slot-picker-results { display: flex; flex-direction: column; gap: 4px; max-height: 45vh; overflow-y: auto; }
    .slot-picker-row {
      display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
    }
    .slot-picker-row:hover { background: #2a2a4a; }
    .slot-picker-row img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
    .burst-timer { color: #7c7c9e; font-size: 0.7rem; margin-left: 4px; }
    .role-pill {
      font-size: 0.68rem; padding: 2px 7px; border-radius: 10px; border: 1px solid; font-weight: 600;
      white-space: nowrap; cursor: default;
    }
    .equip-mini {
      padding: 4px 6px; font-size: 0.7rem; min-width: 96px;
    }
    .equip-mini-slot {
      color: #7c7c9e; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .equip-mini-empty { text-align: center; padding: 10px 6px; }
    .equip-mini-empty-text { color: #5a5a7a; font-size: 0.65rem; font-style: italic; margin-top: 4px; }
    .char-preview-img {
      width: 96px; height: 96px; object-fit: cover;
      border-radius: 10px; border: 2px solid #2a2a4a; background: #2a2a4a;
      display: block;
    }
    .char-preview-img-wrap { position: relative; width: 96px; margin: 0 auto 10px; }
    .char-preview-bond-badge {
      position: absolute; bottom: -6px; right: -6px; display: flex; align-items: center; justify-content: center;
      width: 32px; height: 32px;
    }
    .char-preview-bond-badge .bond-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; border: none; }
    .char-preview-bond-badge .bond-number { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 0.7rem; }
    .char-preview-name { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
    .char-preview-tags {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #2a2a4a;
    }
    .char-preview-tags img { width: 20px; height: 23px; object-fit: contain; }
    .char-preview-tags img.rarity-tag-icon { width: auto; height: 23px; }
    .char-preview-bond-row { display: flex; justify-content: center; margin-bottom: 8px; }
    .char-preview-loadout-detailed { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
    .loadout-equip-grid { display: grid; grid-template-columns: repeat(2, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; }
    .loadout-slot {
      width: 44px; height: 44px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
      background: #15152a;
    }
    .loadout-slot-empty { color: #5a5a7a; font-size: 0.75rem; }
    .loadout-icon { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; cursor: default; }
    .loadout-side { display: flex; flex-direction: column; gap: 4px; }
    .loadout-cube { display: flex; flex-direction: column; align-items: center; }
    .loadout-label { font-size: 0.6rem; color: #7c7c9e; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
    .char-preview-skills-row {
      text-align: center; font-size: 0.75rem; color: #a9a9c9; cursor: default;
      background: #15152a; border-radius: 6px; padding: 6px; margin-bottom: 8px;
    }
    .char-preview-tiers { display: flex; gap: 6px; justify-content: center; }
    .char-preview-tag-row { font-size: 0.68rem; color: #a9a9c9; text-align: left; margin-top: 4px; line-height: 1.3; }
    .char-preview-tag-row b { color: #4fa8e8; }
    .char-preview-tier { flex: 1; }
    .char-preview-tier-badge {
      display: block; padding: 4px 0; border-radius: 6px;
      font-weight: 700; font-size: 0.85rem; color: #0f0f1a;
    }
    .char-preview-tier-label {
      display: block; margin-top: 4px; font-size: 0.6rem;
      color: #7c7c9e; text-transform: uppercase; letter-spacing: 0.5px;
    }

    /* Themed tooltip that opens downward — for elements near the top of the page */
    .tip-below { position: relative; }
    .tip-below:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 125%;
      left: 50%;
      transform: translateX(-50%);
      background: #1a1a2e;
      border: 1px solid #a78bfa;
      color: #e0e0e0;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 0.72rem;
      white-space: nowrap;
      z-index: 300;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      pointer-events: none;
    }

    .toast {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      background: #1e1e2e; border: 1px solid #a78bfa; color: #e0e0e0;
      padding: 10px 20px; border-radius: 8px; font-size: 0.85rem;
      opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 200;
    }
    .toast.show { opacity: 1; }

    .site-footer {
      margin-top: 40px;
      padding-top: 18px;
      border-top: 1px solid #2a2a4a;
      text-align: center;
    }
    .footer-links { font-size: 0.75rem; }
    .footer-links a { color: #7c7c9e; text-decoration: none; transition: color 0.2s; }
    .footer-links a:hover { color: #a78bfa; }
    .footer-sep { margin: 0 8px; color: #2a2a4a; }
    .footer-note { margin-top: 8px; font-size: 0.68rem; color: #3a3a5a; }

    /* Design-matching pointer cursor for anything clickable — placed last so it
       overrides the plain `cursor: pointer` set by individual component rules above. */
    button:not(:disabled), a, select, .lang-menu-btn, .lang-menu-item:not(.disabled),
    .name-card, .combobox-item, .switch, .switch-slider, th[draggable="true"],
    .row-edit-btn, .card-delete, .corner-actions .corner-btn:disabled,
    .filter-toggle label, .icon-chip, .icon-chip img {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><circle cx="11" cy="11" r="6" fill="none" stroke="%23a78bfa" stroke-width="2"/><circle cx="11" cy="11" r="2" fill="%23a78bfa"/></svg>') 11 11, pointer;
    }

/* ══════════════════════════════════════════════════════════════════
   MOBILE — only applies below 768px, desktop layout is untouched
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  body { font-size: 0.85rem; }

  /* Hamburger menu: same size/position column as the team rail below it */
  .pages-menu-wrap { top: 8px; left: 8px; }
  .pages-menu-btn {
    width: 40px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; box-sizing: border-box;
  }

  /* Corner actions (language/profile/login): pinned top-right, same row height as the hamburger */
  .corner-actions { top: 8px; right: 8px; }

  /* Fixed left-edge team switcher (T1, T2, ...) - starts below the hamburger
     row so nothing overlaps, stays put while the page scrolls. */
  .mobile-team-rail {
    display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
    position: fixed; left: 8px; top: 52px; bottom: 8px; width: 40px; z-index: 55;
  }
  .mobile-team-rail-btn {
    flex-shrink: 0; width: 40px; height: 36px; border-radius: 8px; border: 1px solid #2a2a4a;
    background: #1a1a2e; color: #a9a9c9; font-size: 0.7rem; font-weight: 600; cursor: pointer;
  }
  .mobile-team-rail-btn.active { border-color: #a78bfa; background: #a78bfa; color: #0f0f1a; }

  /* Builder toolbar (New Team / Changelog): sits BELOW the hamburger/login
     row (not beside it) so nothing overlaps, spans from the rail's right
     edge to the screen edge. */
  #builderToolbar {
    position: fixed; top: 52px; left: 56px; right: 8px; z-index: 55;
    background: #0f0f1a; padding: 6px; border-radius: 10px; border: 1px solid #2a2a4a;
    display: flex; gap: 6px; justify-content: center;
  }
  #plannerPage { padding-top: 100px; padding-left: 52px; box-sizing: border-box; }
  #plannerPage h1 { display: none; } /* redundant once the toolbar is pinned up top */

  /* Content order on mobile: filters first, then the team card itself,
     then the buff-info panel at the bottom (matches desktop's left-to-right
     reading order top-to-bottom instead). */
  .builder-picker-filters-right { order: 1; }
  .team-card { order: 2; }
  .buff-panel-left { order: 3; }

  /* Every flex/grid container below needs min-width:0, otherwise a flex
     item refuses to shrink below its content's natural width and pushes
     the whole page wider instead of scrolling internally. */
  .filter-row, .filter-group, .icon-chip-box, .top-bar, .header-row,
  .planner-slots, .builder-layout, .buff-panel-left, .choice-buttons, .extension-btn-row {
    min-width: 0;
  }

  /* Filter bar: stack, allow horizontal scroll on chip rows instead of
     overflowing the page */
  .filter-row { flex-wrap: wrap; gap: 8px; }
  .filter-search-wrap, .filter-search { width: 100%; max-width: 100%; }
  .filter-group { flex: 1 1 100%; width: 100%; }
  .icon-chip-box { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .filter-dropdown-row { flex-wrap: wrap; }
  .filter-dropdown-panel { left: 50%; transform: translateX(-50%); max-width: 90vw; }
  .icon-chip { flex-shrink: 0; width: 44px; height: 36px; }
  .icon-chip img { max-width: 28px; max-height: 22px; }
  select, .filter-search { max-width: 100%; }

  /* Modals: use nearly the full screen instead of a fixed max-width */
  .modal, .modal-wizard, .modal-columns {
    width: 94vw; max-width: 94vw; max-height: 92vh; padding: 16px; box-sizing: border-box;
  }
  .field-row { flex-direction: column; }
  .field-group { width: 100%; box-sizing: border-box; }
  .modal-buttons { flex-wrap: wrap; }
  .choice-buttons { flex-direction: column; }
  .extension-btn-row { flex-direction: column; }

  /* Table: horizontal scroll for the table itself, shrink portraits */
  .table-wrap { max-height: 60vh; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .name-card-portrait-wrap > img, .name-card-portrait-wrap { width: 64px; height: 64px; }
  .data-table { font-size: 0.78rem; }

  /* Icon grid view: smaller cards so more fit per row on a phone screen */
  .grid-card-img { width: 64px; height: 64px; }
  #gridWrap { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important; gap: 8px !important; }

  /* Builder: stack the side panel above the team card, and lay its two
     large boxes side by side (role box below, full width) to avoid an
     excessively tall single column on a phone screen */
  .builder-layout { flex-direction: column; align-items: stretch; }
  .buff-panel-left { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .buff-panel-left .buff-box-large { flex: 1 1 45%; min-height: 120px; }
  .buff-panel-left .buff-box-small { flex: 1 1 100%; min-height: auto; }
  .planner-slots { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .planner-slot { width: auto; height: auto; aspect-ratio: 1; }
  .planner-slot-clear { display: none; }
  .builder-picker-box { max-width: 100%; box-sizing: border-box; }
  .builder-picker-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .builder-picker-filters-right { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 0; }
  .builder-picker-filters-right .filter-dropdown { width: 100%; }
  .builder-picker-filters-right .filter-dropdown-btn { width: 100%; box-sizing: border-box; }
  .builder-picker-filters-right .filter-clear-all-btn { grid-column: 1 / -1; }
  .builder-picker-filters-right #bpResetBtn { order: -1; margin-top: 0; margin-bottom: 4px; }
  .builder-picker-filters-right .filter-dropdown-panel { left: 50%; right: auto; transform: translateX(-50%); }

  /* Hover/pinned cards: cap width to the viewport so nothing overflows
     sideways on a narrow screen, and make sure they never start off-screen */
  .char-preview-card, .equip-preview-card, .skill-ref-card, .pinned-window {
    max-width: 92vw; box-sizing: border-box;
  }
  .loadout-equip-grid { grid-template-columns: repeat(2, 38px); grid-template-rows: repeat(2, 38px); }
  .loadout-slot, .loadout-icon { width: 38px; height: 38px; }
  .char-preview-loadout-detailed { flex-wrap: wrap; justify-content: center; }

  /* Header/nav: let the title wrap instead of squeezing buttons off-screen,
     and make the hamburger dropdown comfortably tappable */
  h1 { font-size: 1rem; flex-wrap: wrap; gap: 6px; }
  .top-bar, .header-row { flex-wrap: wrap; gap: 8px; }
  .pages-menu-item { padding: 14px 18px; }
  .icon-chip, button, select, input, .pin-close-btn, .pin-min-btn {
    min-height: 32px;
  }

  /* Equipment row in the table: let it wrap instead of forcing horizontal
     scroll on every single row */
  .equip-cell-inner { flex-wrap: wrap; justify-content: center; }
}