:root {
    --ink: #11131d;
    --muted: #8e9199;
    --soft: #f7f7f8;
    --line: #dedfe4;
    --pink: #f33862;
    --orange: #ff8a31;
    --blue: #2f91df;
    --mobile: #2e87d4;
    --unicom: #c8232c;
    --radio: #0c356e;
  }

  /* Template 2 card style from h5-native, scoped to the phone-card menu. */
  .phone-list .product-card2 {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    border-radius: 15px;
    background: #f5f5f5;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  }

  .phone-list .product-card2::before {
    content: "";
    display: block;
    padding-top: 44.53%;
  }

  .phone-list .product-card2.card2-yd {
    background: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
  }

  .phone-list .product-card2.card2-lt {
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
  }

  .phone-list .product-card2.card2-dx {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  }

  .phone-list .product-card2.card2-gd {
    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
  }

  .phone-list .card2-carrier {
    position: absolute;
    left: 14px;
    bottom: -30px;
    width: 140px;
    height: 140px;
    opacity: .1;
    object-fit: contain;
    pointer-events: none;
  }

  .phone-list .card2-left {
    position: absolute;
    top: 20%;
    left: 2%;
    z-index: 1;
    width: 28%;
    height: auto;
    transform: translateY(-50%);
    object-fit: contain;
    pointer-events: none;
  }

  .phone-list .card2-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .phone-list .card2-right {
    position: absolute;
    top: 3.5%;
    right: 2.7%;
    bottom: 4.5%;
    left: 33.3%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(8px, 3.2vw, 14px);
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
  }

  .phone-list .card2-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 90%;
  }

  .phone-list .card2-name {
    color: #2a2a2a;
    font-size: clamp(14px, 4.4vw, 20px);
    font-weight: 700;
    line-height: 1.2;
    word-break: break-all;
  }

  .phone-list .card2-name-num {
    color: #ff0055;
  }

  .phone-list .product-card2.card2-yd .card2-name-num {
    color: #f0a500;
  }

  .phone-list .product-card2.card2-lt .card2-name-num {
    color: #e6398f;
  }

  .phone-list .product-card2.card2-dx .card2-name-num {
    color: #2f7be0;
  }

  .phone-list .product-card2.card2-gd .card2-name-num {
    color: #06ae56;
  }

  .phone-list .card2-mid {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(4px, 2vw, 8px);
    overflow: hidden;
  }

  .phone-list .card2-mid::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: card2-mid-shine 2.4s ease-in-out infinite;
  }

  @keyframes card2-mid-shine {
    0% { left: -75%; }
    60%, 100% { left: 125%; }
  }

  .phone-list .card2-data {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    white-space: nowrap;
  }

  .phone-list .card2-data-num {
    color: #2a2a2a;
    font-size: clamp(24px, 8vw, 36px);
    font-weight: 700;
    line-height: 1;
  }

  .phone-list .card2-data-suf {
    margin-left: 2px;
    color: #2a2a2a;
    font-size: clamp(11px, 3.4vw, 15px);
  }

  .phone-list .card2-hot2 {
    position: absolute;
    top: clamp(4px, 1.6vw, 8px);
    right: clamp(4px, 1.6vw, 8px);
    width: clamp(22px, 6.4vw, 30px);
    height: clamp(22px, 6.4vw, 30px);
    object-fit: contain;
    pointer-events: none;
    transform-origin: center;
    animation: card2-hot2-breath 1.6s ease-in-out infinite;
  }

  @keyframes card2-hot2-breath {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: .5;
      transform: scale(1.18);
    }
  }

  .phone-list .card2-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: clamp(4px, 1.3vw, 6px) clamp(10px, 3.5vw, 15px);
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9ad0 0%, #e60048 100%);
    color: #fff;
    font-size: clamp(12px, 3.6vw, 15px);
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
  }

  .phone-list .product-card2.card2-yd .card2-btn {
    background: linear-gradient(135deg, #ffc869 0%, #e85400 100%);
  }

  .phone-list .product-card2.card2-lt .card2-btn {
    background: linear-gradient(135deg, #ff7d92 0%, #a80f63 100%);
  }

  .phone-list .product-card2.card2-dx .card2-btn {
    background: linear-gradient(135deg, #5fb4ff 0%, #0a4ac4 100%);
  }

  .phone-list .product-card2.card2-gd .card2-btn {
    background: linear-gradient(135deg, #3aee8c 0%, #048c47 100%);
  }

  .phone-list .card2-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .phone-list .card2-tags::-webkit-scrollbar {
    display: none;
  }

  .phone-list .card2-tags span {
    flex-shrink: 0;
    padding: 0 6px;
    border: 1px solid rgba(6, 174, 86, .32);
    border-radius: 5px;
    background: rgba(6, 174, 86, .08);
    color: #06ae56;
    font-size: clamp(9px, 2.8vw, 11px);
    line-height: 1.7;
    white-space: nowrap;
  }

  .phone-list .product-card2.card2-yd .card2-tags span {
    border-color: rgba(176, 124, 0, .32);
    background: rgba(176, 124, 0, .08);
    color: #a06b00;
  }

  .phone-list .product-card2.card2-lt .card2-tags span {
    border-color: rgba(214, 41, 138, .32);
    background: rgba(214, 41, 138, .08);
    color: #d6298a;
  }

  .phone-list .product-card2.card2-dx .card2-tags span {
    border-color: rgba(47, 123, 224, .32);
    background: rgba(47, 123, 224, .08);
    color: #2f7be0;
  }

  .phone-list .product-card2.card2-gd .card2-tags span {
    border-color: rgba(6, 174, 86, .32);
    background: rgba(6, 174, 86, .08);
    color: #06ae56;
  }

  .phone-list .product-card2 .card2-tags span:nth-child(odd) {
    border-color: transparent;
    color: #fff;
  }

  .phone-list .product-card2.card2-yd .card2-tags span:nth-child(odd) {
    background: #f0a500;
  }

  .phone-list .product-card2.card2-lt .card2-tags span:nth-child(odd) {
    background: #e6398f;
  }

  .phone-list .product-card2.card2-dx .card2-tags span:nth-child(odd) {
    background: #2f7be0;
  }

  .phone-list .product-card2.card2-gd .card2-tags span:nth-child(odd) {
    background: #06ae56;
  }

  @media (min-width: 768px) {
    .phone-list .card2-right {
      padding: 13px;
    }

    .phone-list .card2-name {
      font-size: 18px;
    }

    .phone-list .card2-mid {
      gap: 8px;
    }

    .phone-list .card2-data-num {
      font-size: 33px;
    }

    .phone-list .card2-data-suf {
      font-size: 14px;
    }

    .phone-list .card2-hot2 {
      top: 7px;
      right: 7px;
      width: 26px;
      height: 26px;
    }

    .phone-list .card2-btn {
      padding: 5px 14px;
      font-size: 15px;
    }

    .phone-list .card2-tags span {
      font-size: 11px;
    }
  }

  @media (max-width: 380px) {
    .phone-list .card2-right {
      padding: 8px 9px;
    }

    .phone-list .card2-name {
      font-size: 14px;
    }

    .phone-list .card2-data-num {
      font-size: 25px;
    }

    .phone-list .card2-btn {
      padding: 4px 10px;
      font-size: 12px;
    }
  }

  /* Template 1 card style from h5-native, scoped to mp_1780139492044630. */
  .phone-list .product-card {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 28, 40, .055);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
    transform: translateZ(0);
  }

  .phone-list .product-head {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 42px;
    padding: 18px 16px 16px;
  }

  .phone-list .product-name {
    min-width: 0;
    padding-right: 92px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0;
  }

  .phone-list .product-carrier {
    position: absolute;
    bottom: -24px;
    right: -24px;
    z-index: 1;
    width: 150px;
    height: 150px;
    opacity: .08;
    object-fit: contain;
    pointer-events: none;
  }

  .phone-list .product-btn {
    position: absolute;
    top: 15px;
    right: 16px;
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: #ff3045;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }

  .phone-list .product-benefits {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    min-height: 23px;
    padding: 0 16px 10px;
  }

  .phone-list .product-benefits .benefits-track {
    display: flex;
    flex: none;
    transform-origin: 0 50%;
  }

  .phone-list .product-benefits span {
    display: inline-flex;
    align-items: center;
    height: 21px;
    margin: 0 5px 5px 0;
    padding: 0 6px;
    border: 1px solid rgba(255, 48, 69, .45);
    border-radius: 5px;
    background: rgba(255, 48, 69, .05);
    color: #ff3045;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  .phone-list .product-benefits .tone-blue {
    border-color: rgba(39, 134, 255, .48);
    background: rgba(39, 134, 255, .06);
    color: #2786ff;
  }

  .phone-list .product-benefits .tone-red {
    border-color: rgba(255, 48, 69, .45);
    background: rgba(255, 48, 69, .05);
    color: #ff3045;
  }

  .phone-list .product-divider {
    position: relative;
    z-index: 1;
    height: 1px;
    margin: 0 16px;
    background: #f7f8fa;
  }

  .phone-list .product-stats {
    position: relative;
    z-index: 1;
    display: flex;
    padding: 16px 6px 18px;
    text-align: center;
  }

  .phone-list .product-stats > * {
    flex: 1 1 0%;
    min-width: 0;
  }

  .phone-list .product-num {
    overflow: hidden;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phone-list .product-label {
    margin-top: 6px;
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.2;
  }

  .phone-list .product-tag,
  .phone-list .product-tag.local {
    display: none;
  }

  .phone-list .product-card-enter {
    animation: none;
    opacity: 1;
  }

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

  @media (max-width: 380px) {
    .phone-list .product-stats {
      padding-right: 4px;
      padding-left: 4px;
    }

    .phone-list .product-num {
      font-size: 16px;
    }

    .phone-list .product-label {
      font-size: 11px;
    }
  }

  * { box-sizing: border-box; }

  html,
  body {
    min-height: 100%;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background: #eef2f8;
    color: var(--ink);
    font-family: "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
  }

  .phone-page {
    width: min(100vw, 430px);
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 18px 48px rgba(38, 49, 82, .14);
  }

  .complaint-float {
    position: fixed;
    top: 11px;
    right: max(10px, calc((100vw - 430px) / 2 + 10px));
    z-index: 20;
    height: 24px;
    padding: 0 7px 0 6px;
    border-radius: 999px;
    color: #ef5b62;
    text-decoration: none;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 122, 139, .24);
    box-shadow: 0 5px 12px rgba(74, 121, 180, .08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    line-height: 24px;
    font-weight: 400;
  }

  .complaint-float svg {
    width: 12px;
    height: 12px;
    display: block;
  }

  .complaint-float svg path,
  .complaint-float svg circle {
    stroke: currentColor;
  }

  .complaint-float svg circle {
    fill: currentColor;
  }

  .hero {
    min-height: 205px;
    padding: 20px 18px 0;
    position: relative;
    background: url("../images/hero-backgrounds/hero-bg-v01-soft-blue.svg") center / cover no-repeat;
  }

  .hero::before {
    content: "";
    display: none;
    position: absolute;
    right: 3px;
    top: 61px;
    z-index: 1;
    width: 160px;
    height: 134px;
    border-radius: 36px;
    background:
      radial-gradient(ellipse at 54% 46%, rgba(255, 255, 255, .92) 0 28%, rgba(206, 239, 255, .72) 47%, rgba(229, 235, 255, .42) 70%, transparent 76%),
      linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
    transform: rotate(-15deg);
    pointer-events: none;
  }

  .hero::after {
    content: "";
    display: none;
    position: absolute;
    right: -18px;
    bottom: -24px;
    z-index: 1;
    width: 210px;
    height: 132px;
    background: rgba(255, 255, 255, .28);
    transform: rotate(30deg);
    border-radius: 28px;
  }

  .status-bar {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 32px;
    position: relative;
    z-index: 2;
  }

  .time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
  }

  .person-icon {
    width: 15px;
    height: 17px;
    border-radius: 3px;
    background: #080a0e;
    position: relative;
  }

  .person-icon::before,
  .person-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
  }

  .person-icon::before {
    top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  .person-icon::after {
    bottom: 3px;
    width: 8px;
    height: 5px;
    border-radius: 5px 5px 2px 2px;
  }

  .status-icons {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .signal {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 17px;
  }

  .signal span {
    width: 5px;
    border-radius: 3px;
    background: #07090c;
  }

  .signal span:nth-child(1) { height: 8px; }
  .signal span:nth-child(2) { height: 12px; }
  .signal span:nth-child(3) { height: 16px; }
  .signal span:nth-child(4) { height: 18px; opacity: .18; }

  .wifi {
    width: 24px;
    height: 17px;
    position: relative;
  }

  .wifi::before,
  .wifi::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border: solid #07090c;
    border-width: 4px 0 0 4px;
    border-radius: 12px 0 0 0;
  }

  .wifi::before {
    top: 8px;
    width: 22px;
    height: 22px;
  }

  .wifi::after {
    top: 7px;
    width: 12px;
    height: 12px;
  }

  .wifi-dot {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 6px;
    height: 6px;
    transform: translateX(-50%) rotate(45deg);
    background: #07090c;
    border-radius: 1px 4px 4px 4px;
  }

  .battery {
    width: 31px;
    height: 16px;
    border: 1.8px solid #8c939d;
    border-radius: 6px;
    position: relative;
  }

  .battery::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 4px;
    height: 8px;
    border-radius: 3px;
    background: #f44752;
  }

  .battery::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 5px;
    width: 2px;
    height: 6px;
    border-radius: 0 3px 3px 0;
    background: #8c939d;
  }

  .back {
    appearance: none;
    border: 0;
    background: transparent;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-top: 18px;
    position: relative;
    z-index: 3;
  }

  .back::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 17px;
    height: 17px;
    border-left: 3px solid #151923;
    border-bottom: 3px solid #151923;
    transform: rotate(45deg);
    border-radius: 2px;
  }

  .headline {
    margin: 56px 0 0 0;
    position: relative;
    z-index: 3;
  }

  h1 {
    margin: 0;
    font-family: "YouSheBiaoTiHei", "Alimama ShuHeiTi", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-size: 38px;
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: 0;
    transform: skew(-5deg);
    text-shadow: 0 1px 0 rgba(17, 19, 29, .04);
  }

  h1 span {
    display: inline-block;
    position: relative;
    padding-left: 2px;
    color: transparent;
    background: linear-gradient(100deg, #4fb9f7 0%, #2f98eb 48%, #1f78d7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(28, 119, 213, .2));
  }

  .subtitle {
    margin-top: 17px;
    color: #6d737e;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .5px;
  }

  .hero-art {
    position: absolute;
    right: -24px;
    top: 12px !important;
    z-index: 2;
    width: 204px;
    height: 204px;
    pointer-events: none;
    overflow: visible;
  }

  .hero-art::before {
    content: "";
    position: absolute;
    inset: 22px 18px 28px 14px;
    z-index: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle at 47% 44%, rgba(255, 255, 255, .62) 0 10%, rgba(125, 218, 255, .18) 28%, rgba(255, 179, 222, .11) 48%, transparent 72%);
    filter: blur(8px);
    opacity: .72;
    transform: rotate(-11deg) scale(.98);
  }

  .hero-art::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 1;
    width: 146px;
    height: 146px;
    border-radius: 50%;
    background:
      conic-gradient(from -18deg,
        transparent 0 8deg,
        rgba(255, 255, 255, .3) 9deg 11deg,
        transparent 14deg 38deg,
        rgba(95, 203, 255, .2) 39deg 42deg,
        transparent 45deg 78deg,
        rgba(255, 177, 222, .18) 79deg 81deg,
        transparent 84deg 126deg,
        rgba(255, 255, 255, .22) 127deg 129deg,
        transparent 132deg 190deg,
        rgba(110, 212, 255, .14) 191deg 193deg,
        transparent 196deg 360deg);
    opacity: .54;
    filter: blur(.7px);
    transform: rotate(-12deg);
    -webkit-mask: radial-gradient(circle, transparent 0 23%, #000 25% 64%, transparent 69%);
    mask: radial-gradient(circle, transparent 0 23%, #000 25% 64%, transparent 69%);
  }

  .hero-visual {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 14px 18px rgba(90, 126, 220, .16)) drop-shadow(0 4px 6px rgba(52, 68, 112, .1));
  }

  .hero-spark {
    position: absolute;
    z-index: 3;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .92) 0 16%, rgba(255, 255, 255, .32) 24%, transparent 58%);
    filter: drop-shadow(0 0 5px rgba(93, 203, 255, .34));
    opacity: .72;
  }

  .hero-spark::before,
  .hero-spark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    transform: translate(-50%, -50%);
  }

  .hero-spark::before {
    width: 2px;
    height: 14px;
  }

  .hero-spark::after {
    width: 14px;
    height: 2px;
  }

  .hero-spark.one {
    right: 22px;
    top: 42px;
    transform: rotate(18deg) scale(.72);
  }

  .hero-spark.two {
    left: 30px;
    bottom: 51px;
    transform: rotate(-11deg) scale(.54);
    opacity: .58;
  }

  .hero-spark.three {
    right: 56px;
    bottom: 27px;
    transform: rotate(31deg) scale(.44);
    opacity: .46;
  }

  .main-screen[hidden] {
    display: none;
  }

  .content {
    position: relative;
    z-index: 5;
    margin-top: -1px;
    padding: 10px 9px 104px;
    padding-bottom: calc(104px + constant(safe-area-inset-bottom));
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 18px 18px 0 0;
  }

  .promo {
    height: 58px;
    padding: 0 10px 0 13px;
    border: 1px solid #d9eaff;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 0 rgba(85, 163, 226, .08);
  }

  .gift {
    width: 54px;
    height: 46px;
    position: relative;
    flex: 0 0 54px;
    filter: drop-shadow(0 7px 10px rgba(255, 126, 52, .16));
  }

  .gift::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 18px !important;
    width: 39px;
    height: 34px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .72) 0 4px, transparent 5px),
      linear-gradient(135deg, rgba(255, 236, 181, .78), rgba(255, 124, 74, .28));
    transform: rotate(-8deg);
    opacity: .9;
  }

  .gift .bag {
    position: absolute;
    left: 2px;
    top: 9px;
    width: 34px;
    height: 28px;
    border-radius: 10px;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 100%) 0 0 / 7px 100%,
      linear-gradient(160deg, #ffe3a4 0%, #ffba52 48%, #f07a2e 100%);
    transform: rotate(-8deg);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .48),
      0 5px 9px rgba(239, 103, 33, .17);
  }

  .gift .bag::before {
    content: "鍒?;
    position: absolute;
    left: 9px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 6px;
    color: #fff7dd;
    background: linear-gradient(145deg, #ff8453, #e92547);
    display: grid;
    place-items: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
  }

  .gift .bag::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .7) 0 3px, transparent 3px 6px);
    opacity: .78;
  }

  .gift .badge {
    position: absolute;
    left: 22px;
    top: 2px;
    min-width: 25px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ff4d62, #d7000f);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .35),
      0 4px 8px rgba(215, 0, 15, .18);
    font-size: 9px;
    line-height: 15px;
    font-weight: 500;
    text-align: center;
    transform: rotate(7deg);
  }

  .gift .crown {
    position: absolute;
    left: 43px;
    top: 16px;
    width: 7px;
    height: 7px;
    background: #fff7b7;
    clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
    transform: rotate(10deg);
    box-shadow: 0 0 8px rgba(255, 203, 74, .55);
  }

  .gift .phone {
    position: absolute;
    left: 2px;
    bottom: 4px;
    width: 20px;
    height: 25px;
    border-radius: 7px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .55) 0 18%, transparent 19% 100%),
      linear-gradient(160deg, #73d6ff 0%, #2f7dff 100%);
    transform: rotate(13deg);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .42),
      0 4px 8px rgba(47, 125, 255, .18);
  }

  .gift .phone::after {
    content: "5G";
    position: absolute;
    inset: 7px 3px auto;
    color: #fff;
    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    text-align: center;
  }

  .promo-text {
    min-width: 0;
    flex: 1;
    color: #171a25;
    font-size: 15.5px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .circle-arrow {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b7e, #f33862);
    box-shadow: 0 4px 10px rgba(243, 56, 98, .24);
    position: relative;
  }

  .circle-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: translate(-58%, -50%) rotate(45deg);
  }

  .service-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    height: 56px;
    margin: 10px -9px 16px;
    border-bottom: 1px solid #ececf0;
    background: #fff;
  }

  .utility-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 11px 0 0;
  }

  .utility-action {
    appearance: none;
    min-width: 0;
    height: 58px;
    padding: 0 11px 0 10px;
    border: 1px solid #edf0f6;
    border-radius: 17px;
    background:
      radial-gradient(circle at 96% 8%, rgba(47, 145, 223, .12), transparent 34%),
      linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: 0 8px 20px rgba(36, 47, 77, .06);
    display: flex;
    align-items: center;
    gap: 9px;
    color: #20232c;
    position: relative;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
  }

  .utility-action.service-action {
    background:
      radial-gradient(circle at 96% 8%, rgba(243, 56, 98, .12), transparent 34%),
      linear-gradient(180deg, #fff 0%, #fffbfc 100%);
  }

  .utility-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  }

  .order-action .utility-icon {
    background:
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .34) 0 6px, transparent 7px),
      linear-gradient(145deg, #65c4ff 0%, #2f91df 55%, #1c73d2 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .34),
      0 7px 14px rgba(47, 145, 223, .18);
  }

  .service-action .utility-icon {
    background: linear-gradient(145deg, #ff9a45 0%, #f33862 66%, #c45cff 100%);
  }

  .utility-icon svg {
    width: 23px;
    height: 23px;
    display: block;
  }

  .utility-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .utility-copy b {
    color: #171a24;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
  }

  .utility-copy small {
    color: #8d9098;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 400;
  }

  .utility-arrow {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border-radius: 50%;
    background: #f2f4f8;
    position: relative;
  }

  .utility-arrow::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 5px;
    height: 5px;
    border-right: 1.6px solid #aeb3bd;
    border-top: 1.6px solid #aeb3bd;
    transform: rotate(45deg);
  }

  .service-tab {
    appearance: none;
    border: 0;
    background: transparent;
    height: 56px;
    color: #686b73;
    font-size: 15.5px;
    font-weight: 400;
    position: relative;
  }

  .service-tab.active {
    color: #20232c;
    font-weight: 600;
  }

  .service-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 26px;
    height: 4px;
    border-radius: 999px;
    background: #f7255d;
    transform: translateX(-50%);
  }

  .service-panel[hidden] {
    display: none;
  }

  .broadband-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 9px;
    margin: 0 0 12px;
  }

  .broadband-location,
  .broadband-order-entry {
    appearance: none;
    min-width: 0;
    height: 54px;
    border: 1px solid #edf0f6;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(36, 47, 77, .05);
  }

  .broadband-location {
    padding: 0 12px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    text-align: left;
  }

  .broadband-location::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 11px;
    background:
      radial-gradient(circle at 50% 42%, #fff 0 3px, transparent 4px),
      linear-gradient(145deg, #5dbbff 0%, #2f91df 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  }

  .location-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8d9098;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
  }

  .location-label::after {
    content: attr(data-location-source);
    padding: 2px 5px;
    border-radius: 999px;
    color: #2f91df;
    background: #eef8ff;
    font-size: 10px;
    line-height: 1;
  }

  .location-value {
    display: block;
    margin-top: 6px;
    color: #171a24;
    font-size: 15.5px;
    line-height: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .broadband-order-entry {
    color: #f33862;
    background: linear-gradient(180deg, #fff 0%, #fff7fa 100%);
    font-size: 14.5px;
    line-height: 1;
    font-weight: 500;
  }

  .broadband-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 13px;
    padding: 0;
  }

  .broadband-filter {
    --filter-accent: #f33862;
    --filter-active: linear-gradient(135deg, #ff6d45, #f33862);
    --filter-soft: #fff0f4;
    --filter-line: #ffd5df;
    appearance: none;
    min-width: 0;
    height: 36px;
    padding: 0 4px;
    border: 0;
    border-radius: 14px;
    background: var(--filter-soft);
    color: var(--filter-accent);
    font-size: 13.5px;
    line-height: 36px;
    font-weight: 400;
    box-shadow:
      inset 0 0 0 1px var(--filter-line),
      0 4px 10px rgba(35, 45, 70, .04);
    white-space: nowrap;
  }

  .broadband-filter[data-broadband-filter="unicom"] {
    --filter-accent: #d7000f;
    --filter-active: linear-gradient(135deg, #ff6570, #d7000f);
    --filter-soft: #fff3f4;
    --filter-line: #ffd6db;
  }

  .broadband-filter[data-broadband-filter="telecom"] {
    --filter-accent: #0b73d9;
    --filter-active: linear-gradient(135deg, #4caeff, #0b73d9);
    --filter-soft: #eef7ff;
    --filter-line: #cfe8ff;
  }

  .broadband-filter[data-broadband-filter="mobile"] {
    --filter-accent: #1596d4;
    --filter-active: linear-gradient(135deg, #46c7ff, #1596d4);
    --filter-soft: #eefaff;
    --filter-line: #ccefff;
  }

  .broadband-filter.active {
    color: #fff;
    background: var(--filter-active);
    box-shadow: 0 8px 15px rgba(40, 92, 168, .12);
  }

  .recharge-page {
    padding: 0 2px 8px;
  }

  .recharge-form {
    padding: 18px 15px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fff8f5 100%);
    box-shadow: 0 8px 24px rgba(36, 47, 77, .06);
    border: 1px solid #f2edf0;
  }

  .recharge-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }

  .recharge-title {
    color: #171a24;
    font-size: 20px;
    line-height: 1.18;
    font-weight: 500;
  }

  .recharge-tip {
    margin-top: 4px;
    color: #f33862;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .phone-field {
    margin-top: 22px;
    padding: 16px 0 13px;
    border-bottom: 1px solid #ececf0;
  }

  .field-label {
    display: block;
    color: #8d9098;
    font-size: 13px;
    line-height: 1;
  }

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

  .phone-input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: none;
    padding: 0;
    color: #171a24;
    background: transparent;
    font: inherit;
    font-size: 22px;
    line-height: 1.2;
  }

  .phone-input::placeholder {
    color: #c0c3ca;
  }

  .operator-pill {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #f33862;
    background: #fff0f4;
    font-size: 12px;
  }

  .amount-title {
    margin-top: 17px;
    color: #171a24;
    font-size: 16px;
    font-weight: 500;
  }

  .amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
  }

  .amount-option {
    appearance: none;
    border: 1px solid #ececf0;
    border-radius: 11px;
    background: #fff;
    height: 62px;
    color: #171a24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .amount-option.active {
    border-color: #f33862;
    background: #fff4f7;
    box-shadow: inset 0 0 0 1px rgba(243, 56, 98, .12);
  }

  .amount-face {
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
  }

  .amount-sale {
    color: #f33862;
    font-size: 11px;
    line-height: 1;
  }

  .recharge-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 0 0;
    border-top: 1px solid #f0f0f3;
  }

  .summary-label {
    color: #8d9098;
    font-size: 13px;
  }

  .summary-price {
    margin-top: 6px;
    color: #f33862;
    font-size: 26px;
    line-height: 1;
    font-weight: 500;
  }

  .recharge-submit {
    width: 112px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff1c57 0%, #ff0a46 58%, #ef0c40 100%);
    box-shadow: 0 8px 14px rgba(255, 13, 70, .24);
    font-size: 16px;
    font-weight: 400;
  }

  .recharge-note {
    margin-top: 12px;
    color: #8d9098;
    font-size: 13px;
    line-height: 1.45;
  }

  .referral-card {
    margin-top: 15px;
    min-height: 176px;
    padding: 15px 14px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 0 50%, #fff 0 9px, transparent 10px),
      radial-gradient(circle at 100% 50%, #fff 0 9px, transparent 10px),
      linear-gradient(135deg, #fff7df 0%, #ffe9ec 51%, #fff3f8 100%);
    border: 1px solid rgba(255, 198, 118, .82);
    box-shadow:
      0 12px 28px rgba(226, 87, 45, .12),
      inset 0 0 0 1px rgba(255, 255, 255, .66);
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    overflow: hidden;
    position: relative;
  }

  .referral-card::before {
    content: "";
    position: absolute;
    left: 126px;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background:
      repeating-linear-gradient(to bottom, rgba(255, 147, 84, .35) 0 4px, transparent 4px 9px);
  }

  .referral-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 24% 12%, rgba(255, 255, 255, .7) 0 12px, transparent 13px),
      linear-gradient(116deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, 0) 34%);
    pointer-events: none;
  }

  .referral-icon {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 132px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 42%),
      linear-gradient(145deg, #ffb13d 0%, #ff5b36 46%, #f01650 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .36),
      0 10px 20px rgba(243, 56, 98, .2);
    text-align: center;
    overflow: hidden;
  }

  .referral-icon::before,
  .referral-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff8e5;
    transform: translateY(-50%);
  }

  .referral-icon::before {
    left: -8px;
  }

  .referral-icon::after {
    right: -8px;
  }

  .referral-coupon-label {
    position: absolute;
    left: 11px;
    top: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    color: #b83410;
    background: rgba(255, 250, 210, .95);
    font-size: 11px;
    line-height: 20px;
    font-weight: 500;
  }

  .referral-coupon-amount {
    margin-top: 12px;
    font-size: 38px;
    line-height: .88;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 4px 10px rgba(123, 19, 27, .16);
  }

  .referral-coupon-amount small {
    margin-right: 1px;
    font-size: 18px;
    font-weight: 700;
  }

  .referral-coupon-sub {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    opacity: .9;
  }

  .referral-content {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .referral-kicker {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #f33862;
    background: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
  }

  .referral-title {
    margin-top: 8px;
    color: #171a24;
    font-size: 18px;
    line-height: 1.24;
    font-weight: 500;
  }

  .referral-title strong {
    color: #f33862;
    font-size: 22px;
    font-weight: 700;
  }

  .referral-desc {
    margin-top: 7px;
    color: #626774;
    font-size: 13px;
    line-height: 1.5;
  }

  .referral-button {
    appearance: none;
    margin-top: 12px;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff315f 0%, #f10d46 100%);
    box-shadow: 0 9px 16px rgba(255, 13, 70, .24);
    font-size: 15px;
    line-height: 36px;
    font-weight: 400;
  }

  .referral-modal .order-dialog {
    width: min(100%, 340px);
    padding: 20px 16px 17px;
    overflow: hidden;
  }

  .referral-share-card {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 246, 249, .95)),
      radial-gradient(circle at 84% 9%, rgba(255, 188, 85, .25) 0 38px, transparent 39px);
    border: 1px solid #ffe0c7;
  }

  .referral-qr-wrap {
    display: grid;
    place-items: center;
  }

  .referral-qr {
    width: 166px;
    height: 166px;
    padding: 9px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(37, 45, 72, .12);
  }

  .referral-qr img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 10px;
  }

  .referral-code {
    margin-top: 11px;
    color: #f33862;
    font-size: 13px;
    line-height: 1;
    text-align: center;
  }

  .referral-link-box {
    margin-top: 13px;
    padding: 10px 11px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #f0e4e5;
  }

  .referral-link-label {
    color: #8d9098;
    font-size: 12px;
    line-height: 1;
  }

  .referral-link-text {
    margin-top: 7px;
    color: #171a24;
    font-size: 12.5px;
    line-height: 1.35;
    word-break: break-all;
  }

  .referral-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 13px;
  }

  .referral-copy,
  .referral-go-card {
    height: 38px;
    border: 0;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 400;
  }

  .referral-copy {
    color: #f33862;
    background: #fff0f4;
  }

  .referral-go-card {
    color: #fff;
    background: linear-gradient(180deg, #ff315f 0%, #f10d46 100%);
    box-shadow: 0 8px 14px rgba(255, 13, 70, .2);
  }

  .referral-modal-status {
    min-height: 18px;
    margin-top: 9px;
    color: #7446d8;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
  }

  .benefit-page {
    padding: 0 2px 8px;
  }

  .benefit-bind-card {
    padding: 16px 15px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f8f4ff 100%);
    border: 1px solid #eee9f8;
    box-shadow: 0 8px 24px rgba(52, 38, 96, .06);
  }

  .benefit-title {
    color: #171a24;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
  }

  .benefit-desc {
    margin-top: 9px;
    color: #8d9098;
    font-size: 13px;
    line-height: 1.45;
  }

  .benefit-bind-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ececf0;
  }

  .benefit-phone-input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: none;
    padding: 0;
    color: #171a24;
    background: transparent;
    font: inherit;
    font-size: 18px;
    line-height: 1.2;
  }

  .benefit-phone-input::placeholder {
    color: #c0c3ca;
  }

  .benefit-query {
    flex: 0 0 auto;
    width: 84px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #8f62ff 0%, #7047e8 100%);
    box-shadow: 0 6px 12px rgba(112, 71, 232, .2);
    font-size: 14px;
    font-weight: 400;
  }

  .benefit-status {
    margin-top: 11px;
    color: #7446d8;
    font-size: 13px;
    line-height: 1.4;
  }

  .benefit-status.error {
    color: #f33862;
  }

  .benefit-status.success {
    color: #28a96b;
  }

  .benefit-section-title {
    margin: 17px 0 11px;
    color: #171a24;
    font-size: 16px;
    font-weight: 500;
  }

  .entitlement-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .entitlement-empty {
    min-height: 150px;
    padding: 28px 16px;
    border-radius: 10px;
    color: #8d9098;
    background: #fff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .entitlement-empty[hidden] {
    display: none;
  }

  .mine-toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    z-index: 60;
    max-width: 78vw;
    padding: 10px 16px;
    border-radius: 999px;
    color: #fff;
    background: rgba(17, 19, 29, .84);
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease;
  }


  .mine-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .mine-toast.error {
    background: rgba(220, 21, 70, .94);
  }

  .mine-toast.success {
    background: rgba(21, 145, 92, .94);
  }

  .entitlement-empty-title {
    color: #171a24;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
  }

  .entitlement-empty-desc {
    margin-top: 8px;
    color: #8d9098;
    font-size: 13px;
    line-height: 1.45;
  }

  .entitlement-empty-link {
    min-width: 104px;
    height: 36px;
    margin-top: 18px;
    padding: 0 18px;
    border-radius: 999px;
    color: #fff;
    background: #f20b46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
  }

  .entitlement-loading {
    padding: 18px 0;
    color: #8d9098;
    font-size: 13px;
    line-height: 1.45;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    text-align: center;
  }

  .entitlement-loading span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d7dce6;
    border-top-color: #f33862;
    animation: entitlement-loading-spin .75s linear infinite;
  }

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

  .entitlement-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 68px;
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f0eef5;
    box-shadow: 0 7px 18px rgba(52, 38, 96, .055);
  }

  .entitlement-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f80ff;
  }

  .entitlement-icon svg {
    width: 27px;
    height: 27px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .entitlement-icon img {
    width: 42px;
    height: 42px;
    display: block;
  }

  .entitlement-icon.coupon {
    color: #4c73ff;
    background: transparent;
  }

  .entitlement-icon.video {
    color: #13a06f;
    background: transparent;
  }

  .entitlement-icon.data {
    color: #f33862;
    background: transparent;
  }

  .entitlement-icon.life {
    color: #7a55d8;
    background: #f4f0ff;
  }

  .entitlement-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #171a24;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 500;
  }

  .entitlement-name > span:first-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .entitlement-tag {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
  }

  .entitlement-tag.is-phone {
    color: #4c73ff;
    background: #eef6ff;
  }

  .entitlement-tag.is-member {
    color: #13a06f;
    background: #edf9f4;
  }

  .entitlement-desc {
    margin-top: 6px;
    color: #8d9098;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .entitlement-date {
    margin-top: 5px;
    color: #a1a6b0;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .entitlement-action {
    height: 30px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff1c57 0%, #ef0c40 100%);
    box-shadow: 0 6px 12px rgba(255, 13, 70, .2);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
  }

  .entitlement-action:disabled {
    color: #9ca0a8;
    background: #f1f2f5;
    box-shadow: none;
  }

  .entitlement-action.is-claimed {
    color: #13a06f;
    background: #edf9f4;
    border: 1px solid #c7ecdd;
    box-shadow: none;
  }

  .entitlement-action.is-expired {
    color: #a1a6b0;
    background: #f4f4f6;
    border: 1px solid #e7e7ec;
    box-shadow: none;
  }

  .entitlement-card.is-expired {
    opacity: .72;
  }

  .verify-modal[hidden],
  .order-modal[hidden] {
    display: none;
  }

  .verify-modal,
  .order-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 19, 29, .36);
    backdrop-filter: blur(5px);
  }

  .verify-dialog,
  .order-dialog {
    width: min(100%, 320px);
    padding: 20px 18px 18px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(20, 24, 38, .22);
  }

  .order-dialog {
    position: relative;
  }

  .verify-title,
  .order-title {
    color: #171a24;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    text-align: center;
  }

  .verify-desc,
  .order-desc {
    margin-top: 10px;
    color: #7f838e;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
  }


  .order-close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f7;
  }

  .order-close::before,
  .order-close::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: #9a9ea7;
  }

  .order-close::before {
    transform: rotate(45deg);
  }

  .order-close::after {
    transform: rotate(-45deg);
  }

  .order-field {
    display: block;
    margin-top: 17px;
  }

  .order-label {
    display: block;
    color: #8d9098;
    font-size: 13px;
    line-height: 1;
  }

  .order-phone-input,
  .order-code-input {
    width: 100%;
    height: 44px;
    margin-top: 9px;
    padding: 0 13px;
    border: 1px solid #ececf0;
    border-radius: 13px;
    outline: none;
    color: #171a24;
    background: #fafafa;
    font: inherit;
    font-size: 18px;
  }

  .order-phone-input::placeholder,
  .order-code-input::placeholder {
    color: #c4c7ce;
    font-size: 14px;
  }

  .order-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 9px;
    margin-top: 11px;
  }

  .order-code-row .order-code-input {
    margin-top: 0;
  }

  .order-code-button,
  .order-query-button {
    height: 44px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(180deg, #ff1c57 0%, #ef0c40 100%);
    font-size: 14px;
    font-weight: 400;
  }

  .order-code-button {
    background: #fff0f4;
    color: #f33862;
  }

  .order-query-button {
    width: 100%;
    margin-top: 12px;
    border-radius: 999px;
    box-shadow: 0 8px 14px rgba(255, 13, 70, .2);
    font-size: 16px;
  }

  .order-status {
    min-height: 18px;
    margin-top: 10px;
    color: #7446d8;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
  }

  .order-status.error {
    color: #f33862;
  }

  .order-status.success {
    color: #28a96b;
  }

  .location-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
  }

  .location-choice {
    appearance: none;
    height: 38px;
    border: 1px solid #ececf0;
    border-radius: 12px;
    background: #fafafa;
    color: #343844;
    font-size: 14px;
    font-weight: 400;
  }

  .location-choice.active {
    color: #f33862;
    border-color: #ffd3dc;
    background: #fff0f4;
  }

  .location-save {
    width: 100%;
    margin-top: 12px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff1c57 0%, #ef0c40 100%);
    box-shadow: 0 8px 14px rgba(255, 13, 70, .2);
    font-size: 16px;
    font-weight: 400;
  }

  .location-status,
  .broadband-order-status {
    min-height: 18px;
    margin-top: 10px;
    color: #7446d8;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
  }

  .location-status.error,
  .broadband-order-status.error {
    color: #f33862;
  }

  .location-status.success,
  .broadband-order-status.success {
    color: #28a96b;
  }

  .broadband-order-result {
    margin-top: 14px;
    padding: 13px 12px;
    border-radius: 15px;
    background: #f8fbff;
    border: 1px solid #e8f1fb;
  }

  .broadband-order-result[hidden] {
    display: none;
  }

  .broadband-order-name {
    color: #171a24;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 500;
  }

  .broadband-order-meta {
    margin-top: 6px;
    color: #8d9098;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .broadband-order-rows {
    display: grid;
    gap: 7px;
    margin-top: 12px;
  }

  .broadband-order-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    color: #737782;
    font-size: 13px;
    line-height: 1.35;
  }

  .broadband-order-row b {
    max-width: 190px;
    color: #171a24;
    font-weight: 400;
    text-align: right;
  }


  .verify-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 9px;
    margin-top: 17px;
  }

  .verify-code-row .verify-code-input {
    margin-top: 0;
  }

  .verify-send {
    height: 48px;
    border: 1px solid #ffd6e0;
    border-radius: 14px;
    color: #f33862;
    background: #fff4f7;
    font-size: 14px;
    font-weight: 400;
  }

  .verify-send:disabled {
    color: #9ca0a8;
    border-color: #ececf0;
    background: #f4f5f7;
  }

  .verify-code-input {
    width: 100%;
    height: 48px;
    margin-top: 17px;
    padding: 0 14px;
    border: 1px solid #ececf0;
    border-radius: 14px;
    outline: none;
    color: #171a24;
    background: #fafafa;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    letter-spacing: 4px;
  }

  .verify-code-input::placeholder {
    color: #c4c7ce;
    font-size: 15px;
    letter-spacing: 0;
  }

  .verify-error {
    min-height: 18px;
    margin-top: 9px;
    color: #f33862;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
  }

  .verify-error.success {
    color: #28a96b;
  }

  .verify-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .verify-cancel,
  .verify-confirm {
    height: 40px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
  }

  .verify-cancel {
    color: #737782;
    background: #f3f4f7;
  }

  .verify-confirm {
    color: #fff;
    background: linear-gradient(180deg, #ff1c57 0%, #ef0c40 100%);
    box-shadow: 0 8px 14px rgba(255, 13, 70, .2);
  }

  .verify-confirm.is-loading {
    opacity: .82;
    cursor: wait;
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .product {
    display: grid;
    grid-template-columns: 157px minmax(0, 1fr);
    gap: 9px;
    min-height: 157px;
    padding: 0 0 0 0;
  }

  .mock-card {
    width: 157px;
    height: 157px;
    border-radius: 21px;
    background: #f7f7f8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phone-list .mock-card {
    position: relative;
    overflow: hidden;
    width: 150px;
    height: 150px;
    margin-top: 3px;
    border-radius: 20px;
  }

  .phone-list {
    counter-reset: phone-rank;
  }

  .phone-list .product {
    counter-increment: phone-rank;
  }

  .phone-list .mock-card::before {
    content: "NO." counter(phone-rank);
    position: absolute;
    left: 0;
    top: 12px !important;
    z-index: 6;
    width: 38px;
    height: 17px;
    border-radius: 7px 3px 8px 3px;
    color: #fff;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .34) 0 18%, transparent 19%),
      linear-gradient(135deg, #ff8a31 0%, #ff3d68 100%);
    border: 1px solid rgba(255, 255, 255, .86);
    box-shadow:
      0 5px 11px rgba(255, 61, 104, .18),
      inset 0 1px 0 rgba(255, 255, 255, .32);
    display: grid;
    place-items: center;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .2px;
    text-shadow: 0 1px 3px rgba(150, 0, 42, .18);
    pointer-events: none;
    transform: skewX(-8deg);
  }

  .phone-list .mock-card::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 26px !important;
    z-index: 5;
    width: 8px;
    height: 5px;
    border-radius: 0 0 5px 0;
    background: linear-gradient(135deg, #d92a52, #ad1c45);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    filter: drop-shadow(0 2px 3px rgba(255, 61, 104, .12));
    pointer-events: none;
  }

  .phone-list .product:nth-child(n + 2) .mock-card::before {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .34) 0 18%, transparent 19%),
      linear-gradient(135deg, #54c7ff 0%, #2f91df 100%);
    box-shadow:
      0 5px 11px rgba(47, 145, 223, .14),
      inset 0 1px 0 rgba(255, 255, 255, .32);
    text-shadow: 0 1px 3px rgba(0, 80, 158, .2);
  }

  .phone-list .product:nth-child(n + 2) .mock-card::after {
    background: linear-gradient(135deg, #278bd5, #176cb2);
    filter: drop-shadow(0 2px 3px rgba(47, 145, 223, .1));
  }

  .phone-list .product:nth-child(3) .mock-card::before,
  .phone-list .product:nth-child(4) .mock-card::before {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .34) 0 18%, transparent 19%),
      linear-gradient(135deg, #879cff 0%, #526df4 100%);
    box-shadow:
      0 5px 11px rgba(82, 109, 244, .12),
      inset 0 1px 0 rgba(255, 255, 255, .32);
    text-shadow: 0 1px 3px rgba(35, 57, 155, .18);
  }

  .phone-list .product:nth-child(3) .mock-card::after,
  .phone-list .product:nth-child(4) .mock-card::after {
    background: linear-gradient(135deg, #526df4, #3046c7);
    filter: drop-shadow(0 2px 3px rgba(82, 109, 244, .1));
  }

  .phone-main-card {
    --carrier: #2385e8;
    --carrier-deep: #0f65d4;
    --carrier-soft: #eef8ff;
    --carrier-tint: rgba(35, 133, 232, .12);
    --carrier-line: rgba(35, 133, 232, .32);
    --carrier-logo: none;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    padding: 0 10px 34px;
    background:
      radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .96) 0 16%, transparent 32%),
      linear-gradient(180deg, #ffffff 0%, var(--carrier-soft) 58%, #ffffff 100%);
    border: 1px solid var(--carrier-line);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      0 10px 20px rgba(25, 74, 145, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .phone-main-card::before {
    content: "";
    position: absolute;
    right: -46px;
    top: 43px;
    width: 112px;
    height: 112px;
    background: var(--carrier-logo) center / contain no-repeat;
    opacity: .045;
    transform: rotate(-10deg);
    pointer-events: none;
  }

  .phone-main-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(125deg, rgba(255, 255, 255, .42) 0 18%, transparent 19% 100%),
      radial-gradient(circle at 80% 28%, rgba(255, 255, 255, .72) 0 3px, transparent 4px);
    pointer-events: none;
  }

  .phone-main-card > * {
    position: relative;
    z-index: 1;
  }

  .phone-main-card.carrier-mobile {
    --carrier: #2488e9;
    --carrier-deep: #0d68d8;
    --carrier-soft: #edf8ff;
    --carrier-tint: rgba(36, 136, 233, .12);
    --carrier-line: rgba(36, 136, 233, .34);
    --carrier-logo: url("../images/operator-logo-mobile.svg");
  }

  .phone-main-card.carrier-unicom {
    --carrier: #e8293f;
    --carrier-deep: #c9152a;
    --carrier-soft: #fff2f4;
    --carrier-tint: rgba(232, 41, 63, .11);
    --carrier-line: rgba(232, 41, 63, .32);
    --carrier-logo: url("../images/operator-logo-unicom.svg");
  }

  .phone-main-card.carrier-radio {
    --carrier: #236ec9;
    --carrier-deep: #164a98;
    --carrier-soft: #edf5ff;
    --carrier-tint: rgba(35, 110, 201, .12);
    --carrier-line: rgba(35, 110, 201, .3);
    --carrier-logo: url("../images/operator-logo-broadcast.svg");
  }

  .phone-logo-pill {
    position: relative;
    width: 104px;
    height: 27px;
    min-height: 27px;
    align-self: center;
    margin-top: -2px;
    padding: 3px 9px 2px;
    border-radius: 0 0 13px 13px;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .96) 0 3px, transparent 4px),
      linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-top: 0;
    box-shadow:
      0 2px 5px var(--carrier-tint),
      0 0 0 1px rgba(255, 255, 255, .56),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .phone-logo-pill::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--carrier-deep), var(--carrier), var(--carrier-deep));
    opacity: .58;
    box-shadow: none;
  }

  .phone-logo-pill::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .86) 0 3px, transparent 4px);
    opacity: .75;
  }

  .phone-logo-pill > * {
    position: relative;
    z-index: 1;
  }

  .phone-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 3px rgba(25, 72, 135, .12));
  }

  .phone-main-card.carrier-unicom .phone-logo {
    width: 21px;
    height: 21px;
  }

  .phone-logo-name {
    color: var(--carrier-deep);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
  }

  .phone-flow {
    margin-top: 4px;
    color: var(--carrier);
    line-height: .9;
    letter-spacing: 0;
    text-shadow: 0 7px 14px var(--carrier-tint);
    white-space: nowrap;
  }

  .phone-flow strong {
    font-size: 42px;
    font-weight: 700;
  }

  .phone-flow span {
    margin-left: 1px;
    font-size: 24px;
    font-weight: 500;
  }

  .phone-rent {
    height: 24px;
    margin-top: 7px;
    padding: 0 8px;
    border-radius: 7px;
    color: #ff2f4f;
    background: rgba(255, 255, 255, .86);
    border: 1.5px solid rgba(255, 83, 102, .42);
    box-shadow:
      0 2px 6px rgba(255, 75, 96, .08),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    white-space: nowrap;
  }

  .phone-main-card.carrier-mobile .phone-rent,
  .phone-main-card.carrier-radio .phone-rent {
    color: #2f82ff;
    border-color: rgba(82, 151, 255, .46);
    box-shadow:
      0 2px 6px rgba(67, 139, 255, .08),
      inset 0 1px 0 rgba(255, 255, 255, .95);
  }

  .phone-rent span {
    margin-left: 1px;
    color: var(--carrier);
    font-size: 13px;
    opacity: .82;
  }

  .phone-benefit {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 34px;
    padding-top: 7px;
    color: #fff;
    background: linear-gradient(180deg, var(--carrier) 0%, var(--carrier-deep) 100%);
    box-shadow: 0 -7px 14px var(--carrier-tint);
    text-align: center;
    font-size: 19px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
  }

  .phone-benefit span {
    margin-left: 1px;
    font-size: 14px;
    font-weight: 400;
    opacity: .95;
  }

  .plan-card {
    width: 136px;
    height: 84px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    padding: 0 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  }

  .plan-card.mobile {
    background: linear-gradient(145deg, #edfaff, #c7e9ff);
    color: var(--mobile);
  }

  .plan-card.unicom {
    background: linear-gradient(145deg, #fff1f4, #efc4ca);
    color: var(--unicom);
  }

  .plan-card.radio {
    background: linear-gradient(145deg, #eaf3ff, #91b7ec);
    color: #1d6dbb;
  }

  .plan-card.broadband {
    background: linear-gradient(145deg, #eaf8ff, #b9e0ff);
    color: #2179d8;
  }

  .plan-card.broadband.unicom-broadband {
    background: linear-gradient(145deg, #fff3f5, #ffc7d1);
    color: #d52535;
  }

  .plan-card.broadband.telecom-broadband {
    background: linear-gradient(145deg, #eaf8ff, #b9e0ff);
    color: #2179d8;
  }

  .plan-card.broadband.mobile-broadband {
    background: linear-gradient(145deg, #effff7, #bcebd9);
    color: #159764;
  }

  .broadband-list .product {
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 12px;
    min-height: 138px;
    align-items: start;
  }

  .broadband-list .mock-card {
    width: 138px;
    height: 138px;
    border-radius: 16px;
    background: transparent;
  }

  .broadband-main-card {
    --carrier: #1296db;
    --carrier-deep: #0872bd;
    --carrier-soft: #f3fbff;
    --carrier-tint: rgba(18, 150, 219, .14);
    --carrier-line: #8ed4f2;
    --carrier-band: #35afe6;
    --carrier-glow: rgba(18, 150, 219, .2);
    width: 100%;
    height: 100%;
    position: relative;
    padding: 13px 8px 39px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 32% -6%, rgba(255, 255, 255, .46) 0 18%, transparent 42%),
      linear-gradient(180deg, var(--carrier-band) 0%, var(--carrier) 52%, var(--carrier-deep) 100%);
    border: 2px solid var(--carrier);
    box-shadow:
      0 7px 14px var(--carrier-tint),
      inset 0 1px 0 rgba(255, 255, 255, .34);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
  }

  .broadband-main-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 38px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .92),
      0 1px 0 rgba(255, 255, 255, .75),
      0 9px 18px var(--carrier-glow);
    pointer-events: none;
    z-index: 0;
  }

  .broadband-main-card::after {
    content: none;
  }

  .broadband-main-card > * {
    position: relative;
    z-index: 1;
  }

  .broadband-main-card.carrier-unicom {
    --carrier: #d7000f;
    --carrier-deep: #ad000c;
    --carrier-soft: #fff6f7;
    --carrier-tint: rgba(215, 0, 15, .14);
    --carrier-line: #ff9ca6;
    --carrier-band: #eb3f4d;
    --carrier-glow: rgba(215, 0, 15, .18);
  }

  .broadband-main-card.carrier-telecom {
    --carrier: #025ba4;
    --carrier-deep: #04447f;
    --carrier-soft: #f2f9ff;
    --carrier-tint: rgba(2, 91, 164, .14);
    --carrier-line: #8dbfe5;
    --carrier-band: #2d82bf;
    --carrier-glow: rgba(2, 91, 164, .2);
  }

  .broadband-main-card.carrier-mobile {
    --carrier: #1296db;
    --carrier-deep: #0872bd;
    --carrier-soft: #f3fbff;
    --carrier-tint: rgba(18, 150, 219, .14);
    --carrier-line: #8ed4f2;
    --carrier-band: #35afe6;
    --carrier-glow: rgba(18, 150, 219, .2);
  }

  .operator-logo-pill {
    width: auto;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: none;
  }

  .operator-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    object-position: center;
    display: block;
    flex: 0 0 auto;
    opacity: 1;
    filter: none;
  }

  .carrier-unicom .operator-logo {
    width: 20px;
    height: 20px;
  }

  .operator-name {
    color: var(--carrier);
    font-family: "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .2px;
    white-space: nowrap;
  }

  .broadband-speed {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 13px;
    color: var(--carrier);
    line-height: .82;
    white-space: nowrap;
    letter-spacing: 0;
    text-shadow: 0 7px 16px var(--carrier-glow);
  }

  .broadband-speed strong {
    font-size: 45px;
    line-height: .82;
    font-weight: 700;
  }

  .broadband-speed span {
    margin-left: 1px;
    font-size: 25px;
    line-height: 1;
    font-weight: 500;
  }

  .broadband-month {
    margin-top: 8px;
    color: var(--carrier);
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    opacity: .92;
  }

  .broadband-benefit {
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -2px;
    width: auto;
    height: 38px;
    margin: 0;
    color: #fff;
    background: transparent;
    font-size: 18px;
    line-height: 38px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 7px rgba(28, 38, 78, .16);
  }

  .broadband-provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin-bottom: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: #f4f6fa;
    color: #8b909a;
    font-size: 11px;
    line-height: 18px;
    font-weight: 400;
  }

  .broadband-list .broadband-provider {
    display: none;
  }

  .broadband-list .info {
    align-self: start;
    height: 138px;
    min-height: 138px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  .broadband-list .title {
    height: 28px;
    line-height: 28px;
  }

  .broadband-list .stats {
    grid-template-columns: minmax(78px, 1.14fr) minmax(58px, .86fr) minmax(72px, 1fr);
    margin-top: 8px;
  }

  .broadband-list .stat {
    padding-right: 0;
    text-align: center;
  }

  .broadband-list .stat:first-child {
    text-align: left;
  }

  .broadband-list .stat + .stat {
    padding-left: 8px;
  }

  .broadband-list .value {
    font-size: 16px;
    white-space: nowrap;
  }

  .broadband-list .label {
    margin-top: 5px;
    font-size: 13px;
  }

  .broadband-list .price {
    font-size: 23px;
  }

  .broadband-list .price small {
    margin-left: 1px;
    font-size: 15px;
  }

  .broadband-list .buy-line {
    align-items: center;
    margin-top: auto;
  }

  .plan-card.recharge {
    background: linear-gradient(145deg, #fff4e9, #ffd0a4);
    color: #e46c22;
  }

  .plan-card.benefit {
    background: linear-gradient(145deg, #f3edff, #d5c1ff);
    color: #7446d8;
  }

  .brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand-copy {
    text-align: right;
    font-weight: 400;
    line-height: 1;
  }

  .brand-copy .price-mini {
    font-size: 20px;
  }

  .brand-copy .name {
    display: block;
    margin-top: 14px;
    font-size: 15px;
  }

  .info {
    min-width: 0;
    padding-top: 7px;
  }

  .title {
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #151923;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
  }

  .phone-list .info {
    align-self: start;
    height: 150px;
    min-height: 0;
    margin-top: 3px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .phone-list .title {
    height: 24px;
    font-size: 17px;
    line-height: 24px;
  }

  .plan-tags {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-height: 20px;
    max-height: 20px;
    margin-top: 5px;
    overflow: hidden;
  }

  .plan-tag {
    height: 20px;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    line-height: 20px;
    font-weight: 400;
    white-space: nowrap;
  }

  .plan-tag::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
  }

  .plan-tag.coupon {
    color: #eb454e;
    background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 247, 248, .92) 100%);
    border: 1px solid rgba(235, 69, 78, .5);
    box-shadow:
      0 2px 6px rgba(235, 69, 78, .08),
      inset 0 1px 0 rgba(255, 255, 255, .92);
  }

  .plan-tag.coupon::before {
    content: "";
    width: 22px;
    height: 22px;
    margin-left: -3px;
    margin-right: -2px;
    border-radius: 0;
    background: url("../images/icon-red-packet-user-4.svg") center / contain no-repeat;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
  }

  .plan-tag.free {
    color: #12633a;
    padding: 0 8px 0 6px;
    gap: 4px;
    border-radius: 7px;
    background:
      linear-gradient(90deg, #72ef9a 0%, #9ff67b 54%, #d4ff70 100%);
    border: 1px solid rgba(91, 210, 91, .42);
    box-shadow:
      0 3px 8px rgba(70, 202, 102, .16),
      inset 0 1px 0 rgba(255, 255, 255, .58),
      inset 0 -1px 0 rgba(49, 157, 70, .08);
  }

  .plan-tag.free::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 0;
    background: url("../images/icon-sparkle-tag.svg") center / contain no-repeat;
    clip-path: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-.5px);
  }

  .plan-tag.free::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 7px;
    top: 2px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  .phone-list .stats {
    grid-template-columns: minmax(44px, .76fr) minmax(60px, 1fr) minmax(72px, 1.22fr);
    column-gap: 6px;
    margin-top: 9px;
  }

  .phone-list .stat {
    padding-right: 0;
    text-align: left;
  }

  .phone-list .stat + .stat {
    padding-left: 0;
  }

  .phone-list .stat:nth-child(2),
  .phone-list .stat:nth-child(3) {
    text-align: center;
  }

  .phone-list .stat + .stat::before {
    left: -3px;
  }

  .phone-list .value {
    font-size: 17px;
    white-space: nowrap;
  }

  .phone-list .label {
    margin-top: 5px;
    font-size: 13px;
  }

  .phone-list .buy-line {
    align-items: center;
    margin-top: 9px;
  }

  .phone-sales {
    color: #8f939c;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
  }

  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 6px;
    color: var(--ink);
  }

  .stat {
    min-width: 0;
    position: relative;
    padding-right: 8px;
  }

  .stat + .stat {
    padding-left: 12px;
  }

  .stat + .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 1px;
    height: 34px;
    background: var(--line);
  }

  .value {
    display: block;
    color: #171a24;
    font-size: 18px;
    line-height: 1.08;
    font-weight: 400;
  }

  .label {
    display: block;
    margin-top: 6px;
    color: #8d9098;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 400;
    white-space: nowrap;
  }

  .buy-line {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
  }

  .price {
    color: var(--pink);
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
  }

  .price small {
    font-size: 17px;
    font-weight: 400;
  }

  .buy {
    width: 82px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff1c57 0%, #ff0a46 58%, #ef0c40 100%);
    box-shadow:
      0 7px 12px rgba(255, 13, 70, .24),
      inset 0 1px 0 rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .trust {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    color: #8d9098;
    font-size: 14px;
    font-weight: 400;
  }

  .trust::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid #8c8f97;
    border-top: 2px solid #8c8f97;
    transform: rotate(45deg);
  }

  .mobile-logo {
    width: 40px;
    height: 40px;
  }

  .unicom-logo {
    width: 39px;
    height: 39px;
  }

  .radio-logo {
    width: 42px;
    height: 42px;
  }

  .broadband-logo {
    width: 42px;
    height: 42px;
  }

  .recharge-logo,
  .benefit-logo {
    width: 42px;
    height: 42px;
  }

  .mine-screen {
    min-height: 100vh;
    padding: 13px 12px 104px;
    background:
      linear-gradient(180deg, #f1f6ff 0, #f7f8fb 168px, #f7f8fb 100%);
    position: relative;
    overflow: hidden;
  }

  .mine-screen::before {
    content: "";
    position: absolute;
    top: -74px;
    right: -88px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 56, 98, .16) 0 34%, rgba(243, 56, 98, 0) 70%);
    pointer-events: none;
    animation: mine-bg-float 7s ease-in-out infinite;
  }

  .mine-screen::after {
    content: "";
    position: absolute;
    top: 26px;
    left: -62px;
    width: 170px;
    height: 92px;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(47, 145, 223, .14), rgba(47, 145, 223, 0));
    transform: rotate(-18deg);
    pointer-events: none;
    animation: mine-bg-sweep 8s ease-in-out infinite;
  }

  .mine-screen > * {
    position: relative;
    z-index: 1;
  }
  .mine-topbar {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
  }

  .mine-page-title {
    color: #171a24;
    font-size: 24px;
    line-height: 1;
    font-weight: 650;
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .mine-page-title::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: -8px;
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f33862 0%, rgba(243, 56, 98, 0) 100%);
    transform-origin: left center;
    animation: mine-title-pulse 2.8s ease-in-out infinite;
  }

  @keyframes mine-bg-float {
    0%, 100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 1;
    }

    50% {
      transform: translate3d(-8px, 10px, 0) scale(1.04);
      opacity: .86;
    }
  }

  @keyframes mine-bg-sweep {
    0%, 100% {
      transform: translate3d(0, 0, 0) rotate(-18deg);
      opacity: 1;
    }

    50% {
      transform: translate3d(10px, 6px, 0) rotate(-14deg);
      opacity: .72;
    }
  }

  @keyframes mine-title-pulse {
    0%, 100% {
      transform: scaleX(1);
      opacity: .95;
    }

    50% {
      transform: scaleX(1.28);
      opacity: .62;
    }
  }
  .mine-top-hint {
    color: #8d93a0;
    font-size: 13px;
    line-height: 1;
  }

  .mine-header {
    margin-top: 9px;
    padding: 16px 15px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(229, 234, 243, .9);
    box-shadow: 0 8px 24px rgba(27, 45, 76, .055);
    color: #171a24;
    overflow: hidden;
    position: relative;
  }

  .mine-user {
    display: flex;
    align-items: center;
    gap: 13px;
    position: relative;
    z-index: 2;
  }

  .mine-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(180deg, #eaf6ff 0%, #dff0ff 100%);
    border: 1px solid #d6e9fb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  }

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

  .mine-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .mine-title {
    font-size: 20px;
    line-height: 1;
    font-weight: 650;
    white-space: nowrap;
  }

  .mine-user-tag {
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    color: #f33862;
    background: #fff3f6;
    border: 1px solid #ffd9e1;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
    box-shadow: none;
  }


  .mine-title.is-loading,
  .mine-user-tag.is-loading {
    display: block;
    color: transparent;
    border-color: transparent;
    background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 45%, #eef2f7 90%);
    background-size: 180% 100%;
    animation: mine-profile-shimmer 1.1s ease-in-out infinite;
    box-shadow: none;
    overflow: hidden;
  }

  .mine-title.is-loading {
    width: 94px;
    height: 20px;
    border-radius: 7px;
  }

  .mine-user-tag.is-loading {
    width: 58px;
    height: 20px;
    padding: 0;
  }


  @keyframes mine-profile-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -80% 0; }
  }

  .mine-bind-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #f0f2f6;
  }

  .mine-bind-actions .mine-bind-button + .mine-bind-button {
    border-left: 1px solid #f0f2f6;
  }

  .mine-bind-button {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin-top: 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 0;
    color: #f33862;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
  }

  .mine-bind-copy {
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    line-height: 1;
  }

  .mine-bind-main {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }

  .mine-bind-main::after {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -55%;
    width: 46%;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
    animation: mine-bind-text-shine 2.6s ease-in-out infinite;
  }

  @keyframes mine-bind-text-shine {
    0%, 42% { left: -58%; opacity: 0; }
    52% { opacity: .95; }
    72% { left: 112%; opacity: 0; }
    100% { left: 112%; opacity: 0; }
  }

  .mine-bind-sub {
    display: block;
    color: #8d9098;
    font-size: 11px;
    line-height: 1;
    font-weight: 400;
  }

  .mine-bind-sub[hidden] {
    display: none;
  }
  .mine-bind-button.secondary,
  .mine-bind-icon.secondary {
    color: #2f91df;
  }

  .mine-bind-button.is-combined {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 3px 10px;
    color: #f33862;
  }

  .mine-bind-icon-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 58px;
    min-width: 58px;
    height: 30px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f4f6fa;
  }

  .mine-bind-icon-group .mine-bind-icon {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08), 0 0 0 2px #fff;
  }

  .mine-bind-icon-group .mine-bind-icon + .mine-bind-icon {
    z-index: 2;
    margin-left: -6px;
  }

  .mine-bind-button.is-combined .mine-bind-main,
  .mine-bind-button.is-combined .mine-bind-sub {
    white-space: normal;
    line-height: 1.25;
  }

