:root {
      color-scheme: light;
      --ink: #102f3d;
      --muted: #6d9097;
      --theme-primary: #268da0;
      --theme-accent: #48c6d2;
      --theme-deep: #155c74;
      --theme-soft: #e2f5f3;
      --theme-pale: #f3fbfa;
      --theme-rgb: 38, 141, 160;
      --line: rgba(var(--theme-rgb), .22);
      --blue: var(--theme-primary);
      --cyan: var(--theme-accent);
      --gold: #d7a84c;
      --paper: #f7fbfa;
      --shadow:
        0 18px 60px rgba(var(--theme-rgb), .14);
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-height: 100%;
      background: var(--theme-soft);
      scroll-behavior: smooth;
    }

    body {
      min-height: 100%;
      margin: 0;
      background: var(--theme-soft);
      color: var(--ink);
      font-family:
        "Noto Sans SC",
        "Microsoft YaHei",
        "PingFang SC",
        system-ui,
        sans-serif;
    }

    button,
    select,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    button:focus-visible,
    select:focus-visible,
    input:focus-visible,
    a:focus-visible {
      outline:
        3px solid rgba(var(--theme-rgb), .28);
      outline-offset: 2px;
    }

    [hidden] {
      display: none !important;
    }

    .wish-page {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      padding: 22px clamp(16px, 4vw, 58px) 34px;
      background:
        radial-gradient(
          circle at 95% 5%,
          rgba(var(--theme-rgb), .2),
          transparent 34%
        ),
        radial-gradient(
          circle at 5% 95%,
          rgba(var(--theme-rgb), .13),
          transparent 32%
        ),
        linear-gradient(
          145deg,
          #fbfffe 0%,
          var(--theme-pale) 52%,
          var(--theme-soft) 100%
        );
      transition: background .35s ease;
    }

    .wish-page::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .28;
      background-image:
        radial-gradient(#fff 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image:
        linear-gradient(to bottom, black, transparent 78%);
    }

    .aurora {
      position: fixed;
      border-radius: 50%;
      filter: blur(22px);
      pointer-events: none;
    }

    .aurora.one {
      width: 48vw;
      height: 48vw;
      right: -13vw;
      top: -14vw;
      background:
        radial-gradient(
          circle,
          rgba(var(--theme-rgb), .24),
          transparent 68%
        );
    }

    .aurora.two {
      width: 34vw;
      height: 34vw;
      left: -11vw;
      bottom: -10vw;
      background:
        radial-gradient(
          circle,
          rgba(var(--theme-rgb), .16),
          transparent 70%
        );
    }

    .topbar {
      min-height: 54px;
      position: relative;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .top-left {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .home-button {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 13px;
      border: 1px solid #b9d9dc;
      border-radius: 12px;
      background: rgba(255, 255, 255, .72);
      color: #426d78;
      box-shadow:
        0 6px 18px rgba(54, 112, 128, .08);
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      transition:
        transform .18s ease,
        background .18s ease;
    }

    .home-button:hover {
      background: #fff;
      transform: translateY(-1px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: .08em;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--theme-accent);
      border-radius: 50%;
      color: var(--theme-primary);
      box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, .55);
    }

    .brand b {
      display: block;
      font-family: Georgia, "Songti SC", serif;
      font-size: 18px;
    }

    .brand small {
      display: block;
      margin-top: 2px;
      color: #68909b;
      font-size: 8px;
      letter-spacing: .2em;
    }

    .top-actions {
      display: flex;
      gap: 10px;
    }

    .icon-button {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid #b9d9dc;
      border-radius: 50%;
      background: rgba(255, 255, 255, .72);
      color: #426d78;
      font-size: 17px;
      box-shadow:
        0 6px 18px rgba(54, 112, 128, .08);
      transition:
        transform .18s ease,
        background .18s ease;
    }

    .icon-button:hover {
      background: #fff;
      transform: translateY(-1px);
    }

    .featured-roster {
      width: min(920px, 100%);
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns:
        minmax(250px, 1.15fr)
        minmax(420px, 1.85fr);
      gap: 9px;
      margin: 13px auto 0;
    }

    .featured-five-card,
    .featured-four-card {
      min-width: 0;
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      background: rgba(255, 255, 255, .68);
      box-shadow:
        0 9px 28px rgba(var(--theme-rgb), .09),
        inset 0 1px rgba(255, 255, 255, .8);
      backdrop-filter: blur(14px);
    }

    .featured-five-card {
      min-height: 82px;
      display: grid;
      grid-template-columns:
        minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 13px 16px;
      border:
        1px solid rgba(var(--theme-rgb), .42);
      border-left:
        5px solid var(--theme-primary);
      background:
        linear-gradient(
          135deg,
          rgba(255, 255, 255, .76),
          rgba(var(--theme-rgb), .3)
        );
      box-shadow:
        0 10px 30px rgba(var(--theme-rgb), .16),
        inset 0 1px rgba(255, 255, 255, .9);
    }

    .featured-five-card::before,
    .featured-four-card::before {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: 50%;
    }

    .featured-five-card::before {
      width: 155px;
      height: 155px;
      right: -38px;
      top: -76px;
      background:
        radial-gradient(
          circle,
          rgba(255, 255, 255, .9),
          rgba(var(--theme-rgb), .28) 44%,
          transparent 70%
        );
    }

    .featured-five-copy,
    .featured-five-meta,
    .featured-four-card > * {
      position: relative;
    }

    .featured-label {
      display: block;
      color: #8b6a31;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .17em;
    }

    .featured-five-card strong {
      display: block;
      margin-top: 3px;
      overflow: hidden;
      color: #173e48;
      font:
        600 22px Georgia,
        "Songti SC",
        serif;
      letter-spacing: .04em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .featured-five-meta {
      display: grid;
      justify-items: end;
      gap: 5px;
    }

    .five-stars {
      color: #d39729;
      font-size: 10px;
      letter-spacing: 2px;
      white-space: nowrap;
    }

    .element-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border:
        1px solid var(--theme-deep);
      border-radius: 99px;
      background: var(--theme-deep);
      color: #fff;
      box-shadow:
        0 4px 12px rgba(var(--theme-rgb), .24);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .06em;
      white-space: nowrap;
    }

    .featured-four-group {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .featured-four-card {
      --card-primary: #269a8a;
      --card-deep: #17695f;
      --card-rgb: 38, 154, 138;
      min-height: 82px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 11px 12px;
      border:
        1px solid rgba(var(--card-rgb), .42);
      border-left:
        4px solid var(--card-primary);
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, .76),
          rgba(var(--card-rgb), .29)
        );
      box-shadow:
        0 9px 26px rgba(var(--card-rgb), .16),
        inset 0 1px rgba(255, 255, 255, .9);
    }

    .featured-four-card::before {
      width: 90px;
      height: 90px;
      right: -30px;
      top: -38px;
      background:
        radial-gradient(
          circle,
          rgba(var(--card-rgb), .35),
          transparent 70%
        );
    }

    .featured-four-element {
      align-self: flex-start;
      padding: 2px 6px;
      border-radius: 99px;
      background: rgba(var(--card-rgb), .16);
      color: var(--card-deep);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .featured-four-card strong {
      display: block;
      margin: 3px 0 2px;
      overflow: hidden;
      color: #25434a;
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .featured-four-stars {
      color: #9875b4;
      font-size: 8px;
      letter-spacing: 1px;
    }

    .mode-tabs {
      width: min(620px, 100%);
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin: 9px auto 0;
      padding: 5px;
      border:
        1px solid rgba(var(--theme-rgb), .18);
      border-radius: 15px;
      background: rgba(255, 255, 255, .6);
      box-shadow:
        0 9px 28px rgba(var(--theme-rgb), .08);
      backdrop-filter: blur(14px);
    }

    .mode-tab {
      min-height: 40px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #65848a;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .05em;
      transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
    }

    .mode-tab[aria-selected="true"] {
      background:
        linear-gradient(
          135deg,
          var(--theme-primary),
          var(--theme-deep)
        );
      color: #fff;
      box-shadow:
        0 7px 20px rgba(var(--theme-rgb), .22);
    }

    .main-view {
      position: relative;
      z-index: 2;
      animation: view-in .25s ease;
    }

    @keyframes view-in {
      from {
        opacity: 0;
        transform: translateY(5px);
      }
    }

    .hero {
      max-width: 1120px;
      position: relative;
      z-index: 2;
      margin: 8px auto 0;
      text-align: center;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #548994;
      font-size: 11px;
      letter-spacing: .24em;
    }

    .eyebrow span {
      width: 45px;
      height: 1px;
      background:
        linear-gradient(
          90deg,
          transparent,
          #66aab4
        );
    }

    .eyebrow span:last-child {
      transform: scaleX(-1);
    }

    .banner-name {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .12em;
    }

    .stats-panel {
      max-width: 1040px;
      margin: 11px auto 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .64);
      box-shadow:
        0 10px 30px rgba(54, 115, 131, .08);
      backdrop-filter: blur(14px);
    }

    .stats-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 12px 8px 16px;
      border-bottom: 1px solid #d5e6e7;
      text-align: left;
    }

    .stats-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .stats-title b {
      color: #1d5663;
      font-family: Georgia, "Songti SC", serif;
      font-size: 16px;
      letter-spacing: .08em;
    }

    .stats-title small {
      color: #86a0a6;
      font-size: 8px;
      letter-spacing: .13em;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1px;
      background: #d5e6e7;
    }

    .stats-grid .pity-item {
      background: rgba(255, 255, 255, .72);
    }

    .stats-grid .pity-item + .pity-item::before {
      display: none;
    }

    .pity-item {
      min-width: 0;
      position: relative;
      padding: 10px 16px;
      text-align: left;
    }

    .pity-item + .pity-item::before {
      content: "";
      width: 1px;
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      background: #d5e6e7;
    }

    .pity-label {
      display: block;
      color: #719098;
      font-size: 9px;
      letter-spacing: .12em;
    }

    .pity-value {
      display: block;
      overflow: hidden;
      color: #153f4b;
      font:
        600 18px
        Georgia,
        "Songti SC",
        serif;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pity-value.gold {
      color: #b8872e;
    }

    .pity-value i {
      margin-left: 3px;
      color: #86a0a6;
      font:
        normal 10px
        Arial,
        sans-serif;
    }

    .pity-detail {
      display: block;
      overflow: hidden;
      color: #86a0a6;
      font-size: 8px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .luck-value {
      color: #8a6124;
      font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
      font-size: 13px;
      letter-spacing: 0;
    }

    progress {
      width: 100%;
      height: 3px;
      display: block;
      margin-top: 5px;
      border: 0;
      accent-color: var(--theme-primary);
    }

    .stats-panel progress {
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      appearance: none;
      -webkit-appearance: none;
      background: #dfe4e5;
      accent-color: var(--theme-primary);
    }

    .stats-panel progress::-webkit-progress-bar {
      border-radius: 999px;
      background: #dfe4e5;
    }

    .stats-panel progress::-webkit-progress-value {
      border-radius: 999px;
      background: var(--theme-primary);
      transition: width .25s ease;
    }

    .stats-panel progress::-moz-progress-bar {
      border-radius: 999px;
      background: var(--theme-primary);
      transition: width .25s ease;
    }

    .result-stage {
      max-width: 1280px;
      min-height: 245px;
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      margin: 17px auto 12px;
      padding: 14px;
      border:
        1px solid rgba(var(--theme-rgb), .22);
      border-radius: 24px;
      background:
        linear-gradient(
          120deg,
          rgba(255, 255, 255, .55),
          rgba(236, 249, 247, .7)
        );
      box-shadow:
        var(--shadow),
        inset 0 1px #fff;
      backdrop-filter: blur(12px);
    }

    .empty {
      color: #71939a;
      text-align: center;
    }

    .empty-symbol {
      color: #77bec7;
      font-size: 34px;
    }

    .empty p {
      margin: 4px 0;
      color: #416d76;
      font:
        18px
        Georgia,
        "Songti SC",
        serif;
      letter-spacing: .12em;
    }

    .empty small {
      font-size: 10px;
      letter-spacing: .06em;
    }

    .result-grid {
      width: 100%;
      display: grid;
      grid-template-columns:
        repeat(10, minmax(0, 1fr));
      gap: 8px;
      align-items: stretch;
    }

    .result-grid.single {
      grid-template-columns:
        minmax(240px, 360px);
      justify-content: center;
    }

    .result-card {
      min-width: 0;
      min-height: 184px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: visible;
      padding: 11px 7px 9px;
      border: 1px solid #c5dfe2;
      border-radius: 14px;
      background: #f8ffff;
      box-shadow:
        0 8px 20px rgba(47, 109, 120, .09);
      cursor: help;
      color: inherit;
      font: inherit;
      text-align: center;
      touch-action: manipulation;
      opacity: 0;
      transform:
        translateY(12px)
        scale(.96);
      animation: reveal .42s ease forwards;
    }

    .result-card:hover,
    .result-card:focus-visible,
    .result-card.is-active {
      z-index: 10;
      outline:
        2px solid rgba(68, 160, 178, .45);
      outline-offset: 2px;
      transform: translateY(-2px);
    }

    .result-card::before {
      content: "";
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: inherit;
      background:
        linear-gradient(
          155deg,
          transparent 40%,
          rgba(119, 191, 203, .09)
        );
      pointer-events: none;
    }

    .result-card.rarity-4 {
      border-color: #c6b6dc;
      background:
        linear-gradient(
          150deg,
          #fffcff,
          #e8ddf4
        );
    }

    .result-card.rarity-5 {
      border-color: #edce83;
      background:
        linear-gradient(
          150deg,
          #fffdf3,
          #f6dfae
        );
      box-shadow:
        0 10px 28px rgba(204, 150, 53, .28);
    }

    @keyframes reveal {
      to {
        opacity: 1;
        transform: none;
      }
    }

    .rarity {
      position: relative;
      color: #79a4aa;
      font-size: 9px;
      letter-spacing: -1px;
      white-space: nowrap;
    }

    .rarity-4 .rarity {
      color: #9574b8;
    }

    .rarity-5 .rarity {
      color: #d39729;
    }

    .item-icon {
      width: 43px;
      height: 43px;
      position: relative;
      display: grid;
      place-items: center;
      margin: 8px 0;
      border: 1px solid currentColor;
      border-radius: 50%;
      background: rgba(255, 255, 255, .48);
      color: #6fa7b0;
      font-size: 19px;
    }

    .rarity-4 .item-icon {
      color: #9274ac;
    }

    .rarity-5 .item-icon {
      color: #be8829;
    }

    .result-name {
      position: relative;
      font-size: 12px;
      line-height: 1.3;
      word-break: break-word;
    }

    .result-type {
      position: relative;
      margin-top: 3px;
      color: #759098;
      font-size: 8px;
    }

    .mechanism {
      width: 244px;
      max-width: calc(100vw - 40px);
      position: absolute;
      z-index: 20;
      left: 50%;
      bottom: calc(100% + 10px);
      padding: 11px 12px;
      border:
        1px solid rgba(174, 209, 214, .95);
      border-radius: 12px;
      background: rgba(250, 255, 254, .97);
      color: #365e67;
      box-shadow:
        0 16px 38px rgba(23, 75, 89, .2);
      font-size: 11px;
      line-height: 1.5;
      text-align: left;
      opacity: 0;
      pointer-events: none;
      transform:
        translate(-50%, 8px)
        scale(.97);
      transform-origin: 50% 100%;
      transition:
        opacity .16s ease,
        transform .16s ease;
    }

    .mechanism span {
      display: block;
      margin-bottom: 4px;
      color: #27889a;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .16em;
    }

    .mechanism::after {
      content: "";
      width: 10px;
      height: 10px;
      position: absolute;
      left: calc(50% - 5px);
      bottom: -6px;
      border-right:
        1px solid rgba(174, 209, 214, .95);
      border-bottom:
        1px solid rgba(174, 209, 214, .95);
      background: #fafffe;
      transform: rotate(45deg);
    }

    .result-card:hover .mechanism,
    .result-card:focus-visible .mechanism,
    .result-card:focus-within .mechanism,
    .result-card.is-active .mechanism {
      opacity: 1;
      transform:
        translate(-50%, 0)
        scale(1);
    }

    .result-grid:not(.single)
    .result-card:nth-child(-n+2)
    .mechanism {
      left: -4px;
      transform:
        translate(0, 8px)
        scale(.97);
      transform-origin: 18px 100%;
    }

    .result-grid:not(.single)
    .result-card:nth-child(-n+2)
    .mechanism::after {
      left: 18px;
    }

    .result-grid:not(.single)
    .result-card:nth-child(-n+2):hover
    .mechanism,

    .result-grid:not(.single)
    .result-card:nth-child(-n+2):focus-visible
    .mechanism,

    .result-grid:not(.single)
    .result-card:nth-child(-n+2):focus-within
    .mechanism,

    .result-grid:not(.single)
    .result-card:nth-child(-n+2).is-active
    .mechanism {
      transform:
        translate(0, 0)
        scale(1);
    }

    .result-grid:not(.single)
    .result-card:nth-last-child(-n+2)
    .mechanism {
      right: -4px;
      left: auto;
      transform:
        translate(0, 8px)
        scale(.97);
      transform-origin:
        calc(100% - 18px) 100%;
    }

    .result-grid:not(.single)
    .result-card:nth-last-child(-n+2)
    .mechanism::after {
      right: 18px;
      left: auto;
    }

    .result-grid:not(.single)
    .result-card:nth-last-child(-n+2):hover
    .mechanism,

    .result-grid:not(.single)
    .result-card:nth-last-child(-n+2):focus-visible
    .mechanism,

    .result-grid:not(.single)
    .result-card:nth-last-child(-n+2):focus-within
    .mechanism,

    .result-grid:not(.single)
    .result-card:nth-last-child(-n+2).is-active
    .mechanism {
      transform:
        translate(0, 0)
        scale(1);
    }

    .pity-note {
      position: relative;
      margin-top: 4px;
      color: #a37d37;
      font-size: 8px;
    }

    .wish-controls {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: center;
      gap: 13px;
    }

    .wish-button {
      width: 184px;
      min-height: 57px;
      border: 1px solid #a4cfd3;
      border-radius: 14px;
      background:
        linear-gradient(
          #fff,
          #ecf8f6
        );
      color: #235965;
      box-shadow:
        0 10px 28px rgba(45, 114, 128, .12);
      transition:
        transform .18s ease,
        box-shadow .18s ease;
    }

    .wish-button:hover {
      transform: translateY(-2px);
      box-shadow:
        0 14px 32px rgba(45, 114, 128, .18);
    }

    .wish-button:active {
      transform: translateY(1px);
    }

    .wish-button:disabled {
      cursor: wait;
      opacity: .55;
    }

    .wish-button strong {
      display: block;
      font-size: 14px;
      letter-spacing: .08em;
    }

    .wish-button small {
      color: #7d9ca2;
      font-size: 9px;
    }

    .wish-button.ten {
      border-color: var(--theme-primary);
      background:
        linear-gradient(
          135deg,
          var(--theme-primary),
          var(--theme-deep)
        );
      color: #fff;
    }

    .wish-button.ten small {
      color: #d8f2f2;
    }

    .rules-link {
      position: relative;
      z-index: 3;
      display: block;
      margin: 11px auto 0;
      padding: 5px 10px;
      border: 0;
      background: transparent;
      color: #6f9298;
      font-size: 9px;
      letter-spacing: .08em;
    }

    .rules-link span {
      color: #2a8a99;
    }

    .tiny-footer {
      position: relative;
      z-index: 2;
      margin: 10px auto 0;
      color: #88a3a8;
      font-size: 8px;
      text-align: center;
    }

    .modal-backdrop {
      position: fixed;
      z-index: 20;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(18, 58, 70, .42);
      backdrop-filter: blur(8px);
      animation: fade .18s ease;
    }

    @keyframes fade {
      from {
        opacity: 0;
      }
    }

    .modal {
      width: min(650px, 100%);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid #fff;
      border-radius: 24px;
      background: #f9fdfc;
      box-shadow:
        0 30px 100px rgba(14, 57, 72, .4);
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 22px 14px;
      border-bottom: 1px solid #dcebec;
    }

    .modal-head span {
      color: #5e929c;
      font-size: 9px;
      letter-spacing: .2em;
    }

    .modal-head h2 {
      margin: 2px 0;
      font:
        26px
        Georgia,
        "Songti SC",
        serif;
    }

    .close-button {
      width: 36px;
      height: 36px;
      border: 1px solid #cee1e3;
      border-radius: 50%;
      background: #fff;
      color: #66868c;
      font-size: 22px;
    }

    .modal-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      overflow: auto;
      padding: 18px 22px;
    }

    .settings-body {
      grid-template-columns: 1fr 1fr;
    }

    .settings-modal {
      width: min(780px, 100%);
    }

    .settings-section,
    .up-reset-row {
      grid-column: 1 / -1;
      padding: 14px;
      border:
        1px solid rgba(var(--theme-rgb), .2);
      border-radius: 15px;
      background:
        linear-gradient(
          145deg,
          #fff,
          var(--theme-pale)
        );
    }

    .up-reset-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .up-reset-row b,
    .settings-section-head b,
    .settings-section summary b {
      display: block;
      color: #285d67;
      font-size: 12px;
    }

    .up-reset-row small,
    .settings-section-head small,
    .settings-section summary small {
      display: block;
      margin-top: 3px;
      color: #789399;
      font-size: 9px;
      line-height: 1.6;
    }

    .up-reset-button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid #bfdadd;
      border-radius: 9px;
      background: #fff;
      color: #39727d;
    }

    .settings-section-head {
      margin-bottom: 12px;
    }

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

    details.settings-section summary {
      cursor: pointer;
      list-style-position: outside;
      margin-left: 14px;
    }

    details.settings-section[open] summary {
      margin-bottom: 12px;
    }

    .settings-state-note {
      grid-column: 1 / -1;
      margin: 0;
      color: #789399;
      font-size: 9px;
      line-height: 1.65;
    }

    .pool-manager {
      grid-column: 1 / -1;
      padding: 14px;
      border:
        1px solid rgba(var(--theme-rgb), .2);
      border-radius: 15px;
      background:
        linear-gradient(
          145deg,
          #fff,
          var(--theme-pale)
        );
    }

    .pool-manager-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .pool-manager-head b {
      color: #285d67;
      font-size: 12px;
    }

    .pool-manager-head small {
      color: #8ba2a6;
      font-size: 8px;
      text-align: right;
    }

    .pool-manager-grid {
      display: grid;
      grid-template-columns:
        minmax(150px, .9fr)
        minmax(180px, 1.1fr);
      gap: 10px;
    }

    .pool-manager-list {
      width: 100%;
      min-height: 168px;
      padding: 7px;
      border: 1px solid #c7dee0;
      border-radius: 10px;
      background: #fff;
      color: #244f58;
      font-size: 10px;
    }

    .pool-manager-tools {
      display: grid;
      align-content: start;
      gap: 8px;
    }

    .pool-manager-tools select,
    .pool-manager-tools input {
      width: 100%;
      min-height: 39px;
      padding: 8px 9px;
      border: 1px solid #c7dee0;
      border-radius: 9px;
      background: #fff;
      color: #244f58;
    }

    .pool-manager-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }

    .pool-manager-actions button {
      min-height: 37px;
      padding: 0 8px;
      border: 1px solid #bdd9dc;
      border-radius: 9px;
      background: #fff;
      color: #49727a;
      font-size: 9px;
      font-weight: 700;
    }

    .pool-manager-actions .add-item {
      border-color: var(--theme-primary);
      background: var(--theme-primary);
      color: #fff;
    }

    .pool-manager-actions .delete-item {
      border-color: #e0c5bf;
      color: #a35b4b;
    }

    .pool-manager-actions button:last-child {
      grid-column: 1 / -1;
    }

    .pool-manager-note {
      margin: 0;
      color: #879ea3;
      font-size: 8px;
      line-height: 1.6;
    }

    .field {
      display: block;
      min-width: 0;
    }

    .field > span {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
      color: #3c6c76;
      font-size: 11px;
      font-weight: 700;
    }

    .field > span small {
      color: #94aaae;
      font-size: 8px;
      font-weight: 400;
      text-align: right;
    }

    .field select {
      width: 100%;
      padding: 9px;
      border: 1px solid #c7dee0;
      border-radius: 10px;
      outline: none;
      background: #fff;
      color: #244f58;
    }

    .field input {
      width: 100%;
      min-height: 40px;
      padding: 9px 10px;
      border: 1px solid #c7dee0;
      border-radius: 10px;
      outline: none;
      background: #fff;
      color: #244f58;
    }

    .field select[multiple] {
      height: 142px;
      font-size: 10px;
    }

    .field select[multiple] option {
      padding: 4px;
      border-radius: 4px;
    }

    .triple {
      display: grid;
      gap: 6px;
    }

    .triple select {
      padding: 7px;
    }

    .modal-foot {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 22px 20px;
      border-top: 1px solid #dcebec;
    }

    .modal-foot button {
      padding: 10px 17px;
      border-radius: 10px;
    }

    .danger-button {
      margin-right: auto;
      border: 1px solid #e2c9c3;
      background: #fff;
      color: #a35b4b;
    }

    .secondary-button {
      border: 1px solid #c7dee0;
      background: #fff;
      color: #4a747c;
    }

    .primary-button {
      min-width: 110px;
      border: 1px solid #2b8998;
      background: #277f90;
      color: #fff;
    }

    .rules-modal {
      width: min(590px, 100%);
    }

    .prediction-page {
      width: min(1080px, 100%);
      margin: 18px auto 0;
    }

    .prediction-shell {
      overflow: hidden;
      border:
        1px solid rgba(var(--theme-rgb), .22);
      border-radius: 24px;
      background: rgba(249, 253, 252, .82);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .prediction-page-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 24px 17px;
      border-bottom:
        1px solid rgba(var(--theme-rgb), .15);
    }

    .prediction-page-head span {
      color: var(--theme-primary);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .2em;
    }

    .prediction-page-head h2 {
      margin: 3px 0 0;
      color: #183f49;
      font:
        28px Georgia,
        "Songti SC",
        serif;
    }

    .prediction-page-head p {
      max-width: 440px;
      margin: 0;
      color: #728e94;
      font-size: 9px;
      line-height: 1.65;
      text-align: right;
    }

    .prediction-body {
      min-height: 0;
      flex: 1;
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 0;
      overflow: hidden;
      padding: 0;
    }

    .prediction-controls {
      display: grid;
      align-content: start;
      gap: 13px;
      overflow: auto;
      padding: 18px 20px;
      border-right: 1px solid #dcebec;
      background: var(--theme-pale);
    }

    .prediction-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
    }

    .prediction-form-grid .full-span {
      grid-column: 1 / -1;
    }

    .resource-total {
      padding: 13px;
      border: 1px solid #c7e2e3;
      border-radius: 14px;
      background: #fff;
    }

    .resource-total span {
      display: block;
      color: #6f9298;
      font-size: 9px;
      letter-spacing: .1em;
    }

    .resource-total strong {
      display: block;
      margin-top: 2px;
      color: #176e80;
      font:
        600 30px
        Georgia,
        "Songti SC",
        serif;
    }

    .resource-total small {
      display: block;
      margin-top: 4px;
      color: #819ba0;
      font-size: 9px;
      line-height: 1.55;
    }

    .prediction-assumption {
      margin: 0;
      padding: 10px 11px;
      border-radius: 10px;
      background: #e8f3f2;
      color: #657f84;
      font-size: 9px;
      line-height: 1.6;
    }

    .prediction-run {
      min-height: 44px;
      border: 1px solid var(--theme-primary);
      border-radius: 11px;
      background:
        linear-gradient(
          135deg,
          var(--theme-primary),
          var(--theme-deep)
        );
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .prediction-run-progress {
      height: 5px;
      margin: -5px 0 0;
    }

    .prediction-run-status {
      min-height: 14px;
      margin: -5px 0 0;
      color: #7b9398;
      font-size: 8px;
      text-align: center;
    }

    .prediction-results {
      min-width: 0;
      overflow: auto;
      padding: 18px 20px;
      background: #fbfefd;
    }

    .prediction-placeholder {
      min-height: 100%;
      display: grid;
      place-items: center;
      padding: 40px 20px;
      color: #7e999e;
      font-size: 11px;
      line-height: 1.7;
      text-align: center;
    }

    .prediction-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 14px;
    }

    .prediction-summary article {
      min-width: 0;
      padding: 10px;
      border: 1px solid #d3e7e8;
      border-radius: 11px;
      background: #fff;
    }

    .prediction-summary span {
      display: block;
      color: #76949a;
      font-size: 8px;
      letter-spacing: .08em;
    }

    .prediction-summary strong {
      display: block;
      margin-top: 3px;
      overflow: hidden;
      color: #1d5966;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .prediction-distribution {
      margin-bottom: 14px;
      padding: 14px;
      border: 1px solid #d3e7e8;
      border-radius: 14px;
      background: #fff;
    }

    .distribution-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 11px;
    }

    .distribution-head > div > span {
      display: block;
      color: var(--theme-primary);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .14em;
    }

    .distribution-head h3 {
      margin: 3px 0 0;
      color: #244f58;
      font:
        600 18px
        Georgia,
        "Songti SC",
        serif;
    }

    .distribution-head p {
      margin: 4px 0 0;
      color: #789399;
      font-size: 9px;
      line-height: 1.55;
    }

    .distribution-bin-size {
      flex: 0 0 auto;
    }

    .distribution-bin-size span {
      display: block;
      margin-bottom: 4px;
      color: #789399;
      font-size: 8px;
    }

    .distribution-bin-size select {
      min-height: 34px;
      padding: 6px 24px 6px 9px;
      border: 1px solid #c7dee0;
      border-radius: 9px;
      background: #f9fdfc;
      color: #285d67;
      font-size: 9px;
    }

    .distribution-overview {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 10px;
    }

    .distribution-chip {
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--theme-soft);
      color: var(--theme-deep);
      font-size: 8px;
    }

    .distribution-chip.failure {
      background: #f7ebe7;
      color: #9b5f51;
    }

    .distribution-scale {
      margin-left: auto;
      color: #89a0a5;
      font-size: 8px;
    }

    .histogram-scroll {
      width: 100%;
      overflow-x: auto;
      padding: 4px 1px 8px;
      scrollbar-color: #b9d6d9 transparent;
      scrollbar-width: thin;
    }

    .prediction-histogram {
      min-width: max-content;
      display: grid;
      grid-auto-columns: 68px;
      grid-auto-flow: column;
      align-items: end;
      gap: 3px;
    }

    .prediction-histogram.is-empty {
      min-width: 100%;
      display: block;
    }

    .histogram-column {
      display: grid;
      grid-template-rows: 38px 172px 23px;
      min-width: 0;
      outline: none;
    }

    .histogram-stat {
      align-self: end;
      padding-bottom: 5px;
      text-align: center;
    }

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

    .histogram-stat strong {
      color: #285d67;
      font-size: 9px;
    }

    .histogram-stat small {
      margin-top: 1px;
      color: #7d999e;
      font-size: 7px;
    }

    .histogram-track {
      display: flex;
      align-items: flex-end;
      padding: 0 2px;
      border-bottom: 1px solid #a8cbcf;
      background:
        repeating-linear-gradient(
          to top,
          transparent 0,
          transparent 42px,
          rgba(var(--theme-rgb), .09) 43px
        );
    }

    .histogram-bar {
      width: 100%;
      min-height: 0;
      border-radius: 6px 6px 2px 2px;
      background:
        linear-gradient(
          to top,
          var(--theme-primary),
          var(--theme-accent)
        );
      box-shadow:
        0 5px 14px rgba(var(--theme-rgb), .18);
      opacity: .88;
      transform-origin: bottom;
      transition:
        opacity .16s ease,
        transform .16s ease;
    }

    .histogram-column:hover .histogram-bar,
    .histogram-column:focus-visible .histogram-bar {
      opacity: 1;
      transform: scaleX(1.06);
    }

    .histogram-range {
      align-self: end;
      overflow: hidden;
      padding-top: 6px;
      color: #6f8d93;
      font-size: 8px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .histogram-empty {
      min-height: 180px;
      display: grid;
      place-items: center;
      padding: 20px;
      border: 1px dashed #c9dfe1;
      border-radius: 10px;
      color: #789399;
      font-size: 10px;
      line-height: 1.7;
      text-align: center;
    }

    .prediction-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px;
      border: 1px solid #d3e7e8;
      border-radius: 12px;
      background: #fff;
    }

    .prediction-actions p {
      margin: 0;
      color: #6f8d93;
      font-size: 9px;
      line-height: 1.6;
    }

    .prediction-download {
      min-height: 38px;
      flex: 0 0 auto;
      padding: 0 14px;
      border: 1px solid #5babb7;
      border-radius: 10px;
      background: #eefafa;
      color: #216f80;
      font-size: 10px;
      font-weight: 700;
    }

    .guide-list {
      display: grid;
      gap: 11px;
      overflow: auto;
      padding: 18px 24px 22px;
    }

    .guide-list article {
      padding: 12px 13px;
      border:
        1px solid rgba(var(--theme-rgb), .16);
      border-radius: 12px;
      background: #fff;
    }

    .guide-list b {
      display: block;
      margin-bottom: 4px;
      color: var(--theme-primary);
      font-size: 12px;
    }

    .guide-list p {
      margin: 0;
      color: #55757c;
      font-size: 10px;
      line-height: 1.7;
    }

    .rules {
      overflow: auto;
      padding: 18px 25px;
    }

    .rules p {
      margin: 0 0 12px;
      color: #456b73;
      font-size: 12px;
      line-height: 1.75;
    }

    .rules b {
      margin-right: 5px;
      color: #176e80;
    }

    .rules .note {
      padding: 12px;
      border-radius: 12px;
      background: #eef6f5;
      color: #718b90;
      font-size: 10px;
    }

    .toast {
      min-width: 180px;
      max-width: calc(100vw - 32px);
      position: fixed;
      z-index: 50;
      left: 50%;
      bottom: 26px;
      padding: 11px 16px;
      border:
        1px solid rgba(255, 255, 255, .65);
      border-radius: 12px;
      background: rgba(20, 72, 84, .92);
      color: #fff;
      box-shadow:
        0 15px 45px rgba(11, 50, 61, .25);
      font-size: 12px;
      text-align: center;
      transform: translateX(-50%);
    }

    @media (max-width: 820px) {
      .wish-page {
        padding: 16px 12px 28px;
      }

      .brand small {
        display: none;
      }

      .hero {
        margin-top: 5px;
      }

      .featured-roster {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 10px;
      }

      .mode-tabs {
        margin-top: 9px;
      }

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

      .result-stage {
        display: block;
        min-height: 240px;
        margin-top: 13px;
        padding: 10px;
      }

      .result-grid {
        gap: 8px;
      }

      .result-grid.single {
        grid-template-columns:
          minmax(220px, 340px);
      }

      .result-grid:not(.single) {
        grid-template-columns: 1fr;
        grid-template-rows:
          repeat(10, auto);
      }

      .result-grid:not(.single) .result-card {
        min-height: 74px;
        display: grid;
        grid-template-columns:
          50px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 2px 10px;
        padding: 9px 12px;
        text-align: left;
      }

      .result-grid:not(.single) .item-icon {
        width: 44px;
        height: 44px;
        grid-column: 1;
        grid-row: 1 / 3;
        margin: 0;
      }

      .result-grid:not(.single) .result-name {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 14px;
      }

      .result-grid:not(.single) .rarity {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        font-size: 10px;
        letter-spacing: 0;
      }

      .result-grid:not(.single) .result-type {
        grid-column: 3;
        grid-row: 1;
        align-self: end;
        margin: 0;
        font-size: 9px;
      }

      .result-grid:not(.single) .pity-note {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
        margin: 0;
      }

      .result-grid:not(.single) .mechanism,
      .result-grid:not(.single)
      .result-card:nth-child(-n+2)
      .mechanism,
      .result-grid:not(.single)
      .result-card:nth-last-child(-n+2)
      .mechanism {
        width: auto;
        max-width: none;
        inset: 7px 7px 7px 66px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transform:
          translateY(4px)
          scale(.99);
        transform-origin: 50% 50%;
      }

      .result-grid:not(.single)
      .mechanism::after {
        display: none;
      }

      .result-grid:not(.single)
      .result-card:hover
      .mechanism,

      .result-grid:not(.single)
      .result-card:focus-visible
      .mechanism,

      .result-grid:not(.single)
      .result-card:focus-within
      .mechanism,

      .result-grid:not(.single)
      .result-card.is-active
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-child(-n+2):hover
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-child(-n+2):focus-visible
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-child(-n+2):focus-within
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-child(-n+2).is-active
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-last-child(-n+2):hover
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-last-child(-n+2):focus-visible
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-last-child(-n+2):focus-within
      .mechanism,

      .result-grid:not(.single)
      .result-card:nth-last-child(-n+2).is-active
      .mechanism {
        transform:
          translateY(0)
          scale(1);
      }

      .modal-body {
        grid-template-columns: 1fr;
      }

      .settings-body {
        grid-template-columns: 1fr;
      }

      .settings-section,
      .up-reset-row {
        grid-column: auto;
      }

      .pool-manager {
        grid-column: auto;
      }

      .prediction-body {
        grid-template-columns: 1fr;
        overflow: visible;
      }

      .prediction-controls {
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid #dcebec;
      }

      .prediction-results {
        overflow: visible;
      }

      .prediction-page-head {
        align-items: start;
        flex-direction: column;
        gap: 7px;
      }

      .prediction-page-head p {
        max-width: none;
        text-align: left;
      }

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

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

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

      .distribution-bin-size select {
        width: 100%;
      }

      .distribution-scale {
        width: 100%;
        margin-left: 0;
      }

      .prediction-download {
        width: 100%;
      }

      .wish-button {
        width: min(45vw, 184px);
      }
    }

    @media (max-width: 680px) {
      .featured-roster {
        grid-template-columns: 1fr;
        margin-top: 10px;
      }
    }

    @media (max-width: 480px) {
      .topbar {
        min-height: 46px;
      }

      .top-left {
        gap: 7px;
      }

      .home-button {
        width: 36px;
        min-height: 36px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
      }

      .home-button span {
        font-size: 17px;
      }

      .brand-mark {
        width: 34px;
        height: 34px;
      }

      .brand b {
        font-size: 16px;
      }

      .icon-button {
        width: 36px;
        height: 36px;
      }

      .top-actions {
        gap: 6px;
      }

      .mode-tabs {
        border-radius: 13px;
      }

      .mode-tab {
        min-height: 38px;
        padding: 0 6px;
        font-size: 10px;
      }

      .featured-five-card {
        min-height: 72px;
        padding: 11px 13px;
      }

      .featured-five-card strong {
        font-size: 20px;
      }

      .featured-four-card {
        min-height: 68px;
        padding: 9px 8px;
      }

      .featured-four-card strong {
        font-size: 12px;
      }

      .eyebrow {
        font-size: 9px;
        letter-spacing: .15em;
      }

      .banner-name {
        font-size: 10px;
      }

      .pity-item {
        padding: 9px 10px;
      }

      .stats-head {
        padding-left: 11px;
      }

      .stats-title small {
        display: none;
      }

      .pity-value {
        font-size: 16px;
      }

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

      .result-grid.single .result-card {
        min-height: 170px;
      }

      .wish-controls {
        gap: 8px;
      }

      .wish-button {
        min-height: 54px;
      }

      .modal-backdrop {
        padding: 10px;
      }

      .modal {
        max-height: 94vh;
        border-radius: 18px;
      }

      .modal-head {
        padding: 16px 16px 11px;
      }

      .modal-body {
        padding: 14px 16px;
      }

      .prediction-body {
        padding: 0;
      }

      .prediction-page {
        margin-top: 12px;
      }

      .prediction-shell {
        border-radius: 18px;
      }

      .prediction-page-head {
        padding: 17px 16px 13px;
      }

      .prediction-page-head h2 {
        font-size: 23px;
      }

      .prediction-controls,
      .prediction-results {
        padding: 14px 16px;
      }

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

      .prediction-form-grid .full-span {
        grid-column: auto;
      }

      .pool-manager-grid {
        grid-template-columns: 1fr;
      }

      .settings-state-grid {
        grid-template-columns: 1fr 1fr;
      }

      .pool-manager-list {
        min-height: 138px;
      }

      .up-reset-row {
        align-items: flex-start;
        flex-direction: column;
      }

      .up-reset-button {
        width: 100%;
      }

      .modal-foot {
        flex-wrap: wrap;
        padding: 12px 16px 16px;
      }

      .danger-button {
        width: 100%;
        margin-right: 0;
      }

      .secondary-button,
      .primary-button {
        flex: 1;
      }
    }

    @media (max-width: 480px) {
      .settings-state-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

    /* External image preview: fixed frames keep the layout stable while loading. */
    .remote-art { position: relative; display: grid; place-items: center; overflow: hidden;
      flex-shrink: 0; border-radius: 14px; background: rgba(255,255,255,.52); }
    .remote-art img { position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: contain; opacity: 0; transition: opacity .18s ease; }
    .remote-art.is-loaded img { opacity: 1; }
    .asset-fallback { font-size: 28px; color: var(--theme-deep); }
    .remote-art.is-loaded .asset-fallback { visibility: hidden; }
    .featured-roster { width: min(1080px,100%); grid-template-columns: minmax(300px,1.12fr) minmax(0,1.88fr); }
    .featured-five-card { grid-template-columns: 82px minmax(0,1fr) auto; min-height: 116px; padding: 13px; }
    .featured-avatar { width: 82px; height: 82px; border: 1px solid rgba(211,151,41,.38);
      background: linear-gradient(140deg,#fff9ed,rgba(225,186,102,.25)); }
    .featured-four-card { display: flex; flex-direction: row; align-items: center; gap: 9px;
      min-height: 116px; padding: 12px 9px; }
    .featured-four-card .featured-avatar { width: 58px; height: 66px; border-color: rgba(149,116,184,.3);
      background: linear-gradient(145deg,#fffbff,rgba(189,162,222,.2)); }
    .featured-four-copy { min-width: 0; }
    .featured-four-card strong { font-size: 15px; }
    .featured-four-element { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .element-badge { gap: 4px; }
    .element-art { width: 21px; height: 21px; border-radius: 50%; background: rgba(255,255,255,.92); }
    .element-art .asset-fallback { font-size: 11px; }
    .element-art img { padding: 2px; }
    .item-icon.remote-art { width: 100%; max-width: 106px; height: 112px; margin: 7px 0 10px;
      border: 0; border-radius: 11px; background: rgba(255,255,255,.36); }
    .item-icon.remote-art .asset-fallback { color: inherit; font-size: 35px; }
    .result-card { min-height: 232px; }
    .result-grid.single .item-icon.remote-art { max-width: 180px; height: 170px; }
    .up-selection-preview { display: flex; align-items: center; gap: 7px; margin-top: 7px;
      padding: 5px 7px; border-radius: 10px; background: rgba(var(--theme-rgb),.05); }
    .up-selection-preview .remote-art { width: 44px; height: 44px; border-radius: 8px; }
    .up-selection-preview small { line-height: 1.5; color: #446b75; font-size: 11px; }
    .image-source-note { margin: 8px auto; text-align: center; color: #577982; font-size: 10px; }
    @media (max-width: 900px) {
      .featured-roster { grid-template-columns: 1fr; width: min(680px,100%); }
      .featured-five-card { min-height: 105px; }
      .featured-four-card { min-height: 91px; }
    }
    @media (max-width: 480px) {
      .featured-five-card { grid-template-columns: 66px minmax(0,1fr) auto; gap: 9px; padding: 10px; min-height: 88px; }
      .featured-five-card .featured-avatar { width: 66px; height: 66px; }
      .featured-five-card strong { font-size: 20px; }
      .featured-four-card { flex-direction: column; gap: 5px; padding: 8px 3px; min-height: 130px; text-align: center; }
      .featured-four-card .featured-avatar { width: 58px; height: 58px; }
      .featured-four-card strong { font-size: 13px; }
      .featured-four-element { justify-content: center; font-size: 8px; }
      .featured-four-element .element-art { width: 17px; height: 17px; }
      .item-icon.remote-art { height: 96px; }
      .result-card { min-height: 210px; }
    }
    @media (prefers-reduced-motion: reduce) { .remote-art img { transition: none; } }

  
/* Resource planning shares the original shell and component language. */
.planning-state { padding: 18px 24px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.65); }
.planning-state-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.planning-state-head h3 { margin:0; font-size:13px; color:var(--theme-deep); }
.planning-state-head p { margin:5px 0 0; font-size:11px; line-height:1.6; color:var(--muted); }
.planning-state-head button { flex-shrink:0; padding:8px 12px; border-radius:9px; font-size:11px; }
.planning-state-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.planning-state-grid.multi-state { grid-template-columns:repeat(3,minmax(0,1fr)); }
.planning-state-grid select { min-height:40px; }
.planning-tabs { display:flex; gap:6px; padding:12px 24px; border-bottom:1px solid var(--line); background:var(--theme-pale); }
.planning-tabs button { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--muted); text-align:left; transition:background .15s ease; }
.planning-tabs button span { font-size:13px; font-weight:700; }
.planning-tabs button small { font-size:10px; }
.planning-tabs button[aria-selected="true"] { background:white; border-color:var(--line); color:var(--theme-deep); box-shadow:0 3px 10px rgba(var(--theme-rgb),.07); }
.planning-tabs button:focus-visible,.settings-nav button:focus-visible { outline:2px solid var(--theme-primary); outline-offset:2px; }
.planning-mode-intro h3 { margin:0 0 7px; font-size:15px; color:var(--theme-deep); }
.planning-mode-intro p,.field-hint { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.field-hint { display:block; margin-top:6px; }
.multi-planning-body { min-height:370px; }
.multi-planning-body .prediction-results { display:flex; flex-direction:column; gap:16px; }
.planner-cancel { padding:10px; border-radius:10px; font-size:12px; }
.planning-placeholder-mark { display:block; font-size:34px; color:var(--theme-primary); opacity:.6; margin-bottom:14px; }
#planner-placeholder h3 { margin:0 0 12px; color:var(--theme-deep); font:23px Georgia,"Songti SC",serif; }
#planner-placeholder p { margin:0; line-height:1.9; }
.planner-summary small { display:block; color:var(--muted); font-size:10px; margin-top:6px; }
.planning-result-detail { margin:18px 0 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--theme-pale); color:var(--theme-deep); font-size:12px; line-height:1.9; }
.planning-result-note { margin:auto 0 0; color:var(--muted); font-size:10px; line-height:1.8; }
/* Settings: stable sidebar, one independently scrolling content area. */
.settings-modal { width:min(940px,100%); height:min(700px,88dvh); max-height:88dvh; }
.settings-modal .modal-head { flex-shrink:0; }
.settings-workspace { display:grid; grid-template-columns:172px minmax(0,1fr); flex:1; min-height:0; }
.settings-nav { display:flex; flex-direction:column; gap:7px; padding:22px 12px; background:var(--theme-pale); border-right:1px solid var(--line); overflow:auto; }
.settings-nav button { display:flex; align-items:center; gap:11px; flex-shrink:0; padding:13px 12px; border:1px solid transparent; border-radius:11px; background:transparent; color:#6c8b93; text-align:left; font-size:12px; }
.settings-nav button>span:first-child { display:grid; place-items:center; width:18px; font-size:17px; color:var(--theme-primary); }
.settings-nav button[aria-selected="true"] { color:var(--theme-deep); background:white; border-color:var(--line); font-weight:700; box-shadow:0 4px 12px rgba(var(--theme-rgb),.06); }
.settings-content { overflow:auto; min-width:0; overscroll-behavior:contain; padding:24px 26px; scrollbar-gutter:stable; }
.settings-page-head { margin-bottom:23px; }
.settings-page-head>span { font-size:10px; letter-spacing:.12em; color:var(--theme-primary); }
.settings-page-head h3 { margin:6px 0 8px; color:var(--theme-deep); font:24px Georgia,"Songti SC",serif; }
.settings-page-head p { margin:0; font-size:11px; color:var(--muted); line-height:1.8; }
.settings-page-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
#settings-panel-banner .settings-page-fields> .field { grid-column:1/-1; }
#settings-panel-banner .triple { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#settings-panel-banner .up-selection-preview { flex-direction:column; align-items:flex-start; }
#settings-panel-banner .up-selection-preview .remote-art { width:70px; height:70px; }
#settings-panel-banner .up-selection-preview small { font-size:10px; line-height:1.5; }
.settings-page .pool-manager { margin:0; }
.settings-page .settings-section { margin:0; }
.settings-footer { flex-shrink:0; align-items:center; background:rgba(255,255,255,.7); }
.settings-footer p { margin:0 auto 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.settings-footer button { flex:none; }
.save-settings { grid-column:1/-1; }
.save-status-card { display:flex; align-items:center; gap:14px; padding:17px; border:1px solid var(--line); border-radius:15px; background:var(--theme-pale); }
.save-status-card>span { font-size:35px; color:var(--theme-primary); }
.save-status-card b { font-size:13px; color:var(--theme-deep); }
.save-settings p,.save-reset-zone p { color:var(--muted); font-size:11px; line-height:1.9; }
.save-status-card p { margin:4px 0 0; }
.save-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:18px 0; }
.save-actions button,.file-button { display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:10px; cursor:pointer; font-size:12px; }
.save-actions a { flex-basis:100%; margin-top:8px; color:var(--theme-primary); font-size:11px; text-underline-offset:4px; }
.save-reset-zone { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:18px; padding-top:21px; border-top:1px solid #ead9d4; }
.save-reset-zone b { color:#9b6153; font-size:12px; }
.save-reset-zone p { margin:4px 0 0; }
.save-reset-zone button { flex-shrink:0; width:auto; margin:0; padding:10px 13px; border-radius:10px; font-size:11px; }
@media(max-width:760px) {
 .planning-state-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .settings-workspace { grid-template-columns:145px minmax(0,1fr); }
 .settings-content { padding:20px 18px; }
 #settings-panel-banner .triple { grid-template-columns:1fr; }
 #settings-panel-banner .up-selection-preview { flex-direction:row; align-items:center; }
 #settings-panel-banner .up-selection-preview .remote-art { width:42px; height:42px; }
}
@media(max-width:600px) {
 .planning-state { padding:16px; }
 .planning-state-head { align-items:flex-start; gap:10px; }
 .planning-state-head p { max-width:200px; }
 .planning-state-head button { max-width:112px; font-size:10px; }
 .planning-state-grid,.planning-state-grid.multi-state { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .planning-tabs { padding:10px 12px; gap:5px; }
 .planning-tabs button { flex-direction:column; align-items:flex-start; gap:5px; padding:11px; }
 .planning-tabs button small { font-size:9px; }
 .multi-planning-body { min-height:0; }
 .settings-modal { height:92dvh; max-height:92dvh; }
 .settings-workspace { display:flex; flex-direction:column; }
 .settings-nav { flex-direction:row; flex-shrink:0; gap:5px; padding:10px; border-right:0; border-bottom:1px solid var(--line); scrollbar-width:thin; }
 .settings-nav button { gap:6px; padding:10px 12px; white-space:nowrap; font-size:11px; }
 .settings-nav button>span:first-child { font-size:14px; width:14px; }
 .settings-content { padding:20px 16px; flex:1; }
 .settings-page-head { margin-bottom:20px; }
 .settings-page-head h3 { font-size:22px; }
 .settings-page-fields { grid-template-columns:1fr; gap:15px; }
 .settings-footer { gap:8px; flex-wrap:wrap; padding:12px 16px; }
 .settings-footer p { width:100%; flex-basis:100%; }
 .settings-footer button { flex:1; }
 .save-reset-zone { align-items:flex-start; flex-direction:column; gap:12px; }
}