/* ═══════════════════════════════════════════
   eAuction History — Clean Auction Design
   Inspired by UAE auction aesthetics
   White + Dark nav + Red accent
   ═══════════════════════════════════════════ */

/* ─── VARIABLES ─── */
:root {
    --bg: #f5f6fa;
    --bg-card: #ffffff;
    --bg-dark: #1b1e2b;
    --bg-darker: #141621;
    --bg-nav: #1b1e2b;

    --text: #2d2d3a;
    --text-secondary: #6b7185;
    --text-light: #9199ae;
    --text-on-dark: #f0f1f5;
    --text-muted-dark: #8d93a5;

    --accent: #D4213D;
    --accent-hover: #b91c34;
    --accent-light: rgba(212, 33, 61, 0.08);
    --accent-soft: #fce8ec;

    --green: #16a34a;
    --green-soft: #dcfce7;
    --orange: #ea580c;
    --orange-soft: #fff7ed;

    --border: #e5e7ed;
    --border-light: #f0f1f5;

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

    --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;

    --nav-h: 64px;
    --max-w: 1280px;
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{
    font-family:var(--font);
    font-size:15px;
    line-height:1.6;
    color:var(--text);
    background:var(--bg);
    min-height:100vh;
    padding-top:var(--nav-h);
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
}
a{color:var(--accent);text-decoration:none;cursor:pointer}
a:hover{color:var(--accent-hover)}
img{max-width:100%;display:block;height:auto}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:inherit;max-width:100%}
ul{list-style:none}
table{max-width:100%;overflow-x:auto}

/* Prevent iOS zoom on input focus (font-size >=16px) */
@media(max-width:768px){
    input,select,textarea{font-size:16px}
    input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],select,textarea{
        min-height:44px;
    }
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#c5c8d4;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#a0a4b4}

/* ═══════════════════ NAVBAR ═══════════════════ */
.navbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--nav-h);
    background:var(--bg-nav);
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-inner{
    max-width:var(--max-w);margin:0 auto;height:100%;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 24px;gap:24px;
}

/* Brand */
.nav-brand{
    display:flex;align-items:center;gap:11px;cursor:pointer;
    text-decoration:none;
}
.brand-logo{
    flex-shrink:0;
    transition:transform .3s ease;
}
.nav-brand:hover .brand-logo{transform:rotate(-6deg) scale(1.08)}
.brand-logo-svg{display:block}
.brand-icon{color:#fff;flex-shrink:0}
.brand-text{
    font-family:var(--font-display);
    font-size:19px;font-weight:700;color:#fff;letter-spacing:-0.5px;
}
.brand-accent{color:var(--accent);font-weight:700}

/* Nav links */
.nav-links{
    display:flex;align-items:center;gap:6px;
}
.nav-links a{
    color:var(--text-muted-dark);font-size:14px;font-weight:500;
    padding:8px 14px;border-radius:var(--radius-sm);
    transition:all .2s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.nav-links a.active{color:#fff;background:rgba(255,255,255,0.1)}

/* Nav actions */
.nav-actions{display:flex;align-items:center;gap:10px}

/* Language */
.lang-switcher{position:relative}
.btn-icon{
    width:36px;height:36px;border-radius:50%;font-size:18px;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,0.85);transition:all .2s;background:transparent;
    cursor:pointer;border:none;
}
.btn-icon:hover{color:#fff;background:rgba(255,255,255,0.12)}
.lang-btn svg{pointer-events:none}
.lang-menu{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow-md);
    min-width:165px;overflow:hidden;z-index:200;
    padding:4px 0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s,visibility .2s,transform .2s;
}
.lang-switcher:hover .lang-menu{
    opacity:1;visibility:visible;transform:translateY(0);
}
.lang-menu button{
    display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    padding:10px 16px;font-size:14px;color:var(--text);
    transition:background .15s;border:none;background:none;cursor:pointer;
}
.lang-menu button:hover{background:var(--accent-light)}
.lang-flag{
    display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:20px;border-radius:3px;
    background:var(--accent);color:#fff;
    font-size:10px;font-weight:700;letter-spacing:0.5px;
    flex-shrink:0;
}

/* Auth / User buttons */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 20px;border-radius:var(--radius-sm);font-weight:600;
    font-size:14px;transition:all .2s;white-space:nowrap;
}
.btn-primary{
    background:var(--accent);color:#fff;
}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,33,61,0.3)}
.btn-outline{
    border:1.5px solid rgba(255,255,255,0.2);color:#fff;background:transparent;
}
.btn-outline:hover{border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05)}
.btn-block{width:100%}
.btn-lg{padding:12px 28px;font-size:15px}
.btn-sm{padding:6px 14px;font-size:13px}

/* User menu */
.user-avatar{
    width:36px;height:36px;border-radius:50%;
    background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;cursor:pointer;
    transition:box-shadow .2s;
}
.user-avatar:hover{box-shadow:0 0 0 3px rgba(212,33,61,0.3)}
#userMenu{position:relative}
.user-dropdown{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow-md);
    min-width:200px;overflow:hidden;z-index:200;
}
.user-info{
    padding:14px 16px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:8px;
}
.user-info strong{font-size:14px}
.plan-badge{
    font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
    background:var(--accent-soft);color:var(--accent);text-transform:uppercase;
}
.user-dropdown a{
    display:block;padding:10px 16px;font-size:14px;
    color:var(--text);transition:background .15s;
}
.user-dropdown a:hover{background:var(--accent-light)}

/* Mobile menu button */
.mobile-menu-btn{display:none;color:#fff;font-size:22px}

/* ═══════════════════ HERO ═══════════════════ */
.hero{
    background:var(--bg-dark);
    padding:56px 24px 52px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.hero::before{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background:
        radial-gradient(ellipse 600px 300px at 20% 80%, rgba(212,33,61,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 500px 250px at 80% 20%, rgba(212,33,61,0.05) 0%, transparent 70%);
    pointer-events:none;
}
.hero h1{
    font-family:var(--font-display);
    font-size:38px;font-weight:700;color:#fff;
    letter-spacing:-0.8px;margin-bottom:10px;
    position:relative;
}
.hero p{
    color:var(--text-muted-dark);font-size:16px;
    max-width:520px;margin:0 auto 28px;
    position:relative;
}
.hero-search{
    display:flex;gap:10px;max-width:520px;margin:0 auto;
    position:relative;
}
.hero-search .input{
    flex:1;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);
    color:#fff;padding:14px 18px;border-radius:var(--radius);font-size:15px;
}
.hero-search .input::placeholder{color:rgba(255,255,255,0.35)}
.hero-search .input:focus{
    outline:none;border-color:var(--accent);
    background:rgba(255,255,255,0.12);
}
.hero-search .btn{border-radius:var(--radius)}

/* ═══════════════════ STATS BAR ═══════════════════ */
.stats-bar{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    max-width:var(--max-w);margin:-28px auto 0;
    padding:0 24px;position:relative;z-index:10;
}
#admin-content .stats-bar{
    max-width:none;margin:-0 0 0;padding:0;
}
.stat-card{
    background:var(--bg-card);border-radius:var(--radius);
    padding:20px;text-align:center;
    box-shadow:var(--shadow);
    border:1px solid var(--border-light);
}
.stat-value{
    font-family:var(--font-display);
    font-size:28px;font-weight:700;color:var(--text);
    letter-spacing:-0.8px;
}
.stat-label{
    font-size:13px;color:var(--text-secondary);
    margin-top:4px;
}
/* stat-card tooltips */
.stat-card[data-tip]{position:relative;cursor:help}
.stat-card[data-tip]::after{
    content:attr(data-tip);
    position:absolute;bottom:calc(100% + 10px);left:50%;
    transform:translateX(-50%);
    background:var(--bg-dark);color:var(--text-on-dark);
    border-radius:8px;padding:8px 12px;
    font-size:12px;line-height:1.4;font-weight:400;
    white-space:normal;min-width:190px;max-width:250px;
    text-align:center;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
    z-index:100;
    box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.stat-card[data-tip]::before{
    content:'';position:absolute;bottom:calc(100% + 2px);left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;border-top-color:var(--bg-dark);
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;z-index:100;
}
.stat-card[data-tip]:hover::after,
.stat-card[data-tip]:hover::before{opacity:1}
.stat-info{opacity:.35;font-size:11px;margin-left:3px;cursor:help}

/* ═══════════════════ CONTENT ═══════════════════ */
.content{
    max-width:var(--max-w);margin:0 auto;
    padding:32px 24px;
}

/* ═══════════════════ CATEGORIES ═══════════════════ */
.categories{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-bottom:24px;
}
.cat-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 16px;border-radius:40px;
    font-size:13px;font-weight:500;color:var(--text-secondary);
    background:var(--bg-card);border:1px solid var(--border);
    transition:all .2s;cursor:pointer;
}
.cat-btn:hover{border-color:var(--accent);color:var(--accent)}
.cat-btn.active{
    background:var(--accent);color:#fff;
    border-color:var(--accent);
}
.cat-count{
    font-size:11px;font-weight:700;
    background:rgba(0,0,0,0.06);padding:2px 7px;border-radius:20px;
}
.cat-btn.active .cat-count{background:rgba(255,255,255,0.2);color:#fff}

/* ═══════════════════ FILTERS ═══════════════════ */
.filters-bar{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-bottom:24px;align-items:center;
}
.input{
    padding:10px 14px;border-radius:var(--radius-sm);
    border:1px solid var(--border);background:var(--bg-card);
    color:var(--text);font-size:14px;
    transition:border-color .2s;
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
select{
    padding:10px 32px 10px 14px;border-radius:var(--radius-sm);
    border:1px solid var(--border);background:var(--bg-card);
    color:var(--text);font-size:14px;
    appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7185' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;
    transition:border-color .2s;
}
select:focus{outline:none;border-color:var(--accent)}

/* ═══════ PHONE CODE PICKER ═══════ */
.phone-code-picker{position:relative}
.phone-code-input{
    cursor:pointer!important;white-space:nowrap;overflow:hidden;
    display:flex;align-items:center;padding:8px 10px;font-size:14px;
    user-select:none;gap:6px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%236b7185' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;
    padding-right:24px;
}
.phone-code-input span{overflow:hidden;text-overflow:ellipsis;font-weight:500}
.phone-code-dropdown{
    display:none;position:absolute;top:100%;left:0;z-index:1000;
    min-width:200px;width:max-content;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
    box-shadow:0 8px 24px rgba(0,0,0,.15);margin-top:4px;max-height:300px;
    flex-direction:column;
}
.phone-code-dropdown.open{display:flex}
.phone-code-search{
    padding:8px 12px;border:none;border-bottom:1px solid var(--border);
    background:var(--bg-card);color:var(--text);font-size:15px;font-family:inherit;
    outline:none;width:100%;box-sizing:border-box;
}
.phone-code-list{overflow-y:auto;max-height:250px}
.phone-code-item{
    padding:8px 12px;cursor:pointer;font-size:14px;white-space:nowrap;
    transition:background .1s;display:flex;align-items:center;gap:8px;
}
.phone-code-item:hover{background:var(--accent-light)}

/* ═══════════════════ ITEMS GRID ═══════════════════ */
.items-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(265px, 1fr));
    gap:18px;
    margin-bottom:28px;
}

/* ═══════════════════ CARD ═══════════════════ */
.card{
    background:var(--bg-card);
    border-radius:var(--radius);
    border:1px solid var(--border-light);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    cursor:pointer;
    transition:all .25s ease;
}
.card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
    border-color:var(--border);
}

.card-img-wrap{
    position:relative;
    width:100%;
    padding-top:62%;
    background:var(--bg);
    overflow:hidden;
}
.card-img-wrap.is-plate{
    padding-top:40%;
    background:var(--card);
}
.card-img{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}
.card-img-wrap.is-plate .card-img{
    object-fit:contain;
    padding:8px;
}
.card:hover .card-img{transform:scale(1.04)}

.card-img-placeholder{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    font-size:48px;color:var(--text-light);
    background:var(--bg);
}

.card-body{padding:14px 16px 16px}

.card-title{
    font-size:14px;font-weight:600;color:var(--text);
    line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-bottom:8px;
    min-height:40px;
}

.card-meta{
    display:flex;flex-wrap:wrap;gap:6px 10px;
    margin-bottom:10px;
}
.card-meta span{
    font-size:12px;color:var(--text-secondary);
}

.card-footer{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:10px;
    border-top:1px solid var(--border-light);
}

.card-price{
    font-family:var(--font-display);
    font-size:16px;font-weight:700;color:var(--accent);
    letter-spacing:-0.3px;
}
.card-price.locked{
    color:var(--text-light);font-size:13px;font-weight:500;
}

.card-status{
    font-size:11px;font-weight:600;text-transform:uppercase;
    padding:3px 10px;border-radius:20px;letter-spacing:0.3px;
}
.card-status.active{background:var(--green-soft);color:var(--green)}
.card-status.ended{background:var(--accent-soft);color:var(--accent)}

/* ═══════════════════ DETAIL PAGE ═══════════════════ */
.detail-page{
    max-width:var(--max-w);margin:0 auto;
    padding:32px 24px;
}
.detail-header{
    display:grid;grid-template-columns:1fr 1fr;gap:32px;
    margin-bottom:32px;
}
.detail-gallery{
    border-radius:var(--radius-lg);overflow:hidden;
    background:var(--bg-card);border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}
.detail-main-img{
    width:100%;aspect-ratio:4/3;object-fit:cover;
    background:var(--bg);
}
.detail-gallery.is-plate .detail-main-img{
    aspect-ratio:3/1;
    object-fit:contain;
    padding:16px;
    background:var(--card);
}
.detail-thumbs{
    display:flex;gap:6px;padding:8px;
    overflow-x:auto;
}
.detail-thumbs img{
    width:72px;height:54px;object-fit:cover;
    border-radius:var(--radius-sm);cursor:pointer;
    border:2px solid transparent;transition:border-color .2s;
    flex-shrink:0;
}
.detail-thumbs img:hover,
.detail-thumbs img.active{border-color:var(--accent)}

.detail-info{
    display:flex;flex-direction:column;gap:16px;
}
.detail-title{
    font-family:var(--font-display);
    font-size:24px;font-weight:700;color:var(--text);
    line-height:1.3;letter-spacing:-0.5px;
}
.detail-price-box{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:20px;
}
.detail-price-label{
    font-size:12px;font-weight:600;text-transform:uppercase;
    color:var(--text-secondary);letter-spacing:0.5px;margin-bottom:6px;
}
.detail-price{
    font-family:var(--font-display);
    font-size:32px;font-weight:700;color:var(--accent);
    letter-spacing:-0.5px;
}
.detail-price .currency{font-size:18px;font-weight:600;color:var(--text-secondary);margin-left:6px}

.detail-attrs{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.detail-attr{
    background:var(--bg);border-radius:var(--radius-sm);
    padding:12px 14px;
}
.detail-attr-label{font-size:11px;color:var(--text-light);text-transform:uppercase;font-weight:600;letter-spacing:0.4px}
.detail-attr-val{font-size:15px;font-weight:600;color:var(--text);margin-top:2px}

.detail-locked{
    background:var(--accent-light);border:1px solid var(--accent-soft);
    border-radius:var(--radius);padding:24px;text-align:center;
}
.detail-locked-text{font-size:14px;color:var(--text-secondary);margin-bottom:14px}
.detail-locked .btn{margin-top:8px}

.detail-back{
    display:inline-flex;align-items:center;gap:4px;
    font-size:14px;font-weight:500;color:var(--text-secondary);
    margin-bottom:16px;padding:6px 0;
    transition:color .2s;
}
.detail-back:hover{color:var(--accent)}

.price-history{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:20px;margin-top:20px;
}
.price-history h3{font-size:16px;font-weight:700;margin-bottom:14px}
.price-history-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.price-history table{width:100%;border-collapse:collapse;font-size:14px;min-width:300px}
.price-history th{
    text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;
    color:var(--text-light);padding:8px 10px;
    border-bottom:2px solid var(--border);letter-spacing:0.3px;
}
.price-history td{
    padding:10px;border-bottom:1px solid var(--border-light);
    color:var(--text);
}
.price-change{font-weight:600}
.price-up{color:var(--green)}
.price-down{color:var(--accent)}

/* ═══════════════════ SPECS ═══════════════════ */
.detail-specs{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:20px;margin-bottom:24px;
}
.spec-row{
    display:flex;flex-direction:column;gap:2px;
    padding:10px 14px;background:var(--bg);
    border-radius:var(--radius-sm);
}
.spec-label{
    font-size:11px;font-weight:600;text-transform:uppercase;
    color:var(--text-light);letter-spacing:0.4px;
}
.spec-value{
    font-size:15px;font-weight:600;color:var(--text);
}

/* ═══════════════════ TAG BADGES ═══════════════════ */
.tag-badge{
    display:inline-block;padding:4px 10px;
    background:var(--accent-bg,rgba(59,130,246,0.1));color:var(--accent);
    border-radius:20px;font-size:12px;font-weight:600;
    border:1px solid var(--accent-border,rgba(59,130,246,0.2));
}
.detail-section h3{
    margin-bottom:8px;font-size:1.1em;
}

/* ═══════════════════ AUTH PAGES ═══════════════════ */
.auth-page{
    display:flex;align-items:center;justify-content:center;
    min-height:calc(100vh - var(--nav-h) - 80px);
    padding:40px 24px;
}
.auth-card{
    width:100%;max-width:420px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:36px 32px;
    box-shadow:var(--shadow);
}
.auth-card h2{
    font-family:var(--font-display);
    font-size:24px;font-weight:700;text-align:center;
    margin-bottom:24px;color:var(--text);
}
.auth-form{display:flex;flex-direction:column;gap:16px}
.input-group{display:flex;flex-direction:column;gap:5px}
.input-group label{font-size:13px;font-weight:600;color:var(--text-secondary)}
.auth-error{
    background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
    border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;
    display:none;
}
.auth-divider{
    text-align:center;color:var(--text-light);font-size:13px;
    margin:20px 0;position:relative;
}
.auth-divider::before,.auth-divider::after{
    content:'';position:absolute;top:50%;height:1px;
    background:var(--border);width:calc(50% - 40px);
}
.auth-divider::before{left:0}
.auth-divider::after{right:0}

.btn-google{
    width:100%;padding:11px 20px;border-radius:var(--radius-sm);
    border:1px solid var(--border);background:var(--bg-card);
    font-size:14px;font-weight:600;color:var(--text);
    display:flex;align-items:center;justify-content:center;gap:10px;
    transition:all .2s;
}
.btn-google:hover{background:var(--bg);border-color:#ccc;box-shadow:var(--shadow-sm)}

.auth-footer{
    text-align:center;margin-top:20px;font-size:13px;
    color:var(--text-secondary);
}
.auth-footer a{font-weight:600}

/* ═══════════════════ PRICING PAGE ═══════════════════ */
.pricing-page{
    max-width:900px;margin:0 auto;
    padding:48px 24px;text-align:center;
}
.pricing-page h1{font-family:var(--font-display);font-size:32px;font-weight:700;margin-bottom:8px;color:var(--text)}
.pricing-page .subtitle{color:var(--text-secondary);font-size:16px;margin-bottom:40px}

.pricing-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:24px;
    text-align:left;
}
.pricing-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:32px 28px;
    position:relative;transition:box-shadow .3s;
}
.pricing-card:hover{box-shadow:var(--shadow-md)}
.pricing-card.featured{
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent), var(--shadow-md);
}
.pricing-card h3{font-size:20px;font-weight:700;margin-bottom:16px;color:var(--text)}
.price-tag{
    font-family:var(--font-display);
    font-size:40px;font-weight:700;color:var(--text);
    margin-bottom:24px;letter-spacing:-1px;
}
.price-tag .period{
    font-size:15px;font-weight:500;color:var(--text-secondary);
    letter-spacing:0;
}

.badge-popular{
    position:absolute;top:16px;right:16px;
    background:var(--accent);color:#fff;font-size:11px;font-weight:700;
    padding:4px 12px;border-radius:20px;text-transform:uppercase;
    letter-spacing:0.5px;
}

.pricing-card ul{margin-bottom:28px}
.pricing-card li{
    padding:7px 0;font-size:14px;color:var(--text-secondary);
    padding-left:24px;position:relative;
}
.pricing-card li::before{
    content:'✓';position:absolute;left:0;
    color:var(--green);font-weight:700;
}
.pricing-card.featured li::before{color:var(--accent)}

/* ═══════════════════ PROFILE ═══════════════════ */
.profile-page{
    max-width:700px;margin:0 auto;
    padding:40px 24px;
}
.profile-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:28px;
    margin-bottom:24px;box-shadow:var(--shadow-sm);
}
.profile-card h2{font-size:20px;font-weight:700;margin-bottom:6px}
.profile-card h3{font-size:17px;font-weight:700;margin-bottom:14px;color:var(--text)}
.profile-stat{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 0;border-bottom:1px solid var(--border-light);
    font-size:14px;
}
.profile-stat:last-child{border-bottom:none}
.profile-stat-label{color:var(--text-secondary)}
.profile-stat-value{font-weight:600;color:var(--text)}

.profile-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}

.payment-success{
    background:var(--green-soft);border:1px solid #bbf7d0;
    color:#15803d;border-radius:var(--radius);
    padding:14px 18px;font-size:14px;font-weight:500;
    margin-bottom:20px;
}

/* ═══════════════════ LEGAL PAGES ═══════════════════ */
.legal-page{
    max-width:720px;margin:0 auto;
    padding:40px 24px;
}
.legal-page h1{font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:24px;color:var(--text)}
.legal-page h2{font-size:18px;font-weight:700;margin:28px 0 10px;color:var(--text)}
.legal-page p{color:var(--text-secondary);line-height:1.7;margin-bottom:12px;font-size:15px}

/* ═══════════════════ AD SLOT ═══════════════════ */
.ad-slot{
    background:var(--bg-card);
    border-radius:var(--radius);
    padding:8px 0;text-align:center;
    margin:28px 0;
    min-height:90px;
    overflow:hidden;
}
.ad-slot .adsbygoogle{display:block}
.ad-slot:empty{display:none}

/* ═══════════════════ PAGE WITH ADS LAYOUT ═══════════════════ */
.page-with-ads{
    display:flex;
    justify-content:center;
    min-height:calc(100vh - var(--nav-h));
}
.page-with-ads > main{
    flex:1;
    min-width:0;
    max-width:100%;
}

/* Side ad rails */
.ad-rail{
    width:160px;
    flex-shrink:0;
    padding:32px 8px;
    display:none; /* hidden by default */
}
.ad-rail-inner{
    position:sticky;
    top:calc(var(--nav-h) + 16px);
}
.ad-rail .adsbygoogle{display:block}
@media(min-width:1440px){
    .ad-rail{display:block}
    .page-with-ads > main{max-width:var(--max-w)}
}
@media(min-width:1600px){
    .ad-rail{width:200px}
}

/* ═══════════════════ PAGINATION ═══════════════════ */
.pagination{
    display:flex;align-items:center;justify-content:center;
    gap:6px;margin:24px 0;
}
.page-btn{
    min-width:38px;height:38px;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:500;color:var(--text-secondary);
    border:1px solid var(--border);background:var(--bg-card);
    transition:all .2s;
}
.page-btn:hover:not(:disabled):not(.active){
    border-color:var(--accent);color:var(--accent);
}
.page-btn.active{
    background:var(--accent);color:#fff;border-color:var(--accent);
}
.page-btn:disabled{opacity:0.4;cursor:not-allowed}

