@import "/mk3/assets/palette.css";
:root {
  --mk-font: 'Rubik', 'PingFang HK', 'PingFang TC', 'Noto Sans HK', 'Microsoft JhengHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: var(--mk-font);
      background: var(--light-gray);
      color: var(--text);
    }

    /* 導覽列共用樣式由 /mk3/styles/public-chrome.css（.mk-nav）統一擁有，本檔僅保留各頁殘留 */
    .mk-nav a { text-decoration: none; }

    .page-hero {
      background: linear-gradient(135deg, var(--navy), var(--navy-dark));
      color: white;
      padding: 48px;
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -5%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(251,171,24,0.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-content { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
    .wallet-header { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
    .wallet-info h1 { font-size: 36px; font-weight: 800; margin-bottom: 8px; }
    .wallet-info p { font-size: 14px; opacity: 0.8; }

    .balance-card {
      background: rgba(255,255,255,0.15);
      border-radius: 20px;
      padding: 32px;
      border: 2px solid rgba(255,255,255,0.2);
      min-width: 320px;
    }
    .balance-label { font-size: 14px; opacity: 0.8; margin-bottom: 8px; }
    .balance-amount { font-size: 48px; font-weight: 800; color: var(--orange); margin-bottom: 16px; }
    .balance-actions { display: flex; gap: 12px; }
    .btn-topup { flex: 1; background: var(--orange); color: var(--dark); border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--mk-font); transition: all 0.2s; }
    .btn-topup:hover { opacity: 0.9; transform: translateY(-2px); }
    .btn-rewards { flex: 1; background: rgba(255,255,255,0.2); color: white; border: 1.5px solid rgba(255,255,255,0.3); padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--mk-font); transition: all 0.2s; }
    .btn-rewards:hover { background: rgba(255,255,255,0.3); }

    .main-content { max-width: 1100px; margin: 0 auto; padding: 40px 48px; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
    .stat-card { background: white; padding: 24px; border-radius: 16px; box-shadow: 0 2px 12px rgba(36,85,166,0.08); }
    .stat-card .icon { font-size: 32px; margin-bottom: 12px; }
    .stat-card .label { font-size: 12px; color: var(--gray); margin-bottom: 8px; }
    .stat-card .value { font-size: 24px; font-weight: 800; color: var(--navy); }

    .section-title { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 20px; }
    .transactions-section { background: white; border-radius: 16px; padding: 28px; box-shadow: 0 2px 12px rgba(36,85,166,0.08); margin-bottom: 32px; }
    .transactions-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
    .filter-tabs { display: flex; gap: 8px; }
    .filter-tab { padding: 8px 16px; background: var(--light-gray); border: none; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--gray); cursor: pointer; font-family: var(--mk-font); transition: all 0.2s; }
    .filter-tab.active { background: var(--navy); color: white; }

    .transactions-list { display: flex; flex-direction: column; gap: 12px; }
    .transaction-item { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--light-gray); border-radius: 12px; transition: all 0.2s; }
    .transaction-item:hover { background: #e8edf5; }
    .transaction-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
    .transaction-icon.earn { background: rgba(34,197,94,0.1); }
    .transaction-icon.spend { background: rgba(239,68,68,0.1); }
    .transaction-details { flex: 1; }
    .transaction-details h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
    .transaction-details p { font-size: 12px; color: var(--gray); }
    .transaction-amount { font-size: 18px; font-weight: 800; text-align: right; }
    .transaction-amount.earn { color: var(--success); }
    .transaction-amount.spend { color: var(--error); }
    .transaction-date { font-size: 11px; color: var(--gray); text-align: right; }

    .earning-tips { background: linear-gradient(135deg, #fff3cd, #ffe69c); border-radius: 16px; padding: 28px; border-left: 4px solid var(--orange); }
    .earning-tips h3 { font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 16px; }
    .tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .tip-item { background: white; padding: 16px; border-radius: 12px; text-align: center; }
    .tip-item .icon { font-size: 32px; margin-bottom: 8px; }
    .tip-item h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
    .tip-item p { font-size: 12px; color: var(--gray); }

    .wallet-panel { display: none; background: white; border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(36,85,166,0.08); margin-bottom: 24px; }
    .wallet-panel.open { display: block; }
    .wallet-panel h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
    .panel-hint { font-size: 13px; color: var(--gray); margin-bottom: 16px; }
    .panel-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
    .panel-row input, .panel-full { flex: 1; min-width: 140px; padding: 11px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-family: var(--mk-font); font-size: 14px; outline: none; }
    .panel-full { width: 100%; margin-bottom: 12px; }
    .panel-row input:focus, .panel-full:focus { border-color: var(--navy); }
    .panel-btn { background: var(--navy); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-weight: 700; cursor: pointer; font-family: var(--mk-font); font-size: 14px; }
    .panel-btn:hover { opacity: 0.9; }
    .reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px; }
    .reward-card { background: var(--light-gray); border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.2s; }
    .reward-card:hover { border-color: var(--orange); transform: translateY(-2px); }
    .reward-card .ri { font-size: 28px; }
    .reward-card .rn { font-size: 13px; font-weight: 700; color: var(--navy); margin: 6px 0 2px; }
    .reward-card .rc { font-size: 12px; color: var(--orange); font-weight: 700; }
    .panel-msg { margin-top: 12px; font-size: 13px; font-weight: 600; min-height: 18px; }
    .panel-msg.ok { color: var(--success); }
    .panel-msg.err { color: var(--error); }
    .daily-limit { font-size: 12px; opacity: 0.85; margin-top: 14px; }

    .mk-footer { padding: 36px 48px; gap: 14px; }
    .footer-logo { font-size: 19px; }

    @media (max-width: 768px) {
      .nav-links.open { align-items: flex-start; }
      .page-hero { padding: 32px 18px; }
      .wallet-header { flex-direction: column; gap: 24px; }
      .balance-card { min-width: 100%; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .tips-grid { grid-template-columns: 1fr; }
      .main-content { padding: 24px 18px; }
      .mk-footer { padding: 24px 18px; flex-direction: column; text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }