/* ========== CSS Reset & Variables ========== */
    :root {
      --primary: #D94030;
      --primary-dark: #B8312A;
      --primary-light: #E86A5A;
      --gradient-start: #D94030;
      --gradient-end: #C22B1E;
      --bg-red: #C43A2A;
      --bg-red-dark: #A52E20;
      --warm-orange: #E09030;
      --text-primary: #2D2520;
      --text-secondary: #5C514A;
      --text-light: #9E9490;
      --white: #fff;
      --border: #F0EBE8;
      --bg-gray: #F8F5F2;
      --bg-warm: #FDF8F4;
      --success: #52C41A;
      --error: #D94030;
      --warning: #E09030;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      background: var(--bg-red);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ========== App Container ========== */
    .app {
      max-width: 750px;
      margin: 0 auto;
      min-height: 100vh;
      position: relative;
    }

    /* ========== Navigation Bar ========== */
    /* 小程序 web-view 内嵌时隐藏自带 navbar，避免与小程序标题栏重复 */
    .in-miniprogram .navbar { display: none; }
    .in-miniprogram .page { min-height: 100vh; }
    .in-miniprogram .page-content { min-height: 100vh; }
    .in-miniprogram .upload-page-inner { min-height: 100vh; }

    .navbar {
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      background: var(--bg-red);
      color: var(--white);
      font-size: 17px;
      font-weight: 600;
    }
    .navbar .back-btn {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 22px;
      background: none;
      border: none;
      color: inherit;
      padding: 0;
    }

    /* ========== Pages ========== */
    .page {
      display: none;
      min-height: calc(100vh - 44px);
      opacity: 0;
      transform: translateX(20px);
      transition: opacity .25s ease, transform .25s ease;
    }
    .page.active {
      display: block;
    }
    .page.visible {
      opacity: 1;
      transform: translateX(0);
    }
    .page.slide-out {
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity .2s ease, transform .2s ease;
    }

    /* ========== Home Page ========== */
    .home-banner {
      position: relative;
      width: 100%;
      overflow: hidden;
      aspect-ratio: 750 / 420;
      background: linear-gradient(135deg, var(--bg-red) 0%, var(--bg-red-dark) 100%);
    }
    .home-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ========== Action Buttons Panel ========== */
    .action-panel {
      margin: 16px 16px;
      display: flex;
      gap: 12px;
      position: relative;
      z-index: 2;
    }
    .action-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: var(--white);
      border-radius: 14px;
      padding: 18px 8px;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 16px rgba(160,60,40,0.12);
    }
    .action-btn:active {
      transform: scale(0.96);
      box-shadow: 0 2px 8px rgba(160,60,40,0.1);
    }
    .action-btn-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .action-btn-icon.upload {
      background: linear-gradient(135deg, #D94030, #C22B1E);
      box-shadow: 0 4px 12px rgba(217,64,48,0.35);
    }
    .action-btn-icon.records {
      background: linear-gradient(135deg, #DCAB38, #C89A2E);
      box-shadow: 0 4px 12px rgba(220,171,56,0.35);
    }
    .action-btn-icon.userinfo {
      background: linear-gradient(135deg, #E09030, #D07A20);
      box-shadow: 0 4px 12px rgba(224,144,48,0.35);
    }
    .action-btn-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .action-btn-desc {
      font-size: 11px;
      color: var(--text-light);
      margin-top: -4px;
    }

    /* ========== Rules Section ========== */
    .rules-section {
      margin: 0 16px 24px;
      background: var(--white);
      border-radius: 16px;
      padding: 0;
      box-shadow: 0 4px 20px rgba(160,60,40,0.1);
      overflow: hidden;
    }
    .rules-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary-dark);
      padding: 16px 16px 12px;
      border-bottom: 2px solid #F0DDD4;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .rules-title::before {
      content: '📋';
      font-size: 20px;
    }
    .rules-content {
      font-size: 13px;
      line-height: 2;
      color: var(--text-secondary);
      padding: 12px 16px 16px;
      overflow-y: auto;
      max-height: 260px;
      -webkit-overflow-scrolling: touch;
    }
    .rules-content::-webkit-scrollbar {
      display: block;
      width: 4px;
    }
    .rules-content::-webkit-scrollbar-track {
      background: transparent;
    }
    .rules-content::-webkit-scrollbar-thumb {
      background: #ddd;
      border-radius: 4px;
    }
    .rules-content h3 {
      font-size: 14px;
      color: var(--text-primary);
      margin: 12px 0 6px;
    }
    .rules-content h3:first-child {
      margin-top: 0;
    }
    .rules-content .rule-note {
      font-size: 12px;
      color: var(--text-light);
      margin-top: 2px;
    }
    .rules-content .sub-items {
      padding-left: 0;
      margin: 4px 0 0;
      list-style: none;
    }
    .rules-content .sub-items li {
      text-indent: 0;
      padding-left: 0;
      line-height: 2;
    }
    .time-highlight {
      color: var(--primary-dark);
      font-weight: 700;
    }

    /* ========== User Info Page ========== */
    .page-content {
      background: var(--bg-warm);
      min-height: calc(100vh - 44px);
      padding: 16px;
    }

    .info-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 6px;
    }
    .info-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, var(--gradient-start), var(--primary-light));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(217,64,48,0.25);
    }
    .info-header-text h2 {
      font-size: 20px;
      font-weight: 700;
      color: var(--primary-dark);
    }
    .info-decoration {
      position: absolute;
      right: 20px;
      top: 10px;
      font-size: 60px;
      opacity: 0.15;
    }

    .form-card {
      background: var(--white);
      border-radius: 16px;
      overflow: hidden;
      margin-top: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .form-group {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    .form-group:last-child {
      border-bottom: none;
    }
    .form-label {
      width: 70px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      flex-shrink: 0;
    }
    .form-input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 15px;
      color: var(--text-primary);
      background: transparent;
      padding: 0;
    }
    .form-input::placeholder {
      color: var(--text-light);
    }
    .form-group:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(217,64,48,.1);
    }
    .form-error {
      display: none;
      color: var(--error);
      font-size: 12px;
      padding: 0 20px 10px;
      margin-top: -6px;
    }
    .form-error.show {
      display: block;
    }
    .form-group.has-error {
      border-color: var(--error);
      background: #FFF8F7;
    }
    .form-group.has-ok .form-input {
      color: var(--success);
    }

    .form-tips {
      margin-top: 12px;
      font-size: 12px;
      color: var(--primary);
      line-height: 1.8;
      padding: 0 4px;
    }

    .submit-btn-wrap {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 24px;
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      background: var(--white);
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      z-index: 50;
      max-width: 750px;
      margin: 0 auto;
    }
    .submit-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      border: none;
      border-radius: 25px;
      color: var(--white);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(217,64,48,0.35);
      letter-spacing: 4px;
    }
    .submit-btn:active:not(:disabled) {
      transform: scale(0.98);
      box-shadow: 0 2px 8px rgba(217,64,48,0.25);
    }
    .submit-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* ========== Upload Page ========== */
    .upload-page-inner {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 44px);
      background: var(--bg-warm);
    }
    .upload-main {
      flex: 1;
      padding: 20px 16px 0;
    }
    .upload-area {
      background: var(--white);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .upload-zone {
      border: 2px dashed #E0C4B8;
      border-radius: 12px;
      padding: 40px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      background: var(--bg-warm);
      position: relative;
      overflow: hidden;
    }
    .upload-zone:active {
      border-color: var(--primary);
      background: #F8EDE8;
    }
    .upload-zone.has-image {
      padding: 12px;
      border-style: solid;
      border-color: var(--primary);
    }
    .upload-camera-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 16px;
      background: rgba(217,64,48,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .upload-camera-icon svg {
      width: 28px;
      height: 28px;
      color: var(--primary);
    }
    .upload-camera-icon .plus-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 16px;
      height: 16px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }
    .upload-text {
      font-size: 16px;
      color: var(--text-primary);
      font-weight: 600;
      margin-bottom: 8px;
    }
    .upload-hint {
      font-size: 12px;
      color: var(--text-light);
      line-height: 1.6;
    }
    .upload-mode-tip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 20px;
      font-size: 12px;
      color: var(--text-light);
    }
    .upload-mode-tip svg {
      width: 14px;
      height: 14px;
      color: var(--text-light);
    }

    .preview-img {
      width: 100%;
      max-height: 280px;
      object-fit: contain;
      display: block;
      border-radius: 8px;
    }
    .preview-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 12px;
    }
    .preview-action-btn {
      padding: 6px 16px;
      border-radius: 16px;
      font-size: 13px;
      border: none;
      cursor: pointer;
    }
    .preview-action-btn.re-upload {
      background: #f5f5f5;
      color: var(--text-secondary);
    }
    .preview-action-btn.confirm-upload {
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: var(--white);
      font-weight: 600;
    }

    .upload-bottom-actions {
      padding: 12px 24px;
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      background: var(--white);
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    .upload-submit-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      border: none;
      border-radius: 25px;
      color: var(--white);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(217,64,48,0.35);
      letter-spacing: 2px;
    }
    .upload-submit-btn:active:not(:disabled) {
      transform: scale(0.98);
    }
    .upload-submit-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* OCR Result */
    .ocr-result {
      background: var(--white);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      display: none;
    }
    .ocr-result.show {
      display: block;
    }
    .ocr-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }
    .ocr-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }
    .ocr-status.success {
      background: #F6FFED;
      color: var(--success);
      border: 1px solid #B7EB8F;
    }
    .ocr-status.fail {
      background: #FFF2F0;
      color: var(--error);
      border: 1px solid #FFCCC7;
    }
    .ocr-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .ocr-fields {
      display: grid;
      gap: 12px;
    }
    .ocr-field {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .ocr-field-label {
      width: 70px;
      font-size: 13px;
      color: var(--text-light);
      flex-shrink: 0;
      padding-top: 2px;
    }
    .ocr-field-value {
      font-size: 14px;
      color: var(--text-primary);
      font-weight: 500;
      word-break: break-all;
    }
    .ocr-field-value.amount {
      color: var(--primary-dark);
      font-weight: 700;
      font-size: 16px;
    }

    /* ========== Records Page ========== */
    .record-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .record-card {
      background: var(--white);
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .record-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .record-card-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .record-status {
      padding: 2px 10px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
    }
    .record-status.pending {
      background: #FDF8F0;
      color: var(--warm-orange);
      border: 1px solid #F0DCC0;
    }
    .record-status.approved {
      background: #F6FFED;
      color: var(--success);
      border: 1px solid #B7EB8F;
    }
    .record-status.recognizing {
      background: #F0F5FF;
      color: #597EF7;
      border: 1px solid #ADC6FF;
    }
    .record-status.success-status {
      background: #F6FFED;
      color: var(--success);
      border: 1px solid #B7EB8F;
    }
    .record-status.pending-status {
      background: #FDF8F0;
      color: var(--warm-orange);
      border: 1px solid #F0DCC0;
    }
    .record-status.info-status {
      background: #F0F5FF;
      color: #597EF7;
      border: 1px solid #ADC6FF;
    }
    .record-status.error-status {
      background: #FFF2F0;
      color: var(--error);
      border: 1px solid #FFCCC7;
    }
    .record-card-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--text-light);
    }
    .record-amount {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary-dark);
    }
    .record-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--border);
    }
    .record-view-img {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--primary);
      cursor: pointer;
      border: none;
      background: none;
      padding: 0;
    }
    .record-view-img:active {
      opacity: 0.6;
    }
    .record-view-img svg {
      width: 14px;
      height: 14px;
    }

    /* ========== Image Viewer Modal ========== */
    .img-viewer-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.85);
      z-index: 500;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .img-viewer-overlay.show {
      display: flex;
    }
    .img-viewer-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
    }
    .img-viewer-close:active { background: rgba(255,255,255,0.3); }
    .img-viewer-body {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 60px 16px 16px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .img-viewer-body img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 4px;
      user-select: none;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
    }
    .empty-icon {
      font-size: 60px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    .empty-text {
      font-size: 14px;
    }

    /* ========== Toast ========== */
    .toast {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0,0,0,0.75);
      color: var(--white);
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 300;
      display: none;
      animation: fadeIn 0.2s ease;
      max-width: 280px;
      text-align: center;
    }
    .toast.show {
      display: block;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* ========== Loading ========== */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255,255,255,0.8);
      z-index: 250;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
    }
    .loading-overlay.show {
      display: flex;
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 3px solid #f0f0f0;
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .loading-text {
      font-size: 14px;
      color: var(--text-secondary);
    }

    /* ========== Bottom safe area ========== */
    .safe-area-bottom {
      height: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* ========== Scrollbar ========== */
    ::-webkit-scrollbar {
      display: none;
    }

    /* ========== Animations ========== */
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    .pulse {
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .skeleton-card {
      background: var(--white);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 10px;
    }
    .skeleton-line {
      height: 14px;
      border-radius: 4px;
      background: linear-gradient(90deg, #f0ebe8 25%, #faf7f5 50%, #f0ebe8 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      margin-bottom: 10px;
    }
    .skeleton-line:last-child { margin-bottom: 0; }
    .skeleton-line.short { width: 60%; }
    .skeleton-line.medium { width: 80%; }

    /* ========== Mini Program Sub-page Header ========== */
    .mp-sub-header {
      display: none;
      align-items: center;
      padding: 10px 16px;
      background: var(--white);
      border-bottom: 1px solid var(--border);
    }
    .in-miniprogram .mp-sub-header {
      display: flex;
    }
    .mp-back-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: var(--text-secondary);
      border: none;
      background: none;
      cursor: pointer;
      padding: 4px 0;
    }
    .mp-back-btn svg {
      width: 18px;
      height: 18px;
    }
    .mp-sub-title {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-right: 50px; /* 平衡左侧返回按钮宽度 */
    }

    /* ========== Page Bottom Back Button (Unified) ========== */
    .btn-back-home {
      display: block;
      width: fit-content;
      min-width: 120px;
      text-align: center;
      margin: 0 auto;
      padding: 10px 32px;
      font-size: 14px;
      color: var(--text-secondary);
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--white);
      border-radius: 20px;
      transition: all 0.2s;
      box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    }
    .btn-back-home:active {
      background: var(--bg-gray);
      transform: scale(0.98);
    }

    /* 记录页月份筛选栏 */
    .records-filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }
    .records-filter-bar::-webkit-scrollbar { display: none; }
    .filter-chip {
      flex-shrink: 0;
      padding: 8px 16px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 500;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .filter-chip:active { transform: scale(0.96); }
    .filter-chip.active {
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: var(--white);
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(217,64,48,0.25);
    }

    /* 记录页底部固定栏 */
    .records-bottom-bar {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 16px;
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      background: linear-gradient(to top, var(--bg-warm) 60%, rgba(253,248,244,0));
      z-index: 50;
    }

    /* ========== Upload Tips Banner ========== */
    .upload-tips-banner {
      background: linear-gradient(135deg, #FFF7E6, #FFF1D6);
      border: 1px solid #FFE0B2;
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 16px;
      font-size: 12px;
      color: #8C5E00;
      line-height: 1.8;
    }
    .upload-tips-banner strong {
      color: var(--primary);
    }

    /* ========== Decorative elements ========== */

    /* Footer */
    .footer-text {
      text-align: center;
      padding: 20px 16px;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      line-height: 1.8;
    }

    /* ========== Responsive ========== */
    @media (max-width: 360px) {
      .action-panel { gap: 8px; margin: 12px 12px; }
      .action-btn { padding: 14px 4px; border-radius: 12px; }
      .action-btn-icon { width: 40px; height: 40px; font-size: 18px; }
      .action-btn-text { font-size: 12px; }
      .action-btn-desc { font-size: 10px; }
      .rules-section { margin: 0 12px 20px; }
      .status-card { padding: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }