/* ═══════════════════════════════════════════
   Vinted Deal Hunter — Liquid Glass
   Palette: #D2042D (rouge) + #FAF9F6 (cream) + #2a2a2e (grey)
   ═══════════════════════════════════════════ */

:root {
    --accent: #D2042D;
    --accent-glow: rgba(210,4,45,0.15);
    --cream: #FAF9F6;
    --grey: #2a2a2e;
    --grey-light: #3a3a3e;
    --orange: #f59e0b;
    --red: #D2042D;
    --glass-bg: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.06);
    --glass-blur: 40px;
    --glass-radius: 20px;
    --card-glass: rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.08);
    --text: #FAF9F6;
    --text-dim: rgba(250,249,246,0.5);
    --text-dimmer: rgba(250,249,246,0.25);
    --bg: #0e0e10;
    --header-bg: rgba(14,14,16,0.88);
    --input-bg: rgba(255,255,255,0.03);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; padding-bottom:60px; overflow-x:hidden; }

/* ═══ CUSTOM SCROLLBAR ═══ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.05); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.1); }

/* ═══ BG AMBIENT ═══ */
body::before, body::after { content:''; position:fixed; border-radius:50%; pointer-events:none; filter:blur(180px); z-index:0; }
body::before { width:700px; height:700px; background:radial-gradient(circle,rgba(210,4,45,0.04),transparent 70%); top:-250px; right:-150px; animation:f1 25s ease-in-out infinite; }
body::after { width:500px; height:500px; background:radial-gradient(circle,rgba(250,249,246,0.015),transparent 70%); bottom:-150px; left:-100px; animation:f2 30s ease-in-out infinite; }
@keyframes f1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-100px,80px);} }
@keyframes f2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(80px,-100px);} }

/* ═══ GLASS MIXIN ═══ */
.glass {
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-border);
    border-radius:var(--glass-radius);
    position:relative;
    overflow:hidden;
}
.glass::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
    pointer-events:none;
}

/* ═══ HEADER ═══ */
.header {
    padding:14px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.04);
    background:rgba(14,14,16,0.82);
    backdrop-filter:blur(40px);
    -webkit-backdrop-filter:blur(40px);
    position:sticky;
    top:0;
    z-index:50;
}
.logo { display:flex; align-items:center; gap:12px; }
.logo-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#D2042D,#8B0000); display:flex; align-items:center; justify-content:center; font-size:18px; }
.logo h1 { font-size:17px; font-weight:600; color:var(--cream); }
.logo span { font-size:11px; color:var(--text-dimmer); }

.tabs { display:flex; gap:2px; background:rgba(255,255,255,0.02); border-radius:12px; padding:3px; border:1px solid rgba(255,255,255,0.04); }
.tab { padding:7px 16px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:500; color:var(--text-dim); transition:all 0.3s; border:none; background:none; }
.tab.active { background:rgba(210,4,45,0.1); color:var(--accent); }
.tab:hover { color:var(--cream); }

/* ═══ LAYOUT ═══ */
.container { max-width:1400px; margin:0 auto; padding:24px; position:relative; z-index:1; }
.page { display:none; }
.page.active { display:block; animation:fadeIn .4s cubic-bezier(.16,1,.3,1); }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.section { margin-bottom:28px; }
.section h2 { font-size:16px; font-weight:600; margin-bottom:14px; color:var(--cream); }

/* ═══ UNIFIED STATS + CONTROLS BAR ═══ */
.stats-controls-bar {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
    padding:12px 20px;
    flex-wrap:wrap;
}
.stats-controls-bar #stats-bar-items { display:flex; align-items:center; gap:14px; }
.stats-controls-bar .sitem { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-dim); white-space:nowrap; }
.stats-controls-bar .sval { font-weight:700; color:var(--accent); }
.stats-controls-bar .separator { width:1px; height:18px; background:rgba(255,255,255,0.05); flex-shrink:0; }
.stats-controls-bar select {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--text);
    padding:6px 12px;
    border-radius:10px;
    font-size:12px;
    font-family:inherit;
    cursor:pointer;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.stats-controls-bar .feed-count { font-size:11px; color:var(--text-dimmer); margin-left:auto; }

/* ═══ FEED GRID ═══ */
.feed { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1200px) { .feed { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .feed { grid-template-columns:1fr; } }
.feed-empty { text-align:center; padding:60px 20px; grid-column:1/-1; }
.feed-empty-icon { font-size:48px; margin-bottom:12px; }
.feed-empty-text { color:var(--text-dimmer); font-size:14px; }
.feed-loader { text-align:center; padding:20px; color:var(--text-dimmer); font-size:13px; grid-column:1/-1; }

/* ═══ DEAL CARD — Liquid Glass ═══ */
.deal-card {
    border-radius:var(--glass-radius);
    overflow:hidden;
    position:relative;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s;
    cursor:default;
}
.deal-card::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
    z-index:3;
    pointer-events:none;
}
.deal-card:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
    border-color:rgba(255,255,255,0.1);
}

