html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: #f6f6f6;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    .pc-loading {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #111;
      background:
        linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0,0,0,0.045) 1px, transparent 1px),
        #f7f7f7;
      background-size: 190px 190px;
      transition: opacity .24s ease, visibility .24s ease;
    }

    .pc-loading.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .pc-loading__top-line {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      background: #dedede;
      border-bottom: 1px solid #d4d4d4;
    }

    .pc-loading__brand {
      position: absolute;
      top: 112px;
      left: max(24px, calc((100vw - 1200px) / 2));
      display: flex;
      align-items: center;
      gap: 12px;
      user-select: none;
    }

    .pc-loading__brand-mark {
      position: relative;
      width: 44px;
      height: 44px;
    }

    .pc-loading__brand-mark::before {
      content: "♜";
      position: absolute;
      left: 0;
      top: -6px;
      color: #f2b600;
      font-size: 44px;
      line-height: 1;
      transform: rotate(-7deg);
    }

    .pc-loading__brand-mark::after {
      content: "♙";
      position: absolute;
      right: -4px;
      bottom: -2px;
      color: #39a800;
      font-size: 29px;
      line-height: 1;
    }

    .pc-loading__brand-text {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .pc-loading__card {
      position: relative;
      width: min(420px, calc(100vw - 32px));
      padding: 34px 32px 28px;
      text-align: center;
      background: rgba(255,255,255,.96);
      border: 1px solid #d7d7d7;
      box-shadow: 0 18px 45px rgba(0,0,0,.08);
    }

    .pc-loading__chess {
      width: 88px;
      height: 88px;
      margin: 0 auto 18px;
      display: grid;
      place-items: center;
      border: 6px solid #d8d8d8;
      background: #fff;
      color: #e4b747;
      font-size: 58px;
      line-height: 1;
      animation: pc-piece-pulse 1.6s ease-in-out infinite;
    }

    .pc-loading__title {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .pc-loading__subtitle {
      margin: 8px 0 22px;
      color: #656565;
      font-size: 13px;
    }

    .pc-loading__bar {
      height: 4px;
      overflow: hidden;
      background: #e7e7e7;
    }

    .pc-loading__bar-fill {
      width: 42%;
      height: 100%;
      background: #39a800;
      animation: pc-bar 1.08s ease-in-out infinite;
    }

    .pc-loading__payments {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 18px;
      color: #777;
      font-size: 12px;
    }

    .pc-loading__badge {
      padding: 4px 8px;
      border: 1px solid #dedede;
      background: #fafafa;
    }

    .pc-loading__corner {
      position: absolute;
      width: 48px;
      height: 48px;
      border-color: #d3d3d3;
      border-style: solid;
    }

    .pc-loading__corner--left {
      left: -18px;
      top: -18px;
      border-width: 20px 0 0 20px;
    }

    .pc-loading__corner--right {
      right: -18px;
      top: -18px;
      border-width: 20px 20px 0 0;
    }

    .pc-loading__footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 26px;
      text-align: center;
      color: #777;
      font-size: 12px;
    }

    @keyframes pc-bar {
      0% { transform: translateX(-120%); }
      50% { transform: translateX(80%); }
      100% { transform: translateX(260%); }
    }

    @keyframes pc-piece-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.045); }
    }

    @media (max-width: 640px) {
      .pc-loading__top-line { height: 58px; }
      .pc-loading__brand {
        top: 82px;
        left: 18px;
      }
      .pc-loading__brand-mark {
        width: 36px;
        height: 36px;
      }
      .pc-loading__brand-mark::before { font-size: 36px; }
      .pc-loading__brand-mark::after { font-size: 24px; }
      .pc-loading__brand-text { font-size: 24px; }
      .pc-loading__card {
        margin-top: 70px;
        padding: 28px 22px 24px;
      }
    }