/* ═══════════════════ SKELETON ═══════════════════ */
.skeleton{
    background:linear-gradient(90deg, var(--border-light) 25%, #eceef5 50%, var(--border-light) 75%);
    background-size:200% 100%;
    animation:shimmer 1.4s ease-in-out infinite;
    border-radius:var(--radius);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:300px;border-radius:var(--radius)}

/* ═══════════════════ EMPTY STATE ═══════════════════ */
.empty-state{
    text-align:center;padding:48px 20px;
    grid-column:1/-1;
}
.empty-icon{font-size:48px;margin-bottom:12px;color:var(--text-light)}
.empty-state p{color:var(--text-secondary);font-size:15px}

/* ═══════════════════ MODAL ═══════════════════ */
.modal-overlay{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;
    background:rgba(0,0,0,0.5);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    backdrop-filter:blur(4px);
}
.modal{
    background:var(--bg-card);border-radius:var(--radius-lg);
    max-width:500px;width:100%;max-height:85vh;
    overflow-y:auto;padding:28px;position:relative;
    box-shadow:var(--shadow-lg);
}
.modal-close{
    position:absolute;top:14px;right:16px;
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:var(--text-light);
    transition:all .15s;background:var(--bg);
}
.modal-close:hover{background:var(--accent-light);color:var(--accent)}

/* ═══════════════════ TOAST ═══════════════════ */
.toast-container{
    position:fixed;top:calc(var(--nav-h) + 12px);right:16px;z-index:999;
    display:flex;flex-direction:column;gap:8px;
}
.toast{
    padding:12px 20px;border-radius:var(--radius-sm);
    font-size:14px;font-weight:500;color:#fff;
    box-shadow:var(--shadow-md);
    animation:toastIn .3s ease;
}
.toast.success{background:var(--green)}
.toast.error{background:var(--accent)}
@keyframes toastIn{
    from{opacity:0;transform:translateX(40px)}
    to{opacity:1;transform:translateX(0)}
}

/* ═══════════════════ FOOTER ═══════════════════ */
.footer{
    background:var(--bg-darker);
    border-top:1px solid rgba(255,255,255,0.05);
    margin-top:40px;
}
.footer-inner{
    max-width:var(--max-w);margin:0 auto;
    padding:32px 24px 24px;
    text-align:center;
}
.footer-brand{
    font-family:var(--font-display);
    font-size:17px;font-weight:700;color:var(--text-on-dark);
    margin-bottom:14px;cursor:pointer;
}
.footer-brand .brand-accent{color:var(--accent)}
.footer-links{
    display:flex;justify-content:center;gap:20px;
    margin-bottom:16px;
}
.footer-links a{
    font-size:13px;color:var(--text-muted-dark);
    transition:color .2s;
}
.footer-links a:hover{color:var(--accent)}
.footer-copy{
    font-size:12px;color:var(--text-muted-dark);
    margin-bottom:6px;
}
.footer-disclaimer{
    font-size:11px;color:rgba(255,255,255,0.3);
}

/* ═══════════════════ HIDDEN ═══════════════════ */
.hidden{display:none!important}

/* ═══════════════════ RTL ═══════════════════ */
[dir="rtl"]{text-align:right}
[dir="rtl"] .nav-inner{flex-direction:row-reverse}
[dir="rtl"] .nav-links{flex-direction:row-reverse}
[dir="rtl"] .nav-actions{flex-direction:row-reverse}
[dir="rtl"] .hero-search{flex-direction:row-reverse}
[dir="rtl"] .card-footer{flex-direction:row-reverse}
[dir="rtl"] .detail-header{direction:rtl}
[dir="rtl"] .pricing-card li{padding-left:0;padding-right:24px}
[dir="rtl"] .pricing-card li::before{left:auto;right:0}
[dir="rtl"] .lang-menu{right:auto;left:0}
[dir="rtl"] .user-dropdown{right:auto;left:0}
[dir="rtl"] select{
    background-position:left 10px center;
    padding:10px 14px 10px 32px;
}
[dir="rtl"] .detail-price .currency{margin-left:0;margin-right:6px}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

/* ── Tablet ≤ 768px ── */
@media(max-width:768px){
    /* ─ Navbar ─ */
    .nav-links{display:none}
    .mobile-menu-btn{display:flex}
    .nav-links.open{
        display:flex;flex-direction:column;
        position:absolute;top:var(--nav-h);left:0;right:0;
        background:var(--bg-nav);padding:12px 24px 20px;
        border-bottom:1px solid rgba(255,255,255,0.08);
        box-shadow:var(--shadow-md);
        z-index:200;
    }
    .nav-links.open a{padding:12px 0;width:100%;font-size:16px}
    .nav-actions .btn{font-size:12px;padding:6px 12px}

    /* ─ Hero ─ */
    .hero{padding:36px 16px 32px}
    .hero h1{font-size:26px}
    .hero p{font-size:14px;margin-bottom:20px}
    .hero-search{flex-direction:column}
    .hero-search .btn{width:100%}

    /* ─ Stats ─ */
    .stats-bar{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:-20px;padding:0 16px}
    .stat-value{font-size:22px}

    /* ─ Content ─ */
    .content{padding:20px 16px}

    /* ─ Categories ─ */
    .categories{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
    .categories::-webkit-scrollbar{display:none}
    .cat-btn{flex-shrink:0;white-space:nowrap}

    /* ─ Filters ─ */
    .filters-bar{flex-direction:column;gap:8px}
    .filters-bar .input{max-width:100%!important;width:100%}
    .filters-bar select{width:100%}

    /* ─ Cards grid ─ */
    .items-grid{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:14px}

    /* ─ Detail page ─ */
    .detail-page{padding:20px 16px}
    .detail-header{grid-template-columns:1fr;gap:20px}
    .detail-title{font-size:20px}
    .detail-price{font-size:24px}
    .detail-attrs{grid-template-columns:1fr 1fr;gap:8px}
    .detail-specs{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:14px}
    .detail-thumbs img{width:56px;height:42px}

    /* ─ Pricing ─ */
    .pricing-page{padding:32px 16px}
    .pricing-page h1{font-size:26px}
    .pricing-grid{grid-template-columns:1fr}

    /* ─ Comparison table ─ */
    .comparison-table{font-size:12px}
    .comparison-table th,.comparison-table td{padding:8px 6px}

    /* ─ Auth ─ */
    .auth-page{padding:24px 16px}

    /* ─ Profile ─ */
    .profile-page{padding:24px 16px}

    /* ─ Blog ─ */
    .blog-grid{grid-template-columns:1fr;gap:16px}

    /* ─ Footer ─ */
    .footer-inner{padding:24px 16px 20px}
    .footer-links{flex-direction:column;gap:10px}

    /* ─ Cookie banner ─ */
    .cookie-inner{flex-direction:column;text-align:center;gap:12px}
    .cookie-actions{width:100%;justify-content:center}

    /* ─ Adblock popup ─ */
    .ab-popup{padding:28px 20px;width:92%}
    .ab-popup-title{font-size:18px}
    .ab-popup-text{font-size:14px}

    /* ─ Modal ─ */
    .modal-overlay{padding:12px}
    .modal{padding:20px;max-height:90vh}

    /* ─ Toast ─ */
    .toast-container{right:8px;left:8px}
    .toast{font-size:13px;padding:10px 16px}

    /* ─ Legal ─ */
    .legal-page{padding:24px 16px}
    .legal-page h1{font-size:22px}

    /* ─ Price chart ─ */
    .price-chart{overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* ─ Pagination ─ */
    .pagination{flex-wrap:wrap}
    .page-btn{min-width:34px;height:34px;font-size:13px}

    /* ─ Admin ─ */
    .admin-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .admin-tabs::-webkit-scrollbar{display:none}
    .admin-tabs .btn{flex-shrink:0!important;white-space:nowrap}

    /* ─ Rewarded ad ─ */
    .rewarded-ad-container{min-height:200px}
}

/* ── Smartphone ≤ 480px ── */
@media(max-width:480px){
    :root{--nav-h:56px}

    /* ─ Navbar ─ */
    .nav-inner{padding:0 12px;gap:8px}
    .brand-text{font-size:16px}
    .brand-logo-svg{width:28px;height:28px}
    .nav-actions .btn-outline,
    .nav-actions .btn-primary{font-size:11px;padding:5px 10px}
    .btn-icon{width:32px;height:32px}
    .user-avatar{width:32px;height:32px;font-size:12px}

    /* ─ Hero ─ */
    .hero{padding:28px 12px 24px}
    .hero h1{font-size:22px;letter-spacing:-0.4px}
    .hero p{font-size:13px;margin-bottom:16px}

    /* ─ Stats ─ */
    .stats-bar{padding:0 12px;gap:8px;margin-top:-16px}
    .stat-card{padding:12px 8px}
    .stat-value{font-size:18px}
    .stat-label{font-size:10px}

    /* ─ Content ─ */
    .content{padding:16px 12px}

    /* ─ Cards ─ */
    .items-grid{grid-template-columns:1fr;gap:12px}
    .card-body{padding:12px 14px 14px}
    .card-title{font-size:13px;min-height:auto}
    .card-price{font-size:15px}

    /* ─ Detail ─ */
    .detail-page{padding:16px 12px}
    .detail-title{font-size:18px}
    .detail-price{font-size:22px}
    .detail-price .currency{font-size:14px}
    .detail-attrs{grid-template-columns:1fr}
    .detail-specs{grid-template-columns:1fr 1fr;padding:12px}
    .spec-row{padding:8px 10px}
    .spec-label{font-size:10px}
    .spec-value{font-size:13px}
    .detail-thumbs{gap:4px;padding:6px}
    .detail-thumbs img{width:48px;height:36px}

    /* ─ Auth ─ */
    .auth-page{padding:20px 12px;min-height:calc(100vh - var(--nav-h) - 60px)}
    .auth-card{padding:24px 16px;border-radius:var(--radius)}
    .auth-card h2{font-size:20px;margin-bottom:18px}
    .auth-form{gap:12px}
    .input-group label{font-size:12px}

    /* ─ Register 2-col fields ─ */
    .reg-name-row{grid-template-columns:1fr!important}
    .reg-phone-row{grid-template-columns:140px 1fr!important}

    /* ─ Profile ─ */
    .profile-page{padding:20px 12px}
    .profile-card{padding:20px 16px}
    .profile-card h2{font-size:17px}

    /* ─ Pricing ─ */
    .pricing-page{padding:24px 12px}
    .pricing-page h1{font-size:22px}
    .pricing-page .subtitle{font-size:14px;margin-bottom:28px}
    .pricing-card{padding:24px 18px}
    .price-tag{font-size:32px}
    .btn-lg{padding:10px 20px;font-size:14px}

    /* ─ Blog ─ */
    .blog-card-body{padding:14px}
    .blog-card-body h2{font-size:16px}
    .blog-article-header h1{font-size:22px}
    .blog-body{font-size:14px}

    /* ─ Phone code picker ─ */
    .phone-code-dropdown{min-width:180px}
    .phone-code-item{padding:10px 12px;font-size:15px}
    .phone-code-search{font-size:16px;padding:10px 12px}

    /* ─ Modal ─ */
    .modal-overlay{padding:8px}
    .modal{padding:18px 14px;border-radius:var(--radius)}

    /* ─ Cookie banner ─ */
    .cookie-banner{padding:12px 14px}
    .cookie-inner p{font-size:12px}
    .cookie-actions .btn{font-size:12px;padding:6px 14px}

    /* ─ Adblock popup ─ */
    .ab-popup{padding:24px 16px;width:94%;border-radius:12px}
    .ab-popup-icon{font-size:40px}
    .ab-popup-title{font-size:17px}
    .ab-popup-text{font-size:13px;margin-bottom:18px}
    .ab-popup-actions{flex-direction:column;gap:8px}
    .ab-popup-actions .btn{width:100%}

    /* ─ Footer ─ */
    .footer-inner{padding:20px 12px 16px}
    .footer-brand{font-size:15px}
    .footer-copy{font-size:11px}

    /* ─ Admin fixes ─ */
    .admin-tabs .btn{font-size:11px!important;padding:6px 12px!important}

    /* ─ Comparison table ─ */
    .comparison-table{font-size:11px}
    .comparison-table th,.comparison-table td{padding:6px 4px}

    /* ─ Pagination ─ */
    .page-btn{min-width:30px;height:30px;font-size:12px}

    /* ─ Rewarded ad ─ */
    .rewarded-header h3{font-size:17px}
    .rewarded-ad-container{min-height:180px}
}

/* ── Very small screens ≤ 360px ── */
@media(max-width:360px){
    .hero h1{font-size:19px}
    .brand-text{font-size:14px}
    .nav-actions .btn-outline,
    .nav-actions .btn-primary{display:none}
    .stat-value{font-size:16px}
    .detail-specs{grid-template-columns:1fr}
    .pricing-card{padding:20px 14px}
    .price-tag{font-size:28px}
    .auth-card{padding:20px 12px}
    .auth-card h2{font-size:18px}
}

/* ── Admin email label only on desktop ── */
.admin-email-label{display:inline!important}
@media(max-width:768px){
    .admin-email-label{display:none!important}
}

/* ═══════════════════ REWARDED AD MODAL ═══════════════════ */
.rewarded-ad-modal{
    text-align:center;padding:8px 0;
}
.rewarded-header{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-bottom:8px;
}
.rewarded-header h3{
    font-family:var(--font-display);font-size:20px;font-weight:700;
    color:var(--text);margin:0;
}
.rewarded-header svg{color:var(--accent)}
.rewarded-subtitle{
    color:var(--text-light);font-size:14px;margin-bottom:16px;
}
.rewarded-ad-container{
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius);
    min-height:260px;display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;overflow:hidden;
}
.rewarded-ad-container .adsbygoogle{width:100%}
.rewarded-progress{
    height:6px;background:var(--bg);border-radius:3px;
    overflow:hidden;margin-bottom:10px;
}
.rewarded-progress-bar{
    height:100%;width:0;
    background:linear-gradient(90deg,var(--accent),#FF4D6A);
    border-radius:3px;
    transition:width 1s linear;
}
.rewarded-timer{
    font-family:var(--font-display);font-size:14px;
    color:var(--text-light);margin-bottom:16px;
    font-variant-numeric:tabular-nums;
}
.rewarded-unlock-btn{
    transition:all .3s;
}
.rewarded-unlock-btn:disabled{
    opacity:.5;cursor:not-allowed;
    background:var(--text-light)!important;
}
.rewarded-unlock-btn.ready{
    opacity:1;
    animation:pulse-ready .6s ease-in-out 2;
}
@keyframes pulse-ready{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.04)}
}
.rewarded-skip{
    font-size:13px;color:var(--text-light);margin-top:14px;
}
.rewarded-skip a{
    color:var(--accent);cursor:pointer;font-weight:600;
    text-decoration:underline;
}

/* Watch Ad button on detail page */
.btn-watch-ad{
    display:inline-flex;align-items:center;gap:6px;
    animation:pulse-ready 2s ease-in-out infinite;
}

/* ═══════════════════ COMPARISON TABLE ═══════════════════ */
.pricing-comparison{max-width:600px;margin:0 auto}
.comparison-table{
    width:100%;border-collapse:collapse;
    font-size:14px;
}
.comparison-table th,.comparison-table td{
    padding:12px 16px;text-align:center;
    border-bottom:1px solid var(--border);
}
.comparison-table th:first-child,.comparison-table td:first-child{
    text-align:left;font-weight:500;
}
.comparison-table thead th{
    font-family:var(--font-display);font-weight:700;
    font-size:15px;color:var(--text);
    border-bottom:2px solid var(--accent);
}
.comparison-table tbody td:nth-child(3){
    color:var(--accent);font-weight:600;
}

/* ═══════════════════ COOKIE CONSENT BANNER ═══════════════════ */
.cookie-banner{
    position:fixed;bottom:0;left:0;right:0;z-index:9999;
    background:var(--bg-dark);color:var(--text-on-dark);
    border-top:1px solid rgba(255,255,255,0.1);
    padding:16px 24px;
    animation:slideUp .3s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookie-inner{
    max-width:var(--max-w);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;
}
.cookie-inner p{margin:0;font-size:14px;color:var(--text-muted-dark)}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}

/* ═══════════════════ ADBLOCK WALL ═══════════════════ */
#eah-ab-wall{
    position:fixed!important;top:0!important;left:0!important;
    width:100vw!important;height:100vh!important;
    z-index:2147483647!important;
    background:rgba(0,0,0,.55)!important;
    backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    opacity:1!important;visibility:visible!important;
    pointer-events:auto!important;transform:none!important;
    clip-path:none!important;filter:none!important;
    animation:abFadeIn .4s ease!important;
}
@keyframes abFadeIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(12px)}}
#eah-ab-wall *{pointer-events:auto!important;visibility:visible!important;opacity:1!important}

