/* ═══════════════════════════════════════════════════════════════════════
   Re-Life — Dark Theme + Animations
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   THEME DEFINITIONS — edit colors here
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Forest ─────────────────────────────────────────────────────────── */
[data-theme="forest"] {
    --color-primary: #2d5a1e; --color-primary-hover: #1a3a10;
    --color-primary-light: #d4e8c8; --color-primary-mid: #4a8a30;
    --color-bg: #f5f2ea; --color-bg-alt: #ede8d8;
    --color-white: #fefdf8; --color-gray-50: #f7f4ec;
    --color-gray-100: #f0ecd8; --color-gray-200: #e4dcc0;
    --color-gray-400: #a09878; --color-gray-500: #7a7258;
    --color-gray-700: #4a4230; --color-gray-800: #2a2218;
    --color-amber-200: #f5e8c8; --color-amber-400: #c89820;
    --color-emerald-50: #f0f5e8; --color-emerald-100: #d8e8c8;
    --color-emerald-200: #b0cc98; --color-emerald-700: #3a6a20;
    --color-emerald-800: #1a4a10; --color-red-400: #d4a088; --color-red-500: #b85040;
}

/* ── Ocean ──────────────────────────────────────────────────────────── */
[data-theme="ocean"] {
    --color-primary: #1a4a6a; --color-primary-hover: #0e2e44;
    --color-primary-light: #c8dce8; --color-primary-mid: #307aa0;
    --color-bg: #f0f4f8; --color-bg-alt: #e4ecf2;
    --color-white: #f8fafc; --color-gray-50: #f2f6fa;
    --color-gray-100: #e8eef4; --color-gray-200: #d0dce8;
    --color-gray-400: #8898a8; --color-gray-500: #586878;
    --color-gray-700: #2a3848; --color-gray-800: #141e28;
    --color-amber-200: #e8f0d0; --color-amber-400: #a0b830;
    --color-emerald-50: #e8f4f0; --color-emerald-100: #d0e8e0;
    --color-emerald-200: #a0ccb8; --color-emerald-700: #1a5a4a;
    --color-emerald-800: #0a3a2e; --color-red-400: #c8a0a0; --color-red-500: #a84040;
}

/* ── Sunset ─────────────────────────────────────────────────────────── */
[data-theme="sunset"] {
    --color-primary: #8a3a2a; --color-primary-hover: #5a2018;
    --color-primary-light: #f0d8d0; --color-primary-mid: #b85040;
    --color-bg: #faf5f0; --color-bg-alt: #f5ece4;
    --color-white: #fefcf8; --color-gray-50: #f8f4ec;
    --color-gray-100: #f2e8d8; --color-gray-200: #e8d4c0;
    --color-gray-400: #b09880; --color-gray-500: #8a7060;
    --color-gray-700: #4a3830; --color-gray-800: #2a1e18;
    --color-amber-200: #fae0c8; --color-amber-400: #d89030;
    --color-emerald-50: #f5f0e8; --color-emerald-100: #e8dcc8;
    --color-emerald-200: #ccb898; --color-emerald-700: #6a5030;
    --color-emerald-800: #3a2a18; --color-red-400: #e0a8a0; --color-red-500: #c05040;
}

/* ── Midnight ───────────────────────────────────────────────────────── */
[data-theme="midnight"] {
    --color-primary: #6a5acd; --color-primary-hover: #4a3aa0;
    --color-primary-light: #2a2040; --color-primary-mid: #8a7ad0;
    --color-bg: #0a0a14; --color-bg-alt: #101020;
    --color-white: #141428; --color-gray-50: #101020;
    --color-gray-100: #181830; --color-gray-200: #252540;
    --color-gray-400: #7070a0; --color-gray-500: #8888b0;
    --color-gray-700: #c0c0e0; --color-gray-800: #e0e0f0;
    --color-amber-200: #302840; --color-amber-400: #b8a040;
    --color-emerald-50: #101828; --color-emerald-100: #182038;
    --color-emerald-200: #203048; --color-emerald-700: #60d0a0;
    --color-emerald-800: #80e0b8; --color-red-400: #c04060; --color-red-500: #e06080;
}

