*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --gf-bg:           #0A0A0B;
      --gf-bg-elev1:     #111114;
      --gf-bg-elev2:     #16161B;
      --gf-glass:        rgba(18, 18, 22, 0.74);
      --gf-glass-strong: rgba(12, 12, 16, 0.88);

      --gf-line:         rgba(255, 255, 255, 0.10);
      --gf-line-strong:  rgba(255, 255, 255, 0.20);
      --gf-line-faint:   rgba(255, 255, 255, 0.05);

      --gf-text:         #F5F1E8;
      --gf-text-mute:    rgba(245, 241, 232, 0.55);
      --gf-text-faint:   rgba(245, 241, 232, 0.32);

      --gf-good:         #C7E9C9;
      --gf-warn:         #E8C09A;
      --gf-bad:          #E89A9A;
      --gf-info:         #B6D2E8;

      --gf-r-sm:         8px;
      --gf-r-md:         14px;
      --gf-r-lg:         22px;
      --gf-r-pill:       999px;

      --gf-ease:         cubic-bezier(.16, .84, .32, 1.05);
      --gf-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    html, body {
      min-height: 100%;
      background: var(--gf-bg);
      color: var(--gf-text);
      font-family: var(--gf-font);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; color: inherit; cursor: pointer; }
    img { display: block; max-width: 100%; }

    .account-bg {
      min-height: 100vh;
      background-color: var(--gf-bg);
      background-image:
        radial-gradient(120% 55% at 50% -8%, rgba(245, 241, 232, 0.05), transparent 60%);
    }

    .account-wrap {
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: 96px 24px 96px;
    }

    /* ──────────────────────────── top nav ───────────────────────────── */
    .account-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: calc(60px + env(safe-area-inset-top, 0));
      padding: env(safe-area-inset-top, 0) 24px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: linear-gradient(180deg,
        rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.30) 100%);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      border-bottom: 1px solid var(--gf-line-faint);
    }
    .nav-logo {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.30em;
      text-transform: uppercase;
      color: var(--gf-text);
    }
    .nav-right { display: flex; align-items: center; gap: 14px; }
    .nav-link {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gf-text-mute);
      padding: 8px 12px;
      border-radius: var(--gf-r-pill);
      transition: color 0.2s, background 0.2s;
    }
    .nav-link:hover { color: var(--gf-text); background: rgba(255, 255, 255, 0.04); }
    .nav-sign-out {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gf-text-mute);
      padding: 9px 16px;
      border-radius: var(--gf-r-pill);
      border: 1px solid var(--gf-line);
      background: transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .nav-sign-out:hover { color: var(--gf-text); border-color: var(--gf-line-strong); }

    /* ───────────────────────── page header ──────────────────────────── */
    .page-header {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--gf-line-faint);
      margin-bottom: 28px;
    }
    .page-header h1 {
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.05;
    }
    .header-meta {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
    }
    .section-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
      margin-bottom: 14px;
    }

    /* ───────────────────────────── tabs ─────────────────────────────── */
    .account-tabs {
      display: flex;
      gap: 4px;
      padding: 4px;
      margin-bottom: 28px;
      border-radius: var(--gf-r-pill);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--gf-line);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .account-tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
      flex: 1;
      min-width: 100px;
      padding: 11px 16px;
      border-radius: var(--gf-r-pill);
      border: none;
      background: transparent;
      color: var(--gf-text-mute);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: background 0.2s, color 0.2s;
      white-space: nowrap;
    }
    .tab-btn:hover { color: var(--gf-text); }
    .tab-btn.active { background: var(--gf-text); color: var(--gf-bg); }

    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ──────────────────────────── cards ─────────────────────────────── */
    .section-card,
    .plan-card,
    .order-card,
    .danger-card {
      padding: 24px;
      border-radius: var(--gf-r-lg);
      background:
        radial-gradient(120% 65% at 50% 0%, rgba(245, 241, 232, 0.04), transparent 62%),
        var(--gf-bg-elev2);
      border: 1px solid var(--gf-line);
      margin-bottom: 18px;
    }

    /* ─────────────────────────── profile ────────────────────────────── */
    .avatar {
      width: 84px; height: 84px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--gf-bg-elev1);
      border: 1px solid var(--gf-line);
      margin-bottom: 18px;
    }
    .profile-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--gf-line-faint);
      font-size: 14px;
    }
    .profile-row:last-child { border-bottom: none; }
    .profile-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
    }
    .profile-value {
      color: var(--gf-text);
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      text-align: right;
      word-break: break-word;
    }

    /* ─────────────────────────── plan card ──────────────────────────── */
    .plan-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
      color: var(--gf-text-faint);
    }
    .plan-name {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .plan-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      border-radius: var(--gf-r-pill);
      background: rgba(199, 233, 201, 0.10);
      border: 1px solid rgba(199, 233, 201, 0.32);
      color: var(--gf-good);
      margin-left: 8px;
      vertical-align: middle;
    }
    .plan-desc {
      font-size: 13.5px;
      color: var(--gf-text-mute);
      line-height: 1.65;
      margin-top: 10px;
    }
    .plan-features {
      display: flex;
      flex-direction: column;
      gap: 7px;
      list-style: none;
      margin: 16px 0 18px;
      padding: 0;
      font-size: 13px;
      color: var(--gf-text);
    }
    .plan-features li {
      position: relative;
      padding-left: 18px;
    }
    .plan-features li::before {
      content: '';
      position: absolute;
      left: 2px; top: 7px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--gf-good);
    }
    .plan-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 28px;
      border: none;
      border-radius: var(--gf-r-pill);
      background: var(--gf-text);
      color: var(--gf-bg);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
      transition: transform 0.15s;
    }
    .plan-cta:hover { transform: translateY(-1px); }

    /* ─────────────────── plan limits / usage bars ───────────────────── */
    .plan-limits {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .limit-item {
      padding: 14px;
      border-radius: var(--gf-r-md);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--gf-line);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .limit-label {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
    }
    .limit-val {
      font-size: 14px;
      font-weight: 600;
      color: var(--gf-text);
      font-variant-numeric: tabular-nums;
    }
    .usage-bar {
      width: 100%;
      height: 5px;
      border-radius: var(--gf-r-pill);
      background: var(--gf-bg-elev1);
      overflow: hidden;
      margin-top: 4px;
    }
    .usage-bar-col {
      height: 100%;
      background: var(--gf-good);
      border-radius: var(--gf-r-pill);
      transition: width 0.4s var(--gf-ease);
    }
    .usage-bar-col[data-level="warn"] { background: var(--gf-warn); }
    .usage-bar-col[data-level="bad"]  { background: var(--gf-bad); }

    /* ─────────────────────────── orders ─────────────────────────────── */
    .orders-loading,
    .orders-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 60px 20px;
      color: var(--gf-text-faint);
      text-align: center;
    }
    .order-card { padding: 0; }
    .order-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--gf-line-faint);
      flex-wrap: wrap;
    }
    .order-id {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.10em;
      color: var(--gf-text);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .order-date {
      font-size: 11px;
      color: var(--gf-text-faint);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .order-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 11px;
      border-radius: var(--gf-r-pill);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .order-status-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: currentColor;
    }
    .status-paid,
    .status-delivered  { background: rgba(199, 233, 201, 0.10); color: var(--gf-good);
                         border: 1px solid rgba(199, 233, 201, 0.30); }
    .status-processing,
    .status-shipped    { background: rgba(182, 210, 232, 0.10); color: var(--gf-info);
                         border: 1px solid rgba(182, 210, 232, 0.30); }
    .status-pending_payment { background: rgba(232, 192, 154, 0.10); color: var(--gf-warn);
                              border: 1px solid rgba(232, 192, 154, 0.30); }
    .status-cancelled  { background: rgba(232, 154, 154, 0.10); color: var(--gf-bad);
                         border: 1px solid rgba(232, 154, 154, 0.30); }

    .order-card-body { padding: 16px 20px; }
    .order-items { display: flex; flex-direction: column; gap: 12px; }
    .order-item {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .order-item-thumb {
      width: 56px; height: 56px;
      border-radius: var(--gf-r-sm);
      object-fit: contain;
      padding: 6px;
      background: var(--gf-bg-elev1);
      border: 1px solid var(--gf-line);
      flex-shrink: 0;
    }
    .order-item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .order-item-name {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--gf-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .order-item-qty {
      font-size: 11px;
      color: var(--gf-text-faint);
      letter-spacing: 0.04em;
    }
    .order-item-price {
      font-size: 13px;
      font-weight: 700;
      color: var(--gf-text);
      font-variant-numeric: tabular-nums;
    }
    .order-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 14px 20px;
      border-top: 1px solid var(--gf-line-faint);
    }
    .order-total-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
    }
    .order-total-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--gf-text);
      font-variant-numeric: tabular-nums;
    }

    /* ─────────────────────── tracking timeline ──────────────────────── */
    .tracking-timeline {
      padding: 18px 20px 6px;
      border-top: 1px solid var(--gf-line-faint);
    }
    .timeline-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
      margin-bottom: 14px;
    }
    .timeline-steps {
      display: flex;
      justify-content: space-between;
      gap: 4px;
      position: relative;
    }
    .timeline-steps::before {
      content: '';
      position: absolute;
      top: 7px; left: 14px; right: 14px;
      height: 1px;
      background: var(--gf-line-faint);
      z-index: 0;
    }
    .timeline-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      flex: 1;
      position: relative;
      z-index: 1;
    }
    .step-dot {
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--gf-bg-elev1);
      border: 1.5px solid var(--gf-line-strong);
      transition: background 0.2s, border-color 0.2s;
    }
    .timeline-step.done .step-dot,
    .timeline-step.active .step-dot {
      background: var(--gf-good);
      border-color: var(--gf-good);
    }
    .step-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
      text-align: center;
    }
    .timeline-step.done .step-label,
    .timeline-step.active .step-label { color: var(--gf-text); }

    /* ───────────────────────── face data ────────────────────────────── */
    .face-data-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
    }
    .face-data-item {
      padding: 16px;
      border-radius: var(--gf-r-md);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--gf-line);
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .face-data-label {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gf-text-faint);
    }
    .face-data-value {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--gf-text);
      font-variant-numeric: tabular-nums;
    }
    .face-data-unit {
      font-size: 11px;
      color: var(--gf-text-mute);
      margin-left: 4px;
      font-weight: 500;
    }
    .face-metadata {
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: var(--gf-r-md);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--gf-line-faint);
    }
    .face-metadata-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 0;
      font-size: 12.5px;
    }
    .face-metadata-label { color: var(--gf-text-faint); }
    .face-metadata-value { color: var(--gf-text); font-variant-numeric: tabular-nums; }

    .face-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 56px 20px;
      text-align: center;
      color: var(--gf-text-faint);
    }
    .face-buttons {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .btn-face {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 22px;
      border-radius: var(--gf-r-pill);
      border: 1px solid var(--gf-line);
      background: transparent;
      color: var(--gf-text-mute);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .btn-face:hover { color: var(--gf-text); border-color: var(--gf-line-strong); }
    .btn-face.primary {
      background: var(--gf-text);
      color: var(--gf-bg);
      border-color: var(--gf-text);
    }

    /* ─────────────────────── danger zone ────────────────────────────── */
    .danger-card {
      background:
        radial-gradient(120% 60% at 50% 0%, rgba(232, 154, 154, 0.06), transparent 60%),
        var(--gf-bg-elev2);
      border-color: rgba(232, 154, 154, 0.25);
    }
    .danger-info {
      font-size: 13px;
      color: var(--gf-text-mute);
      line-height: 1.65;
      margin: 8px 0 16px;
    }

    /* ─────────────────────────── buttons ────────────────────────────── */
    .btn-shop,
    .btn-sign-out-full {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 48px;
      padding: 0 22px;
      border-radius: var(--gf-r-pill);
      font-family: var(--gf-font);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border: 1px solid transparent;
      transition: transform 0.15s, background 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn-shop {
      background: var(--gf-text);
      color: var(--gf-bg);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    .btn-shop:hover { transform: translateY(-1px); }
    .btn-sign-out-full {
      background: transparent;
      color: var(--gf-bad);
      border-color: rgba(232, 154, 154, 0.40);
    }
    .btn-sign-out-full:hover {
      background: rgba(232, 154, 154, 0.08);
      border-color: rgba(232, 154, 154, 0.70);
    }

    /* ─────────────────────────── states ─────────────────────────────── */
    .spinner {
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 2.5px solid var(--gf-line);
      border-top-color: var(--gf-good);
      animation: acSpin 0.75s linear infinite;
    }
    @keyframes acSpin { to { transform: rotate(360deg); } }

    .skeleton {
      background: linear-gradient(100deg,
        var(--gf-bg-elev1) 30%, var(--gf-bg-elev2) 50%, var(--gf-bg-elev1) 70%);
      background-size: 220% 100%;
      border-radius: var(--gf-r-sm);
      color: transparent;
      animation: acShimmer 1.4s ease-in-out infinite;
    }
    @keyframes acShimmer {
      0%   { background-position: 130% 0; }
      100% { background-position: -130% 0; }
    }

    /* ────────────────────────── responsive ──────────────────────────── */
    @media (max-width: 768px) {
      .account-wrap { padding: 88px 18px 80px; }
      .account-nav { padding-left: 16px; padding-right: 16px; }
      .nav-link { display: none; }
      .order-item-thumb { width: 48px; height: 48px; }
      .order-item-price { font-size: 12px; }
    }
    @media (max-width: 480px) {
      .account-wrap { padding: 86px 14px 72px; }
      .section-card, .plan-card, .order-card, .danger-card { padding: 18px; }
      .face-data-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
      .face-data-item { padding: 12px; }
      .face-data-value { font-size: 18px; }
      .timeline-steps { gap: 2px; }
      .step-label { font-size: 9px; letter-spacing: 0.06em; }
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner, .skeleton, .usage-bar-col { animation: none; transition: none; }
    }