.ab-popup{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:16px;padding:40px 32px;max-width:460px;width:90%;
    text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.4);
    animation:abSlideUp .4s ease;
}
@keyframes abSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.ab-popup-icon{font-size:52px;margin-bottom:16px}
.ab-popup-title{
    font-size:22px;font-weight:700;margin:0 0 12px;
    color:var(--text-primary);
}
.ab-popup-text{
    font-size:15px;line-height:1.6;color:var(--text-secondary);
    margin:0 0 24px;
}
.ab-popup-actions{
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.ab-popup-actions .btn{padding:12px 24px;font-size:15px;font-weight:600}
.ab-popup-actions .btn-outline{
    border:2px solid var(--accent)!important;color:var(--accent)!important;background:transparent!important;
}
.ab-popup-actions .btn-outline:hover{
    background:var(--accent)!important;color:#fff!important;
}
.ab-popup-hint{
    font-size:12px;color:var(--text-secondary);margin:20px 0 0;
    opacity:.7;
}
.adblock-notice{
    background:var(--accent-soft);border:1px solid var(--accent);
    border-radius:var(--radius);padding:24px;text-align:center;
    margin:8px 0;
}
.adblock-notice strong{
    display:block;margin-bottom:8px;color:var(--accent);font-size:15px;
}
.adblock-notice p{
    color:var(--text-secondary);font-size:13px;margin:0 0 12px;
}

/* ── Blog ── */
.blog-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;margin-top:24px;
}
.blog-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;
}
.blog-card:hover{
    transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.blog-card-image{
    width:100%;height:200px;background-size:cover;background-position:center;background-color:var(--bg-secondary);
}
.blog-card-placeholder{
    display:flex;align-items:center;justify-content:center;font-size:48px;
}
.blog-card-body{
    padding:20px;
}
.blog-card-body h2{
    margin:8px 0 12px;font-size:18px;line-height:1.4;color:var(--text-primary);
}
.blog-card-body p{
    color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-tags{
    display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;
}
.blog-card-tags .tag{
    background:var(--accent-soft);color:var(--accent);font-size:11px;padding:2px 8px;border-radius:12px;
    font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.blog-card-meta{
    display:flex;justify-content:space-between;margin-top:16px;font-size:12px;color:var(--text-muted);
}
.blog-article{
    max-width:800px;margin:0 auto;
}
.blog-back{
    display:inline-block;margin-bottom:16px;color:var(--accent);cursor:pointer;font-size:14px;
}
.blog-back:hover{text-decoration:underline;}
.blog-hero{
    width:100%;max-height:400px;object-fit:cover;border-radius:var(--radius);margin-bottom:24px;
}
.blog-article-header{
    margin-bottom:32px;
}
.blog-article-header h1{
    font-size:32px;line-height:1.3;margin:12px 0 16px;
}
.blog-body{
    font-size:16px;line-height:1.8;color:var(--text-primary);
}
.blog-body h2{
    margin:32px 0 16px;font-size:22px;color:var(--text-primary);
}
.blog-body p{
    margin:0 0 16px;
}
.blog-body ul,.blog-body ol{
    margin:0 0 16px;padding-left:24px;
}
.blog-body li{
    margin-bottom:8px;
}
.blog-body table{
    width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:14px;
}
.blog-body th,.blog-body td{
    padding:10px 12px;border:1px solid var(--border);text-align:left;
}
.blog-body th{
    background:var(--bg-secondary);font-weight:600;
}
.blog-body strong{
    color:var(--text-primary);
}
.blog-cta{
    margin-top:48px;padding:32px;background:var(--accent-soft);border-radius:var(--radius);
    text-align:center;border:1px solid var(--accent);
}
.blog-cta h3{
    margin:0 0 8px;font-size:20px;color:var(--accent);
}
.blog-cta p{
    margin:0 0 16px;color:var(--text-secondary);
}
@media(max-width:640px){
    .blog-grid{grid-template-columns:1fr;}
    .blog-article-header h1{font-size:24px;}
    .blog-body{font-size:15px;}
}