/* stylelint-disable no-descending-specificity, declaration-block-single-line-max-declarations, selector-id-pattern, keyframes-name-pattern -- Preserve the shipped selector contract while this formerly embedded stylesheet is modularized. */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      background: #000;
      transition: background-color 0.2s;
      scroll-behavior: smooth;
    }

    html.light {
      background: #fff;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #000;
      color: #e0e0e0;
      line-height: 1.5;
      font-size: 14px;
      overflow-x: hidden;
      transition: background-color 0.2s, color 0.2s;
      display: flex;
      flex-direction: row-reverse;
      min-height: 100vh;
    }

    html.light body {
      background: #fff;
      color: #1a1a1a;
    }

    .header {
      background: #000;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      border-left: 1px solid #222;
      user-select: none;
      transition: background-color 0.2s, border-color 0.2s;
      width: 300px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      flex-shrink: 0;
    }

    html.light .header {
      background: #fff;
      border-left: 1px solid #e0e0e0;
    }

     .header-left {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 8px;
     }

     .header-left-links {
       display: flex;
       flex-direction: column;
       gap: 8px;
     }

     .header-right {
       display: flex;
       flex-direction: column;
       gap: 16px;
       flex: 1;
     }

     .header-info {
       display: flex;
       flex-direction: column;
       gap: 4px;
     }

    .back-link {
      color: #8ab4f8;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
    }

    html.light .back-link {
      color: #1a73e8;
    }

    .back-link:hover {
      text-decoration: underline;
    }

    .slug {
      color: #9aa0a6;
      font-size: 14px;
      transition: color 0.2s;
    }

    html.light .slug {
      color: #666;
    }

    .header-title {
      font-size: 16px;
      font-weight: 600;
      color: #e0e0e0;
      transition: color 0.2s;
    }

    html.light .header-title {
      color: #1a1a1a;
    }

    .header-author {
      font-size: 13px;
      color: #8ab4f8;
      transition: color 0.2s;
    }

    html.light .header-author {
      color: #1a73e8;
    }

    .header-description {
      color: #c8c8c8;
      font-size: 13px;
      line-height: 1.5;
      max-width: 100%;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      padding-top: 4px;
    }

    html.light .header-description {
      color: #444;
    }
    .verified-badge { display: inline-flex; align-items: center; justify-content: center; background: #26a69a; color: #fff; border-radius: 50%; min-width: 14px; width: 14px; height: 14px; font-size: 9px; font-weight: 700; margin-left: 4px; vertical-align: middle; line-height: 1; flex-shrink: 0; box-sizing: content-box; }
    .elo-badge { display: inline-flex; align-items: center; background: #37474f; color: #cfd8dc; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 600; margin-left: 6px; vertical-align: middle; letter-spacing: 0.02em; }
    html.light .elo-badge { background: #e0e0e0; color: #37474f; }

    .header-date {
      font-size: 11px;
      color: #9aa0a6;
      transition: color 0.2s;
    }

    html.light .header-date {
      color: #666;
    }

    .tier-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 1px 7px;
      border-radius: 10px;
      vertical-align: middle;
      background: rgb(138 180 248 / 12%);
      color: #8ab4f8;
      border: 1px solid rgb(138 180 248 / 25%);
      margin-left: 8px;
    }

    html.light .tier-badge {
      background: rgb(26 115 232 / 8%);
      color: #1a73e8;
      border-color: rgb(26 115 232 / 20%);
    }

    .visibility-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      padding: 1px 7px;
      border-radius: 10px;
      vertical-align: middle;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .visibility-badge.public {
      background: rgb(38 166 154 / 15%);
      color: #26a69a;
      border: 1px solid rgb(38 166 154 / 30%);
    }

    html.light .visibility-badge.public {
      background: rgb(0 137 123 / 10%);
      color: #00897b;
      border-color: rgb(0 137 123 / 30%);
    }

    .visibility-badge.private {
      background: rgb(150 150 150 / 10%);
      color: #9aa0a6;
      border: 1px solid rgb(150 150 150 / 20%);
    }

    html.light .visibility-badge.private {
      background: rgb(0 0 0 / 5%);
      color: #888;
      border-color: rgb(0 0 0 / 15%);
    }

    .sample-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      padding: 1px 7px;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: rgb(38 166 154 / 15%);
      color: #26a69a;
      border: 1px solid rgb(38 166 154 / 30%);
      margin-right: 6px;
    }

    html.light .sample-badge {
      background: rgb(0 137 123 / 10%);
      color: #00897b;
      border-color: rgb(0 137 123 / 30%);
    }

    .sample-source {
      display: block;
      font-size: 11px;
      color: #9aa0a6;
      margin-top: 2px;
      transition: color 0.2s;
    }

    html.light .sample-source {
      color: #666;
    }

    .sample-source a {
      color: #8ab4f8;
      text-decoration: none;
    }

    .sample-source a:hover {
      text-decoration: underline;
    }

    html.light .sample-source a {
      color: #1a73e8;
    }

    .sample-notice {
      text-align: center;
      font-size: 12px;
      color: #9aa0a6;
      margin-top: 4px;
      padding: 8px 0;
      border-top: 1px solid #222;
      transition: color 0.2s, border-color 0.2s;
    }

    html.light .sample-notice {
      color: #666;
      border-top-color: #e0e0e0;
    }

    .sample-notice a {
      color: #8ab4f8;
      text-decoration: none;
    }

    .sample-notice a:hover {
      text-decoration: underline;
    }

    html.light .sample-notice a {
      color: #1a73e8;
    }

     .theme-toggle {
       background: #1a1a1a;
       border: 1px solid #333;
       border-radius: 20px;
       padding: 4px;
       transition: all 0.2s;
       display: flex;
       gap: 4px;
       align-items: center;
       flex-shrink: 0;
     }

     html.light .theme-toggle {
       background: #f0f0f0;
       border-color: #ccc;
     }

     .theme-option {
       padding: 6px 10px;
       border-radius: 16px;
       font-size: 14px;
       transition: all 0.2s;
       background: transparent;
       opacity: 0.5;
       cursor: pointer;
     }

     .theme-option:hover {
       opacity: 0.8;
     }

     .theme-option.active {
       background: #333;
       opacity: 1;
     }

     html.light .theme-option.active {
       background: #fff;
       box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
     }

      .header-controls {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .action-more {
        position: relative;
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 4px;
        overflow: visible; z-index: 20;
        transition: background 0.15s ease, border-color 0.15s ease;
      }

      .action-more summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }
      .action-more summary::-webkit-details-marker { display: none; }

      .action-more-caret {
        display: inline-block;
        font-size: 11px;
        line-height: 1;
        transition: transform 0.15s ease;
      }

      .action-more[open] .action-more-caret {
        transform: rotate(180deg);
      }

      .action-more-menu {
        position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
        display: grid; width: 170px; min-width: 100%;
        gap: 0; padding: 4px;
        background: #1a1a1a; border: 1px solid #333; border-radius: 4px; box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
      }

      .header-intro {
        margin: 0;
        color: #b2c1be;
        font-size: 13px;
        line-height: 1.5;
        max-width: 540px;
      }
      html.light .header-intro { color: #52635f; }

      .showdown-helper {
        max-width: 220px;
        font-size: 12px;
        line-height: 1.5;
        color: #9aa8a5;
      }

      .showdown-helper a {
        color: #26a69a;
        text-decoration: none;
        font-weight: 600;
      }

      .showdown-helper a:hover {
        text-decoration: underline;
      }

      .clone-error {
        color: #f87171;
        font-size: 12px;
        padding: 6px 8px;
        background: #2a1212;
        border: 1px solid #7f1d1d;
        border-radius: 4px;
        margin-top: 4px;
        white-space: pre-line;
      }

      .info-btn, .copy-btn, .clone-btn {
        background: #1a1a1a;
        color: #e0e0e0;
        border: 1px solid #333;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.15s ease;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .info-btn:active, .copy-btn:active, .clone-btn:active {
        transform: scale(0.95);
      }

      html.light .info-btn, html.light .copy-btn, html.light .clone-btn {
        background: #f0f0f0;
        color: #1a1a1a;
        border-color: #ccc;
      }

      html.light .showdown-helper {
        color: #5f6d69;
      }

      html.light .showdown-helper a {
        color: #00897b;
      }

      html.light .clone-error {
        background: #fff0f0;
        color: #b91c1c;
        border-color: #fca5a5;
      }

      .info-btn:hover, .copy-btn:hover, .clone-btn:hover {
        background: #2a2a2a;
      }

      html.light .info-btn:hover, html.light .copy-btn:hover, html.light .clone-btn:hover {
        background: #e0e0e0;
      }

      html.light .action-more, html.light .action-more-menu {
        background: #f0f0f0;
        border-color: #ccc;
      }

      .action-more > summary.info-btn {
        width: 100%;
        box-sizing: border-box;
        background: transparent;
        border: 0;
        border-radius: 0;
      }

      .action-more > summary.info-btn:hover {
        background: #2a2a2a;
      }

      .action-more > summary.info-btn:focus-visible {
        outline: 2px solid #4d90fe;
        outline-offset: -3px;
      }

      .action-more > summary.info-btn:active,
      .action-more-menu > button:active {
        transform: none;
      }

      html.light .action-more > summary.info-btn:hover {
        background: #e0e0e0;
      }

      .action-more-menu > button.copy-btn,
      .action-more-menu > button.info-btn {
        width: 100%;
        background: transparent;
        border: 0;
        border-radius: 3px;
        text-align: left;
      }

      .action-more-menu > button + button {
        border-top: 1px solid #2a2a2a;
        border-radius: 0;
      }

      html.light .action-more-menu > button.copy-btn,
      html.light .action-more-menu > button.info-btn {
        background: transparent;
      }

      html.light .action-more-menu > button + button {
        border-top-color: #ddd;
      }

      .action-more-menu > button.copy-btn:hover,
      .action-more-menu > button.info-btn:hover {
        background: #2a2a2a;
      }

      html.light .action-more-menu > button.copy-btn:hover,
      html.light .action-more-menu > button.info-btn:hover {
        background: #e0e0e0;
      }

     #copyTeamBtn {
       background: #26a69a;
       color: #fff;
       border: none;
       padding: 10px 14px;
       border-radius: 6px;
       cursor: pointer;
       font-size: 14px;
       font-weight: 700;
       transition: all 0.15s ease;
       text-align: center;
       position: relative;
       letter-spacing: 0.3px;
       width: 100%;
     }

     #copyTeamBtn:hover {
       background: #2bbbad;
       transform: translateY(-1px);
       box-shadow: 0 2px 8px rgb(38 166 154 / 30%);
     }

     #copyTeamBtn:active {
       transform: scale(0.97);
     }

     #copyTeamBtn.copied {
       background: #1b8a42;
     }

     html.light #copyTeamBtn {
       background: #00897b;
       color: #fff;
     }

     html.light #copyTeamBtn:hover {
       background: #00796b;
     }

     html.light #copyTeamBtn.copied {
       background: #2e7d32;
     }

     .clone-btn.copied {
       background: #1a4d1a;
       border-color: #2d7a2d;
     }

     html.light .clone-btn.copied {
       background: #4caf50;
       border-color: #45a049;
       color: #fff;
     }

     .copy-btn.copied {
       background: #1a4d1a;
       border-color: #2d7a2d;
     }

     html.light .copy-btn.copied {
       background: #4caf50;
       border-color: #45a049;
       color: #fff;
     }

     .copy-failed,
     html.light .copy-failed {
       background: #3a1515 !important;
       border-color: #ef4444 !important;
       color: #fecaca !important;
     }

     .copy-feedback {
       position: fixed;
       left: 50%;
       bottom: 20px;
       z-index: 1200;
       width: min(420px, calc(100vw - 32px));
       transform: translateX(-50%);
       padding: 10px 14px;
       border: 1px solid #ef4444;
       border-radius: 8px;
       background: #2a1212;
       color: #fecaca;
       box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
       font-size: 13px;
       line-height: 1.4;
       text-align: center;
     }

     html.light .copy-feedback {
       background: #fff0f0;
       color: #991b1b;
       box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
     }

     @keyframes copySuccess {
       0% { transform: scale(1); }
       50% { transform: scale(1.05); }
       100% { transform: scale(1); }
     }

     #copyTeamBtn.copying {
       animation: copySuccess 0.3s ease-out;
     }

    .entity-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding-top: 4px;
    }

    .entity-link {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid #263b3a;
      background: rgb(38 166 154 / 8%);
      color: #8adbd2;
      font-size: 11px;
      line-height: 1.2;
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .entity-link:hover {
      border-color: #26a69a;
      color: #26a69a;
    }

    html.light .entity-link {
      border-color: rgb(0 137 123 / 22%);
      background: rgb(0 137 123 / 6%);
      color: #00796b;
    }

    .entity-link-format {
      border-color: rgb(138 180 248 / 25%);
      background: rgb(138 180 248 / 10%);
      color: #9ebdff;
    }

    html.light .entity-link-format {
      border-color: rgb(26 115 232 / 22%);
      background: rgb(26 115 232 / 7%);
      color: #1a73e8;
    }

    .entity-links-toggle {
      display: none;
      align-items: center;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px dashed #3b4e4c;
      background: transparent;
      color: #9aa8a5;
      font: inherit;
      font-size: 11px;
      line-height: 1.2;
      cursor: pointer;
    }

    html.light .entity-links-toggle {
      border-color: #b8c8c5;
      color: #5f6d69;
    }

    .container {
      padding: 16px;
      flex: 1;
      overflow-x: hidden;
    }

    .share-toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #111;
      border: 1px solid #26a69a;
      border-radius: 12px;
      padding: 0;
      max-width: 400px;
      width: calc(100vw - 40px);
      color: #ccc;
      overflow: hidden;
      z-index: 1000;
      box-shadow: 0 8px 32px rgb(0 0 0 / 50%);
      transform: translateY(calc(100% + 30px));
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .share-toast.visible { transform: translateY(0); }
    html.light .share-toast { background: #fff; border-color: #00897b; color: #222; box-shadow: 0 8px 32px rgb(0 0 0 / 15%); }

    .share-toast-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 10px;
      border-bottom: 1px solid #222;
    }
    html.light .share-toast-header { border-bottom-color: #e0e0e0; }

    .share-toast-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin: 0;
    }
    html.light .share-toast-title { color: #111; }

    .share-toast-close {
      background: none; border: none; color: #888; font-size: 20px;
      cursor: pointer; padding: 0 2px; line-height: 1;
    }
    .share-toast-close:hover { color: #ccc; }
    html.light .share-toast-close:hover { color: #333; }

    .share-toast-body {
      padding: 14px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .share-url-row {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 7px;
      padding: 8px 12px;
    }
    html.light .share-url-row { background: #f5f5f5; border-color: #ddd; }

    .share-url-text {
      flex: 1;
      font-size: 13px;
      color: #aaa;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: monospace;
    }
    html.light .share-url-text { color: #444; }

    .share-url-copy {
      background: #26a69a; color: #fff; border: none; border-radius: 5px;
      padding: 5px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
      transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
    }
    .share-url-copy:hover { background: #2bbbad; }
    .share-url-copy.copied { background: #388e3c; }

    .share-platform-row {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .share-platform-btn {
      background: none; border: 1px solid #333; color: #666; border-radius: 7px;
      padding: 7px 9px; cursor: pointer; transition: all 0.15s;
      display: inline-flex; align-items: center; justify-content: center;
      text-decoration: none; flex-shrink: 0;
    }
    .share-platform-btn:hover { border-color: #26a69a; color: #26a69a; }
    .share-platform-btn.copied { border-color: #388e3c; color: #388e3c; }
    html.light .share-platform-btn { border-color: #ddd; color: #aaa; }
    html.light .share-platform-btn:hover { border-color: #00897b; color: #00897b; }
    .share-platform-btn svg { width: 16px; height: 16px; fill: currentcolor; display: block; }
    .share-library-row { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
    .share-library-copy { margin: 0; color: #8f9b99; font-size: 13px; line-height: 1.45; }
    html.light .share-library-copy { color: #596260; }
    .share-library-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    .share-library-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgb(38 166 154 / 35%);
      border-radius: 7px;
      padding: 7px 10px;
      color: #26a69a;
      background: rgb(38 166 154 / 6%);
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
    }
    html.light .share-library-btn { color: #00897b; border-color: rgb(0 137 123 / 30%); background: rgb(0 137 123 / 5%); }

    .multi-team-section {
      margin-bottom: 48px;
    }

    .multi-team-section:last-child {
      margin-bottom: 0;
    }

    .multi-team-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 2px solid #333;
      transition: border-color 0.2s;
    }

    html.light .multi-team-header {
      border-bottom-color: #ccc;
    }

    .team-header-label {
      white-space: nowrap;
    }

    .team-eq {
      color: #666;
      transition: color 0.2s;
    }

    html.light .team-eq {
      color: #999;
    }

    .team-nav-links {
      display: flex;
      gap: 8px;
      margin-left: auto;
      user-select: none;
    }

    .team-nav,
    .team-link,
    .team-copy-btn,
    .team-clone-btn {
      color: #999;
      text-decoration: none;
      font-size: 11px;
      opacity: 0.8;
      transition: opacity 0.2s, color 0.15s, background-color 0.2s, transform 0.15s;
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px 7px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .team-action-icon { width: 14px; height: 14px; flex: 0 0 14px; font-size: 14px; line-height: 1; text-align: center; }
    .team-link-icon { font-family: monospace; font-weight: 700; }

    .team-link,
    .team-copy-btn,
    .team-clone-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px 7px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .team-nav:hover,
    .team-link:hover,
    .team-copy-btn:hover,
    .team-clone-btn:hover {
      opacity: 1;
      background: rgb(255 255 255 / 6%);
    }

    html.light .team-nav:hover,
    html.light .team-link:hover,
    html.light .team-copy-btn:hover,
    html.light .team-clone-btn:hover { background: rgb(0 0 0 / 5%); }

    .team-link.copied,
    .team-copy-btn.copied {
      opacity: 1;
      color: #4ade80 !important;
      transform: scale(1.15);
    }

    html.light .team-link.copied,
    html.light .team-copy-btn.copied {
      color: #22c55e !important;
    }

    .team-clone-btn.cloned {
      opacity: 1;
      color: #60a5fa !important;
      transform: scale(1.15);
    }

    html.light .team-clone-btn.cloned {
      color: #2563eb !important;
    }

    html.light .team-nav,
    html.light .team-link,
    html.light .team-copy-btn,
    html.light .team-clone-btn {
      color: #666;
    }

    .team-format {
      color: #8ab4f8;
      font-weight: 600;
      font-size: 14px;
      transition: color 0.2s;
    }

    html.light .team-format {
      color: #1a73e8;
    }

    .team-name {
      color: #e0e0e0;
      font-size: 16px;
      font-weight: 500;
      transition: color 0.2s;
    }

    html.light .team-name {
      color: #1a1a1a;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 24px;
      align-items: start;
    }

       @media (width <= 1024px) {
         body {
           flex-direction: column;
         }

         .header {
           width: 100%;
           height: auto;
           position: relative; overflow: visible;
           border-left: none;
           border-bottom: 1px solid #222;
           flex-direction: column;
           gap: 12px;
           padding: 12px;
         }

         html.light .header {
           border-left: none;
           border-bottom: 1px solid #e0e0e0;
         }

         .header-left {
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
           width: 100%;
         }

         .header-right {
           flex-direction: column;
           gap: 12px;
         }

         .header-info {
           order: 1;
         }

         .header-controls {
           order: 2;
           flex-direction: row; align-items: flex-start;
           gap: 8px;
         }

         .showdown-helper {
           order: 3;
           max-width: none;
         }

         .header-controls button {
           flex: 1;
           min-width: 0;
           font-size: 12px;
           padding: 8px 6px;
         }

          .team-grid {
            grid-template-columns: 1fr;
            gap: 12px;
          }

          .pokemon-card {
            gap: 10px;
            padding: 8px;
          }

          .sprite-container {
            width: 96px;
            height: 96px;
          }

          .sprite {
            width: 96px;
            height: 96px;
          }

         .pokemon-text {
            font-size: 11px;
          }

          .entity-links:not(.expanded) .entity-link:nth-of-type(n + 3) {
            display: none;
          }

          .entity-links-toggle {
            display: inline-flex;
          }
        }

        @media (width <= 600px) {
          .team-nav-links {
            width: 100%;
            margin-left: 0;
            flex-wrap: wrap;
          }

          .team-nav, .team-link, .team-copy-btn, .team-clone-btn {
            border: 1px solid #3a3a3a;
            border-radius: 6px;
            padding: 6px 8px;
            font-size: 11px;
          }
          .multi-team-header { align-items: flex-start; flex-direction: column; }
        }

     .empty-team-message {
      color: #666;
      font-style: italic;
      padding: 16px;
      text-align: center;
      transition: color 0.2s;
    }

    html.light .empty-team-message {
      color: #999;
    }

    .pokemon-card {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      min-height: 0;
      max-width: 100%;
      opacity: 0;
      animation: cardFadeIn 0.4s ease forwards;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      padding: 12px;
      border-radius: 8px;
      background: rgb(255 255 255 / 2%);
    }

    html.light .pokemon-card {
      background: rgb(0 0 0 / 2%);
    }

    .pokemon-card:hover {
      transform: translateY(-2px);
      background: rgb(255 255 255 / 5%);
      box-shadow: 0 4px 20px rgb(38 166 154 / 15%);
    }

    html.light .pokemon-card:hover {
      background: rgb(0 0 0 / 3%);
      box-shadow: 0 4px 20px rgb(0 137 123 / 15%);
    }

    @keyframes cardFadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .pokemon-card:nth-child(1) { animation-delay: 0.05s; }
    .pokemon-card:nth-child(2) { animation-delay: 0.1s; }
    .pokemon-card:nth-child(3) { animation-delay: 0.15s; }
    .pokemon-card:nth-child(4) { animation-delay: 0.2s; }
    .pokemon-card:nth-child(5) { animation-delay: 0.25s; }
    .pokemon-card:nth-child(6) { animation-delay: 0.3s; }
    .nature-badge { display: none; }
    .pokemon-card:hover .nature-badge { display: inline; }
    .team-grid > .pokemon-card .nature-badge { margin-left: 5px; }
    .nature-badge::before { content: attr(data-plus); color: #4db6ac; margin-right: 2px; }
    .nature-badge::after { content: attr(data-minus); color: #ef9a9a; }
    html.light .nature-badge::before { color: #00796b; }
    html.light .nature-badge::after { color: #c62828; }

    .sprite-container {
      position: relative;
      width: 160px;
      height: 160px;
      flex-shrink: 0;
    }

    .sprite-container.sprite-missing::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 52px;
      height: 52px;
      border: 3px solid #30343a;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, #f8f8f7 0 7px, #30343a 8px 11px, transparent 12px),
        linear-gradient(to bottom, #e75a56 0 45%, #30343a 45% 55%, #f8f8f7 55%);
      box-shadow: 0 4px 10px rgb(0 0 0 / 22%);
      transform: translate(-50%, -50%);
    }

    .sprite.sprite-missing {
      visibility: hidden;
    }

    .sprite {
      width: 160px;
      height: 160px;
      object-fit: contain;
      flex-shrink: 0;
      user-select: none;
      pointer-events: auto;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .sprite:hover {
      animation: pokemonBounce 0.5s ease infinite;
    }

    .sprite:active {
      animation: pokemonWiggle 0.3s ease;
    }

    @keyframes pokemonBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes pokemonWiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-10deg); }
      75% { transform: rotate(10deg); }
    }

    .pokeball-sprite {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(5);
      transform-origin: center;
    }

    .item-icon {
      position: absolute !important;
      bottom: 0 !important;
      right: 0 !important;
      display: block !important;
      z-index: 1;
      transform: scale(1.5) !important;
      transform-origin: bottom right !important;
      user-select: none;
      pointer-events: none;
    }

    .pokemon-text {
      color: #e0e0e0;
      font-size: 12px;
      line-height: 1.6;
      margin: 0;
      overflow-wrap: break-word;
      white-space: pre-wrap;
      flex: 1;
      transition: color 0.2s;
    }

    html.light .pokemon-text {
      color: #1a1a1a;
    }

    .attribute-label {
      color: #888;
    }

    html.light .attribute-label {
      color: #999;
    }

    dialog {
      margin: auto;
      color: inherit;
    }

    dialog::backdrop {
      background: rgb(0 0 0 / 65%);
    }

    .export-content {
      background: #000;
      border: 1px solid #333;
      border-radius: 8px;
      padding: 24px;
      max-width: 800px;
      width: 90%;
      max-height: 80vh;
      overflow: auto;
      transition: background-color 0.2s, border-color 0.2s;
    }

    html.light .export-content {
      background: #fff;
      border-color: #ccc;
    }

    .export-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .export-header h2 {
      color: #e0e0e0;
      font-size: 18px;
      transition: color 0.2s;
    }

    html.light .export-header h2 {
      color: #1a1a1a;
    }

    .close-btn {
      background: none;
      border: none;
      color: #9aa0a6;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      transition: color 0.2s;
    }

    html.light .close-btn {
      color: #666;
    }

    .close-btn:hover {
      color: #e0e0e0;
    }

    html.light .close-btn:hover {
      color: #1a1a1a;
    }

    .export-text {
      width: 100%;
      min-height: 400px;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #333;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 13px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    html.light .export-text {
      background: #fafafa;
      border-color: #ccc;
      color: #1a1a1a;
    }

    .modal-copy-btn {
      margin-top: 12px;
      width: 100%;
      padding: 10px;
      background: #1a1a1a;
      color: #e0e0e0;
      border: 1px solid #333;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }

    html.light .modal-copy-btn {
      background: #f0f0f0;
      color: #1a1a1a;
      border-color: #ccc;
    }

    .modal-copy-btn:hover {
      background: #2a2a2a;
    }

    html.light .modal-copy-btn:hover {
      background: #e0e0e0;
    }

    .modal-copy-btn.copied {
      background: #1a4d1a;
      border-color: #2d7a2d;
    }

    html.light .modal-copy-btn.copied {
      background: #4caf50;
      border-color: #45a049;
      color: #fff;
    }

     .modal-copy-btn.copying {
       animation: copySuccess 0.3s ease-out;
     }

    .info-content {
       background: #000;
       border: 1px solid #333;
       border-radius: 8px;
       padding: 24px;
       max-width: 600px;
       width: 90%;
       max-height: 80vh;
       overflow: auto;
       transition: background-color 0.2s, border-color 0.2s;
     }

     html.light .info-content {
       background: #fff;
       border-color: #ccc;
     }

     .info-content h2 {
       color: #e0e0e0;
       font-size: 20px;
       margin-bottom: 16px;
       transition: color 0.2s;
     }

     html.light .info-content h2 {
       color: #1a1a1a;
     }

     .info-content p {
       color: #c0c0c0;
       margin-bottom: 12px;
       line-height: 1.6;
       transition: color 0.2s;
     }

     html.light .info-content p {
       color: #666;
     }

     .info-content h3 {
       color: #e0e0e0;
       font-size: 16px;
       margin-top: 20px;
       margin-bottom: 10px;
       transition: color 0.2s;
     }

     html.light .info-content h3 {
       color: #1a1a1a;
     }

     .info-content ol {
       margin-left: 20px;
       color: #c0c0c0;
       transition: color 0.2s;
     }

     html.light .info-content ol {
       color: #666;
     }

     .info-content li {
       margin-bottom: 8px;
       line-height: 1.6;
     }

     .info-content a {
       color: #8ab4f8;
       text-decoration: none;
       transition: color 0.2s;
     }

     html.light .info-content a {
       color: #1a73e8;
     }

       .info-content a:hover {
         text-decoration: underline;
       }

       .login-nudge-content {
         background: #000;
         border: 1px solid #333;
         border-radius: 8px;
         padding: 24px;
         max-width: 420px;
         width: 90%;
         transition: background-color 0.2s, border-color 0.2s;
       }

       html.light .login-nudge-content {
         background: #fff;
         border-color: #ccc;
       }

       .login-nudge-content p {
         color: #c0c0c0;
         margin-bottom: 20px;
         line-height: 1.6;
         transition: color 0.2s;
       }

       html.light .login-nudge-content p {
         color: #666;
       }

       .modal-login-btn {
         display: block;
         width: 100%;
         padding: 12px;
         background: #26a69a;
         color: #fff;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 14px;
         font-weight: 600;
         text-align: center;
         text-decoration: none;
         transition: background 0.2s;
         margin-bottom: 8px;
       }

       .modal-login-btn:hover {
         background: #2bbbad;
       }

       .modal-secondary-btn {
         display: block;
         width: 100%;
         padding: 10px;
         background: transparent;
         color: #9aa0a6;
         border: 1px solid #333;
         border-radius: 4px;
         cursor: pointer;
         font-size: 13px;
         text-align: center;
         transition: all 0.2s;
       }

       .modal-secondary-btn:hover {
         background: #1a1a1a;
         color: #e0e0e0;
       }

       html.light .modal-secondary-btn {
         color: #666;
         border-color: #ccc;
       }

       html.light .modal-secondary-btn:hover {
         background: #f0f0f0;
         color: #1a1a1a;
       }

        .team-viewer-ad {
          width: 100%;
          min-height: 124px;
          box-sizing: border-box;
          margin: 32px 0 8px;
          padding: 14px 0;
          border-top: 1px solid #222;
          border-bottom: 1px solid #222;
        }

        .team-viewer-ad,
        .team-viewer-ad * {
          user-select: none;
        }
        .team-viewer-ad[hidden] { display: none; }
        html.light .team-viewer-ad { border-color: #e0e0e0; }

        .team-viewer-ad-label {
          margin-bottom: 8px;
          color: #555;
          font-size: 10px;
          line-height: 1;
          letter-spacing: 0.08em;
          text-align: center;
          text-transform: uppercase;
        }
        html.light .team-viewer-ad-label { color: #999; }

        .explore-section {
          margin: 32px 0 8px;
          padding: 20px 16px 16px;
          border-top: 1px solid #222;
          user-select: none;
        }

        html.light .explore-section {
          border-top-color: #e0e0e0;
        }

        .explore-title {
          font-size: 15px;
          font-weight: 600;
          color: #e0e0e0;
          margin-bottom: 14px;
          transition: color 0.2s;
        }

        html.light .explore-title {
          color: #1a1a1a;
        }

        .explore-links {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .explore-btn {
          display: inline-flex;
          padding: 8px 16px;
          border-radius: 8px;
          font-size: 13px;
          font-weight: 500;
          background: #0d0d0d;
          color: #26a69a;
          border: 1px solid rgb(38 166 154 / 25%);
          text-decoration: none;
          transition: all 0.15s;
        }

        html.light .explore-btn {
          background: #f5f5f5;
          color: #00897b;
          border-color: rgb(0 137 123 / 25%);
        }

        .explore-btn:hover {
          background: rgb(38 166 154 / 8%);
          border-color: #26a69a;
          transform: translateY(-1px);
        }

        html.light .explore-btn:hover {
          background: rgb(0 137 123 / 6%);
          border-color: #00897b;
        }

        .recent-teams {
          margin-top: 14px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 8px;
        }

        .recent-title {
          flex-basis: 100%;
          color: #777;
          font-size: 12px;
          font-weight: 600;
        }

        .footer {
         text-align: right;
         padding: 24px 16px;
         color: #9aa0a6;
         font-size: 13px;
         transition: color 0.2s;
         user-select: none;
       }

      html.light .footer {
        color: #666;
      }

      .footer a {
        color: #8ab4f8;
        text-decoration: none;
        transition: color 0.2s;
      }

      html.light .footer a {
        color: #1a73e8;
      }

      .footer a:hover {
        text-decoration: underline;
      }
      .nav-dropdown { position: relative; }

      .nav-dropdown-btn {
        color: #26a69a;
        font-size: 13px;
        font-weight: 500;
        padding: 5px 12px;
        border-radius: 16px;
        border: 1px solid rgb(38 166 154 / 30%);
        background: none;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }

      .nav-dropdown-btn:hover,
      .nav-dropdown:hover .nav-dropdown-btn {
        background: rgb(38 166 154 / 10%);
        border-color: #26a69a;
      }
      html.light .nav-dropdown-btn { color: #00897b; border-color: rgb(0 137 123 / 30%); }

      html.light .nav-dropdown-btn:hover,
      html.light .nav-dropdown:hover .nav-dropdown-btn {
        background: rgb(0 137 123 / 8%);
        border-color: #00897b;
      }
      .nav-caret { font-size: 10px; transition: transform 0.2s; display: inline-block; }
      .nav-dropdown:hover .nav-caret, .nav-dropdown.open .nav-caret { transform: rotate(180deg); }

      .nav-dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        background: #111;
        border: 1px solid #2a2a2a;
        border-radius: 10px;
        padding: 4px;
        min-width: 130px;
        z-index: 100;
        box-shadow: 0 4px 16px rgb(0 0 0 / 40%);
      }
      html.light .nav-dropdown-menu { background: #fff; border-color: #e0e0e0; box-shadow: 0 4px 16px rgb(0 0 0 / 12%); }
      .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; }

      .nav-dropdown-menu a {
        display: block;
        padding: 7px 12px;
        color: #ccc;
        text-decoration: none;
        font-size: 13px;
        border-radius: 7px;
        transition: background 0.15s, color 0.15s;
      }
      html.light .nav-dropdown-menu a { color: #333; }
      .nav-dropdown-menu a:hover { background: rgb(38 166 154 / 12%); color: #26a69a; }
      html.light .nav-dropdown-menu a:hover { background: rgb(0 137 123 / 8%); color: #00897b; }
    .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;list-style:none;padding:6px 10px;margin:0 0 16px;font-size:13px;background:rgb(38 166 154 / 4%);border-radius:8px;border:1px solid rgb(38 166 154 / 10%)}
    html.light .breadcrumb{background:rgb(0 137 123 / 4%);border-color:rgb(0 137 123 / 10%)}
    .breadcrumb li{display:flex;align-items:center;gap:4px}
    .breadcrumb li+li::before{content:"›";margin-right:4px;color:#555;font-size:16px;line-height:1}
    .breadcrumb a{color:#26a69a;text-decoration:none;padding:2px 6px;border-radius:4px;transition:background 0.15s;user-select:none}
    .breadcrumb a:hover{background:rgb(38 166 154 / 10%);text-decoration:none}
    .breadcrumb span[aria-current]{color:#9aa0a6;font-weight:500;user-select:none}
    html.light .breadcrumb span[aria-current]{color:#666}
    .sample-source,.sample-notice{user-select:none}