:root {
      --bg: #f1f4f9;
      --ink: #111c2d;
      --muted: #6d7a8a;
      --line: #dce3ec;
      --card: #ffffff;
      --brand: #0a66c2;
      --brand-deep: #084d95;
      --ok: #178a5b;
      --btn-green-bg: #e9f8f1;
      --btn-green-border: #c6ead9;
      --btn-green-text: #2b6b51;
      --warn: #c78314;
      --danger: #cc2f47;
      --shadow: 0 10px 28px rgba(17, 39, 67, 0.1);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(1200px 380px at 50% -120px, #d4e6fb 0%, rgba(212, 230, 251, 0) 64%),
        linear-gradient(180deg, #eef3fa 0%, var(--bg) 34%, #edf2f8 100%);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      min-height: 100vh;
    }

    .wrap {
      max-width: 580px;
      margin: 0 auto;
      padding: 14px 14px 26px;
    }

    .container {
      max-width: 580px;
      margin: 0 auto;
      padding: 0 14px 26px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      padding: 16px;
      margin-bottom: 14px;
      background: linear-gradient(135deg, #0d5eb9, #0a78d8 62%, #16a8e6);
      color: #fff;
      box-shadow: var(--shadow);
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      right: -40px;
      top: -70px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
      filter: blur(0.5px);
    }

    .hero h1 {
      position: relative;
      margin: 0;
      font-size: 20px;
      letter-spacing: 0.3px;
    }

    .hero .sub {
      position: relative;
      margin-top: 4px;
      color: rgba(255, 255, 255, 0.88);
      font-size: 13px;
    }

    .hero-toolbar {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hero-menu-trigger {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      flex: 0 0 auto;
    }

    .hero-menu-title {
      margin: 0;
      font-size: 20px;
      letter-spacing: .3px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 1px rgba(3, 30, 64, 0.2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 5px 14px rgba(31, 45, 67, 0.06);
    }

    .login-panel {
      max-width: 430px;
      margin: 0 auto;
    }

    .field { margin-top: 10px; }

    .field label {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .field input {
      width: 100%;
      border: 1px solid #d3dbe5;
      border-radius: 12px;
      padding: 11px 12px;
      font-size: 16px;
      background: #fbfdff;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .field input:focus {
      border-color: #5fa3eb;
      box-shadow: 0 0 0 3px rgba(36, 127, 226, 0.15);
    }

    .field textarea {
      width: 100%;
      border: 1px solid #d3dbe5;
      border-radius: 12px;
      padding: 11px 12px;
      font-size: 14px;
      line-height: 1.5;
      background: #fbfdff;
      outline: none;
      resize: vertical;
      transition: border-color .2s ease, box-shadow .2s ease;
      font-family: inherit;
    }

    .field textarea:focus {
      border-color: #5fa3eb;
      box-shadow: 0 0 0 3px rgba(36, 127, 226, 0.15);
    }

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

    .sheet-inline-field {
      min-width: 0;
    }

    .sheet-textarea-compact {
      min-height: 72px;
    }

    .remember-row {
      margin-top: 10px;
      display: flex;
      align-items: center;
    }

    .remember-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
    }

    .remember-label input {
      width: 14px;
      height: 14px;
      accent-color: #1f76d2;
    }

    .btn {
      border: 0;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform .16s ease, opacity .16s ease;
    }

    .btn:active { transform: scale(0.985); }

    .btn[disabled] {
      opacity: .45;
      cursor: not-allowed;
    }

    .btn-primary {
      width: 100%;
      margin-top: 14px;
      color: var(--btn-green-text);
      background: linear-gradient(135deg, #eafaf2, #def5ea);
      border: 1px solid var(--btn-green-border);
      box-shadow: 0 6px 14px rgba(48, 128, 90, 0.18);
    }

    .btn-ghost {
      color: var(--btn-green-text);
      background: var(--btn-green-bg);
      border: 1px solid var(--btn-green-border);
    }

    .btn-ok {
      color: var(--ok);
      background: #e9f8f1;
      border: 1px solid #c6ead9;
    }

    .btn-danger {
      color: var(--danger);
      background: #ffeef1;
      border: 1px solid #f3c6ce;
    }

    .error {
      color: var(--danger);
      font-size: 12px;
      min-height: 16px;
      margin-top: 8px;
    }

    .hidden { display: none !important; }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      gap: 10px;
    }

    .topbar h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: .2px;
    }

    .hello {
      margin-top: 3px;
      font-size: 12px;
      color: var(--muted);
    }

    .filters {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 5px;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    .filters::-webkit-scrollbar { display: none; }

    .topbar-main {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .menu-trigger {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid var(--btn-green-border);
      background: var(--btn-green-bg);
      color: #3a4f67;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
    }

    .drawer-mask {
      position: fixed;
      inset: 0;
      background: rgba(7, 20, 36, 0.38);
      z-index: 1000;
      opacity: 1;
      transition: opacity .2s ease;
    }

    .drawer-mask.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .side-drawer {
      position: fixed;
      top: 0;
      left: 0;
      width: min(82vw, 300px);
      height: 100vh;
      background: #ffffff;
      border-right: 1px solid #dbe4ee;
      box-shadow: 8px 0 24px rgba(17, 39, 67, 0.16);
      z-index: 1001;
      transform: translateX(0);
      transition: transform .22s ease;
      display: flex;
      flex-direction: column;
    }

    .side-drawer.hidden {
      transform: translateX(-104%);
    }

    .drawer-list {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .drawer-user {
      position: relative;
      overflow: hidden;
      margin: 10px 10px 8px;
      border: 1px solid #cfe1f3;
      border-radius: 14px;
      padding: 12px;
      background: linear-gradient(135deg, #f2f8ff, #e9f3ff 68%, #edf7ff);
      display: grid;
      gap: 8px;
    }

    .drawer-user::after {
      content: "";
      position: absolute;
      width: 84px;
      height: 84px;
      right: -18px;
      top: -32px;
      border-radius: 50%;
      background: rgba(51, 139, 223, 0.12);
    }

    .drawer-user-name {
      position: relative;
      z-index: 1;
      font-size: 13px;
      font-weight: 700;
      color: #22384f;
      margin: 0;
    }

    .drawer-user-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .drawer-logout-btn {
      position: relative;
      z-index: 1;
      border: 1px solid #cddaea;
      background: rgba(255, 255, 255, 0.72);
      color: #5c7088;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
      transition: all .14s ease;
    }

    .drawer-logout-btn:active {
      transform: scale(0.98);
    }

    .drawer-logout-btn:hover {
      border-color: #bbccdf;
      background: rgba(255, 255, 255, 0.9);
      color: #49627d;
    }

    .drawer-user-divider {
      height: 1px;
      margin: 12px 0;
      background: linear-gradient(90deg, rgba(116, 142, 170, 0.28), rgba(116, 142, 170, 0.12));
    }

    .drawer-user-rule-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .drawer-user-rule-title {
      margin: 0;
      font-size: 12px;
      color: #2e4a64;
      font-weight: 700;
    }

    .drawer-user-rule-text {
      margin: 6px 0 0;
      font-size: 12px;
      color: #36506a;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .drawer-user-rule-item {
      padding-left: 2px;
    }

    .drawer-rule-btn {
      border: 1px solid #cddaea;
      background: rgba(255, 255, 255, 0.72);
      color: #4f6883;
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
      transition: all .14s ease;
    }

    .drawer-rule-btn:active {
      transform: scale(0.98);
    }

    .drawer-help-btn {
      border: 1px solid #cddaea;
      background: rgba(255, 255, 255, 0.72);
      color: #4f6883;
      border-radius: 999px;
      width: 16px;
      height: 16px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all .14s ease;
    }

    .drawer-help-btn:active {
      transform: scale(0.98);
    }

    .drawer-help-popover {
      position: relative;
      z-index: 2;
      margin-top: 6px;
      border: 1px solid #d7e4f2;
      background: #f7fbff;
      border-radius: 10px;
      padding: 8px 10px;
    }

    .drawer-help-popover.hidden {
      display: none;
    }

    .drawer-help-title {
      margin: 0 0 4px;
      font-size: 12px;
      font-weight: 700;
      color: #2d4963;
    }

    .drawer-help-text {
      margin: 0;
      font-size: 12px;
      color: #4e6680;
      line-height: 1.4;
    }

    .drawer-item {
      border: 1px solid #dde6f0;
      border-radius: 10px;
      padding: 10px 12px;
      background: #f8fbff;
      color: #23364d;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .drawer-item.active {
      border-color: #83b7ec;
      background: linear-gradient(135deg, #f0f7ff, #e5f1ff);
      box-shadow: 0 4px 10px rgba(20, 101, 181, 0.12);
    }

    .drawer-group {
      display: grid;
      gap: 6px;
    }

    .drawer-group-toggle {
      border: 1px solid #dde6f0;
      border-radius: 10px;
      padding: 10px 12px;
      background: #f8fbff;
      color: #23364d;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .drawer-group.active .drawer-group-toggle,
    .drawer-group-toggle[aria-expanded="true"] {
      border-color: #83b7ec;
      background: linear-gradient(135deg, #f0f7ff, #e5f1ff);
      box-shadow: 0 4px 10px rgba(20, 101, 181, 0.12);
    }

    .drawer-group-chevron {
      font-size: 12px;
      color: #56708c;
      transition: transform .16s ease;
    }

    .drawer-group-toggle[aria-expanded="true"] .drawer-group-chevron {
      transform: rotate(180deg);
    }

    .drawer-sub-list {
      display: grid;
      gap: 6px;
      padding-left: 12px;
    }

    .drawer-sub-list.hidden {
      display: none;
    }

    .drawer-sub-item {
      border: 1px solid #e2eaf3;
      border-radius: 10px;
      padding: 9px 12px;
      background: #ffffff;
      color: #3c536d;
      font-size: 12px;
      text-align: left;
      cursor: pointer;
    }

    .drawer-sub-item.active {
      border-color: #83b7ec;
      background: linear-gradient(135deg, #f6fbff, #eaf4ff);
      color: #1f3e5f;
      box-shadow: 0 4px 10px rgba(20, 101, 181, 0.1);
    }

    .filter-tab {
      cursor: pointer;
      border: 1px solid #d8e1ec;
      border-radius: 999px;
      padding: 5px 8px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      flex: 0 0 auto;
      white-space: nowrap;
      transition: all .18s ease;
    }

    .filter-tab.active {
      border-color: #83b7ec;
      background: linear-gradient(135deg, #f0f7ff, #e5f1ff);
      box-shadow: 0 5px 12px rgba(20, 101, 181, 0.12);
    }

    .filter-tab .txt {
      font-size: 10px;
      font-weight: 500;
      line-height: 1.2;
      color: #41566f;
      margin: 0;
    }

    .order-total {
      margin: 0 0 10px;
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .order-total-main,
    .order-total-summary {
      white-space: nowrap;
    }

    .order-total-divider {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #9ab1c8;
      flex: 0 0 auto;
    }

    .pull-refresh {
      position: fixed;
      left: 50%;
      top: 34%;
      transform: translate(-50%, -50%);
      z-index: 1200;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    .pull-refresh.hidden {
      display: none;
    }

    .pull-refresh-inner {
      transition: opacity .16s ease;
      background: #f0f7ff;
      border: 1px solid #c9ddf3;
      border-radius: 14px;
      color: #345577;
      font-size: 13px;
      font-weight: 700;
      padding: 9px 14px;
      line-height: 1;
      box-shadow: 0 10px 24px rgba(35, 71, 109, 0.2);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .pull-spinner {
      width: 18px;
      height: 18px;
      border: 3px solid #adc8e6;
      border-top-color: #2f79bc;
      border-radius: 50%;
      animation: pull-spin .8s linear infinite;
      flex: 0 0 auto;
    }

    @keyframes pull-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .list-item {
      margin-top: 10px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #fff;
      padding: 12px;
      box-shadow: 0 4px 12px rgba(24, 40, 63, 0.06);
      animation: rise .22s ease both;
    }

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

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

    .card-top-chips {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      flex: 1;
      justify-content: flex-end;
    }

    .title {
      margin: 0;
      font-size: 16px;
      font-weight: 650;
      max-width: 72%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account {
      margin-top: 0;
      color: var(--muted);
      font-size: 12px;
      word-break: break-all;
    }

    .account-row {
      margin-top: 4px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .account-left {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }

    .account-main {
      min-width: 0;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .purchase-brief {
      display: grid;
      gap: 2px;
      color: #5b6f85;
      padding: 0;
      font-size: 12px;
      line-height: 1.3;
    }

    .purchase-brief-line {
      display: block;
      white-space: nowrap;
    }

    @media (max-width: 640px) {
      .sheet-inline-fields {
        grid-template-columns: 1fr;
      }

      #pricingView .pricing-config-grid,
      #pricingView .pricing-metric-grid,
      #pricingView .pricing-account-grid {
        grid-template-columns: 1fr;
      }
    }

    .copy-btn {
      border: 1px solid var(--btn-green-border);
      background: var(--btn-green-bg);
      color: var(--muted);
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
      transition: all .14s ease;
    }

    .copy-btn:active {
      transform: scale(0.97);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 7px;
      border: 1px solid #d7e0ea;
      background: #f7fbff;
      color: #33445a;
      font-size: 10px;
      white-space: nowrap;
    }

    .status-main-chip {
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      vertical-align: middle;
    }

    .chip-black {
      color: var(--danger);
      border-color: #f1c8cf;
      background: #fff4f6;
    }

    .chip-online {
      color: #0b6a40;
      border-color: #bfe5d1;
      background: #eaf8f1;
      font-weight: 600;
    }

    .chip-offline {
      color: #8a5d13;
      border-color: #eed8b3;
      background: #fff7e8;
      font-weight: 600;
    }

    .info-squares {
      margin-top: 8px;
      display: grid;
      grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.15fr);
      gap: 8px;
      align-items: stretch;
    }

    .info-square {
      border: 1px solid #dce6f0;
      border-radius: 12px;
      background: #fbfdff;
      padding: 8px;
      overflow: hidden;
      display: grid;
      align-content: start;
      gap: 6px;
      height: 100%;
    }

    .square-title {
      margin: 0;
      font-size: 11px;
      color: #6f8094;
      line-height: 1.2;
      font-weight: 600;
    }

    .square-line {
      margin: 0;
      color: #4f647b;
      font-size: 12px;
      line-height: 1.35;
    }

    .base-square .mode-val {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      color: #4f647b;
      font-size: 12px;
      line-height: 1.35;
    }

    .base-square .account {
      font-size: 12px;
      line-height: 1.35;
    }

    .game-avatar {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border: 1px solid #d8e2ec;
      background: #fff;
      overflow: hidden;
    }

    .game-avatar svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .game-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .base-square .purchase-brief {
      white-space: normal;
    }

    .channel-square .platforms {
      margin-top: 0;
      gap: 5px;
    }

    .channel-square .plat {
      font-size: 10px;
      padding: 3px 6px;
      border-radius: 7px;
    }

    .rent-countdown-chip {
      display: inline-flex;
      margin-top: 2px;
      width: fit-content;
    }

    .meta-grid {
      margin-top: 9px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .meta {
      border: 1px solid #e0e7ef;
      border-radius: 10px;
      padding: 8px;
      background: #fcfeff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .meta .k,
    .meta .v {
      font-size: 12px;
      font-weight: 600;
      color: #22384f;
      margin: 0;
      line-height: 1.2;
    }

    .mode-val {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .info-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #b9c8d9;
      background: #f3f8ff;
      color: #5a6e84;
      font-size: 11px;
      line-height: 14px;
      text-align: center;
      cursor: pointer;
      padding: 0;
      flex: 0 0 auto;
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(7, 20, 36, 0.42);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 14px;
      z-index: 999;
    }

    .overlay.hidden { display: none; }

    .overlay-card {
      width: min(560px, 100%);
      background: #fff;
      border-radius: 14px;
      border: 1px solid #dbe3ec;
      box-shadow: 0 16px 34px rgba(16, 30, 51, 0.24);
      overflow: hidden;
    }

    .overlay-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid #e2e8f0;
      font-size: 14px;
      font-weight: 600;
    }

    .overlay-close {
      border: 0;
      background: transparent;
      color: #6b7f95;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
    }

    .overlay-body {
      padding: 12px 14px 16px;
      font-size: 13px;
      color: #22384f;
      line-height: 1.6;
      word-break: break-all;
    }

    .sheet {
      position: fixed;
      inset: 0;
      background: rgba(7, 20, 36, 0.42);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 12px;
      z-index: 1002;
    }

    .sheet.hidden { display: none; }

    .sheet-card {
      width: min(620px, 100%);
      background:
        radial-gradient(200px 70px at 92% 0%, rgba(26, 125, 221, 0.12), rgba(26, 125, 221, 0)),
        linear-gradient(180deg, #ffffff, #f7fbff);
      border-radius: 16px;
      border: 1px solid #d5e1ef;
      box-shadow: 0 20px 38px rgba(16, 30, 51, 0.24);
      padding: 12px;
      display: grid;
      gap: 8px;
    }

    .sheet-head {
      padding: 8px 8px 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .sheet-title-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .sheet-icon {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: linear-gradient(135deg, #e9f4ff, #dff0ff);
      border: 1px solid #c9e0f6;
      color: #1f5f99;
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .sheet-title {
      font-size: 16px;
      color: #1f3148;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sheet-result {
      font-size: 14px;
      color: #6b7f95;
      font-weight: 700;
      white-space: nowrap;
    }

    .sheet-result.ok {
      color: #0b6a40;
    }

    .sheet-result.err {
      color: #b5423b;
    }

    .auth-curl-textarea {
      width: 100%;
      min-height: 220px;
      resize: vertical;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #c8d8ea;
      background: #fff;
      color: #17324d;
      font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .auth-curl-textarea:focus {
      outline: none;
      border-color: #2c79d6;
      box-shadow: 0 0 0 3px rgba(44, 121, 214, 0.14);
    }

    .sheet-actions-inline {
      justify-content: flex-start;
      margin-top: 10px;
    }

    .sheet-query-result {
      font-size: 12px;
      line-height: 1;
      padding: 6px 8px;
      border-radius: 999px;
      border: 1px solid #d3deea;
      background: #f3f7fb;
      color: #6b7f95;
      font-weight: 700;
      white-space: nowrap;
    }

    .sheet-query-result.on {
      border-color: #f0b6bc;
      background: #fff4f5;
      color: #b5423b;
    }

    .sheet-query-result.off {
      border-color: #a8d6c0;
      background: #ecfbf3;
      color: #0b6a40;
    }

    .sheet-query-result.err {
      border-color: #f0b6bc;
      background: #fff4f5;
      color: #b5423b;
    }

    .sheet-btn {
      border: 1px solid #d7e1eb;
      border-radius: 9px;
      padding: 7px 8px;
      background: #f8fbff;
      color: #22384f;
      font-size: 11px;
      text-align: center;
      cursor: pointer;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
      min-height: 32px;
    }

    .sheet-btn.warn {
      color: #b5423b;
      border-color: #efc9c5;
      background: #fff4f3;
    }

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

    .sheet-actions-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sheet-actions-4 .sheet-btn {
      font-size: 12px;
      min-height: 30px;
      padding: 6px 6px;
    }

    .mode-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .mode-option-row {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #d7e1eb;
      border-radius: 10px;
      background: #f8fbff;
      padding: 8px 10px;
      min-height: 38px;
      cursor: pointer;
      position: relative;
      width: 100%;
      text-align: left;
      box-sizing: border-box;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
    }

    .mode-name {
      font-size: 13px;
      color: #2f4862;
      font-weight: 600;
      line-height: 1.2;
    }

    .mode-tip-inline {
      margin-left: 4px;
      font-size: 12px;
      color: #607a94;
      line-height: 1.2;
      white-space: nowrap;
    }

    .mode-option-row.active {
      border-color: #b9dfc7;
      background: #eefaf2;
    }

    .mode-option-row.active .mode-name {
      color: #1f5f3f;
    }

    .mode-option-row.active .mode-tip-inline {
      color: #4d7d62;
    }

    .mode-option-row:focus-visible {
      box-shadow: 0 0 0 3px rgba(27, 120, 226, 0.15);
    }

    @media (max-width: 480px) {
      .mode-option-row {
        flex-wrap: wrap;
        align-items: center;
      }

      .mode-tip-inline {
        margin-left: 24px;
      }
    }

    .platforms {
      margin-top: 9px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .plat {
      font-size: 11px;
      padding: 4px 7px;
      border-radius: 8px;
      border: 1px solid #d6e0eb;
      background: #f4f8fc;
      color: #2a3b51;
    }

    .plat-renting {
      color: #1f5f99;
      border-color: #bcd7f1;
      background: #eef6ff;
      font-weight: 600;
    }

    .plat-abnormal {
      color: #b5423b;
      border-color: #efc9c5;
      background: #fff4f3;
      font-weight: 600;
    }

    .ops {
      margin-top: 8px;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .btn-chip {
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 11px;
      line-height: 1;
      font-weight: 600;
      border: 1px solid var(--btn-green-border);
      background: var(--btn-green-bg);
      color: var(--btn-green-text);
      box-shadow: 0 2px 6px rgba(25, 42, 66, 0.08);
      transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
    }

    .btn-chip:hover {
      box-shadow: 0 4px 10px rgba(25, 42, 66, 0.14);
    }

    .btn-chip:active {
      transform: translateY(1px) scale(0.985);
    }

    .btn-chip-ok {
      color: var(--btn-green-text);
      border-color: var(--btn-green-border);
      background: var(--btn-green-bg);
    }

    .btn-chip-danger {
      color: var(--btn-green-text);
      border-color: var(--btn-green-border);
      background: var(--btn-green-bg);
    }

    .pager {
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px;
    }

    .orders-view {
      display: grid;
      gap: 12px;
    }

    #orderView.orders-view {
      gap: 9px;
    }

    #orderView .orders-quick {
      padding-bottom: 0;
    }

    #orderView .orders-game-hint.head-summary-text {
      margin-top: -1px;
    }

    #riskView.orders-view {
      gap: 8px;
    }

    #riskView .order-card {
      margin-bottom: 8px;
    }

    #riskView .pager {
      margin-top: 8px;
    }

    #profileView.profile-view {
      display: grid;
      gap: 10px;
    }

    #profileView .profile-card {
      border-radius: 14px;
      padding: 10px 10px 9px;
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(24, 40, 63, 0.06);
    }

    #profileView .profile-head-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 2px;
    }

    #profileView .auth-title {
      font-size: 15px;
      color: #1a2f46;
      line-height: 1.2;
    }

    #profileView .profile-threshold-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    #profileView .profile-threshold-row > label {
      margin: 0;
      font-size: 11px;
      font-weight: 700;
      color: #75869a;
      white-space: nowrap;
    }

    #profileView .profile-threshold-input-wrap {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid #dce6f0;
      border-radius: 10px;
      min-height: 30px;
      padding: 4px 8px;
      background: #fafcff;
      box-sizing: border-box;
    }

    #profileView .profile-threshold-input {
      width: 56px;
      border: none;
      outline: none;
      padding: 0;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      line-height: 1.1;
      background: transparent;
      color: #2a3a52;
    }

    #profileView .profile-threshold-input-wrap:focus-within {
      border-color: #5fa3eb;
      box-shadow: 0 0 0 3px rgba(36, 127, 226, 0.15);
    }

    #profileView .profile-threshold-unit {
      font-size: 11px;
      color: #75869a;
      line-height: 1;
      white-space: nowrap;
    }

    #profileView .profile-subsection {
      border: 1px solid #e3ebf4;
      border-radius: 12px;
      padding: 10px;
      display: grid;
      gap: 8px;
      background: #fbfdff;
    }

    #profileView .profile-subtitle {
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      color: #3e546d;
    }

    #profileView .profile-field {
      margin-top: 0;
    }

    #profileView .profile-field label {
      margin-bottom: 5px;
      font-size: 11px;
      color: #75869a;
    }

    #profileView .profile-field input {
      border-color: #dce6f0;
      border-radius: 10px;
      min-height: 30px;
      padding: 4px 10px;
      font-size: 12px;
      line-height: 1.1;
      background: #fafcff;
      color: #2a3a52;
    }

    #profileView .profile-select {
      width: 100%;
      border: 1px solid #dce6f0;
      border-radius: 10px;
      padding: 9px 10px;
      font-size: 13px;
      background: #fafcff;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
      appearance: none;
    }

    #profileView .profile-select:focus {
      border-color: #5fa3eb;
      box-shadow: 0 0 0 3px rgba(36, 127, 226, 0.15);
    }

    #profileView .profile-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
      margin-top: 1px;
    }

    #profileView .profile-mode-inline {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    #profileView .profile-mode-inline .mode-option-row {
      min-height: 32px;
      padding: 6px 8px;
      justify-content: center;
    }

    #profileView .mode-options {
      gap: 6px;
    }

    #profileView .mode-option-row {
      border-color: #dce6f0;
      border-radius: 10px;
      background: #fafcff;
      padding: 7px 9px;
      min-height: 34px;
    }

    #profileView .mode-name {
      font-size: 12px;
      color: #2f4862;
    }

    #profileView .mode-tip-inline {
      font-size: 11px;
      color: #75869a;
    }

    #profileView .profile-action-btn {
      min-width: 88px;
    }

    #pricingView.orders-view {
      gap: 10px;
    }

    #pricingView .pricing-channel-tabs {
      margin-bottom: 0;
    }

    #pricingView .pricing-config-card {
      display: grid;
      gap: 10px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid #d9e4ef;
      background:
        radial-gradient(circle at top right, rgba(91, 164, 238, 0.12), transparent 32%),
        linear-gradient(180deg, #ffffff, #f8fbff);
    }

    #pricingView .pricing-config-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    #pricingView .pricing-title-row {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    #pricingView .pricing-title-row .auth-title {
      margin: 0;
    }

    #pricingView .drawer-help-popover {
      margin-top: 0;
    }

    #pricingView .pricing-config-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    #pricingView .pricing-config-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    #pricingView .pricing-field {
      margin-top: 0;
    }

    #pricingView .pricing-field label {
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #40576f;
    }

    #pricingView .pricing-input-with-unit {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #d3dbe5;
      border-radius: 10px;
      padding: 0 10px;
      background: #ffffff;
    }

    #pricingView .pricing-input-with-unit:focus-within {
      border-color: #5fa3eb;
      box-shadow: 0 0 0 3px rgba(36, 127, 226, 0.12);
    }

    #pricingView .pricing-input-with-unit input {
      width: 100%;
      min-width: 0;
      border: none;
      outline: none;
      padding: 9px 0;
      font-size: 13px;
      font-weight: 600;
      color: #21364d;
      background: transparent;
    }

    #pricingView .pricing-input-unit {
      font-size: 11px;
      color: #68829d;
      white-space: nowrap;
    }

    #pricingView .pricing-config-card.pricing-config-disabled {
      opacity: 0.78;
    }

    #pricingView .pricing-metric-grid {
      display: none;
    }

    #pricingView .pricing-account-card,
    #pricingView .pricing-empty-card {
      border-radius: 14px;
      border: 1px solid #d9e4ef;
      background: #ffffff;
      padding: 10px 10px 9px;
    }

    #pricingView .pricing-account-card {
      margin-top: 8px;
      margin-bottom: 0;
      box-shadow: 0 4px 12px rgba(24, 40, 63, 0.06);
    }

    #pricingView .pricing-empty-card {
      color: #5f7892;
      font-size: 12px;
    }

    #pricingView .pricing-error {
      color: #b14545;
    }

    #pricingView .pricing-account-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 8px;
    }

    #pricingView .pricing-account-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    #pricingView .pricing-account-name {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: #1f3148;
      line-height: 1.25;
    }

    #pricingView .pricing-account-meta {
      margin: 4px 0 0;
      font-size: 11px;
      color: #607a94;
      line-height: 1.3;
    }

    #pricingView .pricing-price-pill {
      flex: 0 0 auto;
      border-radius: 999px;
      font-size: 10px;
      padding: 3px 10px;
      min-height: 24px;
      color: #0f6f67;
      border-color: #b7ddd8;
      background: #ecfbf8;
      box-shadow: 0 1px 2px rgba(15, 111, 103, 0.06);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      text-align: center;
    }

    #pricingView .pricing-account-actions .btn-card-action {
      min-height: 24px;
      padding: 3px 10px;
      white-space: nowrap;
    }

    #pricingView .pricing-account-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    #pricingView .pricing-account-metric {
      border-radius: 10px;
      padding: 7px;
      background: #f6faff;
      border: 1px solid #e1eaf4;
      display: grid;
      gap: 3px;
    }

    #pricingView .pricing-account-metric-label {
      font-size: 10px;
      color: #66809b;
      line-height: 1.25;
    }

    #pricingView .pricing-account-metric strong {
      font-size: 12px;
      color: #21364d;
      line-height: 1.25;
    }

    #boardView.orders-view {
      gap: 10px;
    }

    #boardView .board-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    #boardView .board-head-bar {
      display: grid;
      gap: 8px;
    }

    #boardView .board-search-field {
      margin-top: 0;
    }

    #boardView .board-filter-tabs {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    #boardView .board-card {
      display: grid;
      gap: 10px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid #d9e4ef;
      background: #ffffff;
    }

    #boardView .board-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    #boardView .board-card-title,
    #boardView .board-mobile-title {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: #1f3148;
    }

    #boardView .board-card-meta,
    #boardView .board-mobile-meta {
      margin: 4px 0 0;
      font-size: 12px;
      color: #607a94;
    }

    #boardView .board-mobile-list {
      display: grid;
      gap: 10px;
    }

    #boardView .board-mobile-card {
      border: 1px solid #e3ebf4;
      border-radius: 12px;
      padding: 10px;
      background: #fbfdff;
      display: grid;
      gap: 8px;
    }

    #boardView .board-mobile-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    #boardView .board-card-actions,
    #boardView .board-mobile-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .board-inline-entry {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .board-inline-entry label {
      margin-bottom: 0;
      white-space: nowrap;
      min-width: 32px;
    }

    .board-sms-record-list {
      display: grid;
      gap: 8px;
      max-height: 48vh;
      overflow: auto;
    }

    .board-sms-record-item {
      border: 1px solid #dfe8f1;
      border-radius: 12px;
      padding: 10px;
      background: #fbfdff;
      display: grid;
      gap: 6px;
    }

    .board-sms-record-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .board-sms-record-time {
      font-size: 12px;
      color: #607a94;
    }

    .board-sms-record-status {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: #edf4fb;
      color: #35506d;
    }

    .board-sms-record-status.ok {
      background: #ecfbf3;
      color: #0b6a40;
    }

    .board-sms-record-status.err {
      background: #fff4f5;
      color: #b5423b;
    }

    .board-sms-record-line {
      font-size: 13px;
      color: #29435f;
      line-height: 1.45;
      word-break: break-all;
    }

    .board-sms-record-empty {
      padding: 12px;
      text-align: center;
      font-size: 13px;
      color: #607a94;
    }

    #boardView .board-account-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    #boardView .board-account-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #edf4fb;
      color: #35506d;
      font-size: 12px;
      line-height: 1;
    }

    #boardView .board-account-tag .game-avatar {
      width: 16px;
      height: 16px;
      border-radius: 4px;
    }

    #boardView .board-account-tag-text {
      display: inline-block;
      line-height: 1.2;
    }

    #boardView .board-account-empty,
    #boardView .board-empty {
      font-size: 13px;
      color: #607a94;
    }

    #boardView .board-empty {
      padding: 14px 12px;
    }

    .products-tabs-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 10px;
      margin-bottom: 8px;
    }

    .products-tabs-row .filters {
      flex: 1;
      margin-bottom: 0;
    }

    #listView .product-filters {
      gap: 5px;
      padding-bottom: 0;
    }

    #listView .order-total.head-summary-text {
      margin-top: 0;
      margin-bottom: 9px;
    }

    #listView .product-card {
      margin-top: 8px;
      padding: 10px 10px 9px;
      border-radius: 14px;
    }

    #listView .order-card-top {
      margin-bottom: 8px;
      gap: 6px;
    }

    #listView .product-card-role {
      max-width: 68%;
      gap: 5px;
      font-size: 15px;
      font-weight: 700;
    }

    #listView .game-avatar {
      width: 16px;
      height: 16px;
      border-radius: 4px;
    }

    #listView .card-top-chips {
      gap: 4px;
      row-gap: 4px;
    }

    #listView .chip {
      padding: 2px 6px;
      font-size: 10px;
    }

    #listView .status-main-chip {
      max-width: 154px;
    }

    #listView .info-squares {
      margin-top: 6px;
      gap: 6px;
    }

    #listView .info-square {
      padding: 7px;
      gap: 4px;
      border-radius: 10px;
    }

    #listView .square-title {
      font-size: 10px;
    }

    #listView .square-line {
      font-size: 11px;
      line-height: 1.3;
    }

    #listView .base-square .account {
      font-size: 11px;
      line-height: 1.3;
    }

    #listView .copy-btn {
      padding: 2px 7px;
      font-size: 11px;
    }

    #listView .channel-square .plat {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 7px;
    }

    #listView .product-filter-tab {
      white-space: nowrap;
      flex: 0 0 auto;
      border-radius: 999px;
      border: 1px solid #d8e1ec;
      background: #fff;
      color: #41566f;
      font-size: 10px;
      line-height: 1.2;
      padding: 5px 8px;
      min-height: 0;
    }

    #listView .product-filter-tab.active {
      border-color: #83b7ec;
      background: #edf5ff;
      color: #19558f;
      font-weight: 700;
    }

    #listView .ops {
      margin-top: 7px;
      gap: 6px;
      justify-content: flex-end;
      align-items: center;
    }

    .btn-card-action,
    #listView .product-op-btn {
      border-radius: 8px;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 8px;
      min-height: 24px;
      line-height: 1;
      letter-spacing: .1px;
      color: var(--btn-green-text);
      border-color: var(--btn-green-border);
      background: var(--btn-green-bg);
      box-shadow: 0 1px 2px rgba(25, 42, 66, 0.04);
      white-space: nowrap;
    }

    #listView .product-op-btn-danger {
      color: #b5423b;
      border-color: #efc9c5;
      background: #fff4f3;
      box-shadow: 0 1px 2px rgba(133, 52, 48, 0.05);
    }

    #listView .product-op-btn:hover {
      filter: brightness(0.99);
    }

    #listView .product-op-btn:active {
      transform: translateY(1px) scale(0.985);
    }

    .btn-page-action,
    #productSyncNowBtn,
    #orderSyncNowBtn,
    #statsRefreshBtn,
    #riskRefreshBtn {
      font-size: 11px;
      font-weight: 700;
      border-radius: 12px;
      padding: 8px 10px;
      line-height: 1;
      white-space: nowrap;
      align-self: center;
    }

    .orders-tabs-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .orders-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 0;
      flex: 1;
    }

    .orders-tabs::-webkit-scrollbar {
      display: none;
    }

    .header-tab,
    .orders-tab {
      border: 1px solid #d8e1ec;
      border-radius: 12px;
      padding: 8px 10px;
      background: #f8fbff;
      color: #2a3d55;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .header-tab.active,
    .orders-tab.active {
      border-color: #83b7ec;
      background: linear-gradient(135deg, #f0f7ff, #e5f1ff);
      box-shadow: 0 4px 10px rgba(20, 101, 181, 0.12);
    }

    .orders-quick {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 5px;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    .orders-quick::-webkit-scrollbar {
      display: none;
    }

    .header-quick-tab,
    .orders-quick-item {
      border: 1px solid #d8e1ec;
      border-radius: 999px;
      padding: 5px 8px;
      background: #fff;
      color: #41566f;
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      width: auto;
      flex: 0 0 auto;
      text-align: center;
    }

    .header-quick-tab.active,
    .orders-quick-item.active {
      border-color: #83b7ec;
      background: #edf5ff;
      color: #19558f;
      font-weight: 700;
    }

    .orders-game-hint {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .head-summary-text {
      margin: 0;
      color: #5e738b;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 500;
    }

    .order-card {
      border: 1px solid #dce6f0;
      border-radius: 16px;
      background: #fff;
      padding: 14px 14px 12px;
      box-shadow: 0 8px 18px rgba(24, 40, 63, 0.08);
      margin-bottom: 12px;
    }

    .product-card {
      margin-top: 10px;
      margin-bottom: 0;
      padding: 12px;
      box-shadow: 0 4px 12px rgba(24, 40, 63, 0.06);
    }

    .product-card-top {
      margin-bottom: 0;
    }

    .product-card-role {
      margin: 0;
      max-width: 72%;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 650;
    }

    .product-role-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }

    .order-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .order-card-role {
      font-size: 16px;
      font-weight: 700;
      color: #1a2f46;
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      max-width: 72%;
    }

    .order-role-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }

    .order-card-line {
      margin: 5px 0;
      color: #566b82;
      font-size: 13px;
      line-height: 1.45;
    }

    .order-id-row {
      margin-top: -1px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
    }

    .order-id-label {
      font-size: 12px;
      color: #75869a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100vw - 140px);
      letter-spacing: .2px;
    }

    .order-copy-btn {
      border: 0;
      background: transparent;
      color: #7388a0;
      border-radius: 6px;
      padding: 1px 4px;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .order-complaint-btn {
      border: 1px solid #cfe0f1;
      background: #f6fbff;
      color: #2e658f;
      border-radius: 8px;
      padding: 2px 8px;
      font-size: 11px;
      line-height: 1.2;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .order-complaint-btn:hover {
      border-color: #9fc4e8;
      background: #ebf5ff;
    }

    .order-bottom {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .order-bottom-left {
      min-height: 28px;
      display: flex;
      align-items: center;
    }

    .order-income {
      color: #c85a1b;
      font-weight: 800;
      font-size: 19px;
      letter-spacing: .2px;
      white-space: nowrap;
      text-align: right;
    }

    .order-income-label {
      color: #5f7389;
      font-size: 12px;
      margin-right: 4px;
      font-weight: 600;
    }

    .order-chip {
      border: 1px solid #dbe5ef;
      background: #f7fbff;
      color: #30465e;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 11px;
      white-space: nowrap;
    }

    .order-chip.done {
      background: #f8fbff;
      border-color: #d6e1ed;
      color: #40566f;
    }

    .order-chip.progress {
      background: #eef6ff;
      border-color: #bcd7f1;
      color: #1f5f99;
    }

    .order-chip.pending {
      background: #fff8eb;
      border-color: #f0d7a6;
      color: #96621f;
    }

    .order-chip.risk-failed {
      background: #fff4f6;
      border-color: #f1c8cf;
      color: #b5423b;
    }

    .risk-card-top-chips {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .risk-card-bottom {
      margin-top: 8px;
      min-height: 28px;
      display: flex;
      align-items: center;
    }

    .order-complaint-view {
      display: grid;
      gap: 10px;
    }

    .order-complaint-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .order-complaint-card {
      border: 1px solid #dce6f0;
      border-radius: 16px;
      background: #fff;
      padding: 14px;
      box-shadow: 0 8px 18px rgba(24, 40, 63, 0.08);
    }

    .order-complaint-title {
      margin: 0 0 10px;
      font-size: 16px;
      font-weight: 700;
      color: #1a2f46;
    }

    .order-complaint-grid {
      display: grid;
      gap: 8px;
    }

    .order-complaint-row {
      display: grid;
      grid-template-columns: 78px 1fr;
      align-items: start;
      gap: 8px;
      font-size: 13px;
      line-height: 1.5;
    }

    .order-complaint-row-full {
      grid-template-columns: 78px 1fr;
    }

    .order-complaint-label {
      color: #6b7f96;
    }

    .order-complaint-value {
      color: #2a3f57;
      word-break: break-word;
    }

    .order-complaint-attachments {
      display: grid;
      gap: 6px;
    }

    .order-complaint-image-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }

    .order-complaint-image-item {
      border: 1px solid #d9e5f1;
      border-radius: 10px;
      padding: 0;
      overflow: hidden;
      background: #f5f9ff;
      cursor: pointer;
      min-height: 96px;
    }

    .order-complaint-image {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 96px;
      max-height: 180px;
      object-fit: cover;
    }

    .order-complaint-link-list {
      display: grid;
      gap: 6px;
    }

    .order-complaint-link {
      color: #1f6fb5;
      word-break: break-all;
      text-decoration: none;
    }

    .order-complaint-link:hover {
      text-decoration: underline;
    }

    .order-complaint-preview-mask {
      position: fixed;
      inset: 0;
      z-index: 1002;
      background: rgba(10, 18, 30, 0.78);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      touch-action: none;
    }

    .order-complaint-preview-close {
      position: fixed;
      right: 14px;
      top: 14px;
      border: 0;
      border-radius: 999px;
      width: 34px;
      height: 34px;
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }

    .order-complaint-preview-stage {
      width: min(92vw, 960px);
      height: min(86vh, 780px);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .order-complaint-preview-image {
      display: block;
      max-width: 100%;
      max-height: 100%;
      border-radius: 10px;
      object-fit: contain;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
      background: #101722;
      transform-origin: center center;
      will-change: transform;
    }

    .order-complaint-preview-controls {
      position: fixed;
      right: 14px;
      bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 1003;
    }

    .order-complaint-preview-ctrl-btn {
      min-width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 0 10px;
    }

    .order-complaint-preview-ctrl-btn.mid {
      min-width: 62px;
      font-size: 13px;
      font-weight: 600;
    }

    .stats-view {
      display: grid;
      gap: 10px;
    }

    #statsGameTabs.stats-game-tabs,
    #productGameTabs.stats-game-tabs,
    #orderGameTabs.stats-game-tabs,
    #pricingGameTabs.stats-game-tabs {
      display: flex;
      align-items: flex-end;
      flex-wrap: nowrap;
      gap: 0;
      overflow-x: auto;
      padding: 4px 0 0;
      background: linear-gradient(180deg, #eef2f7 0%, #e6ebf2 100%);
      border-bottom: 1px solid #cfd9e5;
    }

    #statsGameTabs.stats-game-tabs::-webkit-scrollbar,
    #productGameTabs.stats-game-tabs::-webkit-scrollbar,
    #orderGameTabs.stats-game-tabs::-webkit-scrollbar,
    #pricingGameTabs.stats-game-tabs::-webkit-scrollbar { display: none; }

    #statsGameTabs .stats-game-tab,
    #productGameTabs .stats-game-tab,
    #orderGameTabs .stats-game-tab,
    #pricingGameTabs .stats-game-tab {
      border: 1px solid transparent;
      border-bottom: 0;
      border-radius: 9px 9px 0 0;
      padding: 8px 9px 7px;
      background: #e6ebf2;
      color: #5a6e85;
      font-size: 12px;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      width: auto;
      flex: 0 0 auto;
      text-align: center;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      position: relative;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    #statsGameTabs .stats-game-tab:not(:last-child)::after,
    #productGameTabs .stats-game-tab:not(:last-child)::after,
    #orderGameTabs .stats-game-tab:not(:last-child)::after,
    #pricingGameTabs .stats-game-tab:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 9px;
      bottom: 9px;
      width: 1px;
      background: #d6dee8;
      opacity: 0.9;
    }

    #statsGameTabs .stats-game-tab .game-avatar,
    #productGameTabs .stats-game-tab .game-avatar,
    #orderGameTabs .stats-game-tab .game-avatar,
    #pricingGameTabs .stats-game-tab .game-avatar {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      border: 0;
      background: transparent;
    }

    #statsGameTabs .stats-game-tab-text,
    #productGameTabs .stats-game-tab-text,
    #orderGameTabs .stats-game-tab-text,
    #pricingGameTabs .stats-game-tab-text {
      font-size: 12px;
      line-height: 1.2;
    }

    #statsGameTabs .stats-game-tab.active,
    #productGameTabs .stats-game-tab.active,
    #orderGameTabs .stats-game-tab.active,
    #pricingGameTabs .stats-game-tab.active {
      border-color: #cfd9e5;
      background: #fff;
      color: #1f3550;
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
      z-index: 3;
    }

    #statsGameTabs .stats-game-tab.active::after,
    #productGameTabs .stats-game-tab.active::after,
    #orderGameTabs .stats-game-tab.active::after,
    #pricingGameTabs .stats-game-tab.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: #fff;
    }

    #statsPeriods.stats-periods {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 5px;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    #statsPeriods.stats-periods::-webkit-scrollbar { display: none; }

    #statsPeriods .stats-period-btn {
      border: 1px solid #d8e1ec;
      border-radius: 999px;
      padding: 5px 8px;
      background: #fff;
      color: #41566f;
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      width: auto;
      flex: 0 0 auto;
      text-align: center;
    }

    #statsPeriods .stats-period-btn.active {
      border-color: #83b7ec;
      background: #edf5ff;
      color: #19558f;
      font-weight: 700;
    }

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

    .stats-kpi-card {
      border: 1px solid #dce6f0;
      border-radius: 12px;
      background: #fff;
      padding: 4px 6px;
      box-shadow: 0 5px 14px rgba(24, 40, 63, 0.08);
      min-height: 46px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .stats-kpi-key {
      font-size: 9px;
      color: #6f8094;
      margin: 0 0 2px;
      font-weight: 400;
      line-height: 1.2;
    }

    .stats-kpi-value {
      font-size: 12px;
      font-weight: 500;
      color: #1f3550;
      margin: 0;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .stats-kpi-value.money {
      color: #b95a20;
    }

    .stats-kpi-value-order-cnt {
      font-size: 10px;
    }

    .stats-head-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .stats-cal-card {
      border: 1px solid #dce6f0;
      border-radius: 12px;
      background: #fff;
      padding: 9px;
      box-shadow: 0 5px 14px rgba(24, 40, 63, 0.08);
    }

    .stats-cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .stats-cal-month {
      border: 1px solid #d8e2ee;
      border-radius: 10px;
      background: #f7fbff;
      color: #2d4867;
      font-size: 12px;
      padding: 6px 8px;
      min-width: 120px;
    }

    .stats-cal-week {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
      margin-bottom: 4px;
      color: #93a0af;
      font-size: 11px;
      text-align: center;
    }

    .stats-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
    }

    .stats-cal-grid.has-active .stats-cal-cell:not(.empty):not(.active) {
      opacity: 0.72;
      filter: saturate(0.9);
    }

    .stats-cal-grid.has-active .stats-cal-cell:not(.empty):not(.active):hover {
      opacity: 1;
      filter: saturate(1);
    }

    .stats-cal-cell {
      min-height: 34px;
      border: 1px solid #edf2f7;
      border-radius: 8px;
      background: #fff;
      padding: 2px 2px;
      display: grid;
      align-content: start;
      justify-items: center;
      cursor: pointer;
      position: relative;
      transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, opacity 120ms ease;
    }

    .stats-cal-cell.empty {
      background: #fbfdff;
      border-style: dashed;
      border-color: #f0f4f9;
      cursor: default;
    }

    .stats-cal-day {
      color: #2f4156;
      font-size: 11px;
      line-height: 1.2;
      margin: 0;
    }

    .stats-cal-income {
      color: #db6b1f;
      font-size: 8px;
      line-height: 1.1;
      margin: 1px 0 0;
      font-weight: 600;
    }

    .stats-cal-cell.has-income {
      background: #fff8ef;
      border-color: #f4debe;
    }

    .stats-cal-cell.active {
      border-color: #f07d17;
      background: #ffe4c5;
      box-shadow: inset 0 0 0 1px #ffb870, 0 4px 10px rgba(240, 125, 23, 0.25);
      transform: scale(1.03);
      z-index: 1;
    }

    .stats-cal-cell.active .stats-cal-day {
      color: #1b2b3d;
      font-weight: 700;
    }

    .stats-title {
      margin: 0;
      font-size: 13px;
      color: #24405f;
      font-weight: 400;
    }

    #statsCalTitle {
      margin: 0;
      font-size: 14px;
      color: #1f3550;
      font-weight: 600;
    }

    .stats-acc-list {
      display: grid;
      gap: 8px;
    }

    .stats-acc-item {
      border: 1px solid #dde7f1;
      background: #fff;
      border-radius: 12px;
      padding: 10px;
    }

    .stats-acc-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .stats-acc-name {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #1f3550;
      font-weight: 600;
    }

    .stats-acc-money {
      color: #b95a20;
      font-size: 16px;
      font-weight: 700;
      white-space: nowrap;
    }

    .stats-acc-meta {
      margin: 0 0 4px;
      color: #5f748c;
      font-size: 11px;
      line-height: 1.4;
    }

    .stats-acc-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      margin-top: 5px;
    }

    .stats-acc-chip {
      border: 1px solid #e1e9f2;
      border-radius: 8px;
      background: #f9fbff;
      padding: 4px 6px;
    }

    .stats-acc-chip.is-clickable {
      cursor: pointer;
      border-color: #c7dcf8;
      background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
      box-shadow: 0 1px 0 rgba(68, 115, 176, 0.05);
    }

    .stats-acc-chip.is-clickable:active {
      transform: translateY(1px);
    }

    .stats-acc-chip-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 10px;
      color: #2f7fe6;
      font-size: 10px;
      line-height: 1;
      font-weight: 800;
      flex: 0 0 auto;
    }

    .stats-acc-chip-k {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      font-size: 8px;
      color: #6a7f95;
      margin: 0 0 1px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .stats-acc-chip-v {
      font-size: 10px;
      color: #26435f;
      margin: 0;
      line-height: 1.2;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .stats-missing-overlay {
      position: fixed;
      inset: 0;
      z-index: 1300;
      background: rgba(10, 20, 33, 0.34);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .stats-missing-overlay.hidden { display: none; }

    .stats-missing-card {
      width: min(560px, 92vw);
      max-height: 72vh;
      overflow: auto;
      background: #fff;
      border-radius: 14px;
      border: 1px solid #dbe6f1;
      box-shadow: 0 16px 36px rgba(16, 35, 54, 0.26);
      padding: 14px;
    }

    .global-loading {
      position: fixed;
      inset: 0;
      z-index: 1350;
      background: rgba(10, 20, 33, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .global-loading.hidden { display: none; }

    .global-loading-card {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #dbe6f1;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 13px;
      color: #22384f;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 12px 28px rgba(16, 35, 54, 0.2);
    }

    .global-loading-spinner {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #bcd6f3;
      border-top-color: #2a7bd4;
      animation: global-loading-spin 0.75s linear infinite;
    }

    @keyframes global-loading-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .stats-missing-title {
      margin: 0 0 8px;
      font-size: 14px;
      color: #1f3550;
      font-weight: 800;
    }

    .stats-missing-desc {
      margin: 0 0 8px;
      color: #5f748c;
      font-size: 12px;
      line-height: 1.5;
    }

    .stats-missing-list {
      margin: 0 0 10px;
      padding-left: 18px;
      color: #2d4867;
      font-size: 12px;
      line-height: 1.6;
    }

    .stats-cost-detail-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      max-height: 52vh;
      overflow: auto;
    }

    .stats-cost-detail-item {
      border: 1px solid #e1e9f2;
      border-radius: 10px;
      padding: 8px 10px;
      background: #f9fbff;
    }

    .stats-cost-detail-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }

    .stats-cost-detail-top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stats-cost-detail-date {
      margin: 0;
      font-size: 12px;
      color: #4f667f;
      font-weight: 600;
    }

    .stats-cost-detail-money {
      margin: 0;
      font-size: 13px;
      color: #1f3550;
      font-weight: 700;
    }

    .stats-cost-detail-meta {
      margin: 0;
      font-size: 11px;
      color: #667b92;
      line-height: 1.45;
      word-break: break-word;
    }

    .stats-cost-detail-delete {
      min-height: 28px;
      padding: 4px 10px;
      font-size: 12px;
      color: #b5423b;
      border-color: #efc9c5;
      background: #fff4f3;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%);
      z-index: 1400;
      background: rgba(16, 31, 49, 0.92);
      color: #fff;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 12px;
      line-height: 1;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s ease;
    }

    .toast.show {
      opacity: 1;
    }

    .page-info {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      flex: 1;
    }

    .auth-view {
      display: block;
    }

    .auth-head-row {
      margin-bottom: 10px;
    }

    .auth-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
    }

    .auth-channel-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .auth-channel-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px 10px 9px;
      box-shadow: 0 4px 12px rgba(24, 40, 63, 0.06);
    }

    .auth-channel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 8px;
    }

    .auth-channel-head-main {
      min-width: 0;
      max-width: 72%;
    }

    .auth-channel-name {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: #1a2f46;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .auth-channel-mode {
      margin: 3px 0 0;
      font-size: 11px;
      color: #75869a;
      line-height: 1.25;
    }

    .auth-status {
      flex: 0 0 auto;
      padding: 2px 6px;
      font-size: 10px;
    }

    .auth-status.ok {
      color: #1d7d52;
      background: #ebf8f1;
      border-color: #ccead9;
    }

    .auth-status.empty {
      color: #8d98a8;
      background: #f4f6f9;
      border-color: #dde3ec;
    }

    .auth-kv-list {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #fafcff;
    }

    .auth-kv-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
    }

    .auth-kv-row + .auth-kv-row {
      border-top: 1px dashed #e3e8f0;
    }

    .auth-kv-key {
      font-size: 11px;
      color: #75869a;
    }

    .auth-kv-val {
      font-size: 12px;
      color: #2a3a52;
      letter-spacing: .2px;
    }

    .auth-op-row {
      margin-top: 7px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
    }

    .auth-op-btn {
      min-width: 72px;
    }

    .auth-empty {
      text-align: center;
      color: #6f7c8d;
      font-size: 13px;
    }

    .auth-uuzuhao-hint {
      margin: 4px 0 10px;
      color: #5f6f84;
      font-size: 12px;
      line-height: 1.5;
    }

    @media (max-width: 360px) {
      .title { max-width: 64%; }
      .filters { gap: 5px; }
      .filter-tab { padding: 5px 8px; }
      .filter-tab .txt { font-size: 11px; }
      .meta-grid { grid-template-columns: 1fr 1fr; }
      .stats-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .stats-kpi-key { font-size: 9px; }
      .stats-kpi-value { font-size: 12px; }
      .stats-acc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      #statsGameTabs.stats-game-tabs,
      #productGameTabs.stats-game-tabs,
      #orderGameTabs.stats-game-tabs,
      #pricingGameTabs.stats-game-tabs { gap: 0; }
      #statsGameTabs .stats-game-tab,
      #productGameTabs .stats-game-tab,
      #orderGameTabs .stats-game-tab,
      #pricingGameTabs .stats-game-tab {
        font-size: 10px;
        padding: 7px 6px 6px;
      }
      #statsGameTabs .stats-game-tab:not(:last-child)::after,
      #productGameTabs .stats-game-tab:not(:last-child)::after,
      #orderGameTabs .stats-game-tab:not(:last-child)::after,
      #pricingGameTabs .stats-game-tab:not(:last-child)::after {
        top: 8px;
        bottom: 8px;
      }
      #statsGameTabs .stats-game-tab .game-avatar,
      #productGameTabs .stats-game-tab .game-avatar,
      #orderGameTabs .stats-game-tab .game-avatar,
      #pricingGameTabs .stats-game-tab .game-avatar {
        width: 13px;
        height: 13px;
      }
      #statsGameTabs .stats-game-tab-text,
      #productGameTabs .stats-game-tab-text,
      #orderGameTabs .stats-game-tab-text,
      #pricingGameTabs .stats-game-tab-text { font-size: 10px; }
      #statsPeriods.stats-periods { gap: 5px; }
      #statsPeriods .stats-period-btn {
        font-size: 10px;
        padding: 5px 8px;
      }

      .account-row {
        flex-wrap: wrap;
      }
    }