/* Extracted from monolith — keep selectors stable */

      /* ===== 共用 / CS 後台保留變數 ===== */
      :root {
        --blue: #0A6CF0;
        --blue-dark: #2563EB;
        --blue-soft: #eff6ff;
        --bg: #f1f5f9;
        --card: #ffffff;
        --text: #0f172a;
        --muted: #64748b;
        --line: #e2e8f0;
        --red: #e84032;
        --green: #22a765;
        --gold: #f59e0b;
      }

      * { box-sizing: border-box; }

      body {
        margin: 0;
        min-height: 100vh;
        background: #eef2f7;
        color: var(--text);
        font-family: Inter, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
      }

      body[data-page="auth"] {
        background: #070d18;
      }

      body[data-page="mall"],
      body[data-page="records"],
      body[data-page="redeem"] {
        background: #070d18;
      }

      button, input, select { font: inherit; }
      button { border: 0; cursor: pointer; }
      .hidden { display: none !important; }

      /* 司機端手機殼：居中、安全區 */
      #driverApp {
        position: relative;
        width: min(100%, 430px);
        min-height: 100vh;
        margin: 0 auto;
        overflow-x: hidden;
      }

      #driverApp.driver-auth-mode {
        position: relative;
        isolation: isolate;
        background: #070d18;
        color: #e2e8f0;
      }

      #driverApp.driver-auth-mode .auth-ambient,
      #driverApp.driver-mall-mode .auth-ambient {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }

      #driverApp.driver-auth-mode .auth-ambient-orb,
      #driverApp.driver-mall-mode .auth-ambient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(72px);
        opacity: 0.55;
      }

      #driverApp.driver-auth-mode .auth-ambient-orb-a,
      #driverApp.driver-mall-mode .auth-ambient-orb-a {
        top: -8%;
        left: 50%;
        width: min(420px, 90vw);
        height: 280px;
        transform: translateX(-50%);
        background: radial-gradient(circle, rgba(10, 108, 240, 0.42) 0%, transparent 70%);
      }

      #driverApp.driver-auth-mode .auth-ambient-orb-b,
      #driverApp.driver-mall-mode .auth-ambient-orb-b {
        right: -12%;
        bottom: 8%;
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, transparent 72%);
      }

      #driverApp.driver-auth-mode .auth-ambient-grid,
      #driverApp.driver-mall-mode .auth-ambient-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
        background-size: 32px 32px;
        mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 100%);
      }

      #driverApp.driver-auth-mode .auth-shell {
        position: relative;
        z-index: 1;
        width: min(100%, 420px);
        margin: 0 auto;
        padding: max(1.25rem, env(safe-area-inset-top)) 1rem calc(5rem + env(safe-area-inset-bottom));
        min-height: 100vh;
      }

      #driverApp.driver-auth-mode .auth-panel {
        animation: driver-page-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      #driverApp.driver-auth-mode .auth-hero {
        padding: 1.5rem 0 1.75rem;
        text-align: center;
      }

      #driverApp.driver-auth-mode .auth-hero-compact {
        padding-top: 2rem;
        padding-bottom: 1.25rem;
      }

      #driverApp.driver-auth-mode .auth-logo-ring {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        margin-bottom: 1rem;
        border-radius: 22px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
          0 18px 40px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }

      #driverApp.driver-auth-mode .auth-logo-ring-pulse {
        animation: auth-logo-pulse 2.8s ease-in-out infinite;
      }

      #driverApp.driver-auth-mode .auth-eyebrow {
        margin: 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(191, 219, 254, 0.72);
      }

      #driverApp.driver-auth-mode .auth-title {
        margin: 0.65rem 0 0;
        font-size: clamp(1.65rem, 5vw, 1.95rem);
        font-weight: 900;
        letter-spacing: 0.02em;
        color: #ffffff;
        text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      }

      #driverApp.driver-auth-mode .auth-lead {
        margin: 0.75rem auto 0;
        max-width: 20rem;
        font-size: 0.875rem;
        line-height: 1.65;
        color: rgba(203, 213, 225, 0.88);
      }

      #driverApp.driver-auth-mode .auth-card {
        position: relative;
        overflow: hidden;
        padding: 1.35rem;
        border-radius: 1.35rem;
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow:
          0 24px 48px rgba(0, 0, 0, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      #driverApp.driver-auth-mode .auth-card-shine {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
      }

      #driverApp.driver-auth-mode .auth-card-title {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        color: #ffffff;
      }

      #driverApp.driver-auth-mode .auth-card-desc {
        margin: 0.45rem 0 1.15rem;
        font-size: 0.8125rem;
        line-height: 1.6;
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-auth-mode .auth-form {
        display: grid;
        gap: 0.95rem;
      }

      #driverApp.driver-auth-mode .auth-field label {
        display: block;
        margin-bottom: 0.4rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(203, 213, 225, 0.82);
      }

      #driverApp.driver-auth-mode .auth-input-wrap {
        position: relative;
      }

      #driverApp.driver-auth-mode .auth-input-prefix {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.875rem;
        font-weight: 700;
        color: rgba(148, 163, 184, 0.9);
        pointer-events: none;
      }

      #driverApp.driver-auth-mode .auth-input {
        width: 100%;
        height: 3rem;
        padding: 0 1rem;
        border-radius: 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 15, 30, 0.72);
        color: #ffffff;
        font-size: 0.9375rem;
        font-weight: 600;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      }

      #driverApp.driver-auth-mode .auth-input-prefixed {
        padding-left: 3.65rem;
        letter-spacing: 0.04em;
      }

      #driverApp.driver-auth-mode .auth-input::placeholder {
        color: rgba(148, 163, 184, 0.72);
        font-weight: 500;
      }

      #driverApp.driver-auth-mode .auth-input:focus {
        border-color: rgba(96, 165, 250, 0.85);
        background: rgba(10, 18, 36, 0.92);
        box-shadow: 0 0 0 3px rgba(10, 108, 240, 0.22);
      }

      #driverApp.driver-auth-mode .auth-btn-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 3rem;
        border: 0;
        border-radius: 0.95rem;
        background: linear-gradient(135deg, #0a6cf0 0%, #2563eb 55%, #1d4ed8 100%);
        color: #ffffff;
        font-size: 0.9375rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        box-shadow:
          0 14px 28px rgba(10, 108, 240, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
        cursor: pointer;
      }

      #driverApp.driver-auth-mode .auth-btn-primary:disabled {
        opacity: 0.72;
        cursor: wait;
      }

      #driverApp.driver-auth-mode .auth-btn-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.85rem;
        border-radius: 0.95rem;
        border: 1px solid rgba(96, 165, 250, 0.28);
        background: rgba(10, 108, 240, 0.1);
        color: #bfdbfe;
        font-size: 0.875rem;
        font-weight: 800;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
      }

      #driverApp.driver-auth-mode .auth-btn-secondary:hover {
        background: rgba(10, 108, 240, 0.16);
        border-color: rgba(96, 165, 250, 0.42);
      }

      #driverApp.driver-auth-mode .auth-browse-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 0.75rem;
        min-height: 2.5rem;
        border-radius: 0.85rem;
        color: #93c5fd;
        font-size: 0.8125rem;
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s ease, background 0.2s ease;
      }

      #driverApp.driver-auth-mode .auth-browse-link:hover {
        color: #dbeafe;
        background: rgba(255, 255, 255, 0.04);
      }

      #driverApp.driver-auth-mode .auth-btn-ghost {
        width: 100%;
        min-height: 2.75rem;
        margin-top: 0.65rem;
        border: 0;
        border-radius: 0.85rem;
        background: transparent;
        color: rgba(148, 163, 184, 0.95);
        font-size: 0.875rem;
        font-weight: 700;
        cursor: pointer;
      }

      #driverApp.driver-auth-mode .auth-divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 1rem 0 0.85rem;
        color: rgba(100, 116, 139, 0.95);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      #driverApp.driver-auth-mode .auth-divider::before,
      #driverApp.driver-auth-mode .auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
      }

      #driverApp.driver-auth-mode .auth-message {
        min-height: 0;
        margin-top: 0.85rem;
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1.5;
        color: #93c5fd;
      }

      #driverApp.driver-auth-mode .auth-message.error {
        color: #fecaca !important;
        background: rgba(127, 29, 29, 0.32) !important;
        border: 1px solid rgba(248, 113, 113, 0.35) !important;
        border-radius: 0.85rem;
        padding: 0.65rem 0.8rem;
      }

      #driverApp.driver-auth-mode .auth-message-pending {
        text-align: center;
        color: #fcd34d;
      }

      #driverApp.driver-auth-mode .auth-perks {
        margin-top: 1.35rem;
      }

      #driverApp.driver-auth-mode .auth-perks-label {
        margin: 0 0 0.65rem;
        font-size: 0.6875rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(251, 191, 36, 0.82);
      }

      #driverApp.driver-auth-mode .auth-perks-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
      }

      #driverApp.driver-auth-mode .auth-perk {
        display: grid;
        gap: 0.45rem;
        justify-items: center;
        padding: 0.75rem 0.35rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      #driverApp.driver-auth-mode .auth-perk-icon {
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        overflow: hidden;
      }

      #driverApp.driver-auth-mode .auth-perk-icon.charger::before {
        left: 9px;
        top: 5px;
        width: 8px;
        height: 17px;
        border-radius: 2px;
      }

      #driverApp.driver-auth-mode .auth-perk-icon.charger::after {
        right: 4px;
        bottom: 5px;
        width: 14px;
        height: 8px;
        border-width: 2px;
      }

      #driverApp.driver-auth-mode .auth-perk-icon.massage::before {
        left: 5px;
        right: 5px;
        bottom: 7px;
        height: 7px;
        border-radius: 4px;
      }

      #driverApp.driver-auth-mode .auth-perk-icon.gift::before {
        font-size: 1.15rem;
      }

      #driverApp.driver-auth-mode .brand-mark::before {
        border-color: rgba(191, 219, 254, 0.95);
        border-right-color: transparent;
      }

      #driverApp.driver-auth-mode .brand-mark::after {
        color: #ffffff;
      }

      #driverApp.driver-auth-mode .auth-perk-name {
        font-size: 0.6875rem;
        font-weight: 700;
        color: rgba(226, 232, 240, 0.88);
        text-align: center;
      }

      #driverApp.driver-auth-mode .auth-trust {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 1.35rem;
      }

      #driverApp.driver-auth-mode .auth-trust-compact {
        margin-top: 1.15rem;
      }

      #driverApp.driver-auth-mode .auth-trust-item {
        display: grid;
        gap: 0.2rem;
        justify-items: center;
        padding: 0.8rem 0.35rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.07);
        text-align: center;
      }

      #driverApp.driver-auth-mode .auth-trust-icon {
        font-size: 0.95rem;
        line-height: 1;
      }

      #driverApp.driver-auth-mode .auth-trust-icon-gold {
        color: #fbbf24;
      }

      #driverApp.driver-auth-mode .auth-trust-item strong {
        font-size: 0.75rem;
        font-weight: 800;
        color: #f8fafc;
      }

      #driverApp.driver-auth-mode .auth-trust-item span {
        font-size: 0.625rem;
        line-height: 1.45;
        color: rgba(148, 163, 184, 0.92);
      }

      #driverApp.driver-auth-mode .auth-steps {
        list-style: none;
        margin: 0 0 1rem;
        padding: 0;
        display: grid;
        gap: 0.65rem;
      }

      #driverApp.driver-auth-mode .auth-step {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.8rem;
        align-items: start;
        padding: 0.85rem 0.95rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.07);
        color: rgba(148, 163, 184, 0.92);
      }

      #driverApp.driver-auth-mode .auth-step strong {
        display: block;
        font-size: 0.8125rem;
        font-weight: 800;
        color: rgba(226, 232, 240, 0.72);
      }

      #driverApp.driver-auth-mode .auth-step span {
        display: block;
        margin-top: 0.15rem;
        font-size: 0.6875rem;
        line-height: 1.45;
      }

      #driverApp.driver-auth-mode .auth-step-dot {
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(15, 23, 42, 0.8);
        font-size: 0.6875rem;
        font-weight: 800;
      }

      #driverApp.driver-auth-mode .auth-step.is-done {
        border-color: rgba(34, 197, 94, 0.22);
        background: rgba(22, 101, 52, 0.12);
      }

      #driverApp.driver-auth-mode .auth-step.is-done .auth-step-dot {
        border-color: rgba(34, 197, 94, 0.45);
        background: rgba(34, 197, 94, 0.18);
        color: #bbf7d0;
      }

      #driverApp.driver-auth-mode .auth-step.is-done strong {
        color: #dcfce7;
      }

      #driverApp.driver-auth-mode .auth-step.is-active {
        border-color: rgba(96, 165, 250, 0.35);
        background: rgba(10, 108, 240, 0.12);
        box-shadow: 0 0 0 1px rgba(10, 108, 240, 0.08);
      }

      #driverApp.driver-auth-mode .auth-step.is-active .auth-step-dot {
        border-color: rgba(96, 165, 250, 0.55);
        background: rgba(10, 108, 240, 0.22);
        color: #dbeafe;
      }

      #driverApp.driver-auth-mode .auth-step.is-active strong {
        color: #ffffff;
      }

      #driverApp.driver-auth-mode .auth-steps.is-rejected .auth-step.is-active {
        border-color: rgba(248, 113, 113, 0.35);
        background: rgba(127, 29, 29, 0.18);
      }

      #driverApp.driver-auth-mode .auth-steps.is-rejected .auth-step.is-active .auth-step-dot {
        border-color: rgba(248, 113, 113, 0.45);
        background: rgba(220, 38, 38, 0.22);
        color: #fecaca;
      }

      #driverApp.driver-auth-mode .auth-steps.is-rejected .auth-step.is-active strong {
        color: #fecaca;
      }

      @keyframes auth-panel-in {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ===== 司機端頁面切換（深色 premium） ===== */
      @view-transition {
        navigation: auto;
      }

      #driverApp {
        view-transition-name: driver-app;
      }

      #driverApp.driver-mall-mode .mall-tabbar {
        view-transition-name: driver-tabbar;
      }

      #driverApp.driver-mall-mode .mall-shell,
      #driverApp.driver-auth-mode .auth-shell {
        view-transition-name: driver-content;
      }

      ::view-transition-old(driver-content),
      ::view-transition-new(driver-content) {
        animation-duration: 0.42s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
      }

      ::view-transition-old(driver-tabbar),
      ::view-transition-new(driver-tabbar) {
        animation-duration: 0.32s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
      }

      @keyframes driver-page-in {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes driver-page-out {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0;
          transform: translateY(-10px);
        }
      }

      @keyframes driver-card-in {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      #driverApp.driver-mall-mode .mall-shell {
        animation: driver-page-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      #driverApp.is-page-leaving .mall-shell {
        animation: driver-page-out 0.24s ease both;
      }

      .animate-fade-in {
        animation: driver-page-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .animate-fade-up {
        animation: driver-card-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      @media (prefers-reduced-motion: reduce) {
        @view-transition {
          navigation: none;
        }

        #driverApp.driver-auth-mode .auth-panel,
        #driverApp.driver-mall-mode .mall-shell,
        .animate-fade-in,
        .animate-fade-up {
          animation: none !important;
        }

        #driverApp.is-page-leaving .mall-shell {
          animation: none !important;
        }
      }

      @keyframes auth-logo-pulse {
        0%,
        100% {
          box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 0 0 rgba(10, 108, 240, 0);
        }
        50% {
          box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 0 10px rgba(10, 108, 240, 0.08);
        }
      }

      #driverApp.driver-mall-mode {
        position: relative;
        isolation: isolate;
        background: var(--mall-bg, #070d18);
        color: var(--mall-text, #e2e8f0);
      }

      #driverApp.driver-mall-mode .mall-shell {
        position: relative;
        z-index: 1;
        width: min(100%, 420px);
        margin: 0 auto;
        padding: max(1.25rem, env(safe-area-inset-top)) 1rem calc(5rem + env(safe-area-inset-bottom));
        min-height: 100vh;
      }

      #driverApp.driver-mall-mode .mall-link {
        color: var(--mall-primary, #60a5fa);
        text-decoration: none;
        font-weight: 800;
      }

      #driverApp.driver-mall-mode .mall-points-help-wrap {
        position: relative;
        flex-shrink: 0;
      }

      #driverApp.driver-mall-mode .mall-points-help-btn {
        display: grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.38);
        background: rgba(148, 163, 184, 0.16);
        color: #94a3b8;
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1;
        cursor: help;
      }

      #driverApp.driver-mall-mode .mall-points-help-tip {
        position: absolute;
        right: 0;
        bottom: calc(100% + 0.5rem);
        z-index: 20;
        width: min(16.5rem, 72vw);
        padding: 0.7rem 0.8rem;
        border-radius: 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(15, 23, 42, 0.96);
        color: #e2e8f0;
        font-size: 0.6875rem;
        font-weight: 600;
        line-height: 1.55;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.38);
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
      }

      @media (hover: hover) and (pointer: fine) {
        #driverApp.driver-mall-mode .mall-points-help-wrap:hover .mall-points-help-tip,
        #driverApp.driver-mall-mode .mall-points-help-wrap:focus-within .mall-points-help-tip {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          pointer-events: auto;
        }
      }

      #driverApp.driver-mall-mode .mall-points-help-wrap.is-open .mall-points-help-tip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      #driverApp.driver-mall-mode .mall-badge-gold {
        padding: 0.25rem 0.625rem;
        border-radius: 999px;
        background: rgba(245, 158, 11, 0.14);
        border: 1px solid rgba(251, 191, 36, 0.28);
        font-size: 10px;
        font-weight: 800;
        color: #fbbf24;
      }

      #driverApp.driver-mall-mode .mall-glass-card {
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
      }

      #driverApp.driver-mall-mode .mall-surface-card {
        border-radius: 1rem;
        padding: 0.875rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      }

      #driverApp.driver-mall-mode .mall-surface-title {
        font-size: 13px;
        font-weight: 800;
        line-height: 1.45;
        color: #f1f5f9;
      }

      #driverApp.driver-mall-mode .mall-surface-meta {
        font-size: 11px;
        color: rgba(148, 163, 184, 0.92);
      }

      #driverApp.driver-mall-mode .mall-stat-card {
        border-radius: 1rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      }

      #driverApp.driver-mall-mode .mall-stat-label {
        font-size: 11px;
        font-weight: 700;
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-mall-mode .mall-stat-value {
        display: block;
        margin-top: 0.25rem;
        font-size: 1.25rem;
        font-weight: 900;
        color: var(--mall-primary, #60a5fa);
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .mall-page-eyebrow {
        font-size: 11px;
        letter-spacing: 0.2em;
        font-weight: 700;
        text-transform: uppercase;
        color: rgba(96, 165, 250, 0.88);
      }

      #driverApp.driver-mall-mode .mall-page-title {
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        color: #ffffff;
      }

      #driverApp.driver-mall-mode .mall-page-lead {
        margin-top: 0.25rem;
        font-size: 12px;
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-mall-mode .mall-points-pill {
        flex-shrink: 0;
        border-radius: 1rem;
        padding: 0.5rem 0.75rem;
        text-align: right;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      }

      #driverApp.driver-mall-mode .mall-points-pill-label {
        font-size: 10px;
        font-weight: 700;
        color: rgba(148, 163, 184, 0.92);
      }

      #driverApp.driver-mall-mode .mall-points-pill-value {
        margin-top: 2px;
        font-size: 1.125rem;
        font-weight: 900;
        line-height: 1;
        color: var(--mall-primary, #60a5fa);
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .mall-input {
        width: 100%;
        min-height: 2.75rem;
        padding: 0 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 15, 30, 0.72);
        color: #ffffff;
        font-size: 0.875rem;
        font-weight: 600;
        outline: none;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
      }

      #driverApp.driver-mall-mode .mall-input::placeholder {
        color: rgba(148, 163, 184, 0.72);
      }

      #driverApp.driver-mall-mode .mall-input:focus {
        border-color: rgba(96, 165, 250, 0.85);
        box-shadow: 0 0 0 3px rgba(10, 108, 240, 0.22);
      }

      #driverApp.driver-mall-mode .mall-select {
        min-height: 2.5rem;
        padding: 0 0.75rem;
        border-radius: 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 15, 30, 0.72);
        color: #e2e8f0;
        font-size: 12px;
        font-weight: 700;
      }

      #driverApp.driver-mall-mode .mall-tabbar .glass-card {
        background: rgba(15, 23, 42, 0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
      }

      #driverApp.driver-mall-mode .mall-tabbar .tab {
        color: rgba(148, 163, 184, 0.95) !important;
        background: transparent !important;
        text-decoration: none;
      }

      #driverApp.driver-mall-mode .mall-tabbar .tab.active {
        color: #93c5fd !important;
        background: rgba(10, 108, 240, 0.18) !important;
      }

      #driverApp.driver-mall-mode .cat-chip span:first-child {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
      }

      #driverApp.driver-mall-mode .cat-chip[data-category="all"] span:first-child {
        background: linear-gradient(135deg, var(--mall-primary, #0A6CF0), var(--mall-primary-dark, #2563EB)) !important;
        color: #ffffff !important;
        border-color: transparent !important;
      }

      #driverApp.driver-mall-mode .cat-chip:not([data-category="all"]) span:first-child {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #e2e8f0 !important;
      }

      #driverApp.driver-mall-mode #mallGoRecordsBtn {
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
      }

      #driverApp.driver-mall-mode #mallRulesCard {
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
      }

      #driverApp.driver-mall-mode .mall-product-card {
        border-radius: var(--mall-product-radius, 16px);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
      }

      #driverApp.driver-mall-mode .mall-product-card:hover {
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
      }

      #driverApp.driver-mall-mode .mall-product-body {
        padding: 0.75rem;
      }

      #driverApp.driver-mall-mode .mall-product-category {
        margin: 0 0 0.25rem;
        font-size: 10px;
        font-weight: 700;
        color: rgba(148, 163, 184, 0.92);
      }

      #driverApp.driver-mall-mode .mall-product-name {
        margin: 0;
        min-height: 34px;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.35;
        color: #f8fafc;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      #driverApp.driver-mall-mode .mall-product-points {
        margin: 0;
        font-size: 14px;
        font-weight: 900;
        color: var(--mall-primary, #60a5fa);
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .mall-product-points-unit {
        margin-left: 2px;
        font-size: 10px;
        font-weight: 800;
        color: #fbbf24;
      }

      #driverApp.driver-mall-mode .mall-product-btn {
        min-height: 2.25rem;
        border: 0;
        border-radius: 0.75rem;
        background: linear-gradient(135deg, var(--mall-button, #0A6CF0), var(--mall-primary-dark, #2563EB));
        color: #ffffff;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 10px 22px rgba(10, 108, 240, 0.24);
      }

      #driverApp.driver-mall-mode .mall-product-btn:disabled {
        opacity: 0.45;
        filter: grayscale(0.35);
      }

      #driverApp.driver-mall-mode .mall-product-badge {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        padding: 0.125rem 0.5rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(6px);
        font-size: 10px;
        font-weight: 800;
        color: #ffffff;
      }

      #driverApp.driver-mall-mode .mall-product-badge-warn {
        left: auto;
        right: 0.5rem;
        background: rgba(245, 158, 11, 0.92);
      }

      #driverApp.driver-mall-mode .records-block h3 {
        color: #f1f5f9;
      }

      #driverApp.driver-mall-mode .records-filter-input,
      #driverApp.driver-mall-mode .records-filter-select {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 15, 30, 0.72);
        color: #f8fafc;
      }

      #driverApp.driver-mall-mode .records-more-btn {
        border: 1px dashed rgba(148, 163, 184, 0.35);
        background: rgba(255, 255, 255, 0.04);
        color: #93c5fd;
      }

      #driverApp.driver-mall-mode .records-page-btn {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        color: #e2e8f0;
      }

      #driverApp.driver-mall-mode .records-page-label,
      #driverApp.driver-mall-mode .records-footer-meta {
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-mall-mode .redeem-chip {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        color: rgba(203, 213, 225, 0.95);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
      }

      #driverApp.driver-mall-mode .redeem-chip.is-active {
        border-color: transparent;
        background: linear-gradient(135deg, var(--mall-button, #0A6CF0), var(--mall-primary-dark, #2563EB));
        color: #ffffff;
        box-shadow: 0 12px 26px rgba(10, 108, 240, 0.28);
      }

      /* 司機端：兌換確認／結果對話框 + Toast */
      body.driver-dialog-lock {
        overflow: hidden;
      }

      .driver-dialog {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        padding: 1.25rem;
      }

      .driver-dialog.hidden {
        display: none !important;
      }

      .driver-dialog-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 6, 23, 0.72);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .driver-dialog-card {
        position: relative;
        z-index: 1;
        width: min(100%, 22rem);
        padding: 1.35rem 1.25rem 1.2rem;
        border-radius: 1.35rem;
        background: linear-gradient(165deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow:
          0 28px 56px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        text-align: center;
        animation: driver-dialog-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .driver-dialog-icon {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0 auto 0.85rem;
        border-radius: 999px;
        font-size: 1.05rem;
        font-weight: 900;
        color: #dbeafe;
        background: rgba(10, 108, 240, 0.18);
        border: 1px solid rgba(96, 165, 250, 0.35);
      }

      .driver-dialog-icon[data-tone="success"] {
        color: #bbf7d0;
        background: rgba(34, 197, 94, 0.16);
        border-color: rgba(74, 222, 128, 0.35);
      }

      .driver-dialog-icon[data-tone="error"] {
        color: #fecaca;
        background: rgba(239, 68, 68, 0.16);
        border-color: rgba(248, 113, 113, 0.35);
      }

      .driver-dialog-icon[data-tone="confirm"] {
        color: #fde68a;
        background: rgba(245, 158, 11, 0.14);
        border-color: rgba(251, 191, 36, 0.32);
      }

      .driver-dialog-title {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 900;
        color: #f8fafc;
        letter-spacing: 0.01em;
      }

      .driver-dialog-body {
        margin: 0.55rem 0 0;
        font-size: 0.8125rem;
        line-height: 1.65;
        color: rgba(203, 213, 225, 0.92);
        white-space: pre-line;
      }

      .driver-dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
        margin-top: 1.2rem;
      }

      .driver-dialog-actions:has(.driver-dialog-btn:only-child) {
        grid-template-columns: 1fr;
      }

      .driver-dialog-btn {
        min-height: 2.75rem;
        border-radius: 0.95rem;
        font-size: 0.875rem;
        font-weight: 800;
        cursor: pointer;
      }

      .driver-dialog-btn-ghost {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #cbd5e1;
      }

      .driver-dialog-btn-primary {
        border: 0;
        background: linear-gradient(135deg, #0a6cf0, #2563eb);
        color: #ffffff;
        box-shadow: 0 12px 24px rgba(10, 108, 240, 0.28);
      }

      .driver-dialog-btn-primary.is-danger {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        box-shadow: 0 12px 24px rgba(220, 38, 38, 0.28);
      }

      .driver-toast-host {
        position: fixed;
        left: 50%;
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
        z-index: 90;
        display: grid;
        gap: 0.5rem;
        width: min(92vw, 22rem);
        transform: translateX(-50%);
        pointer-events: none;
      }

      .driver-toast {
        padding: 0.75rem 0.95rem;
        border-radius: 0.95rem;
        background: rgba(15, 23, 42, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #e2e8f0;
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1.45;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.22s ease, transform 0.22s ease;
      }

      .driver-toast.is-in {
        opacity: 1;
        transform: translateY(0);
      }

      .driver-toast.is-out {
        opacity: 0;
        transform: translateY(6px);
      }

      .driver-toast-error {
        border-color: rgba(248, 113, 113, 0.35);
        color: #fecaca;
      }

      .driver-toast-success {
        border-color: rgba(74, 222, 128, 0.35);
        color: #bbf7d0;
      }

      @keyframes driver-dialog-in {
        from {
          opacity: 0;
          transform: translateY(12px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .driver-dialog-card,
        .driver-toast {
          animation: none !important;
          transition: none !important;
        }
      }

      #mallView .mall-section-title { color: var(--mall-text, #f8fafc); }
      #mallView .mall-section-sub { color: var(--mall-muted, #94a3b8); }
      #mallView [data-product-id] {
        background: linear-gradient(90deg, var(--mall-button, #0A6CF0), var(--mall-primary-dark, #2563EB)) !important;
      }

      #mallView #products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mall-product-gap, 12px);
      }

      #mallView #products article {
        border-radius: var(--mall-product-radius, 16px);
      }

      #mallView #products .product-image {
        height: var(--mall-product-image-h, 112px);
      }

      #mallView #products.is-layout-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #mallView #products.is-layout-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      #mallView #products.is-layout-grid-3 h3 {
        font-size: 11px;
        min-height: 28px;
      }

      #mallView #products.is-layout-grid-3 .p-3 {
        padding: 0.55rem;
      }

      #mallView #products.is-layout-grid-3 button[data-product-id] {
        height: 2rem;
        font-size: 10px;
      }

      #mallView #products.is-layout-list {
        grid-template-columns: 1fr;
      }

      #mallView #products.is-layout-list > article {
        display: grid;
        grid-template-columns: var(--mall-product-list-thumb, 108px) minmax(0, 1fr);
        align-items: stretch;
      }

      #mallView #products.is-layout-list .product-image {
        height: 100%;
        min-height: var(--mall-product-image-h, 112px);
      }

      #mallView #products.is-layout-list h3 {
        min-height: 0;
      }

      #mallView #products.is-layout-list .p-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* 積分卡：深色 premium 玻璃卡 */
      #driverApp.driver-mall-mode .mall-points-card {
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--mall-text, #f8fafc);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
      }

      .mall-points-card {
        background: var(--mall-card, #ffffff);
        border: 1px solid rgba(226, 232, 240, 0.95);
        color: var(--mall-text, #0f172a);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .mall-points-card .mall-points-label {
        color: var(--mall-primary, #0A6CF0);
      }

      .mall-points-card .mall-points-sub {
        color: var(--mall-muted, #64748b);
      }

      #driverApp.driver-mall-mode .mall-points-card .mall-points-box {
        background: rgba(10, 108, 240, 0.14);
        border: 1px solid rgba(96, 165, 250, 0.22);
      }

      .mall-points-card .mall-points-box {
        background: color-mix(in srgb, var(--mall-primary, #0A6CF0) 8%, #ffffff);
        border: 1px solid color-mix(in srgb, var(--mall-primary, #0A6CF0) 18%, #ffffff);
      }

      #driverApp.driver-mall-mode .mall-avatar-btn {
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
      }

      .mall-avatar-btn {
        padding: 0;
        border: 0;
        cursor: pointer;
        background: #E4E6EB;
      }

      .mall-avatar-fallback {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        line-height: 0;
      }

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

      .mall-avatar-btn .mall-avatar-edit {
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      .mall-avatar-btn:hover .mall-avatar-edit,
      .mall-avatar-btn:focus-visible .mall-avatar-edit {
        opacity: 1;
      }

      @media (hover: none) {
        .mall-avatar-btn .mall-avatar-edit {
          opacity: 1;
        }
      }

      .mall-banner-carousel {
        position: relative;
      }

      .mall-banner-track {
        position: relative;
        width: 100%;
        overflow: hidden;
      }

      .mall-banner-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s ease;
        text-align: left;
        overflow: hidden;
        background: #0A6CF0;
      }

      .mall-banner-slide.is-active {
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
      }

      .mall-banner-slide.is-clickable {
        cursor: pointer;
      }

      .mall-banner-slide-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mall-banner-slide-deco {
        position: absolute;
        inset: 0;
        opacity: 0.3;
        pointer-events: none;
        background-image:
          radial-gradient(circle at 80% 30%, #fff 0, transparent 35%),
          radial-gradient(circle at 20% 80%, #60a5fa 0, transparent 40%);
      }

      .mall-banner-slide-content {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .mall-banner-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
      }

      .mall-banner-title {
        display: block;
        margin-top: 0.625rem;
        font-weight: 900;
        line-height: 1.25;
        white-space: pre-line;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      }

      .mall-banner-subtitle {
        display: block;
        font-size: 12px;
        font-weight: 500;
        opacity: 0.92;
      }

      .mall-banner-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        z-index: 3;
        display: flex;
        justify-content: center;
        gap: 6px;
        pointer-events: none;
      }

      .mall-banner-dot {
        pointer-events: auto;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        border: 0;
        padding: 0;
        background: rgba(255, 255, 255, 0.45);
        cursor: pointer;
      }

      .mall-banner-dot.is-active {
        width: 16px;
        background: #ffffff;
      }

      .layout-slides-list {
        display: grid;
        gap: 10px;
      }

      .layout-slide-card {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        padding: 10px;
      }

      .layout-slide-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 13px;
      }

      .layout-slide-image-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .layout-slide-thumb {
        width: 56px;
        height: 36px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        background: #f8fafc;
      }

      .layout-slide-thumb.is-empty {
        display: grid;
        place-items: center;
        font-size: 11px;
        color: #94a3b8;
      }

      .redeem-chip {
        flex-shrink: 0;
        height: 36px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      }

      .redeem-chip.is-active {
        border-color: transparent;
        background: linear-gradient(135deg, #0A6CF0, #2563EB);
        color: #ffffff;
        box-shadow: 0 10px 22px rgba(10, 108, 240, 0.25);
      }

      /* CS 入口：低調小點 */
      .admin-dot {
        position: absolute;
        top: max(16px, env(safe-area-inset-top));
        right: 16px;
        z-index: 30;
        width: 10px;
        height: 10px;
        padding: 0;
        border-radius: 50%;
        background: #0A6CF0;
        box-shadow: 0 0 0 4px rgba(10, 108, 240, 0.15);
        opacity: 0.7;
      }

      /* 玻璃擬態卡片 */
      .glass-card {
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0 8px 32px rgba(15, 39, 79, 0.1);
      }

      .glass-dark {
        background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      /* 品牌 Logo 標記 */
      .brand-mark {
        position: relative;
        width: 56px;
        height: 46px;
        margin: 0 auto;
      }
      .brand-mark::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 6px solid #0A6CF0;
        border-right-color: transparent;
        border-radius: 50%;
        transform: rotate(35deg);
      }
      .brand-mark::after {
        content: "G";
        position: absolute;
        right: 2px;
        bottom: 6px;
        color: #0A6CF0;
        font-size: 18px;
        font-weight: 900;
      }
      .pin {
        position: absolute;
        left: 20px;
        top: 11px;
        width: 16px;
        height: 21px;
        background: #e71d2b;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
      }
      .pin::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 5px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
      }

      /* 主按鈕點擊反饋 */
      .btn-press {
        transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
      }
      .btn-press:active {
        transform: scale(0.97);
        filter: brightness(0.95);
      }

      /* 商品預設圖樣（無自訂圖時） */
      .product-image {
        height: 112px;
        background: #eef6fb;
        position: relative;
        overflow: hidden;
      }
      .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .charger::before {
        content: "";
        position: absolute;
        left: 34px; top: 18px;
        width: 27px; height: 58px;
        border-radius: 5px;
        background: linear-gradient(#ffffff 0 20%, #1080bf 21% 64%, #202a37 65% 100%);
      }
      .charger::after {
        content: "";
        position: absolute;
        right: 12px; bottom: 15px;
        width: 50px; height: 28px;
        border-radius: 50% 50% 6px 6px;
        background: #ffffff;
        border: 4px solid #d5dee7;
      }
      .massage {
        background:
          radial-gradient(circle at 61% 42%, rgba(255, 200, 105, 0.82), transparent 24%),
          linear-gradient(135deg, #593522, #c98a45);
      }
      .massage::before {
        content: "";
        position: absolute;
        left: 14px; right: 14px; bottom: 22px;
        height: 20px; border-radius: 9px; background: #2d1a14;
      }
      .oil {
        background:
          radial-gradient(circle at 72% 24%, #e9c2a9 0 13%, transparent 14%),
          linear-gradient(135deg, #d6e7f6, #1f3447);
      }
      .oil::before {
        content: "";
        position: absolute;
        left: 50%; bottom: 10px;
        width: 30px; height: 56px;
        border-radius: 10px 10px 5px 5px;
        background: linear-gradient(#f5f7fb 0 52%, #0f263d 53% 100%);
      }
      .gift {
        background: linear-gradient(135deg, #fff4df, #ffb347);
      }
      .gift::before {
        content: "🎁";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 28px;
      }

      .admin-product-thumb {
        width: 72px; height: 48px;
        border-radius: 4px; overflow: hidden;
        border: 1px solid #e8e8e8;
        background: #eef6fb; position: relative;
      }
      .admin-product-thumb img {
        width: 100%; height: 100%; object-fit: cover; display: block;
      }
      .admin-product-file { width: 100%; max-width: 180px; font-size: 12px; }
      .admin-product-form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px; margin-bottom: 12px;
      }

      /* 分類橫向捲動隱藏 scrollbar */
      .cat-scroll::-webkit-scrollbar { display: none; }
      .cat-scroll { -ms-overflow-style: none; scrollbar-width: none; }

      /* Banner 輪播點 */
      .banner-dot.active { width: 18px; background: #fff; }

      /* ===== CS 後台既有樣式（精簡保留） ===== */
      .subtext { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
      .field { display: grid; gap: 7px; margin-bottom: 14px; }
      .field label { font-size: 13px; font-weight: 800; }
      .field input,
      .field select {
        position: relative; z-index: 2; width: 100%; height: 46px;
        padding: 0 13px; border: 1px solid #d7e2ea; border-radius: 12px;
        outline: none; background: #fbfdff; user-select: text;
      }

      .primary-btn,
      .secondary-btn,
      .danger-btn {
        width: 100%;
        min-height: 46px;
        border-radius: 12px;
        font-weight: 900;
      }

      .primary-btn {
        color: #ffffff;
        background: linear-gradient(135deg, var(--blue), #1394df);
      }

      .secondary-btn {
        color: var(--blue);
        background: var(--blue-soft);
      }

      .danger-btn {
        color: #ffffff;
        background: var(--red);
      }

      .link-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 14px;
      }

      .link-row button {
        color: var(--blue);
        background: transparent;
        font-size: 13px;
        font-weight: 800;
      }

      .status-card {
        padding: 22px 20px;
        text-align: center;
      }

      .status-icon {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        margin: 0 auto 12px;
        border-radius: 50%;
        background: var(--blue-soft);
        color: var(--blue);
        font-size: 28px;
      }

      .profile-card {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
        color: #ffffff;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 30%, transparent 30% 62%, rgba(255, 255, 255, 0.1) 62%),
          linear-gradient(135deg, #0d74b7 0%, #2f9ce0 100%);
        box-shadow: 0 8px 18px rgba(12, 117, 186, 0.22);
      }

      .avatar {
        position: relative;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border: 3px solid rgba(255, 255, 255, 0.75);
        border-radius: 50%;
        background: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(8, 117, 185, 0.08);
      }

      .avatar::before {
        content: "";
        position: absolute;
        width: 31px;
        height: 31px;
        border: 5px solid var(--blue);
        border-right-color: transparent;
        border-radius: 50%;
        transform: rotate(35deg);
      }

      .avatar::after {
        content: "";
        position: absolute;
        left: 21px;
        top: 15px;
        width: 12px;
        height: 16px;
        border-radius: 50% 50% 50% 0;
        background:
          radial-gradient(circle at 50% 50%, #ffffff 0 22%, transparent 24%),
          #e71d2b;
        transform: rotate(-45deg);
        box-shadow: 13px 14px 0 -5px var(--blue);
      }

      .driver-name {
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 800;
      }

      .points-line {
        font-size: 13px;
        font-weight: 700;
      }

      .points {
        font-size: 28px;
        font-weight: 900;
      }

      .coin-pill {
        align-self: flex-start;
        padding: 5px 8px;
        border-radius: 999px;
        color: #0f70aa;
        background: rgba(255, 255, 255, 0.92);
        font-size: 12px;
        font-weight: 900;
      }

      .hero {
        height: 112px;
        display: flex;
        align-items: center;
        margin-top: 12px;
        padding: 16px;
        border-radius: 15px;
        overflow: hidden;
        color: #ffffff;
        background:
          linear-gradient(90deg, rgba(0, 103, 170, 0.98) 0 58%, rgba(0, 103, 170, 0.52) 58%),
          radial-gradient(circle at 84% 50%, #f7d1b9 0 13%, transparent 14%),
          linear-gradient(120deg, #117dc6, #0b5f9f);
        position: relative;
      }

      .hero strong {
        display: block;
        width: 210px;
        font-size: 24px;
        line-height: 1.12;
      }

      .driver-photo {
        position: absolute;
        right: 16px;
        bottom: 0;
        width: 92px;
        height: 92px;
        border-radius: 10px 10px 0 0;
        background:
          radial-gradient(circle at 50% 22%, #f5cdb8 0 14%, transparent 15%),
          linear-gradient(105deg, transparent 0 43%, #0f3150 44% 59%, transparent 60%),
          linear-gradient(#ffffff 0 58%, #dfe8f2 59% 100%);
      }

      .categories {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
        margin: 15px 0;
      }

      .category {
        text-align: center;
        font-size: 11px;
        font-weight: 800;
      }

      .cat-icon {
        display: grid;
        place-items: center;
        height: 32px;
        margin-bottom: 4px;
        font-size: 23px;
      }

      .section-title {
        margin: 18px 0 10px;
        font-size: 18px;
        font-weight: 900;
      }

      .products {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .product-card {
        overflow: hidden;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid var(--line);
        box-shadow: 0 6px 14px rgba(15, 57, 90, 0.08);
      }

      .product-image {
        height: 96px;
        background: #eef6fb;
        position: relative;
      }

      .charger::before {
        content: "";
        position: absolute;
        left: 34px;
        top: 14px;
        width: 27px;
        height: 58px;
        border-radius: 5px;
        background: linear-gradient(#ffffff 0 20%, #1080bf 21% 64%, #202a37 65% 100%);
      }

      .charger::after {
        content: "";
        position: absolute;
        right: 12px;
        bottom: 15px;
        width: 50px;
        height: 28px;
        border-radius: 50% 50% 6px 6px;
        background: #ffffff;
        border: 4px solid #d5dee7;
      }

      .massage {
        background:
          radial-gradient(circle at 61% 42%, rgba(255, 200, 105, 0.82), transparent 24%),
          linear-gradient(135deg, #593522, #c98a45);
      }

      .massage::before {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 22px;
        height: 20px;
        border-radius: 9px;
        background: #2d1a14;
      }

      .oil {
        background:
          radial-gradient(circle at 72% 24%, #e9c2a9 0 13%, transparent 14%),
          linear-gradient(135deg, #d6e7f6, #1f3447);
      }

      .oil::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 10px;
        width: 30px;
        height: 56px;
        border-radius: 10px 10px 5px 5px;
        background: linear-gradient(#f5f7fb 0 52%, #0f263d 53% 100%);
      }

      .gift {
        background: linear-gradient(135deg, #fff4df, #ffb347);
      }

      .gift::before {
        content: "🎁";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 28px;
      }

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

      .admin-product-thumb {
        width: 72px;
        height: 48px;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #e8e8e8;
        background: #eef6fb;
        position: relative;
      }

      .admin-product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .admin-product-file {
        width: 100%;
        max-width: 180px;
        font-size: 12px;
      }

      .admin-label-with-help {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .admin-help-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .admin-help-btn {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 1px solid #94a3b8;
        background: #f8fafc;
        color: #475569;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        padding: 0;
        cursor: help;
        display: inline-grid;
        place-items: center;
      }

      .admin-help-btn:hover,
      .admin-help-btn:focus-visible {
        border-color: #0A6CF0;
        color: #0A6CF0;
        background: #eff6ff;
        outline: none;
      }

      .admin-help-tip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        width: min(260px, 70vw);
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        color: #1e3a8a;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 40;
        text-align: left;
        font-weight: 500;
        white-space: normal;
      }

      .admin-help-tip strong {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 800;
        color: #1d4ed8;
      }

      .admin-help-tip ul {
        margin: 0;
        padding-left: 1.1rem;
        display: grid;
        gap: 4px;
        font-size: 11px;
        line-height: 1.5;
        color: #334155;
      }

      .admin-help-tip b {
        font-weight: 800;
        color: #0f172a;
      }

      .admin-help-wrap:hover .admin-help-tip,
      .admin-help-wrap:focus-within .admin-help-tip {
        opacity: 1;
        visibility: visible;
      }

      .admin-table th .admin-help-tip {
        left: auto;
        right: 0;
        transform: none;
      }

      .admin-product-form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 12px;
      }

      .product-body {
        padding: 10px;
      }

      .product-name {
        min-height: 42px;
        font-size: 14px;
        line-height: 1.25;
        font-weight: 900;
      }

      .price {
        color: var(--red);
        font-weight: 900;
      }

      .meta {
        margin: 7px 0 10px;
        color: var(--muted);
        font-size: 12px;
      }

      .small-btn {
        width: 100%;
        min-height: 36px;
        border-radius: 10px;
        color: #ffffff;
        background: var(--blue);
        font-size: 13px;
        font-weight: 900;
      }

      .rules,
      .history {
        margin-top: 14px;
        padding: 14px;
        border-radius: 14px;
        background: #eef8ff;
        border: 1px solid #d8edf9;
      }

      .rules h2,
      .history h2 {
        margin: 0 0 6px;
        font-size: 17px;
      }

      .rules p,
      .history p {
        margin: 0;
        color: #1f2937;
        font-size: 13px;
        line-height: 1.5;
      }

      .record-summary {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
      }

      .summary-card {
        padding: 14px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid var(--line);
        box-shadow: 0 6px 14px rgba(15, 57, 90, 0.06);
      }

      .summary-card span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
      }

      .summary-card strong {
        display: block;
        margin-top: 4px;
        color: var(--blue);
        font-size: 22px;
        font-weight: 900;
      }

      .record-item {
        display: grid;
        gap: 5px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: #ffffff;
      }

      .record-item .topline {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        font-size: 14px;
        font-weight: 900;
      }

      .record-item .record-date {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .point-plus {
        color: var(--green);
      }

      .point-minus {
        color: var(--red);
      }

      .records-toolbar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        margin-bottom: 10px;
      }

      .records-toolbar.hidden {
        display: none;
      }

      .records-filter-input,
      .records-filter-select {
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
        font-size: 13px;
        color: #0f172a;
      }

      .records-filter-select {
        min-width: 108px;
        padding-right: 28px;
      }

      .records-footer {
        margin-top: 10px;
      }

      .records-footer-meta {
        margin: 0 0 8px;
        text-align: center;
        font-size: 11px;
        color: #94a3b8;
      }

      .records-more-btn {
        display: block;
        width: 100%;
        min-height: 42px;
        border: 1px dashed #cbd5e1;
        border-radius: 14px;
        background: #fff;
        color: #2563eb;
        font-size: 13px;
        font-weight: 800;
      }

      .records-more-btn:active {
        transform: scale(0.99);
      }

      .records-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .records-page-btn {
        min-width: 72px;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
      }

      .records-page-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .records-page-label {
        min-width: 88px;
        text-align: center;
        font-size: 12px;
        font-weight: 800;
        color: #64748b;
        font-variant-numeric: tabular-nums;
      }

      .tabbar {
        position: fixed;
        left: 50%;
        bottom: 0;
        width: min(100%, 430px);
        height: 60px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid #dce7ef;
      }

      .tab {
        display: grid;
        place-items: center;
        color: #5c6670;
        font-size: 11px;
        font-weight: 800;
      }

      .tab span {
        display: block;
        font-size: 20px;
      }

      .tab.active {
        color: var(--blue);
      }

      .admin-shell {
        min-height: 100vh;
        background: #f0f2f5;
      }

      .admin-login-screen {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 24px;
        background: linear-gradient(135deg, #e8f4fc 0%, #f0f2f5 100%);
      }

      .admin-login-card {
        width: min(100%, 420px);
        padding: 32px 28px;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      }

      .admin-login-card h2 {
        margin: 0 0 8px;
        font-size: 22px;
        color: #1f2937;
      }

      .admin-layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        min-height: 100vh;
      }

      .admin-sidebar {
        background: #ffffff;
        border-right: 1px solid #e8e8e8;
        padding: 16px 0;
      }

      .admin-sidebar-brand {
        padding: 0 20px 20px;
        font-size: 20px;
        font-weight: 900;
        color: var(--blue);
        letter-spacing: 1px;
      }

      .admin-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 20px;
        border: 0;
        background: transparent;
        color: #4b5563;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
      }

      .admin-nav-item:hover {
        background: #f5f7fa;
        color: var(--blue);
      }

      .admin-nav-item.active {
        background: #e6f4ff;
        color: var(--blue);
        border-right: 3px solid var(--blue);
      }

      .admin-nav-group {
        margin-bottom: 2px;
      }

      .admin-nav-group-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 12px 20px;
        border: 0;
        background: transparent;
        color: #4b5563;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
      }

      .admin-nav-group-toggle:hover,
      .admin-nav-group.open > .admin-nav-group-toggle {
        background: #f5f7fa;
        color: var(--blue);
      }

      .admin-nav-chevron {
        flex-shrink: 0;
        color: #9ca3af;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        transition: transform 0.2s ease;
      }

      .admin-nav-group.open .admin-nav-chevron {
        transform: rotate(90deg);
        color: var(--blue);
      }

      .admin-nav-submenu {
        display: none;
      }

      .admin-nav-group.open .admin-nav-submenu {
        display: block;
      }

      .admin-nav-sub-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 20px 10px 40px;
        border: 0;
        background: transparent;
        color: #6b7280;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
      }

      .admin-nav-sub-item:hover {
        background: #f5f7fa;
        color: var(--blue);
      }

      .admin-nav-sub-item.active {
        background: #e6f4ff;
        color: var(--blue);
        border-right: 3px solid var(--blue);
      }

      .admin-nav-group-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .admin-nav-sub-item {
        justify-content: space-between;
      }

      .admin-nav-badge {
        flex-shrink: 0;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #ef4444;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
      }

      .admin-nav-group.has-pending > .admin-nav-group-toggle {
        color: #b45309;
      }

      .admin-nav-group.has-pending > .admin-nav-group-toggle .admin-nav-badge {
        background: #dc2626;
      }

      .admin-pending-alert {
        margin-bottom: 16px;
        padding: 12px 16px;
        border-radius: 10px;
        background: #fff7ed;
        border: 1px solid #fdba74;
        color: #9a3412;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
      }

      .admin-main {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .admin-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 24px;
        background: #ffffff;
        border-bottom: 1px solid #e8e8e8;
      }

      .admin-topbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        font-size: 14px;
        color: #6b7280;
      }

      .admin-topbar-title {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .admin-menu-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #ffffff;
        cursor: pointer;
        flex-shrink: 0;
      }

      .admin-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        margin: 0 auto;
        border-radius: 999px;
        background: #374151;
        transition: transform 0.2s ease, opacity 0.2s ease;
      }

      .admin-layout.admin-nav-open .admin-menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      .admin-layout.admin-nav-open .admin-menu-toggle span:nth-child(2) {
        opacity: 0;
      }

      .admin-layout.admin-nav-open .admin-menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      .admin-sidebar-backdrop {
        display: none;
      }

      .admin-topbar-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .admin-user {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        color: #374151;
      }

      .admin-user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--blue), #1394df);
        color: #ffffff;
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 900;
      }

      .admin-content {
        flex: 1;
        padding: 16px 24px 24px;
        overflow: auto;
      }

      .admin-breadcrumb {
        margin-bottom: 16px;
        font-size: 13px;
        color: #6b7280;
      }

      .admin-breadcrumb strong {
        color: #111827;
        font-weight: 700;
      }

      .admin-page-section {
        display: none;
      }

      .admin-page-section.active {
        display: block;
      }

      .admin-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
        padding: 16px;
        background: #ffffff;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
      }

      .admin-toolbar-left {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
      }

      .admin-toolbar-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .admin-field-inline {
        display: grid;
        gap: 6px;
      }

      .admin-field-inline label {
        font-size: 12px;
        color: #6b7280;
        font-weight: 600;
      }

      .admin-field-inline input,
      .admin-field-inline select {
        height: 36px;
        min-width: 160px;
        padding: 0 12px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background: #ffffff;
        font-size: 13px;
      }

      .admin-table-wrap {
        background: #ffffff;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: auto;
      }

      .admin-pagination-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding: 0 4px 4px;
      }

      .admin-pagination-meta {
        margin: 0;
        font-size: 12px;
        color: #6b7280;
      }

      .admin-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .admin-page-btn {
        min-width: 72px;
        min-height: 32px;
        padding: 0 12px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        background: #fff;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }

      .admin-page-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .admin-page-label {
        min-width: 88px;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: #6b7280;
        font-variant-numeric: tabular-nums;
      }

      .admin-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }

      .admin-table th,
      .admin-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
        vertical-align: middle;
      }

      .admin-table th {
        background: #fafafa;
        color: #374151;
        font-weight: 700;
        white-space: nowrap;
      }

      .admin-table tbody tr:hover {
        background: #fafcff;
      }

      .admin-table .table-input {
        width: 100%;
        min-width: 120px;
        height: 32px;
        padding: 0 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 13px;
      }

      .admin-table .table-select {
        height: 32px;
        padding: 0 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        font-size: 13px;
      }

      .btn-pro {
        min-height: 36px;
        padding: 0 16px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
      }

      .btn-pro-primary {
        color: #ffffff;
        background: var(--blue);
      }

      .btn-pro-primary:hover {
        background: var(--blue-dark);
      }

      .btn-pro-default {
        color: #374151;
        background: #ffffff;
        border: 1px solid #d9d9d9;
      }

      .btn-pro-default:hover {
        color: var(--blue);
        border-color: var(--blue);
      }

      .btn-pro-danger {
        color: #ffffff;
        background: var(--red);
      }

      .btn-pro-link {
        padding: 0;
        background: transparent;
        color: var(--blue);
        font-size: 13px;
        font-weight: 700;
      }

      .btn-pro-link:hover {
        text-decoration: underline;
      }

      .table-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .admin-empty {
        padding: 40px 16px;
        text-align: center;
        color: #9ca3af;
        font-size: 14px;
      }

      /* ===== 首頁設計器 ===== */
      .layout-builder {
        display: grid;
        grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr) minmax(280px, 0.95fr);
        gap: 14px;
        align-items: start;
      }

      .layout-builder-col {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        overflow: hidden;
        min-height: 520px;
      }

      .layout-panel-head {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
        background: #fafafa;
      }

      .layout-panel-head strong {
        font-size: 14px;
        color: #111827;
      }

      .layout-panel-head span {
        font-size: 12px;
        color: #9ca3af;
      }

      .layout-block-list {
        padding: 12px;
        display: grid;
        gap: 8px;
        min-height: 200px;
      }

      .layout-block-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        cursor: grab;
        user-select: none;
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
      }

      .layout-block-item:hover {
        border-color: #93c5fd;
        box-shadow: 0 4px 14px rgba(10, 108, 240, 0.1);
      }

      .layout-block-item.sortable-ghost {
        opacity: 0.45;
        background: #eff6ff;
      }

      .layout-block-handle {
        color: #9ca3af;
        font-size: 16px;
        letter-spacing: -2px;
        line-height: 1;
      }

      .layout-block-meta {
        flex: 1;
        min-width: 0;
      }

      .layout-block-meta strong {
        display: block;
        font-size: 13px;
        color: #111827;
      }

      .layout-block-meta span {
        font-size: 11px;
        color: #9ca3af;
      }

      .layout-block-toggle {
        appearance: none;
        width: 40px;
        height: 22px;
        border-radius: 999px;
        background: #d1d5db;
        position: relative;
        cursor: pointer;
        border: 0;
        transition: background 0.2s ease;
      }

      .layout-block-toggle.on {
        background: #0A6CF0;
      }

      .layout-block-toggle::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        transition: transform 0.2s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      }

      .layout-block-toggle.on::after {
        transform: translateX(18px);
      }

      .layout-props {
        padding: 14px 16px 20px;
        display: grid;
        gap: 18px;
        max-height: 640px;
        overflow: auto;
      }

      .layout-accordion {
        max-height: 640px;
        overflow: auto;
        padding: 8px;
        display: grid;
        gap: 8px;
      }

      .layout-acc-item {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
      }

      .layout-acc-item.open {
        border-color: #93c5fd;
        box-shadow: 0 4px 14px rgba(10, 108, 240, 0.08);
      }

      .layout-acc-item.active-select {
        outline: 2px solid #0A6CF0;
        outline-offset: 1px;
      }

      .layout-acc-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        background: #fafafa;
        border: 0;
        cursor: pointer;
        text-align: left;
      }

      .layout-acc-head strong {
        display: block;
        font-size: 13px;
        color: #111827;
      }

      .layout-acc-head span {
        font-size: 11px;
        color: #9ca3af;
      }

      .layout-acc-chevron {
        color: #9ca3af;
        font-size: 16px;
        transition: transform 0.2s ease;
      }

      .layout-acc-item.open .layout-acc-chevron {
        transform: rotate(90deg);
        color: #0A6CF0;
      }

      .layout-acc-body {
        display: none;
        padding: 12px 14px 14px;
        border-top: 1px solid #f0f0f0;
      }

      .layout-acc-item.open .layout-acc-body {
        display: grid;
        gap: 10px;
      }

      .layout-acc-section-title {
        margin: 4px 0 0;
        font-size: 11px;
        font-weight: 800;
        color: #6b7280;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .layout-acc-hint {
        margin: 0;
        font-size: 11px;
        line-height: 1.55;
        color: #94a3b8;
      }

      .layout-size-tip {
        margin: 4px 0 2px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        color: #1e3a8a;
      }

      .layout-size-tip strong {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 800;
        color: #1d4ed8;
      }

      .layout-size-tip ul {
        margin: 0;
        padding-left: 1.1rem;
        display: grid;
        gap: 4px;
        font-size: 11px;
        line-height: 1.5;
        color: #334155;
      }

      .layout-size-tip b {
        font-weight: 800;
        color: #0f172a;
      }

      .layout-field-row {
        display: grid;
        gap: 4px;
      }

      .layout-field-row label {
        font-size: 12px;
        font-weight: 700;
        color: #4b5563;
      }

      .layout-field-row input[type="text"],
      .layout-field-row input[type="number"],
      .layout-field-row textarea {
        width: 100%;
        min-height: 36px;
        padding: 8px 10px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        font: inherit;
        font-size: 13px;
      }

      .layout-field-row textarea {
        min-height: 72px;
        resize: vertical;
      }

      .layout-field-row input[type="range"] {
        width: 100%;
      }

      .layout-range-val {
        font-size: 11px;
        color: #0A6CF0;
        font-weight: 800;
      }

      .layout-block-item.selected {
        border-color: #0A6CF0;
        background: #eff6ff;
      }

      .layout-prop-group h4 {
        margin: 0 0 10px;
        font-size: 13px;
        color: #374151;
      }

      .layout-prop-group textarea {
        width: 100%;
        min-height: 78px;
        padding: 10px 12px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        resize: vertical;
        font: inherit;
      }

      .layout-color-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .layout-color-grid label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
        color: #4b5563;
        font-weight: 600;
        padding: 8px 10px;
        border: 1px solid #eee;
        border-radius: 8px;
        background: #fafafa;
      }

      .layout-color-grid input[type="color"] {
        width: 36px;
        height: 28px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
      }

      .layout-preview-col {
        background: #eef2f7;
      }

      .layout-phone-frame {
        margin: 18px auto 24px;
        width: 280px;
        border-radius: 28px;
        border: 8px solid #111827;
        background: #0b1220;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
        overflow: hidden;
        position: relative;
      }

      .layout-phone-notch {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 88px;
        height: 10px;
        border-radius: 999px;
        background: #1f2937;
        z-index: 2;
      }

      .layout-phone-screen {
        height: 520px;
        overflow: auto;
        background: #f1f5f9;
        padding: 28px 12px 16px;
        font-family: Inter, "PingFang TC", sans-serif;
      }

      .layout-phone-screen::-webkit-scrollbar {
        width: 0;
      }

      @media (max-width: 1200px) {
        .layout-builder {
          grid-template-columns: 1fr 1fr;
        }
        .layout-preview-col {
          grid-column: 1 / -1;
        }
      }

      @media (max-width: 760px) {
        .layout-builder {
          grid-template-columns: 1fr;
        }
      }

      .panel-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
      }

      .panel-title-row h2 {
        margin: 0;
        font-size: 18px;
      }

      .compact-btn {
        min-height: 34px;
        padding: 0 12px;
        border-radius: 4px;
        color: var(--blue);
        background: #e6f4ff;
        border: 1px solid #91caff;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
      }

      .list {
        display: grid;
        gap: 10px;
        margin-top: 12px;
      }

      .row {
        display: grid;
        gap: 9px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: #fbfdff;
      }

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

      .badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        background: #edf2f7;
        font-size: 12px;
        font-weight: 900;
      }

      .badge.pending {
        color: #9a5a00;
        background: #fff4d6;
      }

      .badge.approved,
      .badge.completed {
        color: #087a43;
        background: #e8faed;
      }

      .badge.rejected,
      .badge.cancelled {
        color: #b42318;
        background: #ffeeeb;
      }

      .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .actions.three {
        grid-template-columns: 1fr 1fr 1fr;
      }

      .search-box {
        margin: 12px 0;
      }

      .message {
        min-height: 20px;
        margin-top: 12px;
        color: var(--blue);
        font-size: 13px;
        font-weight: 800;
      }

      .message.error {
        color: #e84032;
      }

      #loginMessage.error,
      #registerMessage.error {
        color: #dc2626 !important;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 12px;
        padding: 10px 12px;
      }

      .modal {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: grid;
        place-items: center;
        padding: 16px;
        background: rgba(15, 23, 42, 0.42);
      }

      .modal-card {
        width: min(100%, 720px);
        max-height: min(760px, 88vh);
        overflow: auto;
        padding: 18px;
        border-radius: 4px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      .modal-card-wide {
        width: min(100%, 1080px);
      }

      @media (max-width: 760px) {
        .admin-layout {
          grid-template-columns: 1fr;
        }

        .admin-menu-toggle {
          display: inline-flex;
        }

        .admin-topbar {
          padding: 0 12px;
          height: 52px;
        }

        .admin-topbar-right .admin-user span {
          display: none;
        }

        .admin-topbar-right .btn-pro {
          padding: 0 10px;
          font-size: 12px;
        }

        .admin-content {
          padding: 12px;
        }

        .admin-sidebar-backdrop:not(.hidden) {
          display: block;
          position: fixed;
          inset: 0;
          z-index: 1190;
          background: rgba(15, 23, 42, 0.45);
        }

        .admin-sidebar {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          z-index: 1200;
          width: min(280px, 86vw);
          padding-top: max(16px, env(safe-area-inset-top));
          padding-bottom: max(16px, env(safe-area-inset-bottom));
          overflow-y: auto;
          transform: translateX(-100%);
          transition: transform 0.25s ease;
          box-shadow: none;
        }

        .admin-layout.admin-nav-open .admin-sidebar {
          transform: translateX(0);
          box-shadow: 4px 0 24px rgba(15, 23, 42, 0.14);
        }

        body.admin-nav-lock {
          overflow: hidden;
        }

        .admin-field-inline input,
        .admin-field-inline select {
          min-width: 0;
          width: 100%;
        }
      }

      /* ===== Leaderboard (race HUD) ===== */
      #driverApp.driver-mall-mode .lb-view {
        padding-bottom: 5.5rem;
      }

      #driverApp.driver-mall-mode .lb-hero {
        position: relative;
        overflow: hidden;
        border-radius: 1.5rem;
        padding: 1.15rem 1.15rem 1.25rem;
        margin-bottom: 0.85rem;
        background:
          linear-gradient(145deg, rgba(10, 108, 240, 0.28) 0%, rgba(15, 23, 42, 0.92) 48%, rgba(2, 6, 23, 0.96) 100%);
        border: 1px solid rgba(96, 165, 250, 0.28);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
      }

      #driverApp.driver-mall-mode .lb-hero-scan {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.015) 3px,
            rgba(255, 255, 255, 0.015) 4px
          );
        opacity: 0.7;
      }

      #driverApp.driver-mall-mode .lb-eyebrow {
        position: relative;
        margin: 0;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        color: #93c5fd;
      }

      #driverApp.driver-mall-mode .lb-title {
        position: relative;
        margin: 0.35rem 0 0;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #f8fafc;
        line-height: 1.15;
      }

      #driverApp.driver-mall-mode .lb-lead {
        position: relative;
        margin: 0.4rem 0 0;
        font-size: 0.78rem;
        font-weight: 600;
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-mall-mode .lb-season {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      #driverApp.driver-mall-mode .lb-season-label {
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(148, 163, 184, 0.9);
      }

      #driverApp.driver-mall-mode .lb-season-name {
        display: block;
        margin-top: 0.15rem;
        font-size: 0.95rem;
        font-weight: 800;
        color: #e2e8f0;
      }

      #driverApp.driver-mall-mode .lb-countdown {
        text-align: right;
      }

      #driverApp.driver-mall-mode .lb-countdown-label {
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        color: rgba(148, 163, 184, 0.9);
      }

      #driverApp.driver-mall-mode .lb-countdown-value {
        display: block;
        margin-top: 0.1rem;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #fbbf24;
        tabular-nums: true;
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .lb-period-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
        margin-bottom: 1rem;
        padding: 0.3rem;
        border-radius: 0.9rem;
        background: rgba(15, 23, 42, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      #driverApp.driver-mall-mode .lb-period {
        min-height: 2.2rem;
        border: 0;
        border-radius: 0.7rem;
        background: transparent;
        color: rgba(148, 163, 184, 0.95);
        font-size: 0.78rem;
        font-weight: 800;
        cursor: pointer;
      }

      #driverApp.driver-mall-mode .lb-period.is-active {
        background: rgba(10, 108, 240, 0.28);
        color: #dbeafe;
        box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
      }

      #driverApp.driver-mall-mode .lb-podium {
        display: grid;
        grid-template-columns: 1fr 1.15fr 1fr;
        align-items: end;
        gap: 0.45rem;
        margin-bottom: 0.9rem;
        min-height: 11.5rem;
      }

      #driverApp.driver-mall-mode .lb-podium-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.75rem 0.4rem 0.7rem;
        border-radius: 1rem 1rem 0.65rem 0.65rem;
        background: rgba(15, 23, 42, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      #driverApp.driver-mall-mode .lb-podium-card.is-first {
        min-height: 11rem;
        background: linear-gradient(180deg, rgba(251, 191, 36, 0.22) 0%, rgba(15, 23, 42, 0.9) 55%);
        border-color: rgba(251, 191, 36, 0.45);
      }

      #driverApp.driver-mall-mode .lb-podium-card.is-second {
        min-height: 9.4rem;
        border-color: rgba(148, 163, 184, 0.35);
      }

      #driverApp.driver-mall-mode .lb-podium-card.is-third {
        min-height: 8.4rem;
        border-color: rgba(180, 120, 70, 0.4);
      }

      #driverApp.driver-mall-mode .lb-podium-place {
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 1.35rem;
        font-weight: 700;
        color: #93c5fd;
        line-height: 1;
      }

      #driverApp.driver-mall-mode .lb-podium-card.is-first .lb-podium-place {
        color: #fbbf24;
        font-size: 1.7rem;
      }

      #driverApp.driver-mall-mode .lb-podium-avatar {
        margin-top: 0.45rem;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 0.85rem;
        display: grid;
        place-items: center;
        font-size: 0.85rem;
        font-weight: 900;
        color: #0f172a;
        background: linear-gradient(135deg, #93c5fd, #60a5fa);
      }

      #driverApp.driver-mall-mode .lb-podium-card.is-first .lb-podium-avatar {
        width: 3rem;
        height: 3rem;
        background: linear-gradient(135deg, #fde68a, #f59e0b);
      }

      #driverApp.driver-mall-mode .lb-podium-name {
        margin: 0.45rem 0 0;
        max-width: 100%;
        font-size: 0.78rem;
        font-weight: 800;
        color: #f1f5f9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #driverApp.driver-mall-mode .lb-podium-score {
        margin: 0.15rem 0 0;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        color: #e2e8f0;
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .lb-podium-delta {
        margin-top: 0.2rem;
        font-size: 0.65rem;
        font-weight: 700;
        color: #34d399;
      }

      #driverApp.driver-mall-mode .lb-podium-delta.is-down {
        color: #f87171;
      }

      #driverApp.driver-mall-mode .lb-prize {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.85rem;
        padding: 0.75rem 0.9rem;
        border-radius: 0.95rem;
        background: rgba(251, 191, 36, 0.08);
        border: 1px solid rgba(251, 191, 36, 0.22);
      }

      #driverApp.driver-mall-mode .lb-prize-label {
        margin: 0;
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #fbbf24;
      }

      #driverApp.driver-mall-mode .lb-prize-text {
        margin: 0.15rem 0 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: rgba(226, 232, 240, 0.9);
        line-height: 1.35;
      }

      #driverApp.driver-mall-mode .lb-prize-tag {
        flex-shrink: 0;
        padding: 0.3rem 0.55rem;
        border-radius: 0.5rem;
        font-size: 0.65rem;
        font-weight: 800;
        color: #0f172a;
        background: #fbbf24;
      }

      #driverApp.driver-mall-mode .lb-list-head {
        display: grid;
        grid-template-columns: 2.4rem 1fr auto;
        gap: 0.5rem;
        padding: 0 0.35rem 0.4rem;
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(148, 163, 184, 0.85);
      }

      #driverApp.driver-mall-mode .lb-list-head-score {
        text-align: right;
      }

      #driverApp.driver-mall-mode .lb-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.4rem;
      }

      #driverApp.driver-mall-mode .lb-row {
        display: grid;
        grid-template-columns: 2.4rem 1fr auto;
        align-items: center;
        gap: 0.5rem;
        padding: 0.7rem 0.75rem;
        border-radius: 0.9rem;
        background: rgba(15, 23, 42, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      #driverApp.driver-mall-mode .lb-row.is-me {
        border-color: rgba(96, 165, 250, 0.45);
        background: rgba(10, 108, 240, 0.16);
      }

      #driverApp.driver-mall-mode .lb-row-rank {
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: #93c5fd;
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .lb-row-name {
        margin: 0;
        font-size: 0.86rem;
        font-weight: 800;
        color: #f1f5f9;
      }

      #driverApp.driver-mall-mode .lb-row-meta {
        margin: 0.1rem 0 0;
        font-size: 0.68rem;
        font-weight: 600;
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-mall-mode .lb-row-score {
        text-align: right;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: #e2e8f0;
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .lb-row-delta {
        display: block;
        margin-top: 0.1rem;
        font-size: 0.65rem;
        font-weight: 700;
        color: #34d399;
      }

      #driverApp.driver-mall-mode .lb-row-delta.is-down {
        color: #f87171;
      }

      #driverApp.driver-mall-mode .lb-footnote {
        margin: 0.85rem 0 0;
        font-size: 0.68rem;
        line-height: 1.45;
        color: rgba(100, 116, 139, 0.95);
        text-align: center;
      }

      #driverApp.driver-mall-mode .lb-me-bar {
        position: fixed;
        left: 50%;
        bottom: calc(4.6rem + env(safe-area-inset-bottom));
        z-index: 35;
        width: min(100% - 1.5rem, 400px);
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0.65rem;
        align-items: center;
        padding: 0.65rem 0.8rem;
        border-radius: 1rem;
        background: rgba(2, 6, 23, 0.92);
        border: 1px solid rgba(96, 165, 250, 0.35);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      #driverApp.driver-mall-mode .lb-me-bar[hidden] {
        display: none !important;
      }

      #driverApp.driver-mall-mode .lb-me-label {
        display: block;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(148, 163, 184, 0.9);
      }

      #driverApp.driver-mall-mode .lb-me-value {
        display: block;
        margin-top: 0.1rem;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 1.15rem;
        font-weight: 700;
        color: #fbbf24;
        font-variant-numeric: tabular-nums;
      }

      #driverApp.driver-mall-mode .lb-me-name {
        margin: 0;
        font-size: 0.8rem;
        font-weight: 800;
        color: #f1f5f9;
      }

      #driverApp.driver-mall-mode .lb-me-track {
        margin-top: 0.35rem;
        height: 0.35rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        overflow: hidden;
      }

      #driverApp.driver-mall-mode .lb-me-progress {
        height: 100%;
        width: 42%;
        border-radius: inherit;
        background: linear-gradient(90deg, #0A6CF0, #38bdf8);
      }

      #driverApp.driver-mall-mode .lb-me-hint {
        margin: 0.25rem 0 0;
        font-size: 0.65rem;
        font-weight: 600;
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-mall-mode .lb-mall-teaser {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin: 0.15rem 0 0.15rem;
        padding: 0.95rem 1rem;
        border-radius: 1.15rem;
        text-decoration: none;
        background:
          linear-gradient(120deg, rgba(10, 108, 240, 0.22), rgba(15, 23, 42, 0.85) 55%, rgba(251, 191, 36, 0.12));
        border: 1px solid rgba(96, 165, 250, 0.28);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
      }

      #driverApp.driver-mall-mode .lb-mall-teaser-eyebrow {
        margin: 0;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: #93c5fd;
      }

      #driverApp.driver-mall-mode .lb-mall-teaser-title {
        margin: 0.2rem 0 0;
        font-size: 1rem;
        font-weight: 900;
        color: #f8fafc;
      }

      #driverApp.driver-mall-mode .lb-mall-teaser-sub {
        margin: 0.15rem 0 0;
        font-size: 0.72rem;
        font-weight: 600;
        color: rgba(148, 163, 184, 0.95);
      }

      #driverApp.driver-mall-mode .lb-mall-teaser-cta {
        flex-shrink: 0;
        font-family: "Chakra Petch", Inter, sans-serif;
        font-size: 0.85rem;
        font-weight: 700;
        color: #fbbf24;
      }

      #driverApp.driver-mall-mode #mallPoints.is-guest-points {
        font-size: 1.35rem !important;
        font-weight: 800;
        letter-spacing: 0.04em;
      }