.mall-page {
      position: relative;
      z-index: 2;
      width: min(1400px, calc(100% - 48px));
      margin: 36px auto 48px;
      display: grid;
      gap: 28px;
    }

    .mall-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(260px, 340px);
      gap: 24px;
      padding: 40px;
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(31, 21, 15, 0.64), rgba(15, 10, 8, 0.74));
      backdrop-filter: blur(6px);
    }

    .mall-hero h1 {
      font-size: clamp(2.4rem, 5vw, 4rem);
      line-height: 1.05;
      text-transform: uppercase;
      color: #f5e3cd;
    }

    .mall-summary {
      display: grid;
      gap: 16px;
      align-content: center;
    }

    .mall-stat {
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(212, 166, 118, 0.16);
      background: linear-gradient(180deg, rgba(97, 68, 44, 0.14), rgba(18, 13, 10, 0.34));
    }

    .mall-stat span {
      display: block;
      color: var(--muted);
      font-size: 0.92rem;
      margin-bottom: 8px;
    }

    .mall-stat strong {
      color: #f3dfc8;
      font-size: 1.1rem;
    }

    .mall-toolbar {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(28, 19, 14, 0.68), rgba(13, 9, 7, 0.76));
    }

    .mall-toolbar input,
    .mall-toolbar select {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(212, 166, 118, 0.18);
      background: rgba(255,255,255,0.05);
      color: #fff;
    }

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

    .mall-card {
      padding: 22px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(28, 19, 14, 0.68), rgba(13, 9, 7, 0.76));
      backdrop-filter: blur(6px);
    }

    .mall-card h3 {
      color: #f5e3cd;
      font-size: 1.35rem;
      margin-bottom: 10px;
    }

    .mall-card p {
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 14px;
    }

    .mall-meta {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
    }

    .mall-meta-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(212, 166, 118, 0.10);
    }

    .mall-meta-row span {
      color: var(--muted);
    }

    .mall-meta-row strong {
      color: #f3dec4;
      text-align: right;
    }

    .mall-items {
      margin-bottom: 18px;
      padding: 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(212, 166, 118, 0.10);
    }

    .mall-items h4 {
      color: #f3dec4;
      margin-bottom: 10px;
    }

    .mall-items ul {
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.7;
    }

    .mall-status {
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(212, 166, 118, 0.15);
      background: rgba(19, 13, 10, 0.56);
      color: var(--text);
    }

    .mall-status.success {
      border-color: rgba(120, 190, 120, 0.24);
      background: rgba(22, 34, 22, 0.48);
    }

    .mall-status.error {
      border-color: rgba(210, 95, 95, 0.24);
      background: rgba(52, 18, 18, 0.48);
    }

    @media (max-width: 1100px) {
      .mall-hero {
        grid-template-columns: 1fr;
      }
      .mall-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .mall-page {
        width: min(100% - 24px, 1400px);
      }
      .mall-grid {
        grid-template-columns: 1fr;
      }
      .mall-hero,
      .mall-toolbar {
        padding: 22px;
      }
    }