.mine-bind-button.is-loading {
    pointer-events: none;
  }

  .mine-bind-button.is-loading .mine-bind-copy,
  .mine-entry.is-loading .mine-entry-copy b {
    color: transparent;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 45%, #eef2f7 90%);
    background-size: 180% 100%;
    animation: mine-profile-shimmer 1.1s ease-in-out infinite;
    overflow: hidden;
  }

  .mine-bind-button.is-loading .mine-bind-copy {
    width: 104px;
    height: 16px;
  }

  .mine-entry.is-loading .mine-entry-copy b {
    width: 118px;
    height: 15px;
  }
  .mine-bind-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
    background: transparent;
  }

  .mine-bind-icon svg,
  .mine-bind-icon img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
  }

  .mine-bind-icon svg {
    stroke: currentColor;
  }

  .mine-service-actions {
    margin-top: 13px;
  }

  .mine-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px 0;
    margin-top: 13px;
  }

  .mine-service-item {
    appearance: none;
    min-width: 0;
    min-height: 72px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #30343d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    text-align: center;
    text-decoration: none;
  }

  .mine-service-item:active {
    background: #f7f8fb;
  }

  .mine-service-icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    position: relative;
    color: #2f80ff;
    background: #eef6ff;
  }

  .mine-service-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
  }

  .mine-service-icon b {
    position: absolute;
    right: -4px;
    top: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    background: #f33862;
    border: 1px solid #fff;
    font-size: 10px;
    line-height: 14px;
    font-weight: 400;
  }

  .mine-service-item > span:last-child {
    max-width: 100%;
    color: #30343d;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .mine-service-icon.blue { color: #2f80ff; background: #eef6ff; }
  .mine-service-icon.red { color: #f33862; background: #fff1f4; }
  .mine-service-icon.cyan { color: #19a0d8; background: #edf9ff; }
  .mine-service-icon.green { color: #16a36b; background: #edf9f3; }
  .mine-service-icon.orange { color: #f07820; background: #fff5ed; }
  .mine-service-icon.purple { color: #7446d8; background: #f4f0ff; }
  .mine-service-icon.pink { color: #e84b8a; background: #fff0f7; }
  .mine-service-icon.slate { color: #667085; background: #f2f4f7; }
  .mine-service-icon.gold { color: #d97813; background: #fff7e8; }

  .mine-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .mine-modal[hidden] {
    display: none;
  }

  .mine-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .46);
  }

  .mine-modal-panel {
    position: relative;
    z-index: 1;
    width: min(100vw, 430px);
    padding: 18px 24px calc(16px + env(safe-area-inset-bottom));
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: 0 -12px 34px rgba(12, 18, 32, .18);
  }

  .mine-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mine-modal-head h2 {
    margin: 0;
    color: #151923;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
  }

  .mine-modal-close {
    position: relative;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f2f4f8;
  }

  .mine-modal-close::before,
  .mine-modal-close::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 14px;
    width: 12px;
    height: 1.5px;
    border-radius: 999px;
    background: #737b89;
  }

  .mine-modal-close::before {
    transform: rotate(45deg);
  }

  .mine-modal-close::after {
    transform: rotate(-45deg);
  }

  .mine-modal-desc {
    margin-top: 10px;
    color: #767b86;
    font-size: 13px;
    line-height: 1.55;
  }

  .mine-modal-desc-warn {
    display: block;
    margin-top: 4px;
    color: #f33862;
  }

  .mine-form-field {
    display: block;
    margin-top: 15px;
  }

  .mine-form-field > span {
    display: block;
    margin-bottom: 8px;
    color: #555d6b;
    font-size: 13px;
    line-height: 1;
  }

  .mine-form-field input {
    width: 100%;
    height: 48px;
    border: 1px solid #e7eaf0;
    border-radius: 11px;
    outline: none;
    padding: 0 14px;
    background: #fafbfe;
    color: #171a24;
    font-size: 16px;
  }

  .mine-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
  }

  .mine-code-row button {
    height: 48px;
    border: 1px solid #d7eaff;
    border-radius: 11px;
    color: #2f91df;
    background: #eef7ff;
    font-size: 14px;
  }

  .mine-code-row button:disabled {
    color: #9da4af;
    border-color: #edf0f5;
    background: #f2f4f7;
  }

  .mine-modal-status {
    min-height: 18px;
    margin-top: 11px;
    color: #8d9098;
    font-size: 12px;
    line-height: 1.4;
  }

  .mine-modal-status:not(:empty) {
    padding: 8px 10px;
    border-radius: 8px;
  }

  .mine-modal-status.error {
    color: #f33862;
    background: #fff1f4;
    border: 1px solid #ffd3dd;
  }

  .mine-modal-status.success {
    color: #148d5f;
    background: #eefaf4;
    border: 1px solid #c9efdc;
  }

  .mine-modal-submit {
    width: 100%;
    height: 46px;
    margin-top: 13px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #ff1c57 0%, #ef0c40 100%);
    font-size: 16px;
    font-weight: 500;
  }

  .mine-modal-submit:disabled {
    opacity: .72;
    cursor: default;
  }

  .mine-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #f0f2f6;
  }

  .mine-stat {
    min-height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  }

  .mine-stat + .mine-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #eef1f5;
  }

  .mine-stat b {
    display: block;
    color: #171a24;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
  }

  .mine-stat span {
    display: block;
    margin-top: 8px;
    color: #8d9098;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
  }

  .mine-section {
    margin-top: 11px;
    padding: 14px 13px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(27, 45, 76, .04);
    border: 1px solid #edf1f6;
  }

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

  .mine-card-title {
    color: #171a24;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
  }

  .mine-section-note {
    color: #9a9fa9;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .mine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 18px;
    margin-top: 18px;
  }

  .mine-grid-item {
    appearance: none;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    text-decoration: none;
  }

  .mine-grid-item {
    min-height: 64px;
  }

  .mine-grid-icon {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #2f80ff;
    background: #f1f5f9;
    box-shadow: none;
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
  }

  .mine-grid-icon svg,
  .mine-grid-icon img,
  .mine-entry-icon svg,
  .mine-entry-icon img {
    width: 19px;
    height: 19px;
    display: block;
    stroke: currentColor;
    object-fit: contain;
  }


  .mine-grid-title {
    display: block;
    margin-top: 16px;
    color: #30343d;
    font-size: 12.5px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
  }

  .mine-order-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 14px;
  }

  .mine-order-item {
    appearance: none;
    min-width: 0;
    min-height: 63px;
    border-radius: 10px;
    background: #f8f9fc;
    border: 1px solid #f0f2f6;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
  }

  .mine-order-item b {
    color: #171a24;
    font-size: 17px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
  }

  .mine-order-item span {
    color: #777d88;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .mine-order-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 14px;
  }

  .mine-order-chip {
    appearance: none;
    min-width: 0;
    min-height: 54px;
    border: 1px solid #f0f2f6;
    border-radius: 10px;
    padding: 8px 4px;
    background: #fbfcfe;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
  }

  .mine-order-chip b {
    color: #171a24;
    font-size: 17px;
    line-height: 1;
    font-weight: 650;
    white-space: nowrap;
  }

  .mine-order-chip span {
    color: #777d88;
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
  }

  .mine-reminder {
    appearance: none;
    width: 100%;
    margin-top: 11px;
    padding: 12px 12px;
    border: 1px solid #ddeeff;
    border-radius: 11px;
    background:
      linear-gradient(90deg, #f2f8ff 0%, #fff 78%);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    column-gap: 10px;
    color: inherit;
    text-align: left;
  }

  .mine-reminder-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #2f80ff;
    background: #e7f2ff;
  }

  .mine-reminder-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
  }

  .mine-reminder-copy b {
    display: block;
    color: #171a24;
    font-size: 14.5px;
    line-height: 1;
    font-weight: 600;
  }

  .mine-reminder-copy span {
    display: block;
    margin-top: 7px;
    color: #7d8490;
    font-size: 12px;
    line-height: 1.25;
  }

  .mine-asset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 13px;
  }

  .mine-asset {
    appearance: none;
    min-height: 82px;
    padding: 13px 14px 12px 15px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f0f2f6;
    font: inherit;
    text-align: left;
    position: relative;
    overflow: hidden;
  }

  .mine-asset::after {
    content: "";
    position: absolute;
    right: -12px;
    top: -12px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(243, 56, 98, .09);
  }

  .mine-asset:nth-child(2)::after {
    background: rgba(47, 145, 223, .1);
  }

  .mine-asset-value {
    color: #f33862;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
    position: relative;
    z-index: 1;
  }

  .mine-asset-value.is-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: #9aa3b2;
    font-size: 13px;
    font-weight: 400;
  }

  .mine-asset-spinner {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(243, 56, 98, .16);
    border-top-color: #f33862;
    animation: mine-asset-spin .72s linear infinite;
  }

  .mine-asset:nth-child(2) .mine-asset-spinner {
    border-color: rgba(47, 145, 223, .16);
    border-top-color: #2f91df;
  }

  @keyframes mine-asset-spin {
    to { transform: rotate(360deg); }
  }

  .mine-asset:nth-child(2) .mine-asset-value {
    color: #2f91df;
  }

  .mine-asset-label {
    margin-top: 10px;
    color: #6f7683;
    font-size: 12.5px;
    line-height: 1;
    position: relative;
    z-index: 1;
  }

  .mine-entry-list {
    margin-top: 8px;
    display: grid;
    gap: 0;
  }

  .mine-entry {
    appearance: none;
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 16px;
    align-items: center;
    column-gap: 10px;
    text-align: left;
  }

  .mine-entry + .mine-entry {
    border-top: 1px solid #f0f1f4;
  }

  .mine-entry-icon {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #2f80ff;
    background: #eef6ff;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
  }

  .mine-entry-icon.green { color: #16a36b; background: #edf9f3; }
  .mine-entry-icon.red { color: #f33862; background: #fff1f4; }
  .mine-entry-icon.purple { color: #7446d8; background: #f4f0ff; }
  .mine-entry-icon.gold { color: #d97813; background: #fff7e8; }

  .mine-entry-copy b {
    display: block;
    color: #171a24;
    font-size: 14.5px;
    line-height: 1;
    font-weight: 400;
  }

  .mine-entry-copy span {
    display: block;
    margin-top: 7px;
    color: #8d9098;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
  }

  .mine-entry-arrow {
    width: 8px;
    height: 8px;
    border-right: 1.25px solid #c2c6cf;
    border-top: 1.25px solid #c2c6cf;
    transform: rotate(45deg);
    justify-self: center;
  }

  @media (min-width: 431px) {
    .phone-page {
      margin-top: 22px;
      margin-bottom: 22px;
      border-radius: 24px;
    }
  }

  @media (max-width: 380px) {
    .phone-page { width: 100vw; }
    .hero { padding-left: 15px; padding-right: 15px; }
    h1 { font-size: 34px; }
    .service-tab { font-size: 14px; }
    .product {
      grid-template-columns: 143px minmax(0, 1fr);
      gap: 8px;
    }
    .mock-card {
      width: 136px;
      height: 146px;
    }
    .phone-list .mock-card {
      width: 130px;
      height: 140px;
      margin-top: 3px;
      border-radius: 18px;
    }
    .phone-list .info {
      height: 140px;
      margin-top: 3px;
    }
    .plan-card {
      width: 120px;
      height: 76px;
      grid-template-columns: 44px 1fr;
    }
    .phone-main-card {
      padding: 0 8px 32px;
    }
    .phone-main-card::before {
      right: -40px;
      top: 40px;
      width: 96px;
      height: 96px;
    }
    .phone-logo-pill {
      width: 96px;
      height: 26px;
      min-height: 26px;
      padding: 3px 8px 2px;
      border-radius: 0 0 12px 12px;
    }
    .phone-logo {
      width: 18px;
      height: 18px;
    }
    .phone-main-card.carrier-unicom .phone-logo {
      width: 19px;
      height: 19px;
    }
    .phone-logo-name {
      font-size: 9.5px;
    }
    .phone-flow {
      margin-top: 4px;
    }
    .phone-flow strong {
      font-size: 36px;
    }
    .phone-flow span {
      font-size: 21px;
    }
    .phone-rent {
      height: 22px;
      margin-top: 6px;
      padding: 0 7px;
      border-radius: 6px;
      font-size: 14px;
      line-height: 20px;
    }
    .phone-rent span {
      font-size: 12px;
    }
    .phone-benefit {
      height: 31px;
      padding-top: 7px;
      font-size: 17px;
    }
    .broadband-main-card {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      padding: 12px 8px 38px;
    }
    .operator-logo {
      width: 19px;
      height: 19px;
    }
    .operator-logo-pill {
      width: auto;
      height: 21px;
      min-height: 21px;
      max-height: 21px;
      padding: 0;
      border-radius: 0;
    }
    .carrier-unicom .operator-logo {
      width: 19px;
      height: 19px;
    }
    .operator-name {
      font-size: 11px;
      font-weight: 500;
    }
    .broadband-speed {
      margin-top: 13px;
    }
    .broadband-speed strong { font-size: 39px; }
    .broadband-speed span { font-size: 23px; }
    .broadband-month {
      margin-top: 5px;
      font-size: 15px;
    }
    .broadband-benefit {
      bottom: -2px;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
    }
    .title { font-size: 16px; }
    .value { font-size: 16px; }
    .label { font-size: 13px; }
    .buy {
      width: 82px;
      font-size: 16px;
    }
  }


  .phone-list-status {
    min-height: 112px;
    padding: 30px 18px;
    border: 1px solid #edf1f6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 28, 40, .055);
    text-align: center;
  }

  .phone-list-status-title {
    color: #333;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
  }

  .phone-list-status-desc {
    margin-top: 8px;
    color: #8a8a8a;
    font-size: 13px;
    line-height: 1.45;
  }


  .promo {
    cursor: pointer;
  }

  .promo-text {
    transition: opacity .22s ease, transform .22s ease;
  }

  .promo-text.is-swapping {
    animation: promo-marquee-in .34s ease;
  }

  @keyframes promo-marquee-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }