/* ============================================================
   WhatIsDating — Mobile-first dark theme
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
    background:#121212; color:#e0e0e0;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    min-height:100vh; overscroll-behavior-y:contain;
}
body { padding-bottom:70px; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:#bb86fc; text-decoration:none; }
img { max-width:100%; display:block; }

/* Buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 24px; border:none; border-radius:30px;
    font-size:16px; font-weight:600; cursor:pointer;
    transition:transform 0.1s, background 0.2s, box-shadow 0.2s;
    text-align:center; min-width:120px; user-select:none;
}
.btn:active { transform:scale(0.96); }
.btn.primary { background:#bb86fc; color:#000; }
.btn.primary:hover { background:#a56fdf; }
.btn.secondary { background:#333; color:#fff; }
.btn.secondary:hover { background:#444; }
.btn.danger { background:#cf6679; color:#fff; }
.btn.success { background:#03dac6; color:#000; }
.btn.full { width:100%; }
.btn.pass, .btn.like {
    font-size:32px; width:70px; height:70px; border-radius:50%;
    padding:0; min-width:0; box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.btn.pass { background:#cf6679; color:#fff; }
.btn.like { background:#03dac6; color:#000; }

/* Inputs */
input, select, textarea {
    width:100%; padding:14px 16px; margin:8px 0;
    background:#1e1e1e; border:1px solid #333; border-radius:12px;
    color:#e0e0e0; font-size:16px; font-family:inherit;
    transition:border-color 0.2s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:#bb86fc; }
input[type="file"] { padding:8px; }

.errors { background:#cf6679; color:#fff; padding:12px; border-radius:12px; margin-bottom:15px; font-size:0.9rem; }
.success { background:#03dac6; color:#000; padding:12px; border-radius:12px; margin-bottom:15px; font-size:0.9rem; }

/* Landing */
.landing {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:100vh; padding:20px; text-align:center;
    background:radial-gradient(circle at 50% 30%, #2a2050 0%, #121212 70%);
}
.landing h1 { font-size:3rem; background:linear-gradient(135deg,#bb86fc,#03dac6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:10px; }
.landing p { font-size:1.1rem; color:#aaa; margin-bottom:40px; }
.cta-buttons { display:flex; gap:15px; flex-wrap:wrap; justify-content:center; }

/* Auth */
.auth-container { max-width:400px; margin:40px auto; padding:24px; background:#1e1e1e; border-radius:20px; box-shadow:0 8px 32px rgba(0,0,0,0.5); }
.auth-container h2 { text-align:center; margin-bottom:20px; font-size:1.5rem; }

/* App shell */
.app-container { max-width:480px; margin:0 auto; padding:0 16px; padding-top:env(safe-area-inset-top); }
.app-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 0; border-bottom:1px solid #333;
    position:sticky; top:0; background:rgba(18,18,18,0.9); backdrop-filter:blur(12px); z-index:10;
}
.app-header h1 { font-size:1.4rem; }
.profile-icon, .logout-btn, .back-btn, .report-btn { font-size:1.4rem; padding:8px; background:none; border:none; color:#e0e0e0; cursor:pointer; }
.logout-btn { font-size:0.9rem; color:#cf6679; }
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0;
    background:rgba(30,30,30,0.95); backdrop-filter:blur(12px);
    display:flex; justify-content:space-around;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid #333;
    max-width:480px; margin:0 auto; z-index:100;
}
.bottom-nav a { color:#888; font-size:0.95rem; padding:10px 20px; border-radius:20px; transition:all 0.2s; }
.bottom-nav a.active { color:#bb86fc; background:#2a2a2a; }

/* ============================================================
   Discover / Card stack / Swipe
   ============================================================ */
.card-stack {
    position:relative;
    margin:16px 0;
    min-height:480px;
    touch-action:pan-y;
}
.profile-card {
    position:absolute; top:0; left:0; right:0;
    background:#1e1e1e; border-radius:20px; overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    will-change:transform, opacity;
    transform-origin:50% 100%;
    transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s;
    user-select:none;
}
.profile-card.active { z-index:10; }
.profile-card:not(.active) { transform:scale(0.95) translateY(8px); opacity:0.7; }
.profile-card.dragging { transition:none; }
.profile-card.fly-left  { transform:translateX(-150%) rotate(-30deg); opacity:0; }
.profile-card.fly-right { transform:translateX(150%)  rotate(30deg); opacity:0; }

.swipe-overlay {
    position:absolute; top:24px; padding:8px 16px;
    border:4px solid; border-radius:8px;
    font-size:1.6rem; font-weight:800; letter-spacing:2px;
    opacity:0; transition:opacity 0.15s; pointer-events:none;
    z-index:20;
}
.swipe-overlay.like { right:24px; color:#03dac6; border-color:#03dac6; transform:rotate(15deg); }
.swipe-overlay.nope { left:24px; color:#cf6679; border-color:#cf6679; transform:rotate(-15deg); }

.profile-image img { width:100%; height:380px; object-fit:cover; pointer-events:none; }
.profile-info { padding:16px; pointer-events:none; }
.profile-info h2 { font-size:1.5rem; margin-bottom:8px; }
.profile-info p { color:#aaa; margin:4px 0; }
.profile-info .location { font-size:0.9rem; color:#888; margin-top:8px; }

.action-buttons { display:flex; justify-content:center; gap:40px; padding:16px 0 24px; }
.empty-state { text-align:center; padding:80px 20px; color:#888; }

/* Match modal */
.match-modal {
    position:fixed; inset:0; z-index:500;
    background:linear-gradient(135deg, rgba(187,134,252,0.95), rgba(3,218,198,0.9));
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px 20px; color:#000; text-align:center;
    animation:fadeIn 0.3s;
}
.match-modal h2 { font-size:2.5rem; margin-bottom:20px; }
.match-modal p { font-size:1.1rem; margin-bottom:30px; }
.match-modal img { width:140px; height:140px; border-radius:50%; object-fit:cover; border:4px solid #000; margin-bottom:20px; }
.match-modal .btn { background:#000; color:#fff; margin-top:10px; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ============================================================
   Chat
   ============================================================ */
.match-list .match-item { display:flex; align-items:center; padding:14px 0; border-bottom:1px solid #222; }
.match-item img { width:54px; height:54px; border-radius:50%; object-fit:cover; margin-right:14px; background:#333; }
.match-item div { flex:1; min-width:0; }
.match-item strong { display:block; font-size:1rem; }
.match-item p { color:#aaa; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-item small { color:#666; font-size:0.75rem; padding-left:8px; }
.unread-badge {
    background:#bb86fc; color:#000; font-size:0.75rem; font-weight:700;
    min-width:22px; height:22px; padding:0 6px;
    border-radius:11px; display:flex; align-items:center; justify-content:center;
}

.chat-view { display:flex; flex-direction:column; height:calc(100vh - 130px); }
.chat-header { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid #333; gap:4px; }
.chat-header span { flex:1; margin-left:10px; font-weight:600; }
.chat-messages { flex:1; overflow-y:auto; padding:16px 0; display:flex; flex-direction:column; scroll-behavior:smooth; }
.message {
    max-width:80%; padding:10px 14px; border-radius:18px;
    margin-bottom:10px; word-wrap:break-word; font-size:0.95rem;
    animation:messageIn 0.2s ease-out;
}
@keyframes messageIn {
    from { opacity:0; transform:translateY(6px) scale(0.98); }
    to   { opacity:1; transform:none; }
}
.message.sent { background:#bb86fc; color:#000; align-self:flex-end; border-bottom-right-radius:4px; }
.message.received { background:#2a2a2a; color:#e0e0e0; border-bottom-left-radius:4px; }
.message small { display:block; font-size:0.7rem; opacity:0.7; margin-top:4px; }
.message .receipt { margin-left:6px; font-size:0.75rem; opacity:0.85; }
.message.pending { opacity:0.6; }
.message.pending .receipt::after { content:'⏱'; }

.typing-indicator {
    color:#888; font-size:0.85rem; font-style:italic;
    padding:4px 16px; animation:pulse 1.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:0.4;} 50%{opacity:1;} }

.chat-input {
    display:flex; gap:8px; padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid #333; background:#121212;
}
.chat-input input { flex:1; margin:0; border-radius:24px; }
.chat-input button { background:#bb86fc; border:none; color:#000; padding:0 22px; border-radius:24px; font-weight:700; cursor:pointer; }

/* ============================================================
   Profile form + photo grid
   ============================================================ */
.profile-form .form-group { margin-bottom:16px; }
.profile-form .form-group label { display:block; margin-bottom:4px; font-weight:500; font-size:0.9rem; color:#bbb; }
.profile-form .row { display:flex; gap:12px; }
.profile-form .row > div { flex:1; }

.photo-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; }
.photo-tile {
    position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
    background:#1e1e1e; border:1px solid #333;
}
.photo-tile img { width:100%; height:100%; object-fit:cover; }
.photo-tile .photo-delete {
    position:absolute; top:4px; right:4px;
    width:24px; height:24px; border-radius:50%;
    background:rgba(0,0,0,0.7); color:#fff; border:none; cursor:pointer;
    font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.photo-add {
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:#666; cursor:pointer;
    border:2px dashed #333; background:#181818;
}
.photo-add:hover { border-color:#bb86fc; color:#bb86fc; }

/* ============================================================
   Admin
   ============================================================ */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.stat-card { background:#1e1e1e; padding:16px; border-radius:14px; text-align:center; }
.stat-card h3 { font-size:0.85rem; color:#aaa; margin-bottom:6px; font-weight:500; }
.stat-card p { font-size:1.8rem; font-weight:700; color:#bb86fc; }
.stat-card small { font-size:0.75rem; color:#666; }
.report-item { background:#1e1e1e; padding:16px; border-radius:14px; margin-bottom:12px; font-size:0.9rem; }
.report-item p { margin:4px 0; }
.report-item form .btn { padding:8px 16px; min-width:auto; font-size:0.85rem; }

/* ============================================================
   Skeleton loaders
   ============================================================ */
.skeleton { background:linear-gradient(90deg,#1a1a1a,#252525,#1a1a1a); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }
.skeleton-card { background:#1e1e1e; border-radius:20px; padding:0 0 20px; overflow:hidden; }
.skeleton-img { height:380px; }
.skeleton-line { height:16px; margin:12px 16px; }
.skeleton-line.short { width:50%; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* ============================================================
   Pull-to-refresh
   ============================================================ */
.ptr-indicator {
    position:fixed; top:-60px; left:50%; transform:translateX(-50%);
    background:#1e1e1e; color:#bb86fc; padding:10px 20px;
    border-radius:24px; font-size:0.85rem; z-index:200;
    box-shadow:0 4px 16px rgba(0,0,0,0.5);
    transition:top 0.25s;
}
.ptr-indicator.visible { top:20px; }
.ptr-indicator .spinner {
    display:inline-block; width:14px; height:14px;
    border:2px solid #bb86fc; border-top-color:transparent;
    border-radius:50%; animation:spin 0.6s linear infinite; vertical-align:middle; margin-right:6px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Toast */
.toast {
    position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(60px);
    background:#2a2a2a; color:#e0e0e0; padding:12px 24px;
    border-radius:24px; font-size:0.9rem; z-index:1000;
    opacity:0; transition:all 0.25s; box-shadow:0 6px 20px rgba(0,0,0,0.5);
    pointer-events:none; max-width:90vw; text-align:center;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { background:#03dac6; color:#000; }
.toast.error { background:#cf6679; color:#fff; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * { animation:none !important; transition:none !important; }
}