/* Entry animation */
.deal-card { animation:cardIn .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes cardIn { from { opacity:0; transform:translateY(40px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Image carousel */
.card-images { position:relative; width:100%; height:500px; overflow:hidden; background:#111113; }
.card-images-track { display:flex; height:100%; transition:transform .4s cubic-bezier(.16,1,.3,1); touch-action:pan-y; }
.card-images-track img { width:100%; height:100%; object-fit:cover; flex-shrink:0; user-select:none; -webkit-user-drag:none; }
.card-images-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:64px; background:linear-gradient(135deg,#111113,#1a1a1e); }
.card-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:2; }
.card-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.2); transition:all .3s; }
.card-dot.active { background:rgba(255,255,255,0.85); width:18px; border-radius:3px; }

/* Image gradient overlay */
.card-images::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:120px;
    background:linear-gradient(transparent,rgba(14,14,16,0.7));
    pointer-events:none;
    z-index:1;
}

/* Discount badge */
.card-discount {
    position:absolute;
    top:14px; left:14px;
    padding:5px 13px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    z-index:2;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.card-discount.low { background:rgba(255,255,255,0.08); color:var(--cream); border:1px solid rgba(255,255,255,0.1); }
.card-discount.orange { background:rgba(245,158,11,0.1); color:var(--orange); border:1px solid rgba(245,158,11,0.15); }
.card-discount.red { background:rgba(210,4,45,0.1); color:var(--accent); border:1px solid rgba(210,4,45,0.15); }

/* Card info — glass panel */
.card-info {
    padding:14px 16px;
    background:rgba(255,255,255,0.025);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    border-top:1px solid rgba(255,255,255,0.04);
}
.card-time { font-size:11px; color:var(--text-dimmer); font-style:italic; margin-bottom:8px; }
.card-price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.card-price { font-size:24px; font-weight:700; color:var(--cream); }
.card-avg { font-size:13px; color:var(--text-dimmer); text-decoration:line-through; }
.card-avg-label { font-size:11px; color:var(--text-dimmer); }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.card-tag {
    padding:4px 11px;
    border-radius:8px;
    font-size:11px;
    font-weight:600;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--text-dim);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:border-color .2s;
}
.card-tag:hover { border-color:rgba(255,255,255,0.12); }
.card-bottom { display:flex; align-items:center; justify-content:flex-end; }
.card-link {
    width:38px; height:38px;
    border-radius:50%;
    background:linear-gradient(135deg,#D2042D,#8B0000);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:all .3s cubic-bezier(.16,1,.3,1);
    flex-shrink:0;
    box-shadow:0 4px 14px rgba(210,4,45,0.2);
}
.card-link:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(210,4,45,0.35); }
.card-link svg { width:15px; height:15px; fill:#fff; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* AI badge */
.card-ai { font-size:10px; padding:3px 8px; border-radius:6px; margin-left:auto; }
.card-ai.authentic { background:rgba(250,249,246,0.05); color:var(--cream); }
.card-ai.suspect { background:rgba(245,158,11,0.08); color:var(--orange); }

/* ═══ SEARCH ═══ */
.search-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
    border-bottom:1px solid rgba(255,255,255,0.03);
    transition:background .2s;
}
.search-item:hover { background:rgba(255,255,255,0.015); }
.search-item:last-child { border-bottom:none; }
.search-item .query { font-weight:600; font-size:14px; }
.search-item .avg { color:var(--text-dim); font-size:13px; }
.search-add { display:flex; gap:10px; margin-bottom:20px; }
.search-add input { flex:1; }

/* ═══ CONFIG ═══ */
.config-section { padding:24px; margin-bottom:16px; }
.config-section h3 { font-size:15px; font-weight:600; margin-bottom:16px; color:var(--cream); }
.config-row { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.config-label { font-size:14px; min-width:220px; }
.config-sublabel { font-size:12px; color:var(--text-dimmer); margin-top:2px; }

/* ═══ INPUTS ═══ */
input[type="range"] {
    -webkit-appearance:none;
    flex:1; max-width:280px;
    height:4px;
    border-radius:2px;
    background:rgba(255,255,255,0.05);
    outline:none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:16px; height:16px;
    border-radius:50%;
    background:var(--accent);
    cursor:pointer;
    box-shadow:0 0 8px var(--accent-glow);
}
input[type="text"],input[type="number"],input[type="password"] {
    background:var(--input-bg);
    border:1px solid rgba(255,255,255,0.05);
    color:var(--text);
    padding:10px 14px;
    border-radius:12px;
    font-size:14px;
    font-family:inherit;
    width:280px;
    transition:all .2s;
}
input:focus { outline:none; border-color:rgba(210,4,45,0.4); box-shadow:0 0 0 3px rgba(210,4,45,0.08); }

.checkbox-group { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
    display:inline-flex;
    padding:7px 16px;
    border-radius:var(--glass-radius);
    font-size:13px;
    cursor:pointer;
    transition:all .25s;
    border:1px solid rgba(255,255,255,0.05);
    background:rgba(255,255,255,0.02);
    user-select:none;
    font-weight:500;
    color:var(--text-dim);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.chip.active { background:rgba(210,4,45,0.08); border-color:rgba(210,4,45,0.2); color:var(--accent); }
.chip:hover { border-color:rgba(255,255,255,0.1); }

/* ═══ BUTTONS ═══ */
.btn {
    padding:10px 24px;
    border-radius:12px;
    border:none;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all .25s;
    font-family:inherit;
}
.btn-primary { background:linear-gradient(135deg,#D2042D,#8B0000); color:var(--cream); box-shadow:0 4px 14px rgba(210,4,45,0.2); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(210,4,45,0.3); }
.btn-danger { background:rgba(210,4,45,0.06); color:var(--accent); border:1px solid rgba(210,4,45,0.12); }
.btn-danger:hover { background:rgba(210,4,45,0.12); }
.btn-sm { padding:6px 14px; font-size:12px; border-radius:10px; }

/* ═══ CHARTS ═══ */
.chart-container { padding:24px; margin-bottom:20px; }
.chart-select { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.chart-select select {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    color:var(--text);
    padding:10px 16px;
    border-radius:12px;
    font-size:14px;
    font-family:inherit;
    cursor:pointer;
    min-width:250px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.chart-canvas { position:relative; height:350px; }
.val-display { font-size:22px; font-weight:700; min-width:60px; color:var(--accent); }

/* ═══ TABLE ═══ */
table { width:100%; border-collapse:collapse; }
th { padding:10px 14px; text-align:left; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.8px; font-weight:600; border-bottom:1px solid rgba(255,255,255,0.04); }
td { padding:8px 14px; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.02); }

/* ═══ TOAST ═══ */
.toast {
    position:fixed;
    bottom:70px; right:24px;
    padding:14px 28px;
    border-radius:16px;
    font-weight:600;
    font-size:14px;
    transform:translateY(100px);
    opacity:0;
    transition:all .4s cubic-bezier(.16,1,.3,1);
    z-index:999;
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    color:var(--cream);
}
.toast.show { transform:translateY(0); opacity:1; }

/* ═══ REFRESH BAR ═══ */
.refresh-bar {
    position:fixed;
    bottom:0; left:0; right:0;
    padding:10px 24px;
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--text-dimmer);
    background:rgba(14,14,16,0.85);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    border-top:1px solid rgba(255,255,255,0.03);
    z-index:100;
}
.pulse { animation:pulse 2s infinite; color:var(--accent); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ═══ SCROLL TO TOP ═══ */
.scroll-top-btn {
    position:fixed;
    bottom:60px; right:24px;
    width:42px; height:42px;
    border-radius:50%;
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.08);
    color:var(--cream);
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    z-index:200;
    opacity:0;
    pointer-events:none;
    transition:all .4s cubic-bezier(.16,1,.3,1);
}
.scroll-top-btn.visible { opacity:1; pointer-events:auto; }
.scroll-top-btn:hover { transform:translateY(-3px); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.14); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:768px) {
    .header { flex-direction:column; gap:12px; padding:12px 16px; }
    .header > div:last-child { width:100%; justify-content:center; flex-wrap:wrap; }
    .tabs { width:100%; justify-content:center; }
    .tab { padding:6px 12px; font-size:12px; }
    .container { padding:12px; }
    .stats-controls-bar { flex-direction:column; gap:8px; padding:10px 14px; }
    .stats-controls-bar .separator { display:none; }
    .stats-controls-bar select { width:100%; }
    .stats-controls-bar .feed-count { margin-left:0; text-align:center; }
    .feed { grid-template-columns:1fr; gap:14px; }
    .card-images { height:420px; }
    .config-row { flex-direction:column; align-items:flex-start; gap:10px; }
    .config-label { min-width:unset; }
    input[type="text"], input[type="number"], input[type="password"] { width:100%; }
    input[type="range"] { max-width:100%; }
    .search-add { flex-direction:column; }
    .search-add input { width:100%; }
    .chart-select { flex-direction:column; }
    .chart-select select { min-width:unset; width:100%; }
    .scroll-top-btn { bottom:50px; right:16px; }
    .toast { right:12px; left:12px; text-align:center; }
}

@media (max-width:480px) {
    .logo h1 { font-size:15px; }
    .tab { padding:5px 8px; font-size:11px; }
    .card-images { height:360px; }
    .card-price { font-size:20px; }
}