/* ── Dark + Midnight: glass surfaces ────────────────────────────────── */
[data-theme="dark"] .app-header,
[data-theme="midnight"] .app-header {
    background: rgba(20,28,20,0.12);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.18), inset 0 1px 3px rgba(255,255,255,0.08);
}
[data-theme="dark"] nav.nav,
[data-theme="dark"] .app-nav,
[data-theme="midnight"] nav.nav,
[data-theme="midnight"] .app-nav {
    background: rgba(20,28,20,0.15);
    border-color: rgba(255,255,255,0.10);
    box-shadow:
        0 4px 30px rgba(0,0,0,0.25),
        inset 0 2px 4px rgba(255,255,255,0.06),
        inset 0 -2px 10px rgba(0,0,0,0.08);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    [data-theme="dark"] nav.nav,
    [data-theme="midnight"] nav.nav { background: rgba(20,28,20,0.88); }
}
[data-theme="dark"] .modal,
[data-theme="midnight"] .modal {
    background: rgba(30,36,30,0.95);
}
[data-theme="dark"] .login-card,
[data-theme="midnight"] .login-card {
    background: rgba(20,28,20,0.9);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .tips-card,
[data-theme="midnight"] .tips-card,
[data-theme="dark"] .rewards-wallet,
[data-theme="midnight"] .rewards-wallet {
    color: #e5e7e5;
}

/* ── Dark Theme ────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --color-primary:        #4a9a5b;
    --color-primary-hover:  #5aae6b;
    --color-primary-light:  #1e3a28;
    --color-primary-mid:    #3a7a4b;
    --color-bg:             #0f120f;
    --color-bg-alt:         #151815;
    --color-white:          #1a1f1a;
    --color-gray-50:        #161a16;
    --color-gray-100:       #1e231e;
    --color-gray-200:       #2a302a;
    --color-gray-400:       #7a807a;
    --color-gray-500:       #9aa09a;
    --color-gray-700:       #c8cec8;
    --color-gray-800:       #e8ebe8;
    --color-amber-200:      #5a4a20;
    --color-amber-400:      #d4a017;
    --color-emerald-50:     #122016;
    --color-emerald-100:    #182a1e;
    --color-emerald-200:    #1e3a28;
    --color-emerald-700:    #4ade80;
    --color-emerald-800:    #6ee7a0;
    --color-red-400:        #ef4444;
    --color-red-500:        #f87171;
}

[data-theme="dark"] body { color: var(--color-gray-800); }

[data-theme="dark"] .header-title { color: var(--color-emerald-200); }
[data-theme="dark"] .header-time,
[data-theme="dark"] .header-user { color: var(--color-gray-200); }
[data-theme="dark"] .card,
[data-theme="dark"] .record-card,
[data-theme="dark"] .result-card { border-color: var(--color-gray-200); }
[data-theme="dark"] .upload-zone { background: var(--color-gray-50); }
[data-theme="dark"] .upload-zone:active { background: var(--color-gray-100); }
[data-theme="dark"] .nav { border-color: var(--color-gray-200); }
[data-theme="dark"] .footer { border-color: var(--color-gray-200); }
[data-theme="dark"] .modal {
    background: rgba(30, 36, 30, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .modal-title { color: var(--color-gray-800); }
[data-theme="dark"] .modal-body { color: var(--color-gray-500); }
[data-theme="dark"] .select-field {
    background: var(--color-gray-100);
    color: var(--color-gray-800);
    border-color: var(--color-gray-200);
}
[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background: var(--color-gray-100);
    color: var(--color-gray-800);
    border-color: var(--color-gray-200);
}
[data-theme="dark"] .api-key-input { background: var(--color-gray-100); color: var(--color-gray-800); }
[data-theme="dark"] .btn--primary { color: #e5e7e5; }
[data-theme="dark"] .btn--primary:hover { background: var(--color-primary-hover); }
[data-theme="dark"] .btn--primary:disabled { background: var(--color-gray-200); color: var(--color-gray-500); }
[data-theme="dark"] .btn--outline { border-color: var(--color-gray-200); color: var(--color-gray-800); }
[data-theme="dark"] .btn--outline:hover { background: var(--color-gray-100); }
[data-theme="dark"] .btn--danger { background: var(--color-red-500); color: #e5e7e5; }
[data-theme="dark"] .btn--danger:hover { color: #e5e7e5; }
[data-theme="dark"] .upload-gallery-link { color: var(--color-emerald-700); }
[data-theme="dark"] .upload-gallery-link:hover { background: var(--color-emerald-50); }
[data-theme="dark"] .record-card-badge--dispose { background: var(--color-gray-200); color: var(--color-gray-400); }
[data-theme="dark"] .record-card-badge--purchase { background: var(--color-emerald-100); color: var(--color-emerald-700); }
[data-theme="dark"] .scanning-status { background: var(--color-gray-50); }
[data-theme="dark"] .disposal-guide { background: var(--color-gray-50); border-color: var(--color-gray-200); }
[data-theme="dark"] .nav-btn.is-active { color: var(--color-primary-light); }
[data-theme="dark"] .ai-switch::after { background: #e5e7e5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .result-card-name,
[data-theme="dark"] .record-card-name { color: var(--color-gray-800); }
[data-theme="dark"] .result-card-tip,
[data-theme="dark"] .record-card-meta { color: var(--color-gray-500); }
[data-theme="dark"] .tips-title { color: var(--color-gray-800); }
[data-theme="dark"] .tips-snippet { color: var(--color-gray-500); }
[data-theme="dark"] .fact-card-title { color: var(--color-gray-800); }
[data-theme="dark"] .fact-card-text { color: var(--color-gray-500); }
[data-theme="dark"] .rewards-label,
[data-theme="dark"] .rewards-sub { color: var(--color-emerald-200); }
[data-theme="dark"] .tips-card { color: #e5e7e5; }
[data-theme="dark"] .rewards-wallet { color: #e5e7e5; }
[data-theme="dark"] .policy-card { color: #e5e7e5; }
[data-theme="dark"] .rewards-item-btn--can-buy { color: #e5e7e5; }
[data-theme="dark"] .grade-tag { color: #e5e7e5; }

/* ── Dark mode: scan mode buttons ─────────────────────────────────── */
[data-theme="dark"] .scan-btn--active.scan-btn--dispose,
[data-theme="midnight"] .scan-btn--active.scan-btn--dispose { background: var(--color-primary-light); border-color: var(--color-emerald-700); }
[data-theme="dark"] .scan-btn--active.scan-btn--purchase,
[data-theme="midnight"] .scan-btn--active.scan-btn--purchase { background: var(--color-primary-light); border-color: var(--color-emerald-700); }

/* ── Dark mode: danger button ─────────────────────────────────────── */
[data-theme="dark"] .btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; }
[data-theme="dark"] .btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* ── Dark mode: login page ────────────────────────────────────────── */
[data-theme="dark"] .login-page { background: radial-gradient(circle at top left, #1a2a1e 0%, #0f120f 60%); }
[data-theme="dark"] .login-card { background: rgba(20, 28, 20, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .login-title { color: var(--color-emerald-200); }
[data-theme="dark"] .login-sub { color: var(--color-gray-500); }
[data-theme="dark"] .login-input { background: var(--color-gray-100); border-color: var(--color-gray-200); color: var(--color-gray-800); }
[data-theme="dark"] .login-input:focus { border-color: var(--color-emerald-700); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15); }
[data-theme="dark"] .login-btn--ghost { border-color: var(--color-gray-200); color: var(--color-gray-500); }
[data-theme="dark"] .login-btn--ghost:hover { background: var(--color-gray-100); color: var(--color-gray-800); }
[data-theme="dark"] .login-footer { border-top-color: var(--color-gray-200); }
[data-theme="dark"] .login-divider::before,
[data-theme="dark"] .login-divider::after { background: var(--color-gray-200); }

/* ── Dark mode: upload zone ───────────────────────────────────────── */
[data-theme="dark"] .upload-zone.drag-over { background-color: rgba(74, 154, 91, 0.15); box-shadow: 0 0 0 6px rgba(74, 154, 91, 0.12); }

/* ── Click Ripple Effect ──────────────────────────────────────────── */
.btn--primary, .scan-btn, .login-btn--primary { position: relative; overflow: hidden; }
.click-ripple {
    position: absolute; background: rgba(255, 255, 255, 0.35);
    width: 100px; height: 100px; margin-left: -50px; margin-top: -50px;
    border-radius: 50%; animation: rippleEffect 0.6s var(--ease-out-quint) both; pointer-events: none;
}
@keyframes rippleEffect {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(4); opacity: 0; }
}

/* -- Reduced Motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
}

/* ── Nav bar drag/swipe ────────────────────────────────────────────── */
nav.nav, .app-nav { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
nav.nav:active { cursor: grabbing; }
.nav-btn.is-active { transform: scale(1.08); }
.nav-btn.is-active .nav-btn-icon {
    filter: drop-shadow(0 4px 10px rgba(61, 106, 75, 0.25));
    animation: elasticPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes elasticPop {
    0% { transform: scale(0.85); } 70% { transform: scale(1.12); } 100% { transform: scale(1); }
}
.nav-btn img { pointer-events: none; -webkit-user-drag: none; }

/* ── Step animations (register flow) ───────────────────────────────── */
.step { animation: fadeScale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes fadeScale {
    from { opacity: 0; transform: scale(0.98) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}