/* ===== styles.css block 1 ===== */
        /* ===== আপনার পুরনো CSS ===== */
        /* আমি পুরো CSS এখানে আবার দিচ্ছি না, কারণ আপনার ফাইলে ইতিমধ্যে আছে। 
           তবে যেহেতু আমি পুরো ফাইল দিচ্ছি, তাই আমি CSS অংশটি বাদ দিচ্ছি না। 
           বাস্তবে আপনাকে পুরো CSS কপি করতে হবে। কিন্তু এখানে সংক্ষেপে রেখেছি। 
           চলুন পুরোটা দিন... */
        :root {
            /* PhoneHub design system tokens */
            --bg-primary: #f6f8fc;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-input: #f8fafc;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #64748b;
            --border-color: #e2e8f0;
            --shadow: 0 4px 18px rgba(15,23,42,0.06);
            --shadow-hover: 0 12px 28px rgba(15,23,42,0.12);
            --radius: 14px;
            --radius-sm: 10px;
            --radius-xs: 8px;
            --radius-pill: 999px;
            --accent: #4f46e5;
            --accent-2: #8b5cf6;
            --success: #16a34a;
            --danger: #dc2626;
            --warning: #d97706;
            --focus-ring: rgba(79,70,229,0.18);
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --font: 'Segoe UI', system-ui, sans-serif;
            --transition: 0.2s ease;
            --nav-width: 240px;
            --header-height: 64px;
        }
        [data-theme="dark"] {
            --bg-primary: #0b1220;
            --bg-secondary: #111827;
            --bg-card: #172033;
            --bg-input: #1d2a40;
            --text-primary: #f8fafc;
            --text-secondary: #cbd5e1;
            --text-muted: #94a3b8;
            --border-color: #2b3a52;
            --shadow: 0 4px 18px rgba(0,0,0,0.24);
            --shadow-hover: 0 12px 30px rgba(0,0,0,0.38);
            --focus-ring: rgba(129,140,248,0.24);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior: smooth; font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
        /* ফোনে (বিশেষত Android WebView/Chrome) নেরো কার্ডের ভেতরে টেক্সট
           নিজে থেকে বড় হয়ে গিয়ে গ্রিড/ফ্লেক্স কার্ড বাইরের দিকে উপচে পড়ছিল
           (overflow) কারণ text-size-adjust সেট করা ছিল না — এখন ফিক্স করা হলো। */
        body { font-family:var(--font); background:var(--bg-primary); color:var(--text-primary); transition:background var(--transition), color var(--transition); min-height:100vh; display:flex; overflow-x:hidden; }
        ::-webkit-scrollbar { width:6px; height:6px; }
        ::-webkit-scrollbar-track { background:var(--bg-primary); }
        ::-webkit-scrollbar-thumb { background:var(--accent); border-radius:10px; }
        .sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--nav-width); background:var(--bg-secondary); border-right:1px solid var(--border-color); padding:20px 16px; display:flex; flex-direction:column; z-index:1000; transition:transform var(--transition), background var(--transition); overflow-y:auto; }
        .sidebar-brand { display:flex; align-items:center; gap:12px; padding:4px 8px 20px 8px; font-size:20px; font-weight:700; background:linear-gradient(135deg, #6c5ce7, #00cec9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        .sidebar-brand span { font-size:28px; -webkit-text-fill-color:initial; }
        .sidebar-nav { flex:1; display:flex; flex-direction:column; gap:4px; }
        .sidebar-nav .nav-item, .sidebar-footer .nav-item { display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition); color:var(--text-secondary); font-weight:500; font-size:14px; border:none; background:transparent; width:100%; text-align:left; }
        .sidebar-nav .nav-item:hover, .sidebar-footer .nav-item:hover { background:var(--bg-input); color:var(--text-primary); }
        .sidebar-nav .nav-item.active, .sidebar-footer .nav-item.active { background:var(--accent); color:#fff; box-shadow:0 4px 16px rgba(108,92,231,0.3); }
        .sidebar-nav .nav-item .icon, .sidebar-footer .nav-item .icon { font-size:20px; width:28px; text-align:center; flex-shrink:0; }
        .sidebar-nav .nav-item .badge { margin-left:auto; background:var(--danger); color:#fff; font-size:11px; padding:1px 8px; border-radius:20px; }
        .sidebar-footer { padding-top:16px; border-top:1px solid var(--border-color); margin-top:8px; display:flex; flex-direction:column; gap:6px; }
        .sidebar-footer .nav-item .dev-badge { background:var(--danger); color:#fff; font-size:9px; padding:1px 10px; border-radius:20px; margin-left:auto; }
        .main { margin-left:var(--nav-width); flex:1; min-width:0; min-height:100vh; padding:0; transition:margin var(--transition); overflow-x:hidden; }
        .header { height:var(--header-height); padding:0 32px; display:flex; align-items:center; justify-content:space-between; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); position:sticky; top:0; z-index:100; transition:background var(--transition); gap:16px; }
        .header-left .menu-toggle { display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-primary); }
        .header-title { font-size:18px; font-weight:600; }
        .header-right { display:flex; align-items:center; gap:12px; }
        .header-right .theme-toggle, .header-right .notif-btn, .header-right .user-btn { background:var(--bg-input); border:none; border-radius:50%; width:38px; height:38px; font-size:18px; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; color:var(--text-primary); }
        .header-right .user-btn { background:var(--accent); color:#fff; font-weight:600; font-size:14px; }
        .header-right .theme-toggle:hover, .header-right .notif-btn:hover { transform:scale(1.05); }
        .header-right .admin-badge { background:var(--accent); color:#fff; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; transition:all var(--transition); }
        .header-right .admin-badge:hover { opacity:0.85; }
        .header-right .notif-btn .notif-dot { position:absolute; top:4px; right:4px; width:10px; height:10px; background:var(--danger); border-radius:50%; border:2px solid var(--bg-secondary); }
        .page-content { padding:28px 32px 60px; max-width:1400px; margin:0 auto; }
        .page { display:none; animation:fadeUp 0.35s ease; }
        .page.active { display:block; }
        @keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
        .card { background:var(--bg-card); border-radius:var(--radius); padding:24px; border:1px solid var(--border-color); box-shadow:var(--shadow); transition:all var(--transition); min-width:0; max-width:100%; }
        .card:hover { box-shadow:var(--shadow-hover); }
        .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
        .card-title { font-size:18px; font-weight:700; }
        .card-subtitle { font-size:14px; color:var(--text-muted); }
        .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
        .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
        .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
        /* গ্রিড আইটেমগুলোর ডিফল্ট min-width:auto থাকার কারণে ভেতরের টেক্সট/আইকন
           কলামের চেয়ে চওড়া হয়ে গেলে পুরো গ্রিড ডান দিকে উপচে পড়ে (overflow) —
           min-width:0 দিয়ে সেটা আটকানো হলো, সব জায়গাতেই কাজ করবে। */
        .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width:0; }
        .stat-card { background:var(--bg-card); border-radius:var(--radius); padding:20px 24px; border:1px solid var(--border-color); display:flex; align-items:center; gap:16px; transition:all var(--transition); min-width:0; overflow:hidden; }
        .stat-card .stat-icon { flex-shrink:0; }
        .stat-card .stat-info { min-width:0; }
        .stat-info h3, .stat-info p { overflow-wrap:anywhere; }
        .stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
        .stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
        .stat-icon.purple { background:rgba(108,92,231,0.15); }
        .stat-icon.green { background:rgba(0,184,148,0.15); }
        .stat-icon.orange { background:rgba(253,203,110,0.2); }
        .stat-icon.red { background:rgba(225,112,85,0.15); }
        .stat-info h3 { font-size:24px; font-weight:700; line-height:1.2; }
        .stat-info p { font-size:13px; color:var(--text-muted); }
        /* Dashboard-e 4 tar bodole 2 ta stat card (Total Reviews + Popular Phones) —
           agekar plain .stat-card er upore ekta "featured" look, boro icon,
           tinted background ar left accent bar. Admin/tracker-er .stat-card
           gulo ei class chhara ache, tai ora agekar moto-i thakbe. */
        .dash-stat-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
        .stat-card.stat-card--featured { padding:22px 24px; border-width:0; border-left:4px solid transparent; box-shadow:0 1px 2px rgba(16,24,40,0.04); }
        .stat-card.stat-card--featured:hover { transform:translateY(-3px); }
        .stat-card.stat-card--featured .stat-icon { width:52px; height:52px; border-radius:14px; font-size:26px; }
        .stat-card.stat-card--featured .stat-info h3 { font-size:28px; }
        .stat-card.stat-card--green { background:linear-gradient(135deg, rgba(0,184,148,0.12), rgba(0,184,148,0.03)); border-left-color:#00b894; }
        .stat-card.stat-card--green .stat-icon { background:rgba(0,184,148,0.18); }
        .stat-card.stat-card--orange { background:linear-gradient(135deg, rgba(253,203,110,0.22), rgba(253,203,110,0.04)); border-left-color:#e08e0b; }
        .stat-card.stat-card--orange .stat-icon { background:rgba(253,203,110,0.28); }
        [data-theme="dark"] .stat-card.stat-card--green { background:linear-gradient(135deg, rgba(0,184,148,0.16), rgba(0,184,148,0.02)); }
        [data-theme="dark"] .stat-card.stat-card--orange { background:linear-gradient(135deg, rgba(253,203,110,0.18), rgba(253,203,110,0.02)); }
        @media (max-width:480px) {
            .dash-stat-2 { gap:12px; }
            .stat-card.stat-card--featured { padding:16px; gap:12px; }
            .stat-card.stat-card--featured .stat-icon { width:42px; height:42px; font-size:20px; }
            .stat-card.stat-card--featured .stat-info h3 { font-size:22px; }
        }
        .phone-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px; }
        .phone-card { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border-color); padding:16px; transition:all var(--transition); cursor:pointer; position:relative; }
        .phone-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--accent); }
        .phone-card .fav-btn { position:absolute; top:12px; right:12px; background:var(--bg-input); border:none; border-radius:50%; width:32px; height:32px; font-size:16px; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; color:var(--text-muted); z-index:2; }
        .phone-card .fav-btn.active { color:#e17055; background:rgba(225,112,85,0.15); }
        .phone-card .phone-img-wrap { width:100%; aspect-ratio:1/1; border-radius:var(--radius-sm); background:var(--bg-input); display:flex; align-items:center; justify-content:center; margin-bottom:12px; overflow:hidden; position:relative; }
        .phone-card .phone-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto !important;  /* ← নতুন */
    -webkit-backface-visibility: hidden; /* ← নতুন */
        }
        .phone-card .phone-img-wrap .emoji-fallback { font-size:56px; }
        .phone-card .phone-name { font-weight:600; font-size:15px; margin-bottom:2px; }
        .phone-card .phone-brand { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
        .phone-card .phone-price { font-weight:700; font-size:17px; margin-top:6px; color:var(--accent); }
        .phone-card .phone-specs { display:flex; gap:12px; margin-top:8px; font-size:12px; color:var(--text-secondary); flex-wrap:wrap; }
        .phone-card .phone-specs span { background:var(--bg-input); padding:2px 10px; border-radius:20px; }
        .phone-card .score-badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 10px; border-radius:20px; margin-top:6px; }
        .score-badge.gaming { background:rgba(108,92,231,0.15); color:var(--accent); }
        .score-badge.camera { background:rgba(0,184,148,0.15); color:var(--success); }
        .score-badge.battery { background:rgba(253,203,110,0.2); color:#b7950b; }
        .phone-card .rating-badge { background:rgba(253,203,110,0.2); color:#b7950b; padding:2px 10px; border-radius:20px; font-weight:600; font-size:12px; }
        .filter-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px 20px; background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border-color); margin-bottom:24px; }
        .filter-bar input, .filter-bar select { background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-xs); padding:8px 14px; font-size:13px; color:var(--text-primary); transition:all var(--transition); min-width:120px; font-family:var(--font); }
        .filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,92,231,0.15); }
        .btn { background:linear-gradient(135deg, #6c5ce7, #00cec9); border:none; color:#fff; padding:10px 28px; border-radius:var(--radius-xs); font-weight:600; font-size:14px; cursor:pointer; transition:all var(--transition); font-family:var(--font); display:inline-flex; align-items:center; gap:8px; }
        .btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(108,92,231,0.35); }
        .btn-outline { background:transparent; border:2px solid var(--accent); color:var(--accent); }
        .btn-outline:hover { background:var(--accent); color:#fff; }
        .btn-sm { padding:6px 16px; font-size:12px; }
        .btn-danger { background:var(--danger); }
        .btn-success { background:var(--success); }
        .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:2000; display:none; align-items:center; justify-content:center; padding:20px; }
        .modal-overlay.open { display:flex; }
        .modal { background:var(--bg-card); border-radius:var(--radius); max-width:600px; width:100%; max-height:90vh; overflow-y:auto; padding:32px; box-shadow:0 24px 64px rgba(0,0,0,0.4); }
        .modal .modal-close { float:right; background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-muted); transition:all var(--transition); }
        .modal .modal-close:hover { color:var(--danger); transform:rotate(90deg); }
        .toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:380px; }
        .toast { background:var(--bg-card); border-radius:var(--radius-sm); padding:14px 20px; border:1px solid var(--border-color); box-shadow:0 12px 48px rgba(0,0,0,0.15); display:flex; align-items:center; gap:12px; animation:slideIn 0.35s ease; font-size:14px; }
        .toast .toast-icon { font-size:20px; }
        .toast.success .toast-icon { color:var(--success); }
        .toast.error .toast-icon { color:var(--danger); }
        .toast.info .toast-icon { color:#74b9ff; }
        @keyframes slideIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
        .tabs { display:flex; gap:4px; background:var(--bg-input); border-radius:var(--radius-sm); padding:4px; margin-bottom:20px; flex-wrap:wrap; }
        .tabs .tab { padding:8px 18px; border-radius:var(--radius-xs); border:none; background:transparent; color:var(--text-secondary); font-weight:500; font-size:13px; cursor:pointer; transition:all var(--transition); font-family:var(--font); }
        .tabs .tab.active { background:var(--bg-card); color:var(--text-primary); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
        .tab-content { display:none; animation:fadeUp 0.3s ease; }
        .tab-content.active { display:block; }
        .image-preview-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); gap:8px; margin-top:8px; }
        .image-preview-grid .preview-item { position:relative; aspect-ratio:1/1; border-radius:var(--radius-xs); overflow:hidden; border:1px solid var(--border-color); }
        .image-preview-grid .preview-item img { width:100%; height:100%; object-fit:cover; }
        .image-preview-grid .preview-item .main-badge { position:absolute; bottom:2px; left:2px; background:var(--accent); color:#fff; font-size:9px; padding:1px 6px; border-radius:10px; font-weight:600; }
        .image-preview-grid .preview-item.img-broken { border-color:var(--danger,#e11d48); }
        .image-preview-grid .preview-item.img-broken::after { content:"⚠️ broken link"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:10px; font-weight:600; color:#fff; background:rgba(225,29,72,0.85); padding:4px; }
        .dev-badge { display:inline-block; background:var(--danger); color:#fff; font-size:11px; font-weight:700; padding:2px 14px; border-radius:20px; letter-spacing:0.5px; text-transform:uppercase; margin-left:8px; }
        .empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
        .empty-state .icon { font-size:48px; margin-bottom:12px; }
        .empty-state h3 { color:var(--text-primary); margin-bottom:4px; }
        .compare-selector { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
        .compare-selector select { background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-xs); padding:8px 14px; font-size:13px; color:var(--text-primary); font-family:var(--font); min-width:160px; }
        .compare-table { width:100%; border-collapse:collapse; font-size:14px; }
        .compare-table th, .compare-table td { padding:12px 16px; border-bottom:1px solid var(--border-color); text-align:center; vertical-align:middle; }
        .compare-table th { font-weight:600; color:var(--text-secondary); font-size:12px; text-transform:uppercase; background:var(--bg-input); }
        .compare-table td:first-child { font-weight:600; text-align:left; color:var(--text-secondary); }
        .compare-table .highlight { background:rgba(108,92,231,0.08); border-radius:4px; padding:2px 8px; font-weight:600; color:var(--accent); }
        .compare-table .remove-btn { background:none; border:none; color:var(--danger); cursor:pointer; font-size:16px; }
        .review-item { padding:12px 0; border-bottom:1px solid var(--border-color); }
        .review-item:last-child { border-bottom:none; }
        .review-item .review-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
        .review-item .review-user { font-weight:600; display:flex; align-items:center; gap:8px; }
        .review-item .review-user .rating-stars { color:#f9a825; }
        .review-item .review-text { margin-top:4px; font-size:14px; color:var(--text-secondary); }
        .review-item .pros-cons { display:flex; gap:16px; font-size:13px; margin-top:4px; }
        .review-item .pros-cons .pros { color:var(--success); }
        .review-item .pros-cons .cons { color:var(--danger); }
        .review-item .delete-review { background:none; border:none; color:var(--danger); cursor:pointer; font-size:16px; }
        .admin-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; }
        .admin-form .form-group { display:flex; flex-direction:column; gap:4px; }
        .admin-form .form-group label { font-size:13px; font-weight:500; color:var(--text-secondary); }
        .admin-form .form-group input, .admin-form .form-group select, .admin-form .form-group textarea { background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-xs); padding:10px 14px; font-size:14px; color:var(--text-primary); font-family:var(--font); }
        .admin-form .form-group input:focus, .admin-form .form-group select:focus, .admin-form .form-group textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,92,231,0.15); }
        .admin-form .form-group.full { grid-column:1 / -1; }
        .admin-log-item { padding:6px 0; border-bottom:1px solid var(--border-color); font-size:13px; color:var(--text-secondary); display:flex; justify-content:space-between; }
        .admin-log-item .time { color:var(--text-muted); font-size:11px; }
        .bulk-import-area { border:2px dashed var(--border-color); padding:20px; border-radius:var(--radius-sm); text-align:center; cursor:pointer; transition:all var(--transition); }
        .bulk-import-area:hover { border-color:var(--accent); background:var(--bg-input); }
        .color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
        .color-swatches .swatch { width:30px; height:30px; border-radius:50%; border:2px solid var(--border-color); display:inline-block; }
        .buy-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
        .buy-links .buy-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 20px; border-radius:var(--radius-xs); font-weight:600; font-size:13px; text-decoration:none; transition:all var(--transition); border:none; cursor:pointer; font-family:var(--font); }
        .buy-links .buy-btn.flipkart { background:#2874f0; color:#fff; }
        .buy-links .buy-btn.flipkart:hover { background:#1a5fc7; transform:translateY(-2px); }
        .buy-links .buy-btn.amazon { background:#ff9900; color:#fff; }
        .buy-links .buy-btn.amazon:hover { background:#e68a00; transform:translateY(-2px); }
        .buy-links .buy-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }
        .gallery-carousel { display:flex; gap:8px; overflow-x:auto; padding:8px 0; scroll-snap-type:x mandatory; }
        .gallery-carousel .gallery-item { flex:0 0 auto; width:120px; aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; border:2px solid var(--border-color); scroll-snap-align:start; cursor:pointer; transition:all var(--transition); }
        .gallery-carousel .gallery-item:hover { border-color:var(--accent); transform:scale(1.02); }
        .gallery-carousel .gallery-item img { width:100%; height:100%; object-fit:cover; }
        .notif-dropdown { position:absolute; top:50px; right:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); box-shadow:0 12px 48px rgba(0,0,0,0.15); width:320px; max-height:400px; overflow-y:auto; display:none; z-index:150; padding:8px 0; }
        .notif-dropdown.open { display:block; }
        .notif-dropdown .notif-item { padding:10px 16px; border-bottom:1px solid var(--border-color); font-size:13px; cursor:pointer; transition:background var(--transition); }
        .notif-dropdown .notif-item:hover { background:var(--bg-input); }
        .notif-dropdown .notif-item .notif-time { font-size:11px; color:var(--text-muted); }
        
        .profile-avatar { width:80px; height:80px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; }
        .profile-stats { display:flex; gap:24px; margin:12px 0; }
        .profile-stats div { text-align:center; }
        .profile-stats div .num { font-size:20px; font-weight:700; }
        .profile-stats div .label { font-size:12px; color:var(--text-muted); }
        .emi-result { margin-top:8px; font-size:16px; font-weight:600; color:var(--accent); }
        .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:999; }
        .sidebar-overlay.open { display:block; }
        @media (max-width:768px) { .sidebar { transform:translateX(-100%); width:280px; border-right:none; } .sidebar.open { transform:translateX(0); } .main { margin-left:0; } .header-left .menu-toggle { display:block; } .header { padding:0 16px; } .page-content { padding:16px; } .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } .filter-bar { flex-direction:column; align-items:stretch; } .admin-form { grid-template-columns:1fr; } .phone-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); } }
        @media (max-width:480px) { .phone-grid { grid-template-columns:1fr 1fr; } }
        .flex { display:flex; }
        .flex-col { flex-direction:column; }
        .items-center { align-items:center; }
        .justify-between { justify-content:space-between; }
        .gap-8 { gap:8px; }
        .gap-12 { gap:12px; }
        .gap-16 { gap:16px; }
        .mt-8 { margin-top:8px; }
        .mt-16 { margin-top:16px; }
        .mt-24 { margin-top:24px; }
        .mb-16 { margin-bottom:16px; }
        .w-full { width:100%; }
        .text-muted { color:var(--text-muted); }
        .text-center { text-align:center; }
        .chart-wrap { height:200px; margin-top:8px; }
        .password-input-group { display:flex; flex-direction:column; gap:12px; margin:20px 0; }
        .password-input-group input { background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-xs); padding:12px 16px; font-size:16px; color:var(--text-primary); font-family:var(--font); width:100%; letter-spacing:2px; }
        .password-input-group .step-label { font-weight:600; font-size:16px; }
        .password-input-group .error-msg { color:var(--danger); font-size:13px; min-height:20px; }
        .cookie-banner { position:fixed; bottom:0; left:0; right:0; background:var(--bg-card); border-top:1px solid var(--border-color); padding:16px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; z-index:999; box-shadow:0 -4px 20px rgba(0,0,0,0.1); }
        .cookie-banner p { font-size:14px; color:var(--text-secondary); }
        .cookie-banner .btn { flex-shrink:0; }

         /* ===== Refined product UI — CSS-only visual refresh ===== */
         :root {
             --bg-primary:#f5f7fa;
             --bg-secondary:#ffffff;
             --bg-card:#ffffff;
             --bg-input:#f8fafc;
             --text-primary:#101828;
             --text-secondary:#475467;
             --text-muted:#667085;
             --border-color:#e4e7ec;
             --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.04);
             --shadow-hover:0 12px 30px rgba(16,24,40,.10);
             --radius:12px;
             --radius-sm:9px;
             --radius-xs:7px;
             --accent:#155eef;
             --success:#039855;
             --danger:#d92d20;
             --warning:#dc6803;
             --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
             --transition:.2s ease;
             --nav-width:248px;
             --header-height:68px;
         }
         [data-theme="dark"] {
             --bg-primary:#0b1220;
             --bg-secondary:#101a2b;
             --bg-card:#111d30;
             --bg-input:#16243a;
             --text-primary:#f2f4f7;
             --text-secondary:#b8c4d4;
             --text-muted:#8290a5;
             --border-color:#24344d;
             --shadow:0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.12);
             --shadow-hover:0 16px 36px rgba(0,0,0,.28);
         }
         html { font-size:15px; }
         body {
             background:var(--bg-primary);
             color:var(--text-primary);
             font-family:var(--font);
             letter-spacing:-.01em;
         }
         ::selection { background:rgba(21,94,239,.18); }
         ::-webkit-scrollbar-thumb { background:#b8c2d1; border-radius:4px; }
         [data-theme="dark"] ::-webkit-scrollbar-thumb { background:#40516b; }

         .sidebar {
             width:var(--nav-width);
             padding:24px 14px 18px;
             background:#0d1726;
             border-right:1px solid #1e2c40;
             box-shadow:6px 0 24px rgba(16,24,40,.06);
         }
         .sidebar-brand {
             padding:2px 12px 28px;
             color:#f8fafc;
             background:none;
             -webkit-text-fill-color:#f8fafc;
             font-size:19px;
             font-weight:700;
             letter-spacing:-.03em;
         }
         .sidebar-brand span {
             font-size:22px;
             filter:grayscale(1);
             opacity:.9;
         }
         .sidebar-nav { gap:3px; }
         .sidebar-nav .nav-item,
         .sidebar-footer .nav-item {
             min-height:42px;
             padding:10px 12px;
             border-radius:7px;
             color:#9aa9bd;
             font-size:13px;
             font-weight:550;
         }
         .sidebar-nav .nav-item:hover,
         .sidebar-footer .nav-item:hover {
             background:#17263a;
             color:#f8fafc;
         }
         .sidebar-nav .nav-item.active,
         .sidebar-footer .nav-item.active {
             background:#155eef;
             color:#fff;
             box-shadow:none;
         }
         .sidebar-nav .nav-item .icon,
         .sidebar-footer .nav-item .icon {
             width:24px;
             font-size:16px;
             filter:grayscale(1);
             opacity:.82;
         }
         .sidebar-nav .nav-item.active .icon { opacity:1; }
         .sidebar-footer {
             padding-top:18px;
             border-top:1px solid #25364b;
         }
         .sidebar-nav .nav-item .badge,
         .sidebar-footer .nav-item .dev-badge {
             border-radius:5px;
             font-size:10px;
             font-weight:700;
         }
         .sidebar-nav .nav-item .badge { background:#c4322b; padding:2px 7px; }
         .sidebar-footer .nav-item .dev-badge { background:#b42318; padding:3px 7px; }

         .main { background:var(--bg-primary); }
         .header {
             height:var(--header-height);
             padding:0 38px;
             background:var(--bg-secondary);
             border-bottom:1px solid var(--border-color);
         }
         .header-title { font-size:16px; font-weight:650; letter-spacing:-.02em; }
         .header-right { gap:10px; }
         .header-right .theme-toggle,
         .header-right .notif-btn,
         .header-right .user-btn {
             width:36px;
             height:36px;
             background:var(--bg-input);
             border:1px solid var(--border-color);
             border-radius:8px;
             font-size:16px;
         }
         .header-right .theme-toggle:hover,
         .header-right .notif-btn:hover {
             transform:none;
             border-color:#98a2b3;
             background:var(--bg-card);
         }
         .header-right .user-btn {
             background:#155eef;
             border-color:#155eef;
             font-size:13px;
         }
         .header-right .admin-badge {
             background:transparent;
             color:var(--accent);
             border:1px solid #b2c8ff;
             border-radius:6px;
             padding:7px 11px;
             font-size:11px;
         }
         .page-content { padding:32px 38px 64px; max-width:1500px; }
         .page { animation:fadeUp .22s ease; }
         @keyframes fadeUp {
             from { opacity:0; transform:translateY(8px); }
             to { opacity:1; transform:translateY(0); }
         }
         .card,
         .stat-card,
         .filter-bar,
         .phone-card {
             border:1px solid var(--border-color);
             box-shadow:var(--shadow);
         }
         .card {
             padding:22px;
             border-radius:var(--radius);
         }
         .card:hover { box-shadow:var(--shadow); }
         .card-header { margin-bottom:20px; }
         .card-title { font-size:16px; font-weight:700; letter-spacing:-.02em; }
         .card-subtitle { font-size:12px; }
         .grid-2, .grid-3 { gap:18px; }
         .grid-4 { gap:14px; }
         .stat-card {
             min-height:102px;
             padding:18px;
             gap:14px;
             border-radius:var(--radius);
         }
         .stat-card:hover { transform:none; box-shadow:var(--shadow); }
         .stat-icon {
             width:42px;
             height:42px;
             border-radius:9px;
             font-size:19px;
             filter:grayscale(1);
         }
         .stat-icon.purple { background:#eef4ff; color:#155eef; }
         .stat-icon.green { background:#ecfdf3; color:#039855; }
         .stat-icon.orange { background:#fff7ed; color:#dc6803; }
         .stat-icon.red { background:#fef3f2; color:#d92d20; }
         [data-theme="dark"] .stat-icon.purple { background:#182b51; }
         [data-theme="dark"] .stat-icon.green { background:#123a2b; }
         [data-theme="dark"] .stat-icon.orange { background:#402b16; }
         [data-theme="dark"] .stat-icon.red { background:#431f23; }
         .stat-info h3 { font-size:23px; letter-spacing:-.04em; }
         .stat-info p { font-size:12px; }

         .filter-bar {
             padding:12px;
             gap:8px;
             background:var(--bg-card);
             border-radius:var(--radius);
             margin-bottom:20px;
         }
         .filter-bar input,
         .filter-bar select,
         .compare-selector select,
         .admin-form .form-group input,
         .admin-form .form-group select,
         .admin-form .form-group textarea,
         .password-input-group input {
             min-height:38px;
             background:var(--bg-input);
             border:1px solid var(--border-color);
             border-radius:7px;
             color:var(--text-primary);
             font-family:var(--font);
             font-size:13px;
         }
         .filter-bar input { min-width:190px; }
         .filter-bar input:focus,
         .filter-bar select:focus,
         .admin-form .form-group input:focus,
         .admin-form .form-group select:focus,
         .admin-form .form-group textarea:focus {
             outline:none;
             border-color:#84adff;
             box-shadow:0 0 0 3px rgba(21,94,239,.12);
         }
         .btn {
             min-height:38px;
             padding:9px 16px;
             border-radius:7px;
             background:#155eef;
             box-shadow:none;
             font-size:13px;
             font-weight:650;
         }
         .btn:hover {
             transform:none;
             background:#004eeb;
             box-shadow:0 4px 12px rgba(21,94,239,.20);
         }
         .btn-outline {
             background:transparent;
             border:1px solid #98a2b3;
             color:var(--text-secondary);
         }
         .btn-outline:hover { background:var(--bg-input); color:var(--text-primary); }
         .btn-danger { background:#d92d20; }
         .btn-success { background:#039855; }

         .phone-grid { gap:16px; }
         .phone-card {
             padding:12px;
             border-radius:var(--radius);
             background:var(--bg-card);
         }
         .phone-card:hover {
             transform:translateY(-2px);
             box-shadow:var(--shadow-hover);
             border-color:#b2c8ff;
         }
         .phone-card .fav-btn {
             top:20px;
             right:20px;
             width:30px;
             height:30px;
             border:1px solid var(--border-color);
             background:rgba(255,255,255,.92);
             font-size:14px;
             filter:grayscale(1);
         }
         .phone-card .phone-img-wrap {
             border-radius:8px;
             background:var(--bg-input);
             margin-bottom:14px;
         }
         .phone-card .phone-img-wrap .emoji-fallback {
             font-size:48px;
             filter:grayscale(1);
             opacity:.7;
         }
         .phone-card .phone-name { font-size:14px; font-weight:700; }
         .phone-card .phone-brand { font-size:10px; letter-spacing:.08em; }
         .phone-card .phone-price { font-size:16px; color:var(--accent); }
         .phone-card .phone-specs { gap:5px; font-size:11px; }
         .phone-card .phone-specs span,
         .phone-card .score-badge,
         .phone-card .rating-badge,
         .dev-badge {
             border-radius:5px;
         }
         .phone-card .phone-specs span { padding:3px 7px; }
         .phone-card .rating-badge,
         .phone-card .score-badge { padding:3px 7px; font-size:10px; }

         .tabs {
             gap:2px;
             background:var(--bg-input);
             border:1px solid var(--border-color);
             border-radius:8px;
             padding:3px;
         }
         .tabs .tab {
             padding:8px 13px;
             border-radius:6px;
             font-size:12px;
         }
         .tabs .tab.active {
             color:var(--accent);
             box-shadow:0 1px 3px rgba(16,24,40,.10);
         }
         .compare-table th {
             background:var(--bg-input);
             letter-spacing:.05em;
         }
         .compare-table th, .compare-table td { padding:11px 14px; }
         .modal-overlay { background:rgba(16,24,40,.58); backdrop-filter:blur(8px); }
         .modal {
             padding:26px;
             border:1px solid var(--border-color);
             border-radius:14px;
             box-shadow:0 24px 64px rgba(16,24,40,.20);
         }
         .modal .modal-close { font-size:20px; }
         .notif-dropdown {
             border-radius:9px;
             box-shadow:0 14px 32px rgba(16,24,40,.14);
         }
         .toast { border-radius:8px; box-shadow:0 10px 28px rgba(16,24,40,.12); }
         .voice-btn { filter:grayscale(1); }
         .empty-state .icon { font-size:40px; filter:grayscale(1); opacity:.65; }
         .admin-form { gap:14px; }
         .admin-form .form-group { gap:6px; }
         .admin-form .form-group label { font-size:12px; font-weight:650; }
         .bulk-import-area { border-radius:8px; }
         .cookie-banner { padding:14px 24px; }

         @media (max-width:768px) {
             .header { padding:0 16px; }
             .page-content { padding:20px 16px 50px; }
             .sidebar { width:280px; }
             .grid-2, .grid-3, .grid-4 { gap:14px; }
             .filter-bar input { min-width:0; }
         }
    

/* ===== styles.css block 2 ===== */
         /* ===== Complete redesign: Pulse Grid / editorial product system ===== */
         :root {
             --bg-primary:#f3f2ed;
             --bg-secondary:#111318;
             --bg-card:#ffffff;
             --bg-input:#f8f8f5;
             --text-primary:#15171b;
             --text-secondary:#60646c;
             --text-muted:#858991;
             --border-color:#dcdcd5;
             --accent:#c7f000;
             --success:#168457;
             --danger:#c9362b;
             --warning:#b86a00;
             --shadow:0 10px 24px rgba(20,22,26,.06);
             --shadow-hover:0 16px 34px rgba(20,22,26,.13);
             --radius:14px;
             --radius-sm:9px;
             --radius-xs:6px;
             --nav-width:264px;
             --header-height:70px;
             --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         }
         [data-theme="dark"] {
             --bg-primary:#0e1014;
             --bg-secondary:#0a0b0e;
             --bg-card:#171a20;
             --bg-input:#20242c;
             --text-primary:#f4f5f1;
             --text-secondary:#b7bbc2;
             --text-muted:#858b95;
             --border-color:#30353e;
             --shadow:0 10px 28px rgba(0,0,0,.24);
             --shadow-hover:0 18px 40px rgba(0,0,0,.38);
         }
         * { -webkit-tap-highlight-color:transparent; }
         body {
             background:var(--bg-primary);
             color:var(--text-primary);
             font-family:var(--font);
             letter-spacing:-.015em;
         }
         button, input, select, textarea { font-family:inherit; }
         button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
             outline:3px solid rgba(199,240,0,.5);
             outline-offset:2px;
         }
         ::-webkit-scrollbar { width:8px; height:8px; }
         ::-webkit-scrollbar-track { background:var(--bg-primary); }
         ::-webkit-scrollbar-thumb { background:#bfc1b8; border-radius:2px; }
         [data-theme="dark"] ::-webkit-scrollbar-thumb { background:#4a505a; }

         /* Navigation is now a dark command rail, not a pastel menu. */
         .sidebar {
             width:var(--nav-width);
             padding:26px 16px 18px;
             background:#111318;
             border-right:1px solid #292d34;
             box-shadow:12px 0 30px rgba(17,19,24,.08);
         }
         .sidebar-brand {
             padding:0 12px 34px;
             color:#f5f6f2;
             background:none;
             -webkit-text-fill-color:#f5f6f2;
             font-size:20px;
             line-height:1;
             letter-spacing:-.045em;
         }
         .sidebar-brand span {
             display:inline-flex;
             width:30px;
             height:30px;
             align-items:center;
             justify-content:center;
             background:var(--accent);
             color:#111318;
             border-radius:8px;
             font-size:17px;
             filter:grayscale(1);
             -webkit-text-fill-color:#111318;
         }
         .sidebar-nav { gap:5px; }
         .sidebar-nav .nav-item,
         .sidebar-footer .nav-item {
             min-height:44px;
             padding:11px 12px;
             border-radius:8px;
             color:#969ca7;
             font-size:13px;
             font-weight:600;
             letter-spacing:-.01em;
         }
         .sidebar-nav .nav-item:hover,
         .sidebar-footer .nav-item:hover {
             background:#1d2027;
             color:#f4f5f1;
         }
         .sidebar-nav .nav-item.active,
         .sidebar-footer .nav-item.active {
             background:var(--accent);
             color:#111318;
             box-shadow:none;
         }
         .sidebar-nav .nav-item .icon,
         .sidebar-footer .nav-item .icon {
             width:25px;
             font-size:17px;
             opacity:.8;
             filter:grayscale(1);
         }
         .sidebar-nav .nav-item.active .icon { opacity:1; }
         .sidebar-nav .nav-item .badge,
         .sidebar-footer .nav-item .dev-badge {
             border-radius:4px;
             font-size:10px;
             font-weight:800;
             letter-spacing:.03em;
         }
         .sidebar-nav .nav-item .badge { background:#ed594a; padding:3px 7px; color:#fff; }
         .sidebar-footer {
             padding-top:18px;
             border-top:1px solid #292d34;
         }
         .sidebar-footer .nav-item .dev-badge { background:#30353e; color:#c7f000; padding:3px 7px; }

         /* Header and canvas establish the new black / paper contrast. */
         .main { background:var(--bg-primary); }
         .header {
             height:var(--header-height);
             padding:0 40px;
             background:#111318;
             border-bottom:1px solid #292d34;
             color:#f4f5f1;
         }
         .header-title {
             color:#f4f5f1;
             font-size:15px;
             font-weight:700;
             letter-spacing:-.02em;
         }
         .header-left .menu-toggle { color:#f4f5f1; }
         .header-right { gap:8px; }
         .header-right .theme-toggle,
         .header-right .notif-btn,
         .header-right .user-btn {
             width:36px;
             height:36px;
             background:#1d2027;
             border:1px solid #343942;
             border-radius:8px;
             color:#f4f5f1;
             font-size:15px;
         }
         .header-right .theme-toggle:hover,
         .header-right .notif-btn:hover {
             transform:none;
             border-color:var(--accent);
             background:#252a31;
         }
         .header-right .user-btn {
             background:var(--accent);
             border-color:var(--accent);
             color:#111318;
             font-size:13px;
             font-weight:800;
         }
         .header-right .admin-badge {
             background:var(--accent);
             border:1px solid var(--accent);
             border-radius:6px;
             color:#111318;
             padding:8px 12px;
             font-size:11px;
             font-weight:800;
         }
         .page-content {
             max-width:1540px;
             padding:34px 40px 70px;
         }
         .page { animation:fadeUp .2s ease-out; }
         @keyframes fadeUp {
             from { opacity:0; transform:translateY(10px); }
             to { opacity:1; transform:translateY(0); }
         }

         /* Every content surface now uses editorial borders instead of floating bubbles. */
         .card,
         .stat-card,
         .filter-bar,
         .phone-card {
             background:var(--bg-card);
             border:1px solid var(--border-color);
             box-shadow:none;
         }
         .card {
             padding:24px;
             border-radius:var(--radius);
         }
         .card:hover { box-shadow:none; }
         .card-header {
             margin-bottom:22px;
             padding-bottom:14px;
             border-bottom:1px solid var(--border-color);
         }
         .card-title {
             color:var(--text-primary);
             font-size:17px;
             font-weight:800;
             letter-spacing:-.035em;
             filter:grayscale(1);
         }
         .card-subtitle {
             color:var(--text-muted);
             font-size:11px;
             font-weight:700;
             letter-spacing:.04em;
             text-transform:uppercase;
         }
         .grid-2, .grid-3 { gap:20px; }
         .grid-4 { gap:14px; }
         .stat-card {
             min-height:108px;
             padding:20px;
             border-radius:10px;
             border-top:3px solid var(--accent);
             align-items:flex-end;
             gap:14px;
         }
         .stat-card:hover { transform:none; box-shadow:none; }
         .stat-icon {
             width:38px;
             height:38px;
             border-radius:7px;
             background:#eef0e9 !important;
             color:#15171b;
             font-size:17px;
             filter:grayscale(1);
         }
         [data-theme="dark"] .stat-icon { background:#2b3037 !important; color:#f4f5f1; }
         .stat-info h3 {
             font-size:27px;
             line-height:1;
             letter-spacing:-.06em;
         }
         .stat-info p {
             margin-top:6px;
             color:var(--text-muted);
             font-size:11px;
             font-weight:700;
             letter-spacing:.04em;
             text-transform:uppercase;
         }

         /* Browse: compact two-column control panel on phones, not a long form. */
         .filter-bar {
             display:flex;
             padding:14px;
             gap:8px;
             border-radius:10px;
             background:var(--bg-card);
             margin-bottom:22px;
         }
         .filter-bar input,
         .filter-bar select,
         .compare-selector select,
         .admin-form .form-group input,
         .admin-form .form-group select,
         .admin-form .form-group textarea,
         .password-input-group input {
             min-height:40px;
             background:var(--bg-input);
             color:var(--text-primary);
             border:1px solid var(--border-color);
             border-radius:6px;
             font-size:13px;
         }
         .filter-bar input { min-width:210px; }
         .filter-bar input:focus,
         .filter-bar select:focus,
         .admin-form .form-group input:focus,
         .admin-form .form-group select:focus,
         .admin-form .form-group textarea:focus {
             outline:none;
             border-color:#7c9400;
             box-shadow:0 0 0 3px rgba(199,240,0,.22);
         }
         .btn {
             min-height:40px;
             padding:10px 16px;
             border:1px solid #111318;
             border-radius:6px;
             background:#111318;
             color:#f4f5f1;
             box-shadow:none;
             font-size:12px;
             font-weight:800;
             letter-spacing:.01em;
         }
         .btn:hover {
             transform:none;
             background:#2a2e35;
             box-shadow:none;
         }
         .btn-outline {
             background:transparent;
             border-color:#8d9188;
             color:var(--text-primary);
         }
         .btn-outline:hover {
             background:var(--accent);
             border-color:var(--accent);
             color:#111318;
         }
         .btn-danger { background:#c9362b; border-color:#c9362b; }
         .btn-success { background:#168457; border-color:#168457; }
         .btn-sm { min-height:34px; padding:8px 12px; font-size:11px; }
         .voice-btn {
             color:var(--text-primary);
             filter:grayscale(1);
             border-radius:6px;
         }
         .voice-btn:hover { color:var(--text-primary); background:var(--accent); }

         /* Product cards have a catalogue feel: framed media, hard label, quiet metadata. */
         .phone-grid { gap:18px; }
         .phone-card {
             padding:12px;
             border-radius:10px;
             cursor:pointer;
             overflow:hidden;
             transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
         }
         .phone-card:hover {
             transform:translateY(-4px);
             border-color:#9caf19;
             box-shadow:var(--shadow-hover);
         }
         .phone-card .fav-btn {
             top:20px;
             right:20px;
             width:30px;
             height:30px;
             background:var(--bg-card);
             border:1px solid var(--border-color);
             border-radius:6px;
             font-size:14px;
             filter:grayscale(1);
         }
         .phone-card .fav-btn.active { background:var(--accent); color:#111318; }
         .phone-card .phone-img-wrap {
             min-height:190px;
             border-radius:7px;
             background:#eceee8;
             border:1px solid #e0e2da;
             margin-bottom:16px;
         }
         [data-theme="dark"] .phone-card .phone-img-wrap {
             background:#20242b;
             border-color:#30353e;
         }
         .phone-card .phone-img-wrap .emoji-fallback {
             position:relative;
             display:block;
             width:54px;
             height:96px;
             font-size:0;
             border:3px solid #72776e;
             border-radius:10px;
             opacity:.75;
         }
         .phone-card .phone-img-wrap .emoji-fallback::before {
             content:"";
             position:absolute;
             top:12px;
             left:7px;
             right:7px;
             bottom:14px;
             border:2px solid #a6aaa0;
             border-radius:3px;
             background:repeating-linear-gradient(
                 180deg,
                 transparent 0 9px,
                 rgba(114,119,110,.18) 9px 10px
             );
         }
         .phone-card .phone-img-wrap .emoji-fallback::after {
             content:"";
             position:absolute;
             bottom:5px;
             left:50%;
             width:5px;
             height:5px;
             border-radius:50%;
             background:#72776e;
             transform:translateX(-50%);
         }
         .phone-card .phone-brand {
             color:var(--text-muted);
             font-size:10px;
             font-weight:800;
             letter-spacing:.13em;
         }
         .phone-card .phone-name {
             margin-top:3px;
             font-size:15px;
             font-weight:800;
             letter-spacing:-.03em;
         }
         .phone-card .phone-price {
             margin-top:9px;
             color:var(--text-primary);
             font-size:17px;
             font-weight:900;
         }
         .phone-card .phone-specs {
             gap:5px;
             margin-top:11px;
             color:var(--text-muted);
             font-size:10px;
         }
         .phone-card .phone-specs span {
             padding:4px 6px;
             background:var(--bg-input);
             border:1px solid var(--border-color);
             border-radius:4px;
         }
         .phone-card .score-badge,
         .phone-card .rating-badge,
         .dev-badge {
             padding:4px 7px;
             border-radius:4px;
             font-size:10px;
             font-weight:800;
         }
         .score-badge.gaming,
         .score-badge.camera,
         .score-badge.battery,
         .phone-card .rating-badge {
             background:var(--accent);
             color:#111318;
         }

         /* News, rankings and alerts receive their own visual grammar. */
         #page-news > .card,
         #page-browse > .filter-bar,
         #page-toplists > .tab-content > .card,
         #page-favorites > .card,
         #page-aifinder > .card,
         #page-pricehistory > .card,
         #page-pricealerts > .card,
         #page-profile > .card {
             border-top:4px solid var(--accent);
         }
         .news-item {
             display:grid;
             grid-template-columns:48px 1fr;
             gap:16px;
             padding:18px 0;
             border-bottom:1px solid var(--border-color);
         }
         .news-item:last-child { border-bottom:none; }
         .news-icon {
             width:42px;
             height:42px;
             display:flex;
             align-items:center;
             justify-content:center;
             background:var(--bg-input);
             border:1px solid var(--border-color);
             border-radius:7px;
             font-size:18px;
             filter:grayscale(1);
         }
         .news-content h4 { font-size:15px; font-weight:800; }
         .news-content p {
             margin-top:5px;
             color:var(--text-secondary);
             font-size:13px;
             line-height:1.5;
         }
         .news-content .meta {
             display:flex;
             gap:10px;
             align-items:center;
             margin-top:9px;
             color:var(--text-muted);
             font-size:11px;
         }
         .news-content .tag {
             padding:3px 6px;
             background:var(--accent);
             color:#111318;
             border-radius:3px;
             font-size:10px;
             font-weight:900;
             text-transform:uppercase;
         }
         /* 🆕 Dashboard "Latest News" widget — redesigned so it doesn't look like a dated,
            flat list. Deliberately its own dash-news-* classes (not .news-item/.news-icon)
            so the full News page keeps its current look and isn't touched by this. */
         .dash-news-item {
             display:flex;
             align-items:center;
             gap:14px;
             padding:12px;
             border-radius:13px;
             cursor:pointer;
             margin-bottom:8px;
             transition:transform .18s ease, box-shadow .18s ease;
         }
         .dash-news-item:last-child { margin-bottom:0; }
         .dash-news-item:hover {
             transform:translateX(4px);
             box-shadow:0 8px 20px rgba(0,0,0,.10);
         }
         .dash-news-icon {
             flex-shrink:0;
             width:42px;
             height:42px;
             border-radius:12px;
             display:flex;
             align-items:center;
             justify-content:center;
             font-size:20px;
             line-height:1;
         }
         .dash-news-body { flex:1; min-width:0; }
         .dash-news-body h4 {
             font-size:14px;
             font-weight:800;
             line-height:1.35;
             display:-webkit-box;
             -webkit-line-clamp:2;
             -webkit-box-orient:vertical;
             overflow:hidden;
         }
         .dash-news-date {
             display:inline-block;
             margin-top:5px;
             font-size:11px;
             font-weight:600;
             color:var(--text-muted);
         }
         .dash-news-arrow {
             flex-shrink:0;
             font-size:19px;
             color:var(--text-muted);
             opacity:.55;
             transition:transform .18s ease, opacity .18s ease;
         }
         .dash-news-item:hover .dash-news-arrow { transform:translateX(3px); opacity:1; }
         .dash-news-item.violet { background:rgba(108,92,231,.08); }
         .dash-news-item.violet .dash-news-icon { background:rgba(108,92,231,.18); }
         .dash-news-item.teal { background:rgba(0,184,148,.08); }
         .dash-news-item.teal .dash-news-icon { background:rgba(0,184,148,.18); }
         .dash-news-item.amber { background:rgba(253,203,110,.16); }
         .dash-news-item.amber .dash-news-icon { background:rgba(217,164,6,.22); }
         .dash-news-item.rose { background:rgba(225,112,85,.10); }
         .dash-news-item.rose .dash-news-icon { background:rgba(225,112,85,.20); }
         [data-theme="dark"] .dash-news-item.violet { background:rgba(150,130,255,.13); }
         [data-theme="dark"] .dash-news-item.violet .dash-news-icon { background:rgba(150,130,255,.24); }
         [data-theme="dark"] .dash-news-item.teal { background:rgba(94,231,192,.11); }
         [data-theme="dark"] .dash-news-item.teal .dash-news-icon { background:rgba(94,231,192,.22); }
         [data-theme="dark"] .dash-news-item.amber { background:rgba(255,192,93,.13); }
         [data-theme="dark"] .dash-news-item.amber .dash-news-icon { background:rgba(255,192,93,.24); }
         [data-theme="dark"] .dash-news-item.rose { background:rgba(255,129,113,.13); }
         [data-theme="dark"] .dash-news-item.rose .dash-news-icon { background:rgba(255,129,113,.24); }
         @media (max-width:520px) {
             .dash-news-icon { width:36px; height:36px; font-size:17px; }
             .dash-news-body h4 { font-size:13px; }
         }
         .top-list-item {
             display:grid;
             grid-template-columns:38px 28px 1fr auto auto;
             gap:12px;
             align-items:center;
             padding:14px 0;
             border-bottom:1px solid var(--border-color);
         }
         .top-list-item:last-child { border-bottom:none; }
         .top-list-item .rank {
             color:var(--text-muted);
             font-size:12px;
             font-weight:900;
         }
         .top-list-item .rank.gold { color:#a17c00; }
         .top-list-item .rank.silver { color:#68707a; }
         .top-list-item .rank.bronze { color:#9a5b34; }
         .top-list-item > span:nth-child(2) { filter:grayscale(1); }
         .top-list-item .name { font-size:13px; font-weight:800; }
         .top-list-item .detail { margin-top:3px; color:var(--text-muted); font-size:11px; }
         .top-list-item .value { color:var(--text-primary); font-size:12px; font-weight:900; }
         .dash-recent-item {
             display:grid;
             grid-template-columns:44px 1fr auto;
             gap:12px;
             align-items:center;
             padding:10px 6px;
             margin:0 -6px;
             border-bottom:1px solid var(--border-color);
             border-radius:8px;
             cursor:pointer;
             transition:background .15s ease, transform .15s ease;
         }
         .dash-recent-item:last-child { border-bottom:none; }
         .dash-recent-item:hover { background:var(--bg-input); transform:translateX(2px); }
         .dash-recent-item .thumb {
             width:44px;
             height:44px;
             border-radius:8px;
             background:var(--bg-input);
             border:1px solid var(--border-color);
             display:flex;
             align-items:center;
             justify-content:center;
             overflow:hidden;
             flex-shrink:0;
         }
         .dash-recent-item .thumb img { width:100%; height:100%; object-fit:cover; }
         .dash-recent-item .thumb .emoji-fallback { font-size:20px; filter:grayscale(1); }
         .dash-recent-item .info .name { font-size:13px; font-weight:800; line-height:1.3; }
         .dash-recent-item .info .sub { margin-top:2px; color:var(--text-muted); font-size:11px; }
         .dash-recent-item .price { font-weight:900; font-size:13px; color:var(--text-primary); white-space:nowrap; }
         .alert-item {
             display:flex;
             justify-content:space-between;
             align-items:center;
             padding:15px 0;
             border-bottom:1px solid var(--border-color);
         }
         .alert-item .name { display:block; font-size:14px; font-weight:800; }
         .alert-item .target { display:block; margin-top:4px; color:var(--text-muted); font-size:11px; }
         .remove-alert {
             width:28px;
             height:28px;
             border:1px solid var(--border-color);
             border-radius:5px;
             background:transparent;
             color:var(--danger);
             cursor:pointer;
         }

         /* The AI view is intentionally a dark feature panel. */
         #page-aifinder > .card {
             background:#111318;
             border-color:#111318;
             color:#f4f5f1;
         }
         #page-aifinder .card-title,
         #page-aifinder .form-group label { color:#f4f5f1; }
         #page-aifinder .card-header { border-color:#343942; }
         #page-aifinder input,
         #page-aifinder select {
             background:#1d2027;
             border-color:#343942;
             color:#f4f5f1;
         }
         #page-aifinder .phone-card { background:#f8f8f5; color:#15171b; border-color:#f8f8f5; }
         #page-aifinder .phone-card .phone-price { color:#15171b; }
         #page-aifinder .phone-card .phone-specs span { background:#eceee8; }

         /* Existing inline list rows are given the new catalogue rhythm. */
         #recentPhonesList > div,
         #latestNewsList > div,
         #compareHistoryList > div {
             min-height:48px;
             padding:12px 0 !important;
             border-bottom:1px solid var(--border-color) !important;
         }
         #latestNewsList > div > span { filter:grayscale(1); }
         .compare-table-wrap { overflow-x:auto; }
         .compare-table { min-width:650px; }
         .compare-table th,
         .compare-table td { padding:13px 14px; }
         .compare-table th {
             background:#111318;
             color:#f4f5f1;
             border-color:#343942;
         }
         .compare-table td { border-color:var(--border-color); }
         .compare-table .highlight { background:var(--accent); color:#111318; }
         .compare-table .remove-btn { color:var(--danger); }
         .profile-avatar { background:var(--accent); color:#111318; border-radius:8px; }
         .profile-stats { gap:20px; }
         .profile-stats div .num { font-size:22px; }
         .review-item { padding:16px 0; }
         .review-item .rating-stars { filter:grayscale(1); }
         .modal-overlay { background:rgba(8,10,12,.72); backdrop-filter:blur(10px); }
         .modal {
             padding:28px;
             border:1px solid var(--border-color);
             border-radius:12px;
             box-shadow:0 28px 70px rgba(0,0,0,.28);
         }
         .modal .modal-close { font-size:20px; }
         .toast { border-radius:7px; }
         .empty-state .icon { filter:grayscale(1); opacity:.55; }
         .empty-state h3 { font-size:16px; }
         .sidebar-nav .nav-item .icon,
         .sidebar-footer .nav-item .icon,
         .news-icon,
         .stat-icon {
             font-size:0;
         }
         .sidebar-nav .nav-item .icon::before,
         .sidebar-footer .nav-item .icon::before,
         .news-icon::before,
         .stat-icon::before {
             content:"";
             display:block;
             width:11px;
             height:11px;
             border:2px solid currentColor;
             border-radius:3px;
             opacity:.85;
         }
         .news-icon::before { width:14px; height:17px; border-radius:2px; }
         .stat-icon::before { width:10px; height:10px; border-radius:50%; }
         .empty-state .icon {
             display:inline-flex;
             width:44px;
             height:44px;
             align-items:center;
             justify-content:center;
             font-size:0;
             border:2px solid var(--border-color);
             border-radius:50%;
         }
         .empty-state .icon::before {
             content:"";
             width:12px;
             height:12px;
             border:2px solid var(--accent);
             border-radius:50%;
         }
         .tabs {
             gap:4px;
             padding:4px;
             background:transparent;
             border:0;
             border-bottom:1px solid var(--border-color);
             border-radius:0;
         }
         .tabs .tab {
             padding:10px 13px;
             border-radius:5px 5px 0 0;
             color:var(--text-muted);
             font-size:11px;
             font-weight:800;
             text-transform:uppercase;
         }
         .tabs .tab.active {
             background:var(--accent);
             color:#111318;
             box-shadow:none;
         }
         .color-swatches .swatch { border-radius:4px; }
         .buy-links .buy-btn { border-radius:5px; }

         @media (max-width:768px) {
             .header {
                 min-height:64px;
                 height:64px;
                 padding:0 14px;
             }
             .header-title { font-size:14px; }
             .header-right { gap:5px; }
             .header-right .theme-toggle,
             .header-right .notif-btn,
             .header-right .user-btn {
                 width:32px;
                 height:32px;
                 font-size:14px;
             }
             .header-right .admin-badge {
                 max-width:58px;
                 overflow:hidden;
                 padding:8px 9px;
                 white-space:nowrap;
                 font-size:10px;
             }
             .page-content { padding:20px 14px 48px; }
             .grid-4 { grid-template-columns:1fr 1fr; gap:10px; }
             .stat-card { min-height:92px; padding:14px; align-items:center; }
             .stat-card .stat-icon { width:32px; height:32px; font-size:14px; }
             .stat-info h3 { font-size:21px; }
             .stat-info p { font-size:9px; }
             .grid-2 { grid-template-columns:1fr; }
             .card { padding:18px; }
             .filter-bar {
                 display:grid !important;
                 grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                 align-items:stretch;
                 padding:12px;
             }
             .filter-bar input {
                 grid-column:1 / -1;
                 width:100%;
                 min-width:0;
             }
             .filter-bar .voice-btn {
                 grid-column:1 / -1;
                 justify-self:start;
                 min-height:30px;
                 padding:3px 10px;
             }
             .filter-bar select {
                 width:100%;
                 min-width:0;
             }
             .filter-bar #clearFilters {
                 grid-column:1 / -1;
                 width:100%;
             }
             .phone-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
             .phone-card { padding:9px; }
             .phone-card .phone-img-wrap { min-height:145px; margin-bottom:11px; }
             .phone-card .phone-name { font-size:13px; }
             .phone-card .phone-price { font-size:15px; margin-top:7px; }
             .phone-card .phone-specs { display:none; }
             .phone-card .fav-btn { top:16px; right:16px; width:27px; height:27px; }
             .top-list-item {
                 grid-template-columns:29px 20px 1fr auto;
                 gap:8px;
             }
             .top-list-item .btn { grid-column:4; grid-row:1 / span 2; }
             .top-list-item .value { display:none; }
             .news-item { grid-template-columns:38px 1fr; gap:12px; }
             .news-icon { width:36px; height:36px; }
             .news-content h4 { font-size:14px; }
             .tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
             .tabs::-webkit-scrollbar { display:none; }
             .tabs .tab { flex:0 0 auto; white-space:nowrap; }
             .admin-form { grid-template-columns:1fr; }
             .admin-form .form-group.full { grid-column:auto; }
             .compare-selector { align-items:stretch; }
             .compare-selector select { min-width:calc(50% - 8px); flex:1; }
             .cookie-banner { padding:14px; }
             .cookie-banner p { font-size:12px; }
         }
         @media (max-width:390px) {
             .header-title { max-width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
             .header-right .admin-badge { max-width:49px; }
             .phone-card .phone-img-wrap { min-height:128px; }
         }
          /* ===== Final palette + AI Finder refinement ===== */
          :root {
              --accent:#7c5cff;
              --success:#3b82f6;
              --danger:#ed6a5a;
              --warning:#f0a83b;
          }
          [data-theme="dark"] {
              --accent:#9b82ff;
              --success:#60a5fa;
              --danger:#ff8171;
              --warning:#f4bd59;
          }
          button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
              outline-color:rgba(124,92,255,.55);
          }
          .sidebar-brand span,
          .sidebar-nav .nav-item.active,
          .sidebar-footer .nav-item.active,
          .header-right .user-btn,
          .header-right .admin-badge {
              background:var(--accent);
              border-color:var(--accent);
              color:#fff;
              -webkit-text-fill-color:#fff;
          }
          .sidebar-brand span { color:#fff; }
          .sidebar-footer .nav-item .dev-badge { color:#c8bcff; }
          .header-right .theme-toggle:hover,
          .header-right .notif-btn:hover { border-color:var(--accent); }
          .stat-card { border-top-color:var(--accent); }
          .stat-icon { background:#f0edff !important; color:#6544e8; }
          [data-theme="dark"] .stat-icon { background:#2c254a !important; color:#b6a7ff; }
          .filter-bar input:focus,
          .filter-bar select:focus,
          .admin-form .form-group input:focus,
          .admin-form .form-group select:focus,
          .admin-form .form-group textarea:focus {
              border-color:var(--accent);
              box-shadow:0 0 0 3px rgba(124,92,255,.2);
          }
          .btn {
              background:var(--accent);
              border-color:var(--accent);
              color:#fff;
          }
          .btn:hover { background:#6848e8; }
          .btn-outline:hover {
              background:var(--accent);
              border-color:var(--accent);
              color:#fff;
          }
          .btn-danger { background:var(--danger); border-color:var(--danger); }
          .btn-success { background:var(--success); border-color:var(--success); }
          .phone-card:hover { border-color:#a794ff; }
          .phone-card .fav-btn.active { background:var(--accent); color:#fff; }
          .phone-card .score-badge,
          .phone-card .rating-badge,
          .score-badge.gaming,
          .score-badge.camera,
          .score-badge.battery,
          .news-content .tag {
              background:#eeeaff;
              color:#5b3bc4;
          }
          [data-theme="dark"] .phone-card .score-badge,
          [data-theme="dark"] .phone-card .rating-badge,
          [data-theme="dark"] .score-badge.gaming,
          [data-theme="dark"] .score-badge.camera,
          [data-theme="dark"] .score-badge.battery,
          [data-theme="dark"] .news-content .tag {
              background:#302758;
              color:#c8bcff;
          }
          #page-news > .card,
          #page-browse > .filter-bar,
          #page-toplists > .tab-content > .card,
          #page-favorites > .card,
          #page-aifinder > .card,
          #page-pricehistory > .card,
          #page-pricealerts > .card,
          #page-profile > .card { border-top-color:var(--accent); }
          .tabs .tab.active { background:var(--accent); color:#fff; }
          .compare-table .highlight { background:#eeeaff; color:#5b3bc4; }
          [data-theme="dark"] .compare-table .highlight { background:#302758; color:#c8bcff; }
          .empty-state .icon::before { border-color:var(--accent); }

          /* AI Finder is a finished feature panel rather than a bare dark card. */
          #page-aifinder > .card {
              max-width:980px;
              padding:0;
              overflow:hidden;
              border:1px solid #292d38;
              border-top:4px solid var(--accent);
              border-radius:14px;
              background:#12141a;
              color:#f4f4f7;
          }
          #page-aifinder .card-header {
              display:block;
              margin:0;
              padding:24px 26px 18px;
              background:#181b23;
              border-bottom:1px solid #303440;
          }
          #page-aifinder .card-title {
              display:block;
              color:#fff;
              font-size:19px;
              filter:none;
          }
          #page-aifinder .card-header::after {
              content:"Set your budget and priorities to find the right phone.";
              display:block;
              margin-top:7px;
              color:#9299a8;
              font-size:12px;
              letter-spacing:0;
              font-weight:500;
          }
          #page-aifinder .ai-finder-form {
              display:grid !important;
              grid-template-columns:repeat(2,minmax(0,1fr)) !important;
              gap:20px 18px !important;
              max-width:none !important;
              padding:24px 26px 26px;
          }
          #page-aifinder .ai-finder-form .form-group {
              min-width:0;
          }
          #page-aifinder .ai-finder-form .form-group.full {
              grid-column:1 / -1 !important;
              margin-top:2px;
          }
          #page-aifinder .form-group label {
              display:block;
              margin-bottom:7px;
              color:#c6cad4;
              font-size:10px;
              font-weight:800;
              letter-spacing:.08em;
              text-transform:uppercase;
          }
          #page-aifinder input,
          #page-aifinder select {
              display:block;
              width:100%;
              min-height:44px;
              padding:0 12px;
              border:1px solid #3a4050;
              border-radius:7px;
              background:#20242d;
              color:#f5f6fa;
              font-size:13px;
              box-shadow:none;
          }
          #page-aifinder input::placeholder { color:#7f8797; }
          #page-aifinder input:focus,
          #page-aifinder select:focus {
              outline:none;
              border-color:var(--accent);
              box-shadow:0 0 0 3px rgba(124,92,255,.2);
          }
          #page-aifinder select {
              appearance:none;
              padding-right:34px;
              background-image:linear-gradient(45deg,transparent 50%,#9da4b3 50%),linear-gradient(135deg,#9da4b3 50%,transparent 50%);
              background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;
              background-size:5px 5px,5px 5px;
              background-repeat:no-repeat;
          }
          #page-aifinder select option { background:#20242d; color:#f5f6fa; }
          #page-aifinder .ai-finder-form .full .btn {
              width:100%;
              min-height:44px;
              background:var(--accent);
              border-color:var(--accent);
              color:#fff;
              font-size:13px;
          }
          #page-aifinder .ai-finder-form .full .btn:hover { background:#6848e8; }
          #page-aifinder #aiResults {
              padding:0 26px 26px;
              color:#f4f4f7;
          }
          #page-aifinder #aiResults > h4 { color:#fff; }
          #page-aifinder .phone-card {
              background:#f8f8f5;
              border-color:#f8f8f5;
              color:#15171b;
          }
          #page-aifinder .phone-card .phone-price { color:#15171b; }

          .cookie-banner {
              background:#181b23;
              border-top:1px solid #343846;
              color:#f4f4f7;
              box-shadow:0 -12px 32px rgba(0,0,0,.22);
          }
          .cookie-banner p { color:#b8bdc8; }
          .cookie-banner p a { color:#b6a7ff !important; }

          @media (max-width:768px) {
              #page-aifinder .ai-finder-form {
                  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
                  gap:18px 12px !important;
                  padding:20px 18px 20px;
              }
              #page-aifinder .ai-finder-form .full { grid-column:1 / -1 !important; }
              #page-aifinder #aiResults { padding:0 18px 20px; }
              #page-aifinder .card-header { padding:20px 18px 16px; }
              #page-aifinder .card-title { font-size:17px; }
              #page-aifinder .form-group label { font-size:9px; }
              #page-aifinder input,
              #page-aifinder select { min-height:42px; }
          }
          @media (max-width:390px) {
              #page-aifinder .ai-finder-form {
                  grid-template-columns:1fr !important;
              }
              #page-aifinder .ai-finder-form .full { grid-column:auto !important; }
          }
          /* ===== Cohesive final palette: deep navy / clean white / electric blue ===== */
          :root {
              --bg-primary:#f6f8fb;
              --bg-secondary:#0f172a;
              --bg-card:#ffffff;
              --bg-input:#f8fafc;
              --text-primary:#0f172a;
              --text-secondary:#475569;
              --text-muted:#64748b;
              --border-color:#e2e8f0;
              --accent:#2563eb;
              --success:#0ea5e9;
              --danger:#e11d48;
              --warning:#f59e0b;
              --shadow:0 8px 24px rgba(15,23,42,.06);
              --shadow-hover:0 16px 34px rgba(15,23,42,.12);
          }
          [data-theme="dark"] {
              --bg-primary:#0b1120;
              --bg-secondary:#080d18;
              --bg-card:#111c2f;
              --bg-input:#17243a;
              --text-primary:#f8fafc;
              --text-secondary:#c1ccdc;
              --text-muted:#8796aa;
              --border-color:#263852;
              --shadow:0 10px 28px rgba(0,0,0,.24);
              --shadow-hover:0 18px 40px rgba(0,0,0,.36);
          }
          body { background:var(--bg-primary); }
          ::-webkit-scrollbar-thumb { background:#aab8ca; }
          [data-theme="dark"] ::-webkit-scrollbar-thumb { background:#466080; }
          .sidebar {
              background:#0f172a;
              border-right-color:#1e293b;
              box-shadow:10px 0 28px rgba(15,23,42,.10);
          }
          .sidebar-brand span {
              background:#3b82f6;
              border-color:#3b82f6;
              color:#fff;
              -webkit-text-fill-color:#fff;
          }
          .sidebar-nav .nav-item:hover,
          .sidebar-footer .nav-item:hover { background:#18263d; }
          .sidebar-nav .nav-item.active,
          .sidebar-footer .nav-item.active {
              background:#2563eb;
              color:#fff;
          }
          .sidebar-footer { border-top-color:#263852; }
          .sidebar-footer .nav-item .dev-badge { color:#93c5fd; }
          .header {
              background:#0f172a;
              border-bottom-color:#1e293b;
          }
          .header-right .theme-toggle,
          .header-right .notif-btn,
          .header-right .user-btn {
              background:#17243a;
              border-color:#2c405e;
          }
          .header-right .theme-toggle:hover,
          .header-right .notif-btn:hover { background:#203250; border-color:#60a5fa; }
          .header-right .user-btn,
          .header-right .admin-badge {
              background:#2563eb;
              border-color:#2563eb;
              color:#fff;
              -webkit-text-fill-color:#fff;
          }
          .header-right .admin-badge { padding:8px 12px; }
          .card,
          .stat-card,
          .filter-bar,
          .phone-card {
              border-color:var(--border-color);
              box-shadow:0 1px 2px rgba(15,23,42,.03);
          }
          .card-header { border-bottom-color:var(--border-color); }
          .stat-card { border-top-color:#3b82f6; }
          .stat-icon {
              background:#eff6ff !important;
              color:#2563eb;
          }
          [data-theme="dark"] .stat-icon {
              background:#17345f !important;
              color:#93c5fd;
          }
          .filter-bar input:focus,
          .filter-bar select:focus,
          .admin-form .form-group input:focus,
          .admin-form .form-group select:focus,
          .admin-form .form-group textarea:focus {
              border-color:#60a5fa;
              box-shadow:0 0 0 3px rgba(37,99,235,.16);
          }
          .btn {
              background:#2563eb;
              border-color:#2563eb;
              color:#fff;
          }
          .btn:hover,
          #page-aifinder .ai-finder-form .full .btn:hover { background:#1d4ed8; }
          .btn-outline:hover {
              background:#2563eb;
              border-color:#2563eb;
              color:#fff;
          }
          .btn-success { background:#0ea5e9; border-color:#0ea5e9; }
          .btn-danger { background:#e11d48; border-color:#e11d48; }
          .phone-card:hover { border-color:#93c5fd; }
          .phone-card .phone-img-wrap {
              background:#f1f5f9;
              border-color:#e2e8f0;
          }
          [data-theme="dark"] .phone-card .phone-img-wrap {
              background:#17243a;
              border-color:#263852;
          }
          .phone-card .phone-img-wrap .emoji-fallback { border-color:#64748b; }
          .phone-card .phone-img-wrap .emoji-fallback::before { border-color:#94a3b8; }
          .phone-card .phone-img-wrap .emoji-fallback::after { background:#64748b; }
          .phone-card .score-badge,
          .phone-card .rating-badge,
          .score-badge.gaming,
          .score-badge.camera,
          .score-badge.battery,
          .news-content .tag {
              background:#eff6ff;
              color:#1d4ed8;
          }
          [data-theme="dark"] .phone-card .score-badge,
          [data-theme="dark"] .phone-card .rating-badge,
          [data-theme="dark"] .score-badge.gaming,
          [data-theme="dark"] .score-badge.camera,
          [data-theme="dark"] .score-badge.battery,
          [data-theme="dark"] .news-content .tag {
              background:#17345f;
              color:#bfdbfe;
          }
          #page-news > .card,
          #page-browse > .filter-bar,
          #page-toplists > .tab-content > .card,
          #page-favorites > .card,
          #page-aifinder > .card,
          #page-pricehistory > .card,
          #page-pricealerts > .card,
          #page-profile > .card { border-top-color:#3b82f6; }
          .tabs .tab.active {
              background:#2563eb;
              color:#fff;
          }
          .compare-table .highlight {
              background:#eff6ff;
              color:#1d4ed8;
          }
          [data-theme="dark"] .compare-table .highlight {
              background:#17345f;
              color:#bfdbfe;
          }
          .empty-state .icon::before { border-color:#3b82f6; }

          /* AI Finder now belongs to the same navy/blue system. */
          #page-aifinder > .card {
              background:#0f172a;
              border-color:#1e293b;
              border-top-color:#3b82f6;
          }
          #page-aifinder .card-header { background:#16243a; border-bottom-color:#2c405e; }
          #page-aifinder .ai-finder-form { background:#0f172a; }
          #page-aifinder input,
          #page-aifinder select {
              background:#17243a;
              border-color:#344b6c;
          }
          #page-aifinder input:focus,
          #page-aifinder select:focus {
              border-color:#60a5fa;
              box-shadow:0 0 0 3px rgba(37,99,235,.2);
          }
          #page-aifinder .ai-finder-form .full .btn {
              background:#2563eb;
              border-color:#2563eb;
          }
          #page-aifinder .phone-card {
              background:#fff;
              border-color:#e2e8f0;
              color:#0f172a;
          }
          #page-aifinder .phone-card .phone-price { color:#0f172a; }
          .cookie-banner {
              background:#0f172a;
              border-top-color:#2c405e;
          }
          .cookie-banner p a { color:#93c5fd !important; }

          @media (max-width:768px) {
              .header-right .user-btn,
              .header-right .admin-badge { background:#2563eb; border-color:#2563eb; }
          }
          /* ===== Restored preferred palette: deep navy / clean white / electric blue ===== */
          :root {
              --bg-primary:#f6f8fb;
              --bg-secondary:#0f172a;
              --bg-card:#ffffff;
              --bg-input:#f8fafc;
              --text-primary:#0f172a;
              --text-secondary:#475569;
              --text-muted:#64748b;
              --border-color:#e2e8f0;
              --accent:#2563eb;
              --success:#0ea5e9;
              --danger:#e11d48;
              --warning:#f59e0b;
              --shadow:0 8px 24px rgba(15,23,42,.06);
              --shadow-hover:0 16px 34px rgba(15,23,42,.12);
          }
          [data-theme="dark"] {
              --bg-primary:#0b1120;
              --bg-secondary:#080d18;
              --bg-card:#111c2f;
              --bg-input:#17243a;
              --text-primary:#f8fafc;
              --text-secondary:#c1ccdc;
              --text-muted:#8796aa;
              --border-color:#263852;
              --shadow:0 10px 28px rgba(0,0,0,.24);
              --shadow-hover:0 18px 40px rgba(0,0,0,.36);
          }
          body { background:var(--bg-primary); color:var(--text-primary); }
          ::-webkit-scrollbar-track { background:var(--bg-primary); }
          ::-webkit-scrollbar-thumb { background:#aab8ca; }
          [data-theme="dark"] ::-webkit-scrollbar-thumb { background:#466080; }
          .sidebar {
              background:#0f172a;
              border-right-color:#1e293b;
              box-shadow:10px 0 28px rgba(15,23,42,.1);
          }
          .sidebar-brand span {
              background:#3b82f6;
              border-color:#3b82f6;
              color:#fff;
              -webkit-text-fill-color:#fff;
          }
          .sidebar-nav .nav-item:hover,
          .sidebar-footer .nav-item:hover { background:#18263d; }
          .sidebar-nav .nav-item.active,
          .sidebar-footer .nav-item.active {
              background:#2563eb;
              color:#fff;
          }
          .sidebar-footer { border-top-color:#263852; }
          .sidebar-footer .nav-item .dev-badge { color:#93c5fd; }
          .header {
              background:#0f172a;
              border-bottom-color:#1e293b;
          }
          .header-right .theme-toggle,
          .header-right .notif-btn,
          .header-right .user-btn {
              background:#17243a;
              border-color:#2c405e;
          }
          .header-right .theme-toggle:hover,
          .header-right .notif-btn:hover {
              background:#203250;
              border-color:#60a5fa;
          }
          .header-right .user-btn,
          .header-right .admin-badge {
              background:#2563eb;
              border-color:#2563eb;
              color:#fff;
              -webkit-text-fill-color:#fff;
          }
          .card,
          .stat-card,
          .filter-bar,
          .phone-card {
              border-color:var(--border-color);
              box-shadow:0 1px 2px rgba(15,23,42,.03);
          }
          .card-header { border-bottom-color:var(--border-color); }
          .stat-card { border-top-color:#3b82f6; }
          .stat-icon {
              background:#eff6ff !important;
              color:#2563eb;
          }
          [data-theme="dark"] .stat-icon {
              background:#17345f !important;
              color:#93c5fd;
          }
          .filter-bar input:focus,
          .filter-bar select:focus,
          .admin-form .form-group input:focus,
          .admin-form .form-group select:focus,
          .admin-form .form-group textarea:focus {
              border-color:#60a5fa;
              box-shadow:0 0 0 3px rgba(37,99,235,.16);
          }
          .btn {
              background:#2563eb;
              border-color:#2563eb;
              color:#fff;
          }
          .btn:hover,
          #page-aifinder .ai-finder-form .full .btn:hover { background:#1d4ed8; }
          .btn-outline:hover {
              background:#2563eb;
              border-color:#2563eb;
              color:#fff;
          }
          .btn-success { background:#0ea5e9; border-color:#0ea5e9; }
          .btn-danger { background:#e11d48; border-color:#e11d48; }
          .phone-card:hover { border-color:#93c5fd; }
          .phone-card .phone-img-wrap {
              background:#f1f5f9;
              border-color:#e2e8f0;
          }
          [data-theme="dark"] .phone-card .phone-img-wrap {
              background:#17243a;
              border-color:#263852;
          }
          .phone-card .phone-img-wrap .emoji-fallback { border-color:#64748b; }
          .phone-card .phone-img-wrap .emoji-fallback::before { border-color:#94a3b8; }
          .phone-card .phone-img-wrap .emoji-fallback::after { background:#64748b; }
          .phone-card .score-badge,
          .phone-card .rating-badge,
          .score-badge.gaming,
          .score-badge.camera,
          .score-badge.battery,
          .news-content .tag {
              background:#eff6ff;
              color:#1d4ed8;
          }
          [data-theme="dark"] .phone-card .score-badge,
          [data-theme="dark"] .phone-card .rating-badge,
          [data-theme="dark"] .score-badge.gaming,
          [data-theme="dark"] .score-badge.camera,
          [data-theme="dark"] .score-badge.battery,
          [data-theme="dark"] .news-content .tag {
              background:#17345f;
              color:#bfdbfe;
          }
          #page-news > .card,
          #page-browse > .filter-bar,
          #page-toplists > .tab-content > .card,
          #page-favorites > .card,
          #page-aifinder > .card,
          #page-pricehistory > .card,
          #page-pricealerts > .card,
          #page-profile > .card { border-top-color:#3b82f6; }
          .tabs .tab.active { background:#2563eb; color:#fff; }
          .compare-table th {
              background:#17243a;
              border-color:#2c405e;
          }
          .compare-table .highlight {
              background:#eff6ff;
              color:#1d4ed8;
          }
          [data-theme="dark"] .compare-table .highlight {
              background:#17345f;
              color:#bfdbfe;
          }
          .empty-state .icon::before { border-color:#3b82f6; }
          #page-aifinder > .card {
              background:#0f172a;
              border-color:#1e293b;
              border-top-color:#3b82f6;
          }
          #page-aifinder .card-header {
              background:#16243a;
              border-bottom-color:#2c405e;
          }
          #page-aifinder .ai-finder-form { background:#0f172a; }
          #page-aifinder input,
          #page-aifinder select {
              background:#17243a;
              border-color:#344b6c;
              color:#f5f6fa;
          }
          #page-aifinder input::placeholder { color:#8796aa; }
          #page-aifinder input:focus,
          #page-aifinder select:focus {
              border-color:#60a5fa;
              box-shadow:0 0 0 3px rgba(37,99,235,.2);
          }
          #page-aifinder .ai-finder-form .full .btn {
              background:#2563eb;
              border-color:#2563eb;
              color:#fff;
          }
          #page-aifinder .phone-card {
              background:#fff;
              border-color:#e2e8f0;
              color:#0f172a;
          }
          #page-aifinder .phone-card .phone-price { color:#0f172a; }
          .cookie-banner {
              background:#0f172a;
              border-top-color:#2c405e;
          }
          .cookie-banner p a { color:#93c5fd !important; }
          @media (max-width:768px) {
              .header-right .user-btn,
              .header-right .admin-badge {
                  background:#2563eb;
                  border-color:#2563eb;
                  color:#fff;
                  -webkit-text-fill-color:#fff;
              }
          }
      

/* ===== styles.css block 3 ===== */
          /* ===== Premium phone discovery dashboard ===== */
          :root {
              --premium-ink:#0a1020;
              --premium-navy:#0f1b35;
              --premium-blue:#4f7cff;
              --premium-violet:#8b5cf6;
              --premium-sky:#b9d7ff;
              --premium-paper:#f7f9fc;
              --premium-line:#dfe6f1;
          }

          body {
              background:
                  radial-gradient(circle at 88% 2%, rgba(79,124,255,.07), transparent 25rem),
                  var(--bg-primary);
          }

          .sidebar {
              background:linear-gradient(180deg, #0b1428 0%, #101d39 100%);
              border-right:1px solid rgba(255,255,255,.08);
              box-shadow:16px 0 40px rgba(10,16,32,.12);
          }
          .sidebar-brand {
              padding-bottom:30px;
              letter-spacing:-.055em;
          }
          .sidebar-brand span {
              background:linear-gradient(135deg, var(--premium-blue), var(--premium-violet));
              box-shadow:0 8px 20px rgba(79,124,255,.28);
          }
          .sidebar-nav .nav-item,
          .sidebar-footer .nav-item {
              min-height:46px;
              border:1px solid transparent;
              border-radius:10px;
              color:#9eacc4;
          }
          .sidebar-nav .nav-item:hover,
          .sidebar-footer .nav-item:hover {
              background:rgba(255,255,255,.07);
              border-color:rgba(255,255,255,.06);
          }
          .sidebar-nav .nav-item.active,
          .sidebar-footer .nav-item.active {
              background:linear-gradient(135deg, #4f7cff, #6d63f5);
              box-shadow:0 8px 18px rgba(52,91,210,.28);
          }
          .sidebar-nav .nav-item .icon,
          .sidebar-footer .nav-item .icon {
              filter:none;
              opacity:1;
          }
          .sidebar-footer { border-top-color:rgba(255,255,255,.1); }

          .header {
              background:rgba(15,23,42,.94);
              border-bottom-color:rgba(255,255,255,.08);
              box-shadow:0 1px 0 rgba(255,255,255,.03);
              backdrop-filter:blur(16px);
          }
          .header-right .theme-toggle,
          .header-right .notif-btn,
          .header-right .user-btn {
              border-color:rgba(255,255,255,.1);
              background:rgba(255,255,255,.08);
          }
          .header-right .user-btn,
          .header-right .admin-badge {
              background:linear-gradient(135deg, var(--premium-blue), var(--premium-violet));
              border-color:transparent;
              box-shadow:0 6px 16px rgba(79,124,255,.22);
          }

          .page-content { max-width:1600px; padding-top:30px; }
          .card,
          .stat-card,
          .filter-bar,
          .phone-card {
              border-color:var(--premium-line);
              box-shadow:0 1px 2px rgba(15,23,42,.02), 0 8px 22px rgba(15,23,42,.035);
          }
          .card { border-radius:16px; }
          .card-header { padding-bottom:16px; }
          .card-title { letter-spacing:-.035em; }

          /* Dashboard hero */
          .dashboard-hero {
              position:relative;
              display:grid;
              grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
              min-height:300px;
              margin-bottom:20px;
              overflow:hidden;
              border:1px solid #1e3158;
              border-radius:20px;
              background:
                  radial-gradient(circle at 82% 35%, rgba(79,124,255,.32), transparent 18rem),
                  linear-gradient(120deg, #0b1428 0%, #12264c 58%, #172d5a 100%);
              box-shadow:0 18px 40px rgba(15,36,78,.18);
              color:#fff;
          }
          .dashboard-hero::after {
              content:"";
              position:absolute;
              inset:0;
              pointer-events:none;
              background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
              background-size:32px 32px;
              mask-image:linear-gradient(90deg, rgba(0,0,0,.6), transparent 82%);
          }
          .dashboard-hero-copy {
              position:relative;
              z-index:2;
              align-self:center;
              max-width:650px;
              padding:38px 42px;
          }
          .dashboard-eyebrow {
              display:inline-flex;
              align-items:center;
              gap:8px;
              color:#a9c4ff;
              font-size:10px;
              font-weight:800;
              letter-spacing:.16em;
          }
          .dashboard-eyebrow::before {
              content:"";
              width:22px;
              height:2px;
              border-radius:2px;
              background:var(--premium-blue);
          }
          .dashboard-hero h1 {
              max-width:570px;
              margin:14px 0 12px;
              color:#fff;
              font-size:clamp(32px, 4vw, 50px);
              line-height:1.02;
              letter-spacing:-.065em;
          }
          .dashboard-hero p {
              max-width:510px;
              color:#b8c8e3;
              font-size:14px;
              line-height:1.65;
          }
          .dashboard-hero-actions {
              display:flex;
              gap:10px;
              margin-top:24px;
              flex-wrap:wrap;
          }
          .dashboard-hero .btn {
              min-height:42px;
              border-radius:8px;
          }
          .dashboard-hero .hero-primary {
              background:#fff;
              border-color:#fff;
              color:#16316b;
              box-shadow:0 8px 18px rgba(0,0,0,.14);
          }
          .dashboard-hero .hero-primary:hover {
              background:#eaf1ff;
              border-color:#eaf1ff;
          }
          .dashboard-hero .hero-secondary {
              border-color:rgba(255,255,255,.28);
              color:#fff;
          }
          .dashboard-hero .hero-secondary:hover {
              background:rgba(255,255,255,.12);
              border-color:rgba(255,255,255,.5);
              color:#fff;
          }
          .hero-proof {
              display:flex;
              align-items:center;
              gap:8px;
              margin-top:20px;
              color:#91a9cf;
              font-size:11px;
              font-weight:600;
          }
          .proof-dot {
              width:7px;
              height:7px;
              border-radius:50%;
              background:#5ee3b1;
              box-shadow:0 0 0 4px rgba(94,227,177,.12);
          }
          .dashboard-hero-visual {
              position:relative;
              min-height:300px;
              z-index:1;
          }
          .hero-glow {
              position:absolute;
              width:260px;
              height:260px;
              top:18px;
              right:45px;
              border-radius:50%;
              background:radial-gradient(circle, rgba(113,148,255,.4), rgba(113,148,255,0) 68%);
              filter:blur(3px);
          }
          .hero-phone {
              position:absolute;
              width:132px;
              height:254px;
              right:122px;
              top:28px;
              padding:8px;
              transform:rotate(10deg);
              border:2px solid rgba(255,255,255,.44);
              border-radius:25px;
              background:linear-gradient(145deg, #344d83, #0b1831 72%);
              box-shadow:-18px 22px 35px rgba(0,0,0,.3), inset 2px 2px 4px rgba(255,255,255,.2);
          }
          .hero-phone::before {
              content:"";
              position:absolute;
              top:-2px;
              left:34px;
              width:56px;
              height:16px;
              border-radius:0 0 12px 12px;
              background:#0a1020;
          }
          .hero-phone-camera {
              position:absolute;
              top:18px;
              left:16px;
              width:30px;
              height:42px;
              border-radius:9px;
              background:rgba(5,12,28,.55);
              box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
          }
          .hero-phone-camera::before,
          .hero-phone-camera::after {
              content:"";
              position:absolute;
              width:9px;
              height:9px;
              border:2px solid #a9c4ff;
              border-radius:50%;
              left:8px;
          }
          .hero-phone-camera::before { top:7px; }
          .hero-phone-camera::after { top:23px; }
          .hero-phone-screen {
              display:flex;
              flex-direction:column;
              justify-content:flex-end;
              height:100%;
              padding:15px 12px;
              border-radius:17px;
              background:linear-gradient(160deg, rgba(91,126,228,.4), rgba(8,17,36,.8) 65%), radial-gradient(circle at 80% 35%, #92b1ff, transparent 25%);
          }
          .hero-phone-label {
              color:#b8ceff;
              font-size:7px;
              font-weight:800;
              letter-spacing:.12em;
          }
          .hero-phone-screen strong {
              margin-top:6px;
              color:#fff;
              font-size:27px;
              line-height:.9;
              letter-spacing:-.08em;
          }
          .hero-phone-line {
              width:25px;
              height:3px;
              margin-top:12px;
              border-radius:3px;
              background:#fff;
          }
          .hero-float-card {
              position:absolute;
              display:flex;
              flex-direction:column;
              min-width:92px;
              padding:10px 12px;
              border:1px solid rgba(255,255,255,.18);
              border-radius:10px;
              background:rgba(8,18,39,.72);
              box-shadow:0 12px 24px rgba(0,0,0,.2);
              backdrop-filter:blur(12px);
          }
          .hero-float-card strong { color:#fff; font-size:17px; line-height:1.1; }
          .hero-float-card small { color:#a9b9d3; font-size:9px; }
          .hero-float-card-top { top:45px; right:24px; }
          .hero-float-card-top span { color:#ffd36a; font-size:13px; }
          .hero-float-card-bottom { right:28px; bottom:32px; }
          .hero-float-card-bottom strong { color:#9fc0ff; margin-top:4px; }

          .stat-card {
              min-height:104px;
              border-top:0;
              border-left:3px solid var(--premium-blue);
              border-radius:14px;
          }
          .stat-card:nth-child(2) { border-left-color:#27b98a; }
          .stat-card:nth-child(3) { border-left-color:#f3a93d; }
          .stat-card:nth-child(4) { border-left-color:#ec6a8a; }
          .stat-icon {
              border-radius:11px;
              background:#edf3ff !important;
              color:#3169df;
          }
          .stat-info h3 { font-size:28px; }
          .stat-info p { text-transform:none; letter-spacing:0; font-weight:600; }

          .filter-bar {
              border-radius:14px;
              padding:14px;
              background:rgba(255,255,255,.88);
              backdrop-filter:blur(12px);
          }
          .filter-bar input { flex:1 1 240px; min-width:200px; }
          .filter-bar input,
          .filter-bar select {
              min-height:42px;
              border-radius:8px;
          }
          .btn {
              border-radius:8px;
              background:linear-gradient(135deg, #4f7cff, #405de6);
              border-color:#4f7cff;
              box-shadow:0 6px 14px rgba(63,94,218,.16);
          }
          .btn:hover {
              background:linear-gradient(135deg, #426feb, #354fc9);
              box-shadow:0 8px 18px rgba(63,94,218,.22);
          }
          .btn-outline {
              background:transparent;
              border-color:#b8c6dc;
              color:#3f5070;
              box-shadow:none;
          }
          .btn-outline:hover { background:#edf3ff; color:#2454c4; }

          .phone-card {
              border-radius:14px;
              padding:13px;
              transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
          }
          .phone-card:hover {
              transform:translateY(-5px);
              border-color:#8daeff;
              box-shadow:0 18px 34px rgba(36,84,181,.13);
          }
          .phone-card .phone-img-wrap {
              min-height:205px;
              border-radius:10px;
              background:linear-gradient(145deg, #f5f8fd, #e9f0fb);
              border-color:#e1e9f5;
          }
          .phone-card .phone-name { font-size:15px; }
          .phone-card .phone-price { color:#245bd4; }
          .phone-card .phone-specs span {
              background:#f4f7fb;
              border-color:#e3eaf4;
          }
          .phone-card .score-badge,
          .phone-card .rating-badge,
          .score-badge.gaming,
          .score-badge.camera,
          .score-badge.battery,
          .news-content .tag {
              background:#edf3ff;
              color:#245bd4;
          }

          .tabs {
              gap:6px;
              padding:4px;
              border:1px solid var(--premium-line);
              border-radius:10px;
              background:#fff;
          }
          .tabs .tab {
              border-radius:7px;
              text-transform:none;
              font-size:12px;
          }
          .tabs .tab.active {
              background:#edf3ff;
              color:#245bd4;
          }
          .modal { border-radius:18px; }

          [data-theme="dark"] body {
              background:
                  radial-gradient(circle at 88% 2%, rgba(79,124,255,.1), transparent 25rem),
                  var(--bg-primary);
          }
          [data-theme="dark"] .dashboard-hero {
              border-color:#29477f;
              box-shadow:0 18px 40px rgba(0,0,0,.28);
          }
          [data-theme="dark"] .card,
          [data-theme="dark"] .stat-card,
          [data-theme="dark"] .filter-bar,
          [data-theme="dark"] .phone-card {
              box-shadow:0 1px 2px rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.1);
          }
          [data-theme="dark"] .filter-bar { background:rgba(17,28,47,.9); }
          [data-theme="dark"] .stat-icon { background:#17345f !important; color:#9fc0ff; }
          [data-theme="dark"] .phone-card .phone-img-wrap {
              background:linear-gradient(145deg, #17243a, #1d3153);
              border-color:#2b4368;
          }
          [data-theme="dark"] .phone-card .phone-price { color:#9fc0ff; }
          [data-theme="dark"] .phone-card .phone-specs span { background:#17243a; border-color:#2b4368; }
          [data-theme="dark"] .tabs { background:var(--bg-card); }
          [data-theme="dark"] .tabs .tab.active { background:#17345f; color:#bfdbfe; }
          [data-theme="dark"] .btn-outline { color:#c1ccdc; border-color:#466080; }
          [data-theme="dark"] .btn-outline:hover { background:#17345f; color:#bfdbfe; }

          @media (max-width:900px) {
              .dashboard-hero { grid-template-columns:1fr; }
              .dashboard-hero-copy { padding:32px 28px 24px; }
              .dashboard-hero-visual { min-height:180px; }
              .hero-phone { width:108px; height:205px; right:28%; top:-8px; }
              .hero-float-card-top { top:22px; right:10%; }
              .hero-float-card-bottom { right:8%; bottom:18px; }
          }
          @media (max-width:768px) {
              .page-content { padding-top:18px; }
              .dashboard-hero { border-radius:16px; }
              .dashboard-hero-copy { padding:28px 22px 18px; }
              .dashboard-hero h1 { font-size:34px; }
              .dashboard-hero p { font-size:13px; }
              .dashboard-hero-visual { min-height:165px; }
              .hero-phone { right:29%; }
              .hero-float-card { transform:scale(.9); }
              .phone-card .phone-img-wrap { min-height:145px; }
          }

          /* ===== Futurecore layer: HUD details, aurora light and signal motion ===== */
          :root {
              --future-cyan:#5ee7ff;
              --future-lilac:#a78bfa;
              --future-blue:#4f7cff;
          }
          .dashboard-hero {
              min-height:330px;
              border-color:rgba(116,164,255,.42);
              background:
                  radial-gradient(circle at 76% 20%, rgba(94,231,255,.2), transparent 13rem),
                  radial-gradient(circle at 94% 100%, rgba(167,139,250,.24), transparent 18rem),
                  linear-gradient(120deg, #070d1d 0%, #101f43 54%, #172e63 100%);
          }
          .dashboard-hero::before {
              content:"";
              position:absolute;
              width:410px;
              height:410px;
              right:22px;
              top:-42px;
              border:1px solid rgba(94,231,255,.22);
              border-radius:50%;
              box-shadow:
                  0 0 0 18px rgba(94,231,255,.025),
                  0 0 0 38px rgba(94,231,255,.02),
                  0 0 70px rgba(79,124,255,.2);
              transform:rotate(-22deg) scaleX(.62);
              pointer-events:none;
          }
          .dashboard-hero::after {
              opacity:.75;
              mask-image:linear-gradient(90deg, rgba(0,0,0,.8), transparent 94%);
          }
          .dashboard-hero-copy { padding:42px 46px; }
          .dashboard-hero h1 {
              max-width:630px;
              font-size:clamp(34px, 4.3vw, 56px);
              text-shadow:0 8px 30px rgba(0,0,0,.2);
          }
          .hero-gradient-word {
              background:linear-gradient(90deg, #fff 10%, var(--future-cyan) 50%, var(--future-lilac) 95%);
              -webkit-background-clip:text;
              background-clip:text;
              color:transparent;
          }
          .dashboard-eyebrow { color:var(--future-cyan); }
          .dashboard-eyebrow::before { background:var(--future-cyan); box-shadow:0 0 12px rgba(94,231,255,.8); }
          .dashboard-hero p { color:#c1d0ea; }
          .hero-proof { margin-top:16px; }
          .hero-signal {
              display:flex;
              align-items:center;
              gap:10px;
              margin-top:18px;
              color:#8298c0;
              font-size:9px;
              font-weight:800;
              letter-spacing:.04em;
              text-transform:uppercase;
          }
          .signal-live {
              display:inline-flex;
              align-items:center;
              gap:6px;
              color:#8ff2d0;
          }
          .signal-live-dot {
              width:5px;
              height:5px;
              border-radius:50%;
              background:#5ee3b1;
              box-shadow:0 0 0 3px rgba(94,227,177,.12), 0 0 10px rgba(94,227,177,.8);
              animation:signalPulse 1.8s ease-in-out infinite;
          }
          .signal-divider {
              width:1px;
              height:12px;
              background:rgba(159,188,236,.3);
          }
          @keyframes signalPulse {
              0%, 100% { opacity:.55; transform:scale(.8); }
              50% { opacity:1; transform:scale(1.25); }
          }
          .dashboard-hero-visual::before {
              content:"SYSTEM / 04";
              position:absolute;
              right:30px;
              top:18px;
              color:rgba(170,198,255,.55);
              font-size:8px;
              font-weight:800;
              letter-spacing:.15em;
          }
          .dashboard-hero-visual::after {
              content:"◌  READY TO DISCOVER";
              position:absolute;
              right:30px;
              bottom:15px;
              color:rgba(170,198,255,.55);
              font-size:8px;
              font-weight:800;
              letter-spacing:.12em;
          }
          .hero-glow {
              width:320px;
              height:320px;
              right:40px;
              top:0;
              background:radial-gradient(circle, rgba(94,231,255,.3), rgba(79,124,255,.08) 42%, transparent 70%);
              animation:auroraBreath 5s ease-in-out infinite;
          }
          @keyframes auroraBreath {
              0%, 100% { opacity:.65; transform:scale(.94); }
              50% { opacity:1; transform:scale(1.05); }
          }
          .hero-phone {
              border-color:rgba(175,210,255,.58);
              background:linear-gradient(145deg, #4169bd, #08142f 72%);
              box-shadow:-20px 24px 44px rgba(0,0,0,.38), inset 2px 2px 5px rgba(255,255,255,.28), 0 0 38px rgba(79,124,255,.22);
              animation:phoneFloat 5s ease-in-out infinite;
          }
          @keyframes phoneFloat {
              0%, 100% { transform:rotate(10deg) translateY(0); }
              50% { transform:rotate(8deg) translateY(-8px); }
          }
          .hero-phone-screen {
              background:
                  linear-gradient(160deg, rgba(93,151,255,.3), rgba(5,14,34,.85) 68%),
                  radial-gradient(circle at 82% 26%, rgba(94,231,255,.7), transparent 22%);
          }
          .hero-phone-line { background:var(--future-cyan); box-shadow:0 0 10px rgba(94,231,255,.8); }
          .hero-float-card {
              border-color:rgba(133,178,255,.35);
              background:linear-gradient(145deg, rgba(27,54,108,.78), rgba(7,17,39,.82));
              box-shadow:0 16px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
          }
          .hero-float-card-top { animation:cardFloat 5s ease-in-out 1s infinite; }
          .hero-float-card-bottom { animation:cardFloat 5s ease-in-out 2.2s infinite; }
          @keyframes cardFloat {
              0%, 100% { transform:translateY(0); }
              50% { transform:translateY(-5px); }
          }
          .hero-float-card-top span { color:var(--future-cyan); }

          .stat-card {
              position:relative;
              overflow:hidden;
              border-left-color:var(--future-blue);
              background:linear-gradient(145deg, #fff, #fbfcff);
          }
          .stat-card::after {
              content:"";
              position:absolute;
              width:90px;
              height:90px;
              right:-30px;
              bottom:-42px;
              border:1px solid rgba(79,124,255,.12);
              border-radius:50%;
              box-shadow:0 0 0 12px rgba(79,124,255,.035), 0 0 0 24px rgba(79,124,255,.02);
          }
          .stat-card:nth-child(2)::after { border-color:rgba(39,185,138,.14); }
          .stat-card:nth-child(3)::after { border-color:rgba(243,169,61,.16); }
          .stat-card:nth-child(4)::after { border-color:rgba(236,106,138,.16); }
          .stat-card:nth-child(2) { border-left-color:#27b98a; }
          .stat-card:nth-child(3) { border-left-color:#f3a93d; }
          .stat-card:nth-child(4) { border-left-color:#ec6a8a; }

          .phone-card {
              position:relative;
              background:linear-gradient(145deg, #fff 0%, #fff 72%, #f6f9ff 100%);
          }
          .phone-card::before {
              content:"";
              position:absolute;
              inset:0;
              border-radius:inherit;
              pointer-events:none;
              background:linear-gradient(135deg, rgba(79,124,255,.12), transparent 24%);
              opacity:0;
              transition:opacity .2s ease;
          }
          .phone-card:hover::before { opacity:1; }
          .phone-card .phone-img-wrap {
              background:
                  radial-gradient(circle at 70% 25%, rgba(151,189,255,.42), transparent 25%),
                  linear-gradient(145deg, #f6f9ff, #e8f0ff);
          }
          .phone-card .phone-price { font-size:18px; }

          [data-theme="dark"] .stat-card,
          [data-theme="dark"] .phone-card {
              background:linear-gradient(145deg, #111c2f 0%, #111c2f 72%, #14223d 100%);
          }
          [data-theme="dark"] .dashboard-hero {
              background:
                  radial-gradient(circle at 76% 20%, rgba(94,231,255,.18), transparent 13rem),
                  radial-gradient(circle at 94% 100%, rgba(167,139,250,.2), transparent 18rem),
                  linear-gradient(120deg, #050a16 0%, #0d1b39 54%, #122653 100%);
          }
          [data-theme="dark"] .phone-card .phone-img-wrap {
              background:
                  radial-gradient(circle at 70% 25%, rgba(94,147,255,.32), transparent 25%),
                  linear-gradient(145deg, #182944, #14233d);
          }
          [data-theme="dark"] .stat-card::after { border-color:rgba(116,164,255,.18); }

          @media (max-width:768px) {
              .dashboard-hero-copy { padding:28px 22px 18px; }
              .dashboard-hero h1 { font-size:34px; }
              .hero-signal { flex-wrap:wrap; gap:7px; }
              .dashboard-hero-visual::before,
              .dashboard-hero-visual::after { display:none; }
          }
          @media (prefers-reduced-motion:reduce) {
              .signal-live-dot,
              .hero-glow,
              .hero-phone,
              .hero-float-card-top,
              .hero-float-card-bottom { animation:none; }
          }

          /* ===== Advanced interface layer: command search + discovery radar ===== */
          .header {
              position:sticky;
              overflow:hidden;
          }
          .header::before {
              content:"";
              position:absolute;
              top:0;
              left:0;
              right:0;
              height:1px;
              background:linear-gradient(90deg, transparent, var(--future-cyan), var(--future-lilac), transparent);
              opacity:.72;
          }
          .header-command {
              display:flex;
              align-items:center;
              gap:9px;
              width:min(360px, 34vw);
              min-height:34px;
              margin-left:auto;
              margin-right:22px;
              padding:0 8px 0 11px;
              border:1px solid rgba(157,185,240,.22);
              border-radius:8px;
              background:rgba(255,255,255,.065);
              color:#aebddd;
              cursor:pointer;
              font:600 11px/1 var(--font);
              text-align:left;
              transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
          }
          .header-command:hover,
          .header-command:focus-visible {
              border-color:rgba(94,231,255,.7);
              background:rgba(94,231,255,.08);
              box-shadow:0 0 0 3px rgba(94,231,255,.08), 0 0 22px rgba(79,124,255,.12);
              outline:none;
          }
          .command-icon {
              color:var(--future-cyan);
              font-size:19px;
              font-weight:400;
              line-height:0;
          }
          .command-placeholder {
              flex:1;
              overflow:hidden;
              white-space:nowrap;
              text-overflow:ellipsis;
          }
          .header-command kbd {
              flex:0 0 auto;
              padding:4px 6px;
              border:1px solid rgba(157,185,240,.22);
              border-radius:4px;
              color:#8da5d0;
              font-size:9px;
              letter-spacing:.04em;
          }
          .dashboard-hero-visual { isolation:isolate; }
          .hero-radar {
              position:absolute;
              z-index:0;
              width:300px;
              height:300px;
              top:14px;
              right:36px;
              border:1px solid rgba(94,231,255,.18);
              border-radius:50%;
              background:
                  radial-gradient(circle at center, rgba(94,231,255,.13) 0 2px, transparent 3px),
                  repeating-radial-gradient(circle at center, rgba(94,231,255,.13) 0 1px, transparent 1px 46px);
              box-shadow:0 0 0 1px rgba(167,139,250,.08), 0 0 60px rgba(79,124,255,.12);
              opacity:.92;
          }
          .hero-radar::before,
          .hero-radar::after {
              content:"";
              position:absolute;
              background:rgba(94,231,255,.14);
          }
          .hero-radar::before {
              width:100%;
              height:1px;
              top:50%;
              left:0;
          }
          .hero-radar::after {
              width:1px;
              height:100%;
              top:0;
              left:50%;
          }
          .radar-ring {
              position:absolute;
              border:1px dashed rgba(167,139,250,.26);
              border-radius:50%;
          }
          .radar-ring-one { inset:42px; }
          .radar-ring-two { inset:88px; border-color:rgba(94,231,255,.28); }
          .radar-sweep {
              position:absolute;
              inset:0;
              border-radius:50%;
              overflow:hidden;
              animation:radarRotate 7s linear infinite;
          }
          .radar-sweep::before {
              content:"";
              position:absolute;
              width:50%;
              height:50%;
              top:0;
              left:50%;
              transform-origin:0 100%;
              background:linear-gradient(135deg, rgba(94,231,255,.28), transparent 68%);
              clip-path:polygon(0 100%, 100% 0, 0 0);
          }
          @keyframes radarRotate { to { transform:rotate(360deg); } }
          .radar-core {
              position:absolute;
              top:50%;
              left:50%;
              display:flex;
              flex-direction:column;
              align-items:center;
              justify-content:center;
              width:64px;
              height:64px;
              transform:translate(-50%,-50%);
              border:1px solid rgba(94,231,255,.42);
              border-radius:50%;
              background:rgba(9,20,46,.74);
              box-shadow:0 0 0 7px rgba(94,231,255,.04), 0 0 24px rgba(94,231,255,.18);
          }
          .radar-core span {
              color:var(--future-cyan);
              font-size:9px;
              font-weight:900;
              letter-spacing:.14em;
          }
          .radar-core strong {
              margin-top:3px;
              color:#dce7ff;
              font-size:8px;
              letter-spacing:.12em;
          }
          .hero-phone { z-index:2; }
          .hero-float-card { z-index:3; }
          .hero-phone::after {
              content:"";
              position:absolute;
              left:10px;
              right:10px;
              top:76px;
              height:1px;
              background:linear-gradient(90deg, transparent, rgba(94,231,255,.8), transparent);
              box-shadow:0 0 10px rgba(94,231,255,.8);
              opacity:.7;
              animation:phoneScan 3.4s ease-in-out infinite;
          }
          @keyframes phoneScan {
              0%, 100% { transform:translateY(-16px); opacity:.15; }
              50% { transform:translateY(128px); opacity:.8; }
          }
          .phone-card::after {
              content:"VIEW DETAILS  ↗";
              position:absolute;
              right:15px;
              bottom:14px;
              color:#4f7cff;
              font-size:8px;
              font-weight:900;
              letter-spacing:.08em;
              opacity:0;
              transform:translateY(4px);
              transition:opacity .2s ease, transform .2s ease;
          }
          .phone-card:hover::after { opacity:1; transform:translateY(0); }
          .filter-bar {
              position:relative;
              border-top:2px solid transparent;
              background-image:linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(90deg, var(--future-blue), var(--future-cyan));
              background-origin:border-box;
              background-clip:padding-box, border-box;
          }
          .filter-bar:focus-within {
              box-shadow:0 0 0 3px rgba(79,124,255,.08), 0 10px 26px rgba(15,23,42,.06);
          }
          [data-theme="dark"] .header-command {
              background:rgba(255,255,255,.06);
              border-color:rgba(157,185,240,.2);
          }
          [data-theme="dark"] .hero-radar { background-color:rgba(7,16,35,.18); }
          [data-theme="dark"] .filter-bar {
              background-image:linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(90deg, var(--future-blue), var(--future-cyan));
          }
          [data-theme="dark"] .phone-card::after { color:#9fc0ff; }
          @media (max-width:900px) {
              .header-command { width:280px; margin-right:14px; }
              .hero-radar { right:10%; }
          }
          @media (max-width:768px) {
              .header-command { display:none; }
              .hero-radar { width:230px; height:230px; top:4px; right:18%; }
              .hero-phone::after { display:none; }
          }
          @media (prefers-reduced-motion:reduce) {
              .radar-sweep,
              .hero-phone::after { animation:none; }
          }

           /* Keep the mobile menu icon and every page title on one line. */
           /* The command-search layer used overflow:hidden on the header,
              which clipped the notification dropdown below the header. */
           .header {
               overflow:visible;
           }
           .header-right {
               position:relative;
           }
           .header-right .notif-btn {
               position:relative;
           }
           .notif-dropdown {
               top:calc(100% + 12px);
               right:0;
               z-index:300;
               width:min(320px, calc(100vw - 28px));
               background:#ffffff;
               color:#17233b;
               border:1px solid #d8e2f0;
               box-shadow:0 18px 40px rgba(15,35,75,.2);
           }
           .notif-dropdown .notif-item {
               color:#17233b;
               border-bottom-color:#e4ebf5;
           }
           .notif-dropdown .notif-item:first-child {
               color:#245bd4;
               background:linear-gradient(90deg,#edf3ff,#ffffff);
               font-weight:800 !important;
           }
           .notif-dropdown .notif-item:hover {
               background:#f1f6ff;
           }
           .notif-dropdown .notif-item .notif-time {
               color:#6c7e99;
           }
           [data-theme="dark"] .notif-dropdown {
               background:#111d30;
               color:#e8f0ff;
               border-color:#29477f;
               box-shadow:0 18px 40px rgba(0,0,0,.42);
           }
           [data-theme="dark"] .notif-dropdown .notif-item {
               color:#e8f0ff;
               border-bottom-color:#29405f;
           }
           [data-theme="dark"] .notif-dropdown .notif-item:first-child {
               color:#9fc0ff;
               background:linear-gradient(90deg,#17345f,#111d30);
           }
           [data-theme="dark"] .notif-dropdown .notif-item:hover {
               background:#172a48;
           }
           [data-theme="dark"] .notif-dropdown .notif-item .notif-time {
               color:#9bacc7;
           }
           .header-left {
               display:flex;
               align-items:center;
               gap:10px;
               min-width:0;
           }
           .header-left .menu-toggle {
               flex:0 0 auto;
               align-items:center;
               justify-content:center;
               line-height:1;
           }
           .header-title {
               display:block;
               min-width:0;
               white-space:nowrap;
               overflow:hidden;
               text-overflow:ellipsis;
           }

           /* PhoneHub brand mark: a phone connected to a discovery node. */
           .sidebar-brand .brand-mark {
               position:relative;
               display:inline-block;
               width:36px;
               height:36px;
               flex:0 0 36px;
               padding:0;
               border-radius:11px;
               background:linear-gradient(135deg,#4f7cff,#8b5cf6);
               box-shadow:0 8px 20px rgba(79,124,255,.3);
               font-size:0 !important;
               -webkit-text-fill-color:initial;
           }
           .sidebar-brand .brand-phone {
               position:absolute;
               left:10px;
               top:7px;
               width:14px;
               height:22px;
               border:2px solid #fff;
               border-radius:4px;
               font-size:0 !important;
           }
           .sidebar-brand .brand-phone::after {
               content:"";
               position:absolute;
               left:4px;
               bottom:3px;
               width:3px;
               height:3px;
               border-radius:50%;
               background:#fff;
           }
           .sidebar-brand .brand-mark::before {
               content:"";
               position:absolute;
               right:7px;
               top:13px;
               width:10px;
               height:2px;
               border-radius:2px;
               background:#5ee7ff;
               transform:rotate(-28deg);
           }
           .sidebar-brand .brand-node {
               position:absolute;
               width:5px;
               height:5px;
               border-radius:50%;
               background:#5ee7ff;
               box-shadow:0 0 0 3px rgba(94,231,255,.16);
               font-size:0 !important;
           }
           .sidebar-brand .brand-node-one { top:7px; right:4px; }
           .sidebar-brand .brand-node-two { top:17px; right:2px; }
           .sidebar-brand .brand-name {
               font-size:20px !important;
               display:inline-block;
               width:auto;
               color:#e8f1ff;
               background:none;
               -webkit-text-fill-color:#e8f1ff;
           }
           .sidebar-brand {
               background:none;
               -webkit-text-fill-color:initial;
               white-space:nowrap;
               overflow:visible;
           }
           .sidebar-brand .brand-mark {
               display:block;
               width:38px;
               height:38px;
               background:none;
               box-shadow:0 8px 20px rgba(79,124,255,.3);
               overflow:visible;
           }
        /* ===== FULL PAGE PHONE DETAIL ===== */
.phone-detail-page {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    overflow-y: auto;
    animation: slideUp 0.3s ease;
    padding-bottom: 40px;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.detail-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(12px);
}

.detail-back-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    transition: all 0.2s;
}

.detail-back-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.detail-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 24px 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Eye-catching quick-access button to the manually-added YouTube videos */
@keyframes ytqPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,0,60,0.55), 0 8px 20px rgba(255,0,60,0.25); }
    70%  { box-shadow: 0 0 0 14px rgba(255,0,60,0), 0 8px 20px rgba(255,0,60,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(255,0,60,0), 0 8px 20px rgba(255,0,60,0.25); }
}
.ytq-btn {
    background: linear-gradient(135deg, #ff0033, #ff5e3a);
    background-size: 200% 200%;
    color: #fff;
    border: none;
    font-weight: 800;
    letter-spacing: .3px;
    animation: ytqPulse 2.2s ease-in-out infinite;
    transition: transform .18s ease, filter .18s ease;
}
.ytq-btn:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.08);
}
.ytq-btn:active {
    transform: translateY(0) scale(0.97);
}
.ytq-btn .ytq-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    color: #ff0033;
    font-size: 11px;
    flex-shrink: 0;
}

.detail-gallery {
    position: relative;
}

.detail-gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-main-img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 16px;
    background: var(--bg-input);
    object-fit: cover;
    border: 1px solid var(--border-color);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.detail-main-img:hover {
  transform: scale(1.01);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.detail-gallery-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--text-primary);
  box-shadow: 0 6px 18px rgba(15,23,42,0.14);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.detail-gallery-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.detail-gallery-nav.prev { left: 12px; }
.detail-gallery-nav.next { right: 12px; }

.detail-gallery-count {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.detail-thumbnails {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.detail-thumbnails img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.detail-thumbnails img:hover,
.detail-thumbnails img.active {
    border-color: var(--accent);
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-brand {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.detail-name {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.detail-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.detail-rating .stars {
    color: #f59e0b;
    font-size: 18px;
}

.detail-price {
    font-size: 32px;
    font-weight: 900;
    color: var(--accent);
}

.detail-price .original {
    font-size: 18px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 12px;
}

.detail-price .discount {
    font-size: 14px;
    color: var(--success);
    font-weight: 700;
    margin-left: 8px;
}

.detail-price .detail-price-tag {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px 10px;
    margin-left: 10px;
}

.detail-scores {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.detail-scores .score {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.detail-scores .score.gaming { background: rgba(108,92,231,0.15); color: #6c5ce7; }
.detail-scores .score.camera { background: rgba(0,184,148,0.15); color: #00b894; }
.detail-scores .score.battery { background: rgba(253,203,110,0.2); color: #b7950b; }

.detail-last-updated {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--text-muted);
  font-size: 12px;
}

.detail-estimate-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px dashed var(--accent);
  background: var(--bg-secondary);
}
.detail-estimate-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.detail-estimate-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-estimate-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.detail-estimate-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}
.detail-estimate-note {
  font-size: 11.5px;
  color: var(--text-muted);
}

.detail-insights {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.detail-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
}

.detail-insight-card,
.detail-price-snapshot,
.detail-score-card {
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-secondary);
}

.detail-insight-card h3,
.detail-price-snapshot h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.detail-score-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.detail-score-number {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: var(--accent);
}

.detail-score-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.detail-pros-cons h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.detail-pros-cons ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 13px;
}

.detail-pros-cons li::before {
  margin-right: 6px;
  font-weight: 800;
}

.detail-pros li::before { content: "✓"; color: var(--success); }
.detail-cons li::before { content: "−"; color: var(--danger); }

.detail-price-snapshot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.detail-price-snapshot .snapshot-price {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent);
}

.detail-price-snapshot .snapshot-meta {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.detail-price-bar {
  height: 9px;
  margin: 18px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-input);
}

.detail-price-bar span {
  display: block;
  height: 100%;
  min-width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #8b5cf6);
}

.detail-price-note {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.detail-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.88);
}

.detail-lightbox.open { display: flex; }

.detail-lightbox img {
  max-width: min(92vw, 900px);
  max-height: 86vh;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.detail-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background: rgba(15,23,42,0.7);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.detail-lightbox-nav {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background: rgba(15,23,42,0.7);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.detail-lightbox-nav.prev { left: 24px; }
.detail-lightbox-nav.next { right: 24px; }

@media (max-width: 700px) {
  .detail-insights-grid { grid-template-columns: 1fr; }
  .detail-insights { padding: 0 16px; }
  .detail-score-card { gap: 6px; padding: 14px; }
  .detail-score-number { font-size: 20px; }
  .detail-lightbox-nav.prev { left: 10px; }
  .detail-lightbox-nav.next { right: 10px; }
}

.detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.detail-actions .btn {
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
}

.detail-actions .btn-fav {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.detail-actions .btn-fav.active {
    background: #e17055;
    color: #fff;
    border-color: #e17055;
}

.detail-actions .btn-compare {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.detail-buy-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.detail-buy-links .buy-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.detail-buy-links .buy-btn.flipkart {
    background: #2874f0;
    color: #fff;
}

.detail-buy-links .buy-btn.amazon {
    background: #ff9900;
    color: #fff;
}

.detail-buy-links .buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.detail-tabs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.detail-tabs .tabs {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.detail-tabs .tab {
    padding: 14px 20px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.detail-tabs .tab.active {
    border-bottom-color: var(--accent);
    background: transparent;
    color: var(--accent);
}

.detail-tab-content {
    padding: 24px 0;
    display: none;
}

.detail-tab-content.active {
    display: block;
}

.detail-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.detail-spec-item {
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.detail-spec-item .label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-spec-item .value {
    font-size: 15px;
    font-weight: 700;
    margin-top: 4px;
}

.detail-spec-item .value .chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    margin-top: 2px;
}

.detail-similar {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 32px;
}

.detail-similar h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.detail-similar .phone-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Review section inside detail */
.detail-reviews {
    max-width: 800px;
}

.detail-reviews .review-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-reviews .review-item:last-child {
    border-bottom: none;
}

.detail-review-form {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid var(--border-color);
}

/* EMI Section */
.detail-emi {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    margin-top: 8px;
}

.detail-emi .emi-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.detail-emi input,
.detail-emi select {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    color: var(--text-primary);
}

.detail-emi .emi-result {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .detail-hero {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 20px;
    }
    
    .detail-name {
        font-size: 22px;
    }
    
    .detail-price {
        font-size: 26px;
    }
    
    .detail-tabs {
        padding: 0 16px;
    }
    
    .detail-tabs .tab {
        font-size: 11px;
        padding: 10px 14px;
    }
    
    .detail-specs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .detail-similar {
        padding: 0 16px;
    }
    
    .detail-header {
        padding: 12px 16px;
    }
    
    .detail-back-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .detail-actions .btn {
        padding: 10px 18px;
        font-size: 12px;
    }
    
    .detail-hero {
        padding: 12px;
    }
    
    .detail-specs-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .detail-similar .phone-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .detail-specs-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-emi .emi-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .detail-actions {
        flex-direction: column;
    }
    
    .detail-actions .btn {
        width: 100%;
        justify-content: center;
    }
        }
        /* ===== Speed Test Styles ===== */
.speed-test-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg-input);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-top: 8px;
    flex-wrap: wrap;
}

.speed-test-container .speed-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.speed-test-container .speed-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.speed-test-container .speed-bar {
    flex: 1;
    min-width: 100px;
    height: 6px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.speed-test-container .speed-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    background: linear-gradient(90deg, var(--success), var(--accent));
}

.speed-test-container .speed-status {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
}

.speed-status.fast { background: rgba(0,184,148,0.15); color: #00b894; }
.speed-status.good { background: rgba(253,203,110,0.2); color: #b7950b; }
.speed-status.slow { background: rgba(225,112,85,0.15); color: #e17055; }

.speed-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.speed-details .detail-item {
    text-align: center;
}

.speed-details .detail-item .value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.speed-details .detail-item .label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
                                }
/* ============================================================
   SEARCH SUGGESTIONS - COMPLETE STYLES
   ============================================================ */

/* সাজেশন বক্স */
#searchSuggestions {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
}

/* সাজেশন আইটেম */
#searchSuggestions .suggestion-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.15s ease !important;
    gap: 12px !important;
}

#searchSuggestions .suggestion-item:last-child {
    border-bottom: none !important;
}

#searchSuggestions .suggestion-item > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#searchSuggestions .suggestion-item:hover {
    background: var(--bg-input) !important;
}

/* হাইলাইট টেক্সট */
#searchSuggestions .suggestion-item .highlight {
    font-weight: 700 !important;
    color: var(--accent) !important;
}

/* ডিটেইল টেক্সট (দাম, র্যাম, 5G) */
#searchSuggestions .suggestion-item .suggestion-detail {
    font-size: 11px !important;
    color: var(--text-muted) !important;
}

/* ============================================================
   ট্যাগ স্টাইল - ডান পাশে, ছোট, একই সাইজ
   ============================================================ */

#searchSuggestions .suggestion-item .suggestion-tag {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.4 !important;
    min-width: 44px !important;
    transition: transform 0.15s ease !important;
}

/* ট্যাগ কালার */
#searchSuggestions .suggestion-tag.budget {
    background: #64748b !important;
}

#searchSuggestions .suggestion-tag.midrange {
    background: #f59e0b !important;
}

#searchSuggestions .suggestion-tag.premium {
    background: #8b5cf6 !important;
}

#searchSuggestions .suggestion-tag.flagship {
    background: #e11d48 !important;
}

/* হোভার এ ট্যাগ */
#searchSuggestions .suggestion-item:hover .suggestion-tag {
    transform: scale(1.05);
}

/* ============================================================
   SMART SEARCH BUTTON
   ============================================================ */

#searchSuggestBtn {
    background: linear-gradient(135deg, #4f7cff, #8b5cf6) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(79, 124, 255, 0.35) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    cursor: pointer !important;
}

#searchSuggestBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(79, 124, 255, 0.45) !important;
}

#searchSuggestBtn:active {
    transform: scale(0.96) !important;
}

/* ============================================================
   KEYBOARD NAVIGATION - ACTIVE ITEM
   ============================================================ */

.suggestion-item.active {
    background: var(--bg-input) !important;
    border-left: 3px solid var(--accent) !important;
}

.suggestion-item.active .suggestion-tag {
    transform: scale(1.05);
}

/* ============================================================
   DARK MODE
   ============================================================ */

[data-theme="dark"] #searchSuggestions {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] #searchSuggestions .suggestion-tag.budget {
    background: #475569 !important;
}

[data-theme="dark"] #searchSuggestions .suggestion-tag.midrange {
    background: #b45309 !important;
}

[data-theme="dark"] #searchSuggestions .suggestion-tag.premium {
    background: #7c3aed !important;
}

[data-theme="dark"] #searchSuggestions .suggestion-tag.flagship {
    background: #be123c !important;
}

[data-theme="dark"] #searchSuggestBtn {
    box-shadow: 0 4px 14px rgba(79, 124, 255, 0.25) !important;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .filter-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .filter-bar > div:first-child {
        grid-column: 1 / -1 !important;
    }
    
    #searchSuggestBtn {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        padding: 10px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    
    #searchSuggestions .suggestion-item {
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    #searchSuggestions .suggestion-item > div:first-child {
        white-space: normal !important;
        flex: 1 1 100% !important;
    }
    
    #searchSuggestions .suggestion-item .suggestion-tag {
        font-size: 9px !important;
        padding: 1px 8px !important;
        min-width: 38px !important;
    }
}

@media (max-width: 480px) {
    .filter-bar {
        grid-template-columns: 1fr !important;
    }
    
    #searchSuggestBtn {
        font-size: 11px !important;
        padding: 8px !important;
        min-height: 34px !important;
    }
            }
        /* ===== SEARCH SUGGESTIONS FIX ===== */
.filter-bar {
    position: relative;  /* ← এটা গুরুত্বপূর্ণ */
    z-index: 10;
}

#searchSuggestions {
    position: absolute;
    top: 100%;           /* ← Filter Bar-এর ঠিক নিচে */
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

/* ফোন গ্রিড ঠিক রাখতে */
.phone-grid {
    position: relative;
    z-index: 1;
             }

        
        
           /* Custom profile icon picker. */
           #authModal .avatar-picker {
               margin:4px 0 16px;
               padding:13px 14px 14px;
               border:1px solid #d8e3f2;
               border-radius:12px;
               background:linear-gradient(145deg,#f8fbff,#eef4ff);
           }
           #authModal .avatar-picker-heading {
               display:flex;
               align-items:baseline;
               justify-content:space-between;
               gap:8px;
               margin-bottom:10px;
           }
           #authModal .avatar-picker-heading label {
               color:#243b68;
               font-size:12px;
               font-weight:800;
           }
           #authModal .avatar-picker-heading span {
               color:#7284a2;
               font-size:10px;
           }
           #authModal .avatar-options {
               display:grid;
               grid-template-columns:repeat(6,1fr);
               gap:8px;
           }
           #authModal .avatar-option {
               display:flex;
               align-items:center;
               justify-content:center;
               width:100%;
               aspect-ratio:1;
               min-height:42px;
               padding:0;
               border:1px solid #d6e1f0;
               border-radius:10px;
               background:#fff;
               font-size:21px;
               line-height:1;
               cursor:pointer;
               transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
           }
           #authModal .avatar-option:nth-child(3n+1) { background:linear-gradient(145deg,#edf3ff,#dce8ff); }
           #authModal .avatar-option:nth-child(3n+2) { background:linear-gradient(145deg,#effdf8,#d8f7e9); }
           #authModal .avatar-option:nth-child(3n) { background:linear-gradient(145deg,#fff7e8,#ffe7bd); }
           #authModal .avatar-option:hover {
               transform:translateY(-2px) scale(1.04);
               border-color:#8aaeff;
               box-shadow:0 6px 14px rgba(58,100,198,.16);
           }
           #authModal .avatar-option.selected {
               border:2px solid #4f7cff;
               box-shadow:0 0 0 3px rgba(79,124,255,.16),0 7px 16px rgba(58,100,198,.18);
               transform:translateY(-1px);
           }
           [data-theme="dark"] #authModal .avatar-picker {
               border-color:#29477f;
               background:linear-gradient(145deg,#142443,#172f58);
           }
           [data-theme="dark"] #authModal .avatar-picker-heading label { color:#dce7ff; }
           [data-theme="dark"] #authModal .avatar-picker-heading span { color:#9bacc7; }
           [data-theme="dark"] #authModal .avatar-option {
               border-color:#35537e;
               background:#17243a;
           }
           [data-theme="dark"] #authModal .avatar-option:nth-child(3n+1) { background:linear-gradient(145deg,#1b3765,#1a2d51); }
           [data-theme="dark"] #authModal .avatar-option:nth-child(3n+2) { background:linear-gradient(145deg,#123a36,#16312f); }
           [data-theme="dark"] #authModal .avatar-option:nth-child(3n) { background:linear-gradient(145deg,#4b351b,#3c2a18); }
           [data-theme="dark"] #authModal .avatar-option.selected {
               border-color:#70a0ff;
               box-shadow:0 0 0 3px rgba(112,160,255,.18),0 7px 16px rgba(0,0,0,.24);
           }
           @media (max-width:420px) {
               #authModal .avatar-options { grid-template-columns:repeat(6,1fr); gap:6px; }
               #authModal .avatar-option { min-height:36px; font-size:18px; border-radius:8px; }
           }

           /* ===== Colourful section system =====
              Keeps every dashboard block distinct while preserving
              the premium PhoneHub blue foundation. */
           #page-dashboard > .grid-4 .stat-card {
               border:1px solid transparent;
               border-left-width:4px;
               box-shadow:0 10px 24px rgba(30,55,110,.08);
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(1) {
               border-color:#c9d9ff;
               border-left-color:#4f7cff;
               background:linear-gradient(135deg,#f7faff 0%,#e8efff 100%);
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(2) {
               border-color:#bfead9;
               border-left-color:#22b982;
               background:linear-gradient(135deg,#f8fffc 0%,#e1f8ee 100%);
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(3) {
               border-color:#f4d59e;
               border-left-color:#f0a43c;
               background:linear-gradient(135deg,#fffdf7 0%,#fff0d5 100%);
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(4) {
               border-color:#f2c4d2;
               border-left-color:#e9688a;
               background:linear-gradient(135deg,#fff9fb 0%,#ffe7ef 100%);
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(1) .stat-icon {
               background:#dce8ff !important;
               color:#3169df;
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(2) .stat-icon {
               background:#d2f4e5 !important;
               color:#159668;
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(3) .stat-icon {
               background:#ffebc5 !important;
               color:#c8790d;
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(4) .stat-icon {
               background:#ffd9e5 !important;
               color:#d34c72;
           }
           #page-dashboard > .grid-4 .stat-card:nth-child(1) .stat-info h3 { color:#245bd4; }
           #page-dashboard > .grid-4 .stat-card:nth-child(2) .stat-info h3 { color:#13895f; }
           #page-dashboard > .grid-4 .stat-card:nth-child(3) .stat-info h3 { color:#b96b08; }
           #page-dashboard > .grid-4 .stat-card:nth-child(4) .stat-info h3 { color:#c73f67; }
           #page-dashboard > .grid-4 .stat-card:hover {
               transform:translateY(-4px);
               box-shadow:0 16px 30px rgba(30,55,110,.13);
           }

           #page-dashboard > .grid-2 > .card {
               position:relative;
               overflow:hidden;
               border:1px solid transparent;
               box-shadow:0 10px 24px rgba(30,55,110,.07);
           }
           #page-dashboard > .grid-2 > .card::before {
               content:"";
               position:absolute;
               left:0;
               right:0;
               top:0;
               height:4px;
               background:linear-gradient(90deg,#4f7cff,#5ee7ff);
           }
           #page-dashboard > .grid-2 > .card:nth-child(1) {
               border-color:#c9d9ff;
               background:linear-gradient(145deg,#ffffff 0%,#f0f5ff 100%);
           }
           #page-dashboard > .grid-2 > .card:nth-child(1)::before {
               background:linear-gradient(90deg,#4f7cff,#7d6bff);
           }
           #page-dashboard > .grid-2 > .card:nth-child(2) {
               border-color:#c7e6e3;
               background:linear-gradient(145deg,#ffffff 0%,#effcf9 100%);
           }
           #page-dashboard > .grid-2 > .card:nth-child(2)::before {
               background:linear-gradient(90deg,#20b486,#5ee7c0);
           }
           #page-dashboard > .grid-2 > .card .card-header {
               position:relative;
               border-bottom:1px solid rgba(79,124,255,.15);
           }
           #page-dashboard > .grid-2 > .card:nth-child(2) .card-header {
               border-bottom-color:rgba(32,180,134,.18);
           }
           #page-dashboard > .grid-2 > .card:nth-child(1) .card-title { color:#245bd4; }
           #page-dashboard > .grid-2 > .card:nth-child(2) .card-title { color:#13895f; }
           #recentPhonesList > div {
               border-bottom-color:#dce7f8 !important;
               transition:background .2s ease,padding-left .2s ease;
           }
           #recentPhonesList > div:hover {
               padding-left:8px !important;
               background:linear-gradient(90deg,rgba(79,124,255,.1),transparent);
           }
           #recentPhonesList > div:last-child,
           #latestNewsList > div:last-child { border-bottom:none !important; }
           #recentPhonesList > div strong,
           #recentPhonesList > div b { color:#173b83; }
           #recentPhonesList > div small,
           #latestNewsList > div small { color:#647da6; }
           #latestNewsList > div {
               border-bottom-color:#d8eee8 !important;
               transition:background .2s ease,padding-left .2s ease;
           }
           #latestNewsList > div:hover {
               padding-left:8px !important;
               background:linear-gradient(90deg,rgba(32,180,134,.1),transparent);
           }

           /* Give the other product sections the same colour language. */
           #page-browse > .filter-bar {
               border-color:#c9d9ff;
               background-image:linear-gradient(#fff,#fff),linear-gradient(90deg,#4f7cff,#5ee7ff);
           }
           #page-compare > .card,
           #page-toplists .tab-content > .card,
           #page-favorites > .card,
           #page-pricehistory > .card,
           #page-pricealerts > .card,
           #page-profile > .card {
               border-top:4px solid #8b5cf6;
               background:linear-gradient(145deg,#ffffff 0%,#f5f1ff 100%);
           }
           #page-news > .card {
               border-top:4px solid #20b486;
               background:linear-gradient(145deg,#ffffff 0%,#effcf9 100%);
           }
           #page-favorites > .card { border-top-color:#ec4899; background:linear-gradient(145deg,#ffffff 0%,#fdf3f8 100%); }
           #page-pricehistory > .card { border-top-color:#8b5cf6; background:linear-gradient(145deg,#ffffff 0%,#f7f5ff 100%); }
           #page-pricealerts > .card { border-top-color:#f43f5e; background:linear-gradient(145deg,#ffffff 0%,#fdf4f5 100%); }
           #page-profile > .card { border-top-color:#4f7cff; background:linear-gradient(145deg,#ffffff 0%,#eef4ff 100%); }
           #page-compare > .card .compare-selector,
           #page-toplists .tab-content > .card .card-header,
           #page-news > .card .card-header,
           #page-favorites > .card .card-header,
           #page-pricehistory > .card .card-header,
           #page-pricealerts > .card .card-header,
           #page-profile > .card .card-header {
               border-bottom-color:rgba(124,92,255,.16);
           }
           [data-theme="dark"] #page-dashboard > .grid-4 .stat-card,
           [data-theme="dark"] #page-dashboard > .grid-2 > .card,
           [data-theme="dark"] #page-compare > .card,
           [data-theme="dark"] #page-toplists .tab-content > .card,
           [data-theme="dark"] #page-news > .card,
           [data-theme="dark"] #page-favorites > .card,
           [data-theme="dark"] #page-pricehistory > .card,
           [data-theme="dark"] #page-pricealerts > .card,
           [data-theme="dark"] #page-profile > .card {
               color:var(--text-primary);
           }
           [data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(1) { background:linear-gradient(135deg,#142443,#172f58); border-color:#29477f; border-left-color:#6d9bff; }
           [data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(2) { background:linear-gradient(135deg,#112c2b,#123e39); border-color:#1e6558; border-left-color:#45d3a1; }
           [data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(3) { background:linear-gradient(135deg,#33291b,#493316); border-color:#725329; border-left-color:#ffc05d; }
           [data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(4) { background:linear-gradient(135deg,#321c2a,#4a2033); border-color:#74334f; border-left-color:#ff7fa0; }
           [data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(1) { background:linear-gradient(145deg,#111d30,#162746); border-color:#29477f; }
           [data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(2) { background:linear-gradient(145deg,#111d30,#12372f); border-color:#1e6558; }
           [data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(1) .card-title { color:#9fc0ff; }
           [data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(2) .card-title { color:#7ce8c4; }
           [data-theme="dark"] #recentPhonesList > div strong,
           [data-theme="dark"] #recentPhonesList > div b { color:#c5d8ff; }

           /* Night mode parity: every inner page should feel like the dashboard,
              not like a light card pasted onto a dark canvas. */
           [data-theme="dark"] #page-browse > .filter-bar {
               background-image:linear-gradient(#111d30,#111d30),linear-gradient(90deg,#4f7cff,#5ee7ff) !important;
               border-color:#29477f;
               color:#e8f0ff;
               box-shadow:0 10px 26px rgba(0,0,0,.18);
           }
           [data-theme="dark"] #page-compare > .card,
           [data-theme="dark"] #page-toplists .tab-content > .card,
           [data-theme="dark"] #page-news > .card,
           [data-theme="dark"] #page-favorites > .card,
           [data-theme="dark"] #page-pricehistory > .card,
           [data-theme="dark"] #page-pricealerts > .card,
           [data-theme="dark"] #page-profile > .card {
               background:linear-gradient(145deg,#111d30 0%,#14223d 100%);
               border-color:#29477f;
               color:#e8f0ff;
               box-shadow:0 10px 26px rgba(0,0,0,.18);
           }
           [data-theme="dark"] #page-news > .card {
               background:linear-gradient(145deg,#102b31 0%,#123c3a 100%);
               border-color:#1e6558;
           }
           [data-theme="dark"] #page-favorites > .card {
               background:linear-gradient(145deg,#241a29 0%,#2c1e33 100%);
               border-color:#5c2e4a;
           }
           [data-theme="dark"] #page-pricehistory > .card {
               background:linear-gradient(145deg,#1e1b3a 0%,#241f45 100%);
               border-color:#4c3f8f;
           }
           [data-theme="dark"] #page-pricealerts > .card {
               background:linear-gradient(145deg,#241a1e 0%,#2d1e23 100%);
               border-color:#5c2e38;
           }
           [data-theme="dark"] #page-profile > .card {
               background:linear-gradient(145deg,#142443 0%,#172f58 100%);
           }
           [data-theme="dark"] #page-compare > .card .card-header,
           [data-theme="dark"] #page-toplists .tab-content > .card .card-header,
           [data-theme="dark"] #page-news > .card .card-header,
           [data-theme="dark"] #page-favorites > .card .card-header,
           [data-theme="dark"] #page-pricehistory > .card .card-header,
           [data-theme="dark"] #page-pricealerts > .card .card-header,
           [data-theme="dark"] #page-profile > .card .card-header {
               border-bottom-color:rgba(159,192,255,.2);
           }
           [data-theme="dark"] #page-news > .card .card-header { border-bottom-color:rgba(94,231,192,.2); }
           [data-theme="dark"] #page-favorites > .card .card-header { border-bottom-color:rgba(236,72,153,.22); }
           [data-theme="dark"] #page-pricehistory > .card .card-header { border-bottom-color:rgba(167,139,250,.22); }
           [data-theme="dark"] #page-pricealerts > .card .card-header { border-bottom-color:rgba(244,63,94,.22); }
           [data-theme="dark"] #page-toplists .top-list-item,
           [data-theme="dark"] #page-news .news-item,
           [data-theme="dark"] #page-favorites .phone-card,
           [data-theme="dark"] #page-pricehistory .history-item,
           [data-theme="dark"] #page-pricealerts .alert-item {
               border-bottom-color:#29405f;
           }
           [data-theme="dark"] #page-toplists .top-list-item .rank.gold { color:#ffd36a; }
           [data-theme="dark"] #page-toplists .top-list-item .rank.silver { color:#c5d0df; }
           [data-theme="dark"] #page-toplists .top-list-item .rank.bronze { color:#f0a982; }
           [data-theme="dark"] #page-toplists .top-list-item .name,
           [data-theme="dark"] #page-toplists .top-list-item .value,
           [data-theme="dark"] #page-news .news-content h4,
           [data-theme="dark"] #page-news .news-content p {
               color:#e8f0ff;
           }
           [data-theme="dark"] #page-toplists .top-list-item .detail,
           [data-theme="dark"] #page-news .news-content .meta,
           [data-theme="dark"] #page-news .news-content .tag {
               color:#a9bddb;
           }
           [data-theme="dark"] #page-compare .compare-selector > span,
           [data-theme="dark"] #page-compare .card-title,
           [data-theme="dark"] #page-toplists .card-title,
           [data-theme="dark"] #page-news .card-title,
           [data-theme="dark"] #page-favorites .card-title,
           [data-theme="dark"] #page-pricehistory .card-title,
           [data-theme="dark"] #page-pricealerts .card-title,
           [data-theme="dark"] #page-profile .card-title {
               color:#f2f6ff;
               filter:none;
           }

           @media (max-width:768px) {
               #page-dashboard > .grid-4 .stat-card {
                   border-left-width:3px;
                   border-radius:12px;
               }
               #page-dashboard > .grid-2 > .card { border-radius:14px; }
           }
        /* Advanced Filters Container */
#advancedFiltersContainer {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
}

#advancedFiltersContainer select,
#advancedFiltersContainer button {
    flex: 1 1 auto;
    min-width: 120px;
}

@media (max-width: 768px) {
    #advancedFiltersContainer select {
        flex: 1 1 45%;
        min-width: 0;
    }
    #advancedFiltersContainer button {
        flex: 1 1 100%;
    }
  /* ===== FIX: Phone Grid Size ===== */
.phone-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

.phone-card {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* মোবাইলের জন্য */
@media (max-width: 768px) {
    .phone-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .phone-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
        }
  /* ===== REVIEW SECTION - ENHANCED UI ===== */
.detail-review-form {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px solid var(--border-color);
}

.detail-review-form h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-review-form .review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.detail-review-form .review-grid .full-width {
    grid-column: 1 / -1;
}

.detail-review-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-review-form .form-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-review-form .form-group input:not([type="checkbox"]):not([type="file"]),
.detail-review-form .form-group select,
.detail-review-form .form-group textarea {
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    font-family: var(--font);
    transition: all 0.2s ease;
    width: 100%;
    min-height: 44px;
}

.detail-review-form .form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.detail-review-form .form-group input[type="file"] {
    width: 100%;
    min-height: 0;
    padding: 12px;
    background: var(--bg-input);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.detail-review-form .form-group input[type="file"]::file-selector-button {
    padding: 8px 14px;
    margin-right: 10px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.detail-review-form .form-group input:focus:not([type="checkbox"]):not([type="file"]),
.detail-review-form .form-group select:focus,
.detail-review-form .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.detail-review-form .form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.detail-review-form .star-rating {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 0;
}

.detail-review-form .star-rating .star-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-muted);
    padding: 0 2px;
}

.detail-review-form .star-rating .star-btn.active {
    color: #f59e0b;
    transform: scale(1.1);
}

.detail-review-form .star-rating .star-btn:hover {
    transform: scale(1.2);
    color: #f59e0b;
}

.detail-review-form .star-rating .rating-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 8px;
}

.detail-review-form .submit-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}

.detail-review-form .submit-row .btn {
    padding: 12px 32px;
    border-radius: 10px;
    font-weight: 700;
    min-height: 48px;
}

.detail-review-form .submit-row .btn-success {
    background: var(--success);
    border-color: var(--success);
}

.detail-review-form .submit-row .btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.detail-review-form .submit-row .btn-outline:hover {
    background: var(--bg-input);
}

/* ===== REVIEW ITEMS ===== */
.detail-reviews .review-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-reviews .review-item:last-child {
    border-bottom: none;
}

.detail-reviews .review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-reviews .review-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.detail-reviews .review-user .avatar-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.detail-reviews .review-stars {
    color: #f59e0b;
    font-size: 16px;
    letter-spacing: 1px;
}

.detail-reviews .review-date {
    font-size: 12px;
    color: var(--text-muted);
}

.detail-reviews .review-comment {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.detail-reviews .review-pros-cons {
    display: flex;
    gap: 20px;
    margin-top: 6px;
    flex-wrap: wrap;
    font-size: 13px;
}

.detail-reviews .review-pros-cons .pros {
    color: var(--success);
}

.detail-reviews .review-pros-cons .cons {
    color: var(--danger);
}

/* ===== VERIFIED OWNER BADGE ===== */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0,184,148,0.12);
    color: var(--success);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(0,184,148,0.3);
    white-space: nowrap;
}

/* ===== COMMUNITY Q&A ===== */
.ask-question-form {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ask-question-form input {
    flex: 1 1 220px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
}
.qna-item {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
}
.qna-question {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.qna-avatar {
    font-size: 20px;
    flex-shrink: 0;
}
.qna-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.qna-meta strong { color: var(--text-primary); font-size: 13px; }
.qna-date { font-size: 11px; }
.qna-text {
    margin-top: 3px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.qna-answers {
    margin-top: 10px;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qna-answer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-top: 1px dashed var(--border-color);
    padding-top: 10px;
}
.qna-answer-form {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.qna-answer-form input {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
}

/* ===== COMMUNITY POLLS ===== */
.poll-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.poll-question {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
}
.poll-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.poll-option {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--bg-input);
    position: relative;
    overflow: hidden;
}
.poll-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.poll-option.voted { cursor: default; border-color: var(--accent); }
.poll-option-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.poll-option-bar {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}
.poll-option-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #00cec9);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.poll-footer {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .detail-review-form .review-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .detail-review-form .review-grid .full-width {
        grid-column: auto;
    }
    
    .detail-review-form .star-rating .star-btn {
        font-size: 24px;
    }
    
    .detail-review-form .submit-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .detail-review-form .submit-row .btn {
        width: 100%;
        justify-content: center;
    }
    
    .detail-review-form .form-group input,
    .detail-review-form .form-group select,
    .detail-review-form .form-group textarea {
        min-height: 40px;
        font-size: 13px;
    }
    
    .detail-review-form .form-group textarea {
        min-height: 80px;
    }
}

@media (max-width: 480px) {
    .detail-reviews .review-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .detail-review-form .star-rating .star-btn {
        font-size: 20px;
    }
  }
                                          }
        /* ============================================================
   🏷️ BRAND CHIPS - 2 LINE LAYOUT
   ============================================================ */

#brandChips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    flex: 1 1 100%;
    justify-content: stretch;
    align-items: stretch;
}

/* প্রতিটি ব্র্যান্ড চিপ */
.brand-chip {
    --brand-color: #64748b;
    --brand-soft: rgba(100, 116, 139, .12);
    --brand-text: #fff;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 7px 4px;
    border: 1px solid color-mix(in srgb, var(--brand-color) 45%, var(--border-color));
    border-radius: 20px;
    background: var(--brand-soft);
    color: var(--brand-color);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap; /* টেক্সট এক লাইনে রাখে */
}

.brand-chip .brand-logo {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    object-fit: contain;
}

/* হোভার ইফেক্ট */
.brand-chip:hover {
    background: color-mix(in srgb, var(--brand-color) 18%, var(--bg-card));
    border-color: var(--brand-color);
    transform: translateY(-1px);
}

/* সিলেক্টেড ব্র্যান্ড */
.brand-chip.active {
    background: var(--brand-color);
    color: var(--brand-text);
    border-color: var(--brand-color);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.brand-chip.active .brand-logo {
    filter: brightness(0) invert(1);
}

/* 🆕 ব্র্যান্ড কন্টেইনার - ২ লাইন ফিক্স */
#brandListContainer {
    display: none;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* মোবাইলের জন্য */
@media (max-width: 480px) {
    #brandChips {
        gap: 7px;
    }

    .brand-chip {
        min-height: 40px;
        font-size: 10px;
        padding: 6px 2px;
        gap: 3px;
    }

    .brand-chip .brand-logo {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }
}
        
/* ============================================================
   📊 RANKINGS PAGE - BIGGER & CLEARER TABS
   ============================================================ */

#page-rankings .card {
    border-top: 4px solid var(--accent);
}

/* 🆕 Bigger Tabs */
/* ============================================================
   📊 RANKINGS PAGE - 2 PER ROW (6 LINES TOTAL)
   ============================================================ */

#rankingsTabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;  /* প্রতি লাইনে ২টি */
    gap: 8px !important;
    padding: 12px !important;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

#rankingsTabs .tab {
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    min-height: 44px;
    text-align: center;
    cursor: pointer;
    border: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    width: 100%;
}

#rankingsTabs .tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

#rankingsTabs .tab:hover:not(.active) {
    background: var(--bg-card);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* 📱 Mobile - আরও বড় */
@media (max-width: 768px) {
    #rankingsTabs {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    
    #rankingsTabs .tab {
        font-size: 12px !important;
        padding: 10px 12px !important;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    #rankingsTabs {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        padding: 8px !important;
    }
    
    #rankingsTabs .tab {
        font-size: 10px !important;
        padding: 8px 8px !important;
        min-height: 36px;
    }
                                         }
/* ============================================================
   📊 RANKINGS LIST - CLEAN & READABLE
   ============================================================ */

#rankingsContent .rank-item {
    display: grid;
    grid-template-columns: 44px 32px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 16px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
}

#rankingsContent .rank-item:hover {
    background: var(--bg-input);
    transform: translateX(6px);
}

#rankingsContent .rank-item:last-child {
    border-bottom: none;
}

#rankingsContent .rank-number {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-muted);
    text-align: center;
    min-width: 30px;
}

#rankingsContent .rank-number.gold { color: #f59e0b; }
#rankingsContent .rank-number.silver { color: #94a3b8; }
#rankingsContent .rank-number.bronze { color: #d97706; }

#rankingsContent .rank-icon {
    font-size: 24px;
    text-align: center;
}

#rankingsContent .rank-info .name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

#rankingsContent .rank-info .detail {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}

#rankingsContent .rank-rating {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

#rankingsContent .rank-rating .stars {
    color: #f59e0b;
    font-size: 14px;
}

#rankingsContent .rank-action .btn {
    min-height: 36px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 700;
}

/* 🏆 Top 3 highlights */
#rankingsContent .rank-item.top-1 {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.03));
    border-left: 4px solid #f59e0b;
}
#rankingsContent .rank-item.top-2 {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.02));
    border-left: 4px solid #94a3b8;
}
#rankingsContent .rank-item.top-3 {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.10), rgba(217, 119, 6, 0.02));
    border-left: 4px solid #d97706;
}

/* ============================================================
   📱 MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    #rankingsContent .rank-item {
        grid-template-columns: 34px 24px 1fr auto;
        gap: 10px;
        padding: 14px 12px;
    }
    
    #rankingsContent .rank-item .rank-rating {
        display: none;  /* রেটিং লুকান মোবাইলে */
    }
    
    #rankingsContent .rank-number {
        font-size: 15px;
        min-width: 24px;
    }
    
    #rankingsContent .rank-icon {
        font-size: 20px;
    }
    
    #rankingsContent .rank-info .name {
        font-size: 14px;
    }
    
    #rankingsContent .rank-info .detail {
        font-size: 11px;
    }
    
    #rankingsContent .rank-action .btn {
        font-size: 11px;
        padding: 4px 12px;
        min-height: 30px;
    }
}

@media (max-width: 480px) {
    #rankingsContent .rank-item {
        grid-template-columns: 28px 18px 1fr auto;
        gap: 6px;
        padding: 12px 10px;
    }
    
    #rankingsContent .rank-number {
        font-size: 13px;
        min-width: 20px;
    }
    
    #rankingsContent .rank-icon {
        font-size: 16px;
    }
    
    #rankingsContent .rank-info .name {
        font-size: 13px;
    }
    
    #rankingsContent .rank-info .detail {
        font-size: 10px;
    }
    
    #rankingsContent .rank-action .btn {
        font-size: 9px;
        padding: 2px 8px;
        min-height: 26px;
    }
             }

    /* ============================================================
   📊 COMPARE PAGE - MOBILE FIRST
   ============================================================ */

#page-compare .card {
    border-top: 4px solid var(--accent);
}

/* Compare Results - Mobile Card View */
.compare-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.compare-result-grid .compare-phone-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}

.compare-result-grid .compare-phone-card.winner {
    border-color: var(--accent);
    border-width: 2px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.02));
}

.compare-result-grid .compare-phone-card.winner::after {
    content: "👑 BEST";
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0.05em;
}

.compare-result-grid .compare-phone-card .phone-name {
    font-size: 13px;
    font-weight: 700;
    margin-top: 4px;
}

.compare-result-grid .compare-phone-card .phone-brand {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compare-result-grid .compare-phone-card .phone-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
    margin: 6px 0;
}

.compare-result-grid .compare-phone-card .spec-item {
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
}

.compare-result-grid .compare-phone-card .spec-item:last-child {
    border-bottom: none;
}

.compare-result-grid .compare-phone-card .spec-item .label {
    color: var(--text-muted);
    font-weight: 600;
}

.compare-result-grid .compare-phone-card .spec-item .value {
    font-weight: 700;
}

.compare-result-grid .compare-phone-card .spec-item .value.best {
    color: var(--accent);
}

.compare-result-grid .compare-phone-card .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    color: var(--danger);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
}

/* Score badges in compare */
.compare-score {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    margin: 2px 0;
}

.compare-score.gaming { background: rgba(108,92,231,0.15); color: #6c5ce7; }
.compare-score.camera { background: rgba(0,184,148,0.15); color: #00b894; }
.compare-score.battery { background: rgba(253,203,110,0.2); color: #b7950b; }

/* Winner highlight row */
.compare-winner-row {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.03));
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: var(--accent);
}

/* Compare History Items */
.compare-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
    flex-wrap: wrap;
}

.compare-history-item:last-child {
    border-bottom: none;
}

.compare-history-item .history-phones {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.compare-history-item .history-phones span {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    margin: 2px 2px;
    font-size: 11px;
}

.compare-history-item .history-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.compare-history-item .history-actions {
    display: flex;
    gap: 4px;
}

.compare-history-item .history-actions .btn {
    font-size: 10px;
    padding: 4px 10px;
    min-height: 30px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .compare-result-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .compare-result-grid .compare-phone-card {
        padding: 10px;
    }
    
    .compare-result-grid .compare-phone-card .phone-price {
        font-size: 14px;
    }
    
    .compare-result-grid .compare-phone-card .spec-item {
        font-size: 11px;
        padding: 3px 0;
    }
    
    .compare-history-item {
        padding: 8px 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .compare-history-item .history-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    #page-compare .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .compare-result-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .compare-result-grid .compare-phone-card.winner::after {
        font-size: 8px;
        padding: 1px 8px;
    }
    
    .compare-result-grid .compare-phone-card .phone-name {
        font-size: 14px;
    }
    
    .compare-result-grid .compare-phone-card .phone-price {
        font-size: 16px;
    }
            }
        /* ============================================================
   📊 COMPARE - SEARCH SUGGESTIONS
   ============================================================ */

.compare-suggestion-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.15s ease !important;
    gap: 8px !important;
}

.compare-suggestion-item:last-child {
    border-bottom: none !important;
}

.compare-suggestion-item:hover {
    background: var(--bg-input) !important;
}

.compare-suggestion-item .highlight {
    font-weight: 700 !important;
    color: var(--accent) !important;
}

.compare-suggestion-item .suggestion-detail {
    font-size: 11px !important;
    color: var(--text-muted) !important;
}

.compare-suggestion-item .suggestion-tag {
    flex-shrink: 0 !important;
    font-size: 9px !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.4 !important;
    min-width: 38px !important;
}

.compare-suggestion-tag.budget { background: #64748b !important; }
.compare-suggestion-tag.midrange { background: #f59e0b !important; }
.compare-suggestion-tag.premium { background: #8b5cf6 !important; }
.compare-suggestion-tag.flagship { background: #e11d48 !important; }

/* Selected phone display */
.compare-selected-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.compare-selected-phone .remove-sel {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
}

.compare-selected-phone .remove-sel:hover {
    opacity: 1;
                }
        
/* ============================================================
   📊 SMART SCORES - COMPLETE FIX (SCORE CENTERED)
   ============================================================ */

#page-smartscores .card {
    border-top: 4px solid var(--accent);
}

/* Score Grid */
#scoreGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.score-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 16px 20px;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.score-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

/* Top Pick ribbon */
.score-card-top {
    border: 1.5px solid #f59e0b;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15);
}
.ss2-top-ribbon {
    position: absolute;
    top: 12px;
    left: -34px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 3px 38px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* Compare quick-add button */
.ss2-compare-fab {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}
.ss2-compare-fab:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.08);
}

/* Score Ring - Fully Centered */
.score-ring {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    flex-shrink: 0;
}

.score-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring .bg-circle {
    fill: none;
    stroke: var(--bg-input);
    stroke-width: 7;
}

.score-ring .progress-circle {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s ease;
}

/* ✅ স্কোর নম্বর - পুরোপুরি মাঝখানে */
.score-ring .score-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    margin: 0;  /* ← margin সরানো হয়েছে */
}

/* "Overall" লেবেল - নিচে */
.score-ring .score-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Score Details */
.score-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--border-color);
}

.score-details-grid .score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 3px 0;
}

.score-details-grid .score-item .label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
}

.score-details-grid .score-item .value {
    font-weight: 800;
    font-size: 13px;
    padding: 1px 8px;
    border-radius: 4px;
    min-width: 28px;
    text-align: center;
}

.score-details-grid .score-item .value.excellent {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}
.score-details-grid .score-item .value.good {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
}
.score-details-grid .score-item .value.average {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}
.score-details-grid .score-item .value.poor {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Phone Info */
.score-card .score-phone-brand {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.score-card .score-phone-name {
    font-size: 18px;
    font-weight: 900;
    margin-top: 2px;
    color: var(--text-primary);
    line-height: 1.2;
}

.score-card .score-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
}

.ss2-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.ss2-mrp {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: line-through;
}
.ss2-discount {
    font-size: 10.5px;
    font-weight: 800;
    color: #22c55e;
    background: rgba(34,197,94,0.12);
    padding: 1px 7px;
    border-radius: 10px;
}

/* Score color classes */
.score-excellent { color: #22c55e; }
.score-good { color: #3b82f6; }
.score-average { color: #f59e0b; }
.score-poor { color: #ef4444; }

/* Filter Bar */
#scoreFilterBar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    align-items: center;
}

#scoreFilterBar select {
    flex: 1;
    min-width: 140px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--font);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

#scoreFilterBar select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#scoreFilterBar .btn {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 13px;
    white-space: nowrap;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #scoreGrid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }
    
    .score-ring {
        width: 80px;
        height: 80px;
        margin: 0 auto 20px;
    }
    
    .score-ring .score-center {
        font-size: 22px;
        margin: 0;
    }
    
    .score-ring .score-label {
        bottom: -20px;
        font-size: 9px;
    }
    
    .score-card {
        padding: 12px 12px 16px;
    }
    
    .score-card .score-phone-name {
        font-size: 14px;
    }
    
    .score-details-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;
    }
    
    .score-details-grid .score-item {
        font-size: 11px;
    }
    
    .score-details-grid .score-item .value {
        font-size: 12px;
    }
    
    #scoreFilterBar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    
    #scoreFilterBar select {
        min-width: 0;
        width: 100%;
    }
    
    #scoreFilterBar .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    #scoreGrid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .score-ring {
        width: 65px;
        height: 65px;
        margin: 0 auto 22px;
    }
    
    .score-ring .score-center {
        font-size: 18px;
        margin: 0;
    }
    
    .score-ring .score-label {
        bottom: -18px;
        font-size: 8px;
    }
    
    .score-card .score-phone-name {
        font-size: 12px;
    }
    
    .score-card .score-price {
        font-size: 13px;
    }
    
    .score-details-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    
    .score-details-grid .score-item {
        font-size: 10px;
        padding: 2px 0;
    }
    
    .score-details-grid .score-item .value {
        font-size: 11px;
        min-width: 24px;
    }
            }
/* ===== LOADING OVERLAY WITH LOGO ===== */
#loadingOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background:
        radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, #4f7cff 22%, transparent), transparent 70%),
        radial-gradient(100% 60% at 50% 110%, color-mix(in srgb, #8b5cf6 18%, transparent), transparent 70%),
        var(--bg-primary);
    display: flex;
    align-items: stretch;
    justify-content: center;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    padding: 0;
    overflow: hidden;
}

#loadingOverlay .loading-panel {
    width: 100%;
    max-width: 640px;
    min-height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 32px 22px calc(28px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

#loadingOverlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* সব লোডিং তথ্য একটাই কার্ডে */
.loading-card {
    width: 100%;
    max-width: 420px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color));
    background: color-mix(in srgb, var(--bg-card, var(--bg-primary)) 88%, transparent);
    box-shadow: 0 18px 50px color-mix(in srgb, #4f7cff 14%, transparent);
    box-sizing: border-box;
}

.loading-card-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


/* 🎯 লোগো অ্যানিমেশন */
.loading-logo {
    position: relative;
    width: 80px;
    height: 80px;
    animation: logoPulse 1.8s ease-in-out infinite;
}

.loading-logo svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 30px rgba(79, 124, 255, 0.3));
}

.loading-logo .logo-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    animation: spin 2s linear infinite;
}

.loading-logo .logo-ring:nth-child(2) {
    inset: -18px;
    border-top-color: transparent;
    border-right-color: var(--future-cyan);
    animation-duration: 3s;
    animation-direction: reverse;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.loading-brand {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #4f7cff, #8b5cf6, #5ee7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 2.5s ease-in-out infinite;
    background-size: 200% 200%;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.loading-sub {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loading-wait {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-align: left;
}

.loading-timer {
    min-width: 72px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
}

.loading-status {
    min-height: 20px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.loading-progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 65%, transparent);
}

.loading-progress-bar {
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--future-cyan));
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: width 0.35s ease;
}

.loading-steps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    color: var(--text-muted);
    font-size: 11.5px;
}

.loading-step {
    padding: 7px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--border-color) 28%, transparent);
}

.loading-step {
    transition: color 0.25s ease, opacity 0.25s ease;
}

.loading-step.active {
    color: var(--accent);
    font-weight: 700;
}

.loading-step.done {
    color: var(--success, #16a34a);
    font-weight: 700;
}

.loading-alert {
    width: min(100%, 360px);
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--danger, #e11d48) 35%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--danger, #e11d48) 10%, transparent);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.45;
}

.loading-alert.offline {
    border-color: color-mix(in srgb, #f59e0b 45%, var(--border-color));
    background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.loading-alert[hidden] {
    display: none;
}

.loading-retry {
    margin-top: 9px;
    min-height: 36px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.loading-retry:disabled {
    cursor: wait;
    opacity: 0.65;
}

.loading-skeleton-list {
    display: grid;
    gap: 10px;
}

.loading-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.loading-skeleton-thumb,
.loading-skeleton-line {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--bg-input), color-mix(in srgb, var(--bg-input) 55%, #fff), var(--bg-input));
    background-size: 220% 100%;
    animation: skeletonShimmer 1.35s ease-in-out infinite;
}

.loading-skeleton-thumb {
    width: 42px;
    height: 52px;
    flex: 0 0 42px;
}

.loading-skeleton-copy {
    flex: 1;
    display: grid;
    gap: 8px;
}

.loading-skeleton-line {
    width: 72%;
    height: 10px;
}

.loading-skeleton-line.short {
    width: 42%;
}

@keyframes skeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.loading-dots {
    display: inline-flex;
    gap: 5px;
    margin-top: 4px;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    animation: dotBounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }
.loading-dots span:nth-child(4) { animation-delay: 0.45s; }
.loading-dots span:nth-child(5) { animation-delay: 0.6s; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
    40% { transform: scale(1.2); opacity: 1; }
}

/* মোবাইলের জন্য */
@media (max-width: 768px) {
    .loading-logo { width: 64px; height: 64px; }
    .loading-brand { font-size: 22px; }
    .loading-sub { font-size: 11px; }
    .loading-dots span { width: 8px; height: 8px; }
}

@media (max-width: 480px) {
    .loading-logo { width: 52px; height: 52px; }
    .loading-brand { font-size: 18px; }
                                      }
                                         
      

/* ===== styles.css block 4 ===== */
          /* ===== Friendly mobile dropdowns =====
             Native select popups are rendered as dark OS-level panels on
             some Android browsers. These lightweight controls keep the
             existing selects as the source of truth, but present a branded,
             touch-friendly menu instead. */
          .ui-select-wrapper {
              position:relative;
              flex:1 1 140px;
              min-width:140px;
          }
          #advancedFiltersContainer .ui-select-wrapper {
              flex:1 1 140px;
          }
          .ui-select-native {
              position:absolute !important;
              width:1px !important;
              height:1px !important;
              padding:0 !important;
              margin:-1px !important;
              overflow:hidden !important;
              clip:rect(0, 0, 0, 0) !important;
              white-space:nowrap !important;
              border:0 !important;
              opacity:0 !important;
              pointer-events:none !important;
          }
          .ui-select-trigger {
              width:100%;
              min-height:42px;
              display:flex;
              align-items:center;
              justify-content:space-between;
              gap:10px;
              padding:9px 12px 9px 14px;
              border:1px solid var(--border-color);
              border-radius:9px;
              background:var(--bg-card);
              color:var(--text-primary);
              font:600 13px/1.2 var(--font);
              text-align:left;
              cursor:pointer;
              transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
          }
          .ui-select-trigger:hover,
          .ui-select-wrapper.open .ui-select-trigger {
              border-color:#7ea7ff;
              box-shadow:0 0 0 3px rgba(37,99,235,.12);
          }
          .ui-select-trigger .ui-select-label {
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
          }
          .ui-select-trigger .ui-select-chevron {
              flex:0 0 auto;
              width:8px;
              height:8px;
              border-right:2px solid var(--text-muted);
              border-bottom:2px solid var(--text-muted);
              transform:rotate(45deg) translateY(-2px);
              transition:transform .2s ease;
          }
          .ui-select-wrapper.open .ui-select-chevron {
              transform:rotate(225deg) translate(-1px, -1px);
          }
          .ui-select-menu {
              position:absolute;
              top:calc(100% + 8px);
              left:0;
              right:0;
              z-index:5000;
              display:none;
              padding:6px;
              max-height:min(310px, 48vh);
              overflow-y:auto;
              background:var(--bg-card);
              border:1px solid var(--border-color);
              border-radius:12px;
              box-shadow:0 16px 38px rgba(15,23,42,.18);
              animation:uiSelectIn .16s ease-out;
          }
          .ui-select-wrapper.open .ui-select-menu {
              display:block;
          }
          .ui-select-option {
              width:100%;
              display:flex;
              align-items:center;
              gap:10px;
              min-height:42px;
              padding:10px 11px;
              border:0;
              border-radius:8px;
              background:transparent;
              color:var(--text-primary);
              font:500 13px/1.25 var(--font);
              text-align:left;
              cursor:pointer;
          }
          .ui-select-option:hover,
          .ui-select-option:focus-visible {
              outline:none;
              background:#eef4ff;
              color:#155eef;
          }
          .ui-select-option.selected {
              background:#e9f0ff;
              color:#155eef;
              font-weight:750;
          }
          .ui-select-option .ui-select-check {
              width:18px;
              flex:0 0 18px;
              color:transparent;
              font-weight:900;
              text-align:center;
          }
          .ui-select-option.selected .ui-select-check {
              color:#155eef;
          }
          @keyframes uiSelectIn {
              from { opacity:0; transform:translateY(-4px); }
              to { opacity:1; transform:translateY(0); }
          }
          [data-theme="dark"] .ui-select-trigger {
              background:#17243a;
              border-color:#2f4667;
          }
          [data-theme="dark"] .ui-select-menu {
              background:#111c2f;
              border-color:#2f4667;
              box-shadow:0 18px 42px rgba(0,0,0,.42);
          }
          [data-theme="dark"] .ui-select-option:hover,
          [data-theme="dark"] .ui-select-option:focus-visible {
              background:#1b3762;
              color:#c4d7ff;
          }
          [data-theme="dark"] .ui-select-option.selected {
              background:#203f72;
              color:#c4d7ff;
          }
          [data-theme="dark"] .ui-select-option.selected .ui-select-check {
              color:#8fb5ff;
          }
          #scoreFilterBar .ui-select-wrapper {
              flex:1;
              min-width:140px;
          }
          #scoreFilterBar .ui-select-trigger {
              min-height:42px;
          }
          @media (max-width:480px) {
              #advancedFiltersContainer .ui-select-wrapper,
              #scoreFilterBar .ui-select-wrapper {
                  flex-basis:100%;
                  min-width:0;
              }
              .ui-select-menu {
                  max-height:42vh;
              }
          }
          /* ===== In-app notification center ===== */
          .notification-wrapper {
              position:relative;
              display:flex;
              align-items:center;
          }
          .header-right .notif-btn {
              position:relative;
          }
          .header-right .notif-btn .notif-dot {
              top:3px;
              right:3px;
              width:11px;
              height:11px;
              box-shadow:0 0 0 2px var(--bg-secondary);
          }
          .notif-count {
              position:absolute;
              top:-5px;
              right:-7px;
              min-width:18px;
              height:18px;
              padding:0 4px;
              display:flex;
              align-items:center;
              justify-content:center;
              background:var(--danger);
              color:#fff;
              border:2px solid var(--bg-secondary);
              border-radius:20px;
              font-size:10px;
              line-height:1;
              font-weight:800;
          }
          .notif-dropdown {
              top:calc(100% + 10px);
              width:360px;
              max-height:440px;
              padding:0;
              overflow:hidden;
          }
          .notif-header {
              display:flex;
              align-items:center;
              justify-content:space-between;
              gap:10px;
              padding:13px 14px;
              border-bottom:1px solid var(--border-color);
              background:var(--bg-card);
          }
          .notif-header strong {
              font-size:14px;
          }
          .notif-header-actions {
              display:flex;
              gap:8px;
          }
          .notif-header-actions button {
              border:0;
              background:transparent;
              color:var(--accent);
              font:600 11px var(--font);
              cursor:pointer;
              padding:3px;
          }
          .notif-header-actions button:hover {
              text-decoration:underline;
          }
          #notificationsList {
              max-height:386px;
              overflow-y:auto;
          }
          .notif-dropdown .notif-item {
              display:grid;
              grid-template-columns:32px 1fr;
              gap:10px;
              padding:12px 14px;
              text-align:left;
          }
          .notif-dropdown .notif-item.unread {
              background:color-mix(in srgb, var(--accent) 8%, var(--bg-card));
          }
          .notif-item-icon {
              width:30px;
              height:30px;
              display:flex;
              align-items:center;
              justify-content:center;
              border-radius:9px;
              background:var(--bg-input);
              font-size:16px;
          }
          .notif-item-title {
              display:block;
              color:var(--text-primary);
              font-weight:700;
              line-height:1.3;
          }
          .notif-item-message {
              display:block;
              margin-top:3px;
              color:var(--text-secondary);
              line-height:1.35;
          }
          .notif-dropdown .notif-item .notif-time {
              display:block;
              margin-top:5px;
          }
          .notif-empty {
              padding:28px 18px;
              color:var(--text-muted);
              text-align:center;
              font-size:13px;
          }
          @media (max-width:480px) {
              .notif-dropdown {
                  position:fixed;
                  top:64px;
                  right:10px;
                  left:10px;
                  width:auto;
                  max-height:calc(100vh - 78px);
              }
              #notificationsList {
                  max-height:calc(100vh - 132px);
              }
          }
        /* ===== FRIENDLY SELECT DROPDOWNS - ENHANCED ===== */
.ui-select-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 120px;
}

.ui-select-trigger {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font: 600 13px/1.3 var(--font);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.ui-select-trigger:hover {
    border-color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}

.ui-select-trigger .ui-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-select-trigger .ui-select-chevron {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.25s ease;
}

.ui-select-wrapper.open .ui-select-chevron {
    transform: rotate(225deg) translateY(2px);
}

.ui-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5000;
    display: none;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    animation: uiSelectIn 0.16s ease-out;
}

.ui-select-wrapper.open .ui-select-menu {
    display: block;
}

.ui-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font: 500 13px/1.3 var(--font);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ui-select-option:hover {
    background: var(--bg-input);
    color: var(--accent);
}

.ui-select-option.selected {
    background: rgba(37,99,235,0.08);
    color: var(--accent);
    font-weight: 700;
}

.ui-select-option .ui-select-check {
    width: 20px;
    flex: 0 0 20px;
    color: transparent;
    font-weight: 900;
    text-align: center;
}

.ui-select-option.selected .ui-select-check {
    color: var(--accent);
}

/* Dark mode */
[data-theme="dark"] .ui-select-trigger {
    background: #17243a;
    border-color: #2f4667;
}

[data-theme="dark"] .ui-select-menu {
    background: #111c2f;
    border-color: #2f4667;
    box-shadow: 0 18px 42px rgba(0,0,0,0.4);
}

[data-theme="dark"] .ui-select-option:hover {
    background: #1b3762;
    color: #c4d7ff;
}

[data-theme="dark"] .ui-select-option.selected {
    background: #203f72;
    color: #c4d7ff;
}

[data-theme="dark"] .ui-select-option.selected .ui-select-check {
    color: #8fb5ff;
}

@keyframes uiSelectIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ui-select-wrapper {
        min-width: 0;
        flex: 1 1 45%;
    }
    .ui-select-trigger {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 12px;
        border-radius: 8px;
    }
    .ui-select-menu {
        max-height: 220px;
        border-radius: 10px;
    }
    .ui-select-option {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .ui-select-wrapper {
        flex: 1 1 100%;
    }
        }

        /* ===== Trending Phones ===== */
#trendingPhonesList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.trending-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    cursor: pointer;
}

.trending-item:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
}

.trending-item .rank {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
}

.trending-item .rank.gold { color: #f59e0b; }
.trending-item .rank.silver { color: #94a3b8; }
.trending-item .rank.bronze { color: #d97706; }

.trending-item .info {
    flex: 1;
    min-width: 0;
}

.trending-item .info .name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.trending-item .info .detail {
    font-size: 12px;
    color: var(--text-muted);
}

.trending-item .views {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.trending-item .views strong {
    color: var(--accent);
    font-size: 14px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #trendingPhonesList {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .trending-item {
        padding: 8px 12px;
    }
    .trending-item .rank {
        font-size: 14px;
        min-width: 22px;
    }
    .trending-item .info .name {
        font-size: 12px;
    }
    .trending-item .views {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    #trendingPhonesList {
        grid-template-columns: 1fr;
    }
}
        /* ===== FINAL IMAGE CENTER FIX ===== */

/* ১. গ্যালারি ডিভ - পুরো জায়গা জুড়ে এবং সেন্টার */
.detail-gallery {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ২. মেইন ইমেজ - ঠিক মাঝখানে */
.detail-main-img {
    display: block !important;
    width: 100% !important;
    max-width: 480px !important;  /* ← ইমেজ বড় হলে সাইজ ঠিক রাখে */
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

/* ৩. থাম্বনেইল র‍্যাপার - সেন্টার */
.detail-thumbnails {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 4px !important;
    width: 100% !important;
    max-width: 480px !important;  /* ← মেইন ইমেজের সাথে মিলিয়ে */
}

/* ৪. থাম্বনেইল ইমেজ - ঠিক সাইজে */
.detail-thumbnails img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 2px solid var(--border-color) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.detail-thumbnails img:hover {
    border-color: var(--accent) !important;
    transform: scale(1.05) !important;
}

.detail-thumbnails img.active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* ৫. ডিটেইল হিরো - পুরো অংশ ঠিক করা */
.detail-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 24px 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    align-items: start !important;
}

/* ৬. মোবাইলের জন্য */
@media (max-width: 768px) {
    .detail-hero {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 20px !important;
    }
    
    .detail-main-img {
        max-width: 100% !important;
        aspect-ratio: 1/1 !important;
    }
    
    .detail-thumbnails {
        max-width: 100% !important;
        gap: 8px !important;
    }
    
    .detail-thumbnails img {
        width: 54px !important;
        height: 54px !important;
    }
}

@media (max-width: 480px) {
    .detail-thumbnails img {
        width: 46px !important;
        height: 46px !important;
    }
}
        /* detail-main-img - বড় সাইজ */
.detail-main-img {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;  /* ← 480 থেকে 600 বা 700 */
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    image-rendering: auto !important;  /* ← নতুন */
}

/* থাম্বনেইল সাইজ বাড়ান */
.detail-thumbnails img {
    width: 80px !important;   /* ← 64 থেকে 80 */
    height: 80px !important;  /* ← 64 থেকে 80 */
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 2px solid var(--border-color) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* ===== গ্যালারি থাম্বনেইল: এক লাইনে (horizontal scroll) ===== */
.detail-thumbnails {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 4px 2px 6px !important;
}
.detail-thumbnails::-webkit-scrollbar { display: none !important; }
.detail-thumbnails img {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
}
@media (max-width: 480px) {
    .detail-thumbnails img { width: 58px !important; height: 58px !important; }
}
.detail-main-img { touch-action: pan-y !important; user-select: none !important; -webkit-user-drag: none !important; }

/* ===== FIX: ডিটেইল পেজ আর বামে-ডানে সরবে না ===== */
html, body { overflow-x: hidden !important; overscroll-behavior-x: none !important; max-width: 100vw !important; width: 100% !important; }

/* ===== আসল কারণ (root cause) এখানে ফিক্স করা হলো =====
   body { display:flex } এর একমাত্র flex item হলো .main, কিন্তু .main এ
   min-width:0 সেট করা ছিল না। Flexbox স্পেসিফিকেশন অনুযায়ী ডিফল্ট
   min-width:auto থাকার কারণে .main এর ভেতরের যেকোনো চওড়া/আনরাপেবল
   কনটেন্ট (row/flex/grid) পুরো .main-কে সংকুচিত হতে না দিয়ে জোর করে
   body/html-কে ভিউপোর্টের চেয়ে চওড়া বানিয়ে দিচ্ছিল — এই কারণেই
   ড্যাশবোর্ড কার্ড, স্ট্যাট কার্ড, Recently Viewed ইত্যাদি ডান দিকে
   কেটে যাচ্ছিল এবং পাতাটা ডানে স্ক্রল করা যাচ্ছিল। নিচের রুলগুলো সেটা
   পুরোপুরি বন্ধ করে দেয়। ===== */
.main {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.header, .page-content, .page, #app, .sidebar {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== গ্লোবাল সেফটি-নেট: যেকোনো কার্ড/গ্রিড যেন স্ক্রিনের ডান পাশ দিয়ে
   কেটে/উপচে না যায় তার জন্য একবারে সব জায়গায় প্রয়োগ হবে এমন কিছু রুল ===== */
img, svg, video, canvas, iframe { max-width: 100%; }
.stat-card, .card, .phone-card, .grid-2 > *, .grid-3 > *, .grid-4 > * {
    min-width: 0 !important;
    max-width: 100% !important;
}
@media (max-width: 480px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
    .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
    .stat-card { padding: 12px !important; gap: 10px !important; }
    .stat-info h3 { font-size: 19px !important; }
    .stat-info p { font-size: 10.5px !important; }
}
.phone-detail-page {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
}
.phone-detail-page * { max-width: 100% !important; }
.detail-hero, .detail-tabs, .detail-similar, .detail-reviews, .detail-info {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.detail-gallery { min-width: 0 !important; }
.detail-thumbnails { max-width: 100% !important; }
.detail-tabs .tabs { max-width: 100% !important; }
.detail-specs-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)) !important; }
.detail-scores { flex-wrap: wrap !important; }
.detail-buy-links { flex-wrap: wrap !important; }

      

/* ===== styles.css block 5 ===== */
/* ===== Searchable phone picker (price history / price alerts) ===== */
.phone-picker{position:relative;flex:1 1 260px;min-width:0;max-width:420px;}
.phone-picker-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.7;pointer-events:none;}
.phone-picker-input{width:100%;padding:12px 38px 12px 36px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-xs,10px);font-size:15px;color:var(--text-primary);outline:none;transition:border-color .18s,box-shadow .18s;}
.phone-picker-input:focus{border-color:var(--primary,#4f7cff);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#4f7cff) 22%,transparent);}
.phone-picker-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;border:none;background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer;padding:6px;line-height:1;border-radius:50%;}
.phone-picker-clear:hover{color:var(--text-primary);background:var(--bg-input);}
.phone-picker.has-value .phone-picker-clear{display:block;}
.phone-picker-list{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;max-height:290px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg-card,#151527);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.35);display:none;}
.phone-picker-list.open{display:block;}
.phone-picker-item{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid color-mix(in srgb,var(--border-color) 60%,transparent);}
.phone-picker-item:last-child{border-bottom:none;}
.phone-picker-item:hover,.phone-picker-item.active{background:color-mix(in srgb,var(--primary,#4f7cff) 16%,transparent);}
.phone-picker-item .ppi-name{font-size:14px;font-weight:600;color:var(--text-primary);}
.phone-picker-item .ppi-sub{font-size:12px;color:var(--text-muted);}
.phone-picker-item .ppi-price{margin-left:auto;font-size:13px;font-weight:700;color:var(--primary,#4f7cff);white-space:nowrap;}
.phone-picker-empty{padding:14px;font-size:13px;color:var(--text-muted);text-align:center;}
@media (max-width:640px){.phone-picker{flex:1 1 100%;max-width:none;}.phone-picker-input{font-size:16px;padding:13px 38px 13px 36px;}.phone-picker-list{max-height:52vh;}}

/* ============ Mobile Series: suggestions + cards (redesigned) ============ */
#seriesSearchInput{
    width:100%!important; padding:13px 16px!important; font-size:14px!important;
    background:var(--bg-input)!important; color:var(--text-primary)!important;
    border:1.5px solid var(--border-color)!important; border-radius:12px!important;
    outline:none!important; transition:border-color .18s ease, box-shadow .18s ease!important;
}
#seriesSearchInput:focus{
    border-color:var(--accent)!important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)!important;
}
#seriesSuggestions{
    background:var(--bg-card)!important; border:1px solid var(--border-color)!important;
    border-radius:14px!important; overflow:hidden!important; padding:6px!important;
    box-shadow:0 18px 46px rgba(0,0,0,.22)!important; margin-top:8px!important;
    backdrop-filter:blur(8px);
}
#seriesSuggestions .suggestion-item{
    display:flex!important; align-items:center!important; gap:11px!important;
    padding:9px 10px!important; border-radius:10px!important; cursor:pointer!important;
    border:none!important; transition:background .15s ease, transform .15s ease!important;
}
#seriesSuggestions .suggestion-item + .suggestion-item{ margin-top:2px!important; }
#seriesSuggestions .suggestion-item:hover,
#seriesSuggestions .suggestion-item.active{
    background:color-mix(in srgb, var(--accent) 12%, transparent)!important;
}
#seriesSuggestions .sg-thumb{
    flex:0 0 auto; width:38px; height:38px; border-radius:9px; overflow:hidden;
    background:var(--bg-input); display:flex; align-items:center; justify-content:center;
    font-size:17px; border:1px solid var(--border-color);
}
#seriesSuggestions .sg-thumb img{ width:100%; height:100%; object-fit:contain; }
#seriesSuggestions .sg-text{ flex:1; min-width:0; }
#seriesSuggestions .sg-title{
    font-size:13.5px; font-weight:600; color:var(--text-primary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;
}
#seriesSuggestions .sg-title .sg-brand{ font-weight:800; color:var(--accent); }
#seriesSuggestions .sg-sub{ font-size:11px; color:var(--text-muted); margin-top:2px; }
#seriesSuggestions .sg-tag{
    flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.03em;
    padding:3px 9px; border-radius:20px; color:#fff;
    background:linear-gradient(135deg, var(--accent), #8b5cf6); white-space:nowrap;
}
#seriesSuggestions .sg-empty{ padding:16px; text-align:center; font-size:13px; color:var(--text-muted); }

#seriesResultContainer .series-card{
    position:relative; display:flex; flex-direction:column;
    background:var(--bg-card); border:1px solid var(--border-color);
    border-radius:16px; padding:12px; overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#seriesResultContainer .series-card:hover{
    transform:translateY(-3px); border-color:var(--accent);
    box-shadow:0 14px 30px rgba(0,0,0,.16);
}
#seriesResultContainer .series-card .sc-img{
    width:100%; aspect-ratio:1/1; border-radius:12px; background:var(--bg-input);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    margin-bottom:10px; cursor:pointer;
}
#seriesResultContainer .series-card .sc-img img{ width:100%; height:100%; object-fit:contain; padding:8px; }
#seriesResultContainer .series-card .sc-img .emoji-fallback{ font-size:44px; }
#seriesResultContainer .series-card .sc-brand{
    font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-muted);
}
#seriesResultContainer .series-card .sc-name{
    font-size:14px; font-weight:700; color:var(--text-primary); line-height:1.3;
    margin-top:2px; cursor:pointer;
}
#seriesResultContainer .series-card .sc-price{
    font-size:16px; font-weight:800; color:var(--accent); margin-top:6px;
}
#seriesResultContainer .series-card .sc-specs{
    display:flex; flex-wrap:wrap; gap:5px; margin-top:8px;
}
#seriesResultContainer .series-card .sc-specs span{
    font-size:10.5px; font-weight:600; color:var(--text-secondary);
    background:var(--bg-input); padding:3px 8px; border-radius:20px;
}
#seriesResultContainer .series-card .sc-btn{
    margin-top:auto; width:100%; border:none; cursor:pointer;
    padding:9px 10px; border-radius:10px; font-size:12px; font-weight:700; color:#fff;
    background:linear-gradient(135deg, var(--accent), #8b5cf6);
    transition:filter .15s ease, transform .15s ease;
}
#seriesResultContainer .series-card .sc-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
#seriesResultContainer .series-card .sc-btn.added{ background:#22c55e; }
#seriesResultContainer .series-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin-top:14px;
}
.series-browser-chips{
    display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.series-browser-chips .sb-chip{
    border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-secondary);
    font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; cursor:pointer;
    transition:all .15s ease;
}
.series-browser-chips .sb-chip:hover{ border-color:var(--accent); color:var(--text-primary); }
.series-browser-chips .sb-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
#seriesResultContainer .series-card.sb-card{ cursor:pointer; padding-bottom:34px; }
#seriesResultContainer .series-card.sb-card .sc-name,
#seriesResultContainer .series-card.sb-card .sc-img{ cursor:pointer; }
#seriesResultContainer .sb-count-badge{
    position:absolute; right:10px; bottom:10px; font-size:10px; font-weight:700;
    padding:3px 9px; border-radius:999px; background:var(--bg-input); color:var(--text-secondary);
    border:1px solid var(--border-color);
}
.sb-back-btn{
    display:inline-flex; align-items:center; gap:4px; margin-top:10px;
    background:none; border:none; color:var(--accent); font-size:13px; font-weight:700;
    cursor:pointer; padding:4px 0;
}
.sb-back-btn:hover{ text-decoration:underline; }
@media (max-width:480px){
    #seriesResultContainer .series-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
    #seriesSuggestions .sg-thumb{ width:34px; height:34px; }
}

/* ===== styles.css block 6 (original attrs: id="phonehub-design-system") ===== */
    :root {
        --ds-control-height: 40px;
        --ds-card-padding: 20px;
        --ds-control-radius: 10px;
    }

    body {
        line-height: 1.45;
    }

    button,
    input,
    select,
    textarea {
        font-family: var(--font);
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
    }

    .header,
    .sidebar {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }

    .sidebar-brand {
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
    }

    .sidebar-nav .nav-item.active,
    .sidebar-footer .nav-item.active {
        background: var(--accent);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent);
    }

    .card,
    .stat-card,
    .phone-card,
    .filter-bar {
        border-radius: var(--radius);
        border-color: var(--border-color);
        box-shadow: var(--shadow);
    }

    .card,
    .filter-bar {
        padding: var(--ds-card-padding);
    }

    .phone-card {
        padding: var(--space-4);
    }

    .card:hover,
    .stat-card:hover,
    .phone-card:hover {
        box-shadow: var(--shadow-hover);
    }

    .phone-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    }

    .phone-card .phone-price,
    .emi-result {
        color: var(--accent);
    }

    .phone-card .phone-specs span,
    .phone-card .score-badge,
    .phone-card .rating-badge {
        border-radius: var(--radius-pill);
        border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    }

    .phone-card .phone-specs span {
        background: var(--bg-input);
        color: var(--text-secondary);
    }

    .score-badge.gaming {
        background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
        color: var(--accent);
    }

    .score-badge.camera {
        background: color-mix(in srgb, var(--success) 12%, var(--bg-card));
        color: var(--success);
    }

    .score-badge.battery,
    .phone-card .rating-badge {
        background: color-mix(in srgb, var(--warning) 14%, var(--bg-card));
        color: var(--warning);
    }

    .btn {
        min-height: var(--ds-control-height);
        padding: 9px 16px;
        border-radius: var(--ds-control-radius);
        background: var(--accent);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 28%, transparent);
    }

    .btn-outline {
        background: transparent;
        border: 1px solid var(--accent);
        color: var(--accent);
        box-shadow: none;
    }

    .btn-outline:hover {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        color: var(--accent);
        box-shadow: none;
    }

    .btn-danger {
        background: var(--danger);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 20%, transparent);
    }

    .btn-success {
        background: var(--success);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--success) 20%, transparent);
    }

    .filter-bar input,
    .filter-bar select,
    .admin-form .form-group input,
    .admin-form .form-group select,
    .admin-form .form-group textarea,
    .compare-selector select {
        min-height: var(--ds-control-height);
        border-radius: var(--ds-control-radius);
        border-color: var(--border-color);
        background: var(--bg-input);
    }

    .filter-bar input:focus,
    .filter-bar select:focus,
    .admin-form .form-group input:focus,
    .admin-form .form-group select:focus,
    .admin-form .form-group textarea:focus,
    .compare-selector select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .tabs {
        background: var(--bg-input);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
    }

    .tabs .tab.active {
        color: var(--accent);
        box-shadow: 0 2px 8px rgba(15,23,42,0.08);
    }

    #searchSuggestions {
        border-radius: var(--radius-sm) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 16px 36px rgba(15,23,42,0.14) !important;
    }

    #searchSuggestions .suggestion-item:hover,
    #searchSuggestions .suggestion-item.active {
        background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)) !important;
    }

    #searchSuggestions .suggestion-item .highlight {
        color: var(--accent) !important;
    }

    #searchSuggestions .suggestion-item .suggestion-tag,
    .dev-badge {
        border-radius: var(--radius-pill) !important;
    }

    .modal,
    .notif-dropdown,
    .toast {
        border-color: var(--border-color);
        box-shadow: var(--shadow-hover);
    }

    @media (max-width: 768px) {
        .page-content {
            padding: var(--space-4) var(--space-3) 48px;
        }

        .card,
        .filter-bar {
            padding: var(--space-4);
        }

        .header-right {
            gap: var(--space-2);
        }
    }

    @media (max-width: 480px) {
        .phone-card {
            padding: var(--space-3);
        }

        .btn {
            min-height: 38px;
            padding: 8px 13px;
        }
    }
  /* PhoneHub ব্র্যান্ডের নীল ব্যাকগ্রাউন্ড সরান */
.sidebar-brand {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* টেক্সটের ব্যাকগ্রাউন্ডও ক্লিয়ার করুন */
.sidebar-brand .brand-name {
    background: none !important;
    background-color: transparent !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

/* আইকনের ব্যাকগ্রাউন্ড ঠিক রাখুন (যদি চান) */
.sidebar-brand .brand-mark {
    background: linear-gradient(135deg, #4f7cff, #8b5cf6) !important;
    box-shadow: 0 8px 20px rgba(79, 124, 255, 0.28) !important;
}

/* ===== styles.css block 7 (original attrs: id="browse-detail-refresh") ===== */
    /* Browse + phone detail visual refresh — styling only, no behaviour changes. */
    #page-browse {
        position: relative;
    }

    #page-browse::before {
        content: "";
        position: absolute;
        top: -30px;
        right: -80px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(79, 124, 255, 0.11), transparent 68%);
        pointer-events: none;
        z-index: 0;
    }

    #page-browse > * {
        position: relative;
        z-index: 1;
    }

    #page-browse > .filter-bar {
        padding: 18px;
        gap: 10px;
        border: 1px solid rgba(117, 145, 201, 0.26);
        border-top: 3px solid #4f7cff;
        border-radius: 18px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.94)),
            var(--bg-card);
        box-shadow: 0 14px 34px rgba(35, 74, 150, 0.08);
    }

    #page-browse #searchInput {
        min-height: 46px !important;
        padding: 11px 16px !important;
        border: 1px solid #d7e1f1 !important;
        border-radius: 12px !important;
        background: #f7faff !important;
        font-size: 14px !important;
        box-shadow: inset 0 1px 2px rgba(22, 48, 93, 0.03);
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    #page-browse #searchInput:focus {
        background: #fff !important;
        border-color: #4f7cff !important;
        box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.13) !important;
        outline: none;
    }

    #page-browse #searchSuggestBtn,
    #page-browse #advancedFilterToggle {
        min-height: 46px !important;
        padding: 10px 17px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    #page-browse #searchSuggestBtn {
        box-shadow: 0 8px 18px rgba(79, 124, 255, 0.25) !important;
    }

    #page-browse #advancedFilterToggle {
        border-color: #c8d5e9 !important;
        background: #fff !important;
        color: #30415f !important;
    }

    #page-browse #advancedFiltersContainer {
        padding-top: 16px !important;
        margin-top: 10px !important;
        gap: 10px !important;
        border-top: 1px dashed #d6e0ef !important;
    }

    #page-browse #advancedFiltersContainer select,
    #page-browse #advancedFiltersContainer button {
        min-height: 40px !important;
        border-radius: 10px !important;
    }

    #page-browse #showAllPhonesBtn,
    #page-browse #showBrandsBtn {
        min-height: 40px !important;
        padding: 9px 16px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
    }

    #page-browse #showAllPhonesBtn {
        box-shadow: 0 8px 18px rgba(79, 124, 255, 0.2);
    }

    #page-browse #showBrandsBtn {
        border-color: #c8d5e9 !important;
        background: rgba(255, 255, 255, 0.78) !important;
    }

    #page-browse #brandListContainer {
        padding: 14px;
        border: 1px solid #dce5f2;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.72);
    }

    #page-browse #brandChips {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    #page-browse #brandChips > * {
        border-radius: 999px !important;
        transition: transform .18s ease, box-shadow .18s ease;
    }

    #page-browse #brandChips > *:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 15px rgba(42, 76, 140, 0.12);
    }

    #page-browse .phone-grid {
        grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
        gap: 22px;
    }

    #page-browse .phone-card,
    .detail-similar .phone-card {
        overflow: hidden;
        border: 1px solid #dce5f2;
        border-radius: 18px;
        padding: 12px;
        background: linear-gradient(155deg, #ffffff 0%, #ffffff 66%, #f4f8ff 100%);
        box-shadow: 0 8px 22px rgba(33, 66, 126, 0.06);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    #page-browse .phone-card::before,
    .detail-similar .phone-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border-top: 2px solid rgba(79, 124, 255, 0.75);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }

    #page-browse .phone-card:hover,
    .detail-similar .phone-card:hover {
        transform: translateY(-7px);
        border-color: #98b7ff;
        box-shadow: 0 20px 34px rgba(45, 87, 173, 0.15);
    }

    #page-browse .phone-card:hover::before,
    .detail-similar .phone-card:hover::before {
        opacity: 1;
    }

    #page-browse .phone-card .phone-img-wrap,
    .detail-similar .phone-card .phone-img-wrap {
        min-height: 218px;
        aspect-ratio: 4 / 4.6;
        margin-bottom: 14px;
        border: 1px solid #e0e8f5;
        border-radius: 14px;
        background:
            radial-gradient(circle at 72% 20%, rgba(124, 169, 255, 0.33), transparent 28%),
            linear-gradient(145deg, #f8fbff, #e9f1ff);
    }

    #page-browse .phone-card .phone-img-wrap img,
    .detail-similar .phone-card .phone-img-wrap img {
        object-fit: cover;
        padding: 0;
        filter: drop-shadow(0 14px 12px rgba(39, 67, 115, 0.14));
        transition: transform .25s ease;
    }

    #page-browse .phone-card:hover .phone-img-wrap img,
    .detail-similar .phone-card:hover .phone-img-wrap img {
        transform: scale(1.045) translateY(-3px);
    }

    #page-browse .phone-card .phone-brand,
    .detail-similar .phone-card .phone-brand {
        margin-bottom: 4px;
        color: #7183a1;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .12em;
    }

    #page-browse .phone-card .phone-name,
    .detail-similar .phone-card .phone-name {
        min-height: 40px;
        color: #15233c;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    #page-browse .phone-card .phone-price,
    .detail-similar .phone-card .phone-price {
        margin-top: 9px;
        color: #255fd8;
        font-size: 19px;
        letter-spacing: -.02em;
    }

    #page-browse .phone-card .phone-specs,
    .detail-similar .phone-card .phone-specs {
        gap: 6px;
        margin-top: 10px;
    }

    #page-browse .phone-card .phone-specs span,
    .detail-similar .phone-card .phone-specs span {
        padding: 4px 8px;
        border: 1px solid #e0e7f2;
        border-radius: 999px;
        background: #f5f8fd;
        color: #5f6f89;
        font-size: 10px;
        font-weight: 700;
    }

    #page-browse .phone-card .fav-btn {
        top: 22px;
        right: 22px;
        width: 35px;
        height: 35px;
        border: 1px solid rgba(220, 229, 242, 0.9);
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 6px 14px rgba(29, 56, 104, 0.1);
        backdrop-filter: blur(8px);
    }

    #page-browse .phone-card::after {
        right: 14px;
        bottom: 13px;
        font-size: 8px;
    }

    /* Phone detail page */
    .phone-detail-page {
        background:
            radial-gradient(circle at 92% 4%, rgba(79, 124, 255, 0.14), transparent 23rem),
            radial-gradient(circle at 4% 45%, rgba(139, 92, 246, 0.07), transparent 22rem),
            var(--bg-primary);
    }

    .phone-detail-page .detail-header {
        padding: 14px max(24px, calc((100vw - 1320px) / 2));
        border-bottom: 1px solid rgba(169, 188, 222, 0.3);
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 8px 24px rgba(26, 54, 108, 0.06);
        backdrop-filter: blur(18px);
    }

    .phone-detail-page .detail-back-btn {
        min-height: 40px;
        padding: 9px 16px;
        border: 1px solid #d6e1f1;
        border-radius: 11px;
        background: #fff;
        color: #213453;
        box-shadow: 0 5px 12px rgba(31, 59, 111, 0.07);
    }

    .phone-detail-page .detail-back-btn:hover {
        background: #4f7cff;
        border-color: #4f7cff;
        box-shadow: 0 8px 18px rgba(79, 124, 255, 0.24);
    }

    .phone-detail-page .detail-hero,
    .phone-detail-page .detail-insights,
    .phone-detail-page .detail-tabs,
    .phone-detail-page .detail-similar {
        max-width: 1320px;
    }

    .phone-detail-page .detail-hero {
        position: relative;
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 42px;
        margin-top: 26px;
        padding: 26px;
        border: 1px solid #dce6f4;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 18px 42px rgba(32, 66, 132, 0.09);
        overflow: hidden;
    }

    .phone-detail-page .detail-hero::before {
        content: "";
        position: absolute;
        top: -150px;
        right: -90px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(79, 124, 255, 0.16), transparent 68%);
        pointer-events: none;
    }

    .phone-detail-page .detail-gallery,
    .phone-detail-page .detail-info {
        position: relative;
        z-index: 1;
    }

    .phone-detail-page .detail-gallery-stage {
        min-height: 480px;
        padding: 25px;
        border: 1px solid #dbe6f5;
        border-radius: 20px;
        background:
            radial-gradient(circle at 50% 22%, rgba(125, 170, 255, 0.34), transparent 33%),
            linear-gradient(145deg, #f6faff, #e8f1ff);
        overflow: hidden;
    }

    .phone-detail-page .detail-main-img {
        height: 100%;
        min-height: 430px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        object-fit: cover;
        filter: drop-shadow(0 24px 20px rgba(36, 66, 119, 0.2));
    }

    .phone-detail-page .detail-main-img:hover {
        transform: scale(1.025);
        box-shadow: none;
    }

    .phone-detail-page .detail-gallery-nav {
        width: 44px;
        height: 44px;
        border-color: rgba(205, 219, 240, 0.95);
        background: rgba(255, 255, 255, 0.88);
        color: #29456f;
    }

    .phone-detail-page .detail-gallery-nav:hover {
        background: #4f7cff;
        border-color: #4f7cff;
    }

    .phone-detail-page .detail-gallery-count {
        right: 22px;
        bottom: 20px;
        padding: 6px 11px;
        background: rgba(16, 32, 64, 0.72);
        letter-spacing: .04em;
    }

    .phone-detail-page .detail-thumbnails {
        gap: 10px;
        margin-top: 14px;
    }

    .phone-detail-page .detail-thumbnails img {
        width: 70px;
        height: 70px;
        padding: 4px;
        border: 2px solid transparent;
        border-radius: 12px;
        background: #f4f8ff;
        object-fit: contain;
    }

    .phone-detail-page .detail-thumbnails img:hover,
    .phone-detail-page .detail-thumbnails img.active {
        border-color: #4f7cff;
        box-shadow: 0 5px 12px rgba(79, 124, 255, 0.18);
    }

    .phone-detail-page .detail-info {
        gap: 15px;
        padding: 10px 4px;
    }

    .phone-detail-page .detail-brand {
        width: fit-content;
        padding: 6px 11px;
        border: 1px solid #cfe0ff;
        border-radius: 999px;
        background: #edf4ff;
        color: #3864bd;
        font-size: 10px;
        letter-spacing: .14em;
    }

    .phone-detail-page .detail-name {
        max-width: 680px;
        color: #112343;
        font-size: clamp(32px, 4vw, 52px);
        line-height: 1.04;
        letter-spacing: -.055em;
    }

    .phone-detail-page .detail-rating {
        gap: 10px;
        color: #647592;
    }

    .phone-detail-page .detail-rating .stars {
        padding: 6px 10px;
        border-radius: 9px;
        background: #fff8e6;
        font-size: 15px;
    }

    .phone-detail-page .detail-price {
        margin-top: 3px;
        color: #245bd4;
        font-size: 38px;
        letter-spacing: -.04em;
    }

    .phone-detail-page .detail-price .original {
        font-size: 17px;
    }

    .phone-detail-page .detail-price .discount {
        display: inline-block;
        padding: 5px 9px;
        border-radius: 999px;
        background: #e9fbf1;
        color: #159447;
        font-size: 11px;
        vertical-align: middle;
    }

    .phone-detail-page .detail-last-updated {
        gap: 7px 16px;
        font-size: 11px;
    }

    .phone-detail-page .detail-scores {
        gap: 8px;
        padding: 14px 0 4px;
    }

    .phone-detail-page .detail-scores .score {
        padding: 7px 11px;
        border: 1px solid rgba(95, 129, 194, 0.15);
        border-radius: 10px;
        font-size: 11px;
    }

    .phone-detail-page .detail-actions {
        gap: 8px;
        margin-top: 6px;
    }

    .phone-detail-page .detail-actions .btn {
        min-height: 42px;
        padding: 10px 14px;
        border-radius: 11px;
        font-size: 12px;
    }

    .phone-detail-page .detail-buy-links {
        gap: 9px;
    }

    .phone-detail-page .detail-buy-links .buy-btn {
        padding: 11px 16px;
        border-radius: 10px;
        font-size: 12px;
        box-shadow: 0 7px 16px rgba(30, 52, 94, 0.12);
    }

    .phone-detail-page .detail-emi {
        margin-top: 5px;
        padding: 15px;
        border: 1px solid #dce6f4;
        border-radius: 14px;
        background: linear-gradient(145deg, #f7faff, #eef4ff);
    }

    .phone-detail-page .detail-emi .emi-row {
        gap: 9px;
    }

    .phone-detail-page .detail-emi input,
    .phone-detail-page .detail-emi select {
        min-height: 36px;
        border-radius: 8px;
        border-color: #cbd9ed;
    }

    .phone-detail-page .detail-insights {
        padding-top: 24px;
    }

    .phone-detail-page .detail-insights-grid {
        gap: 18px;
    }

    .phone-detail-page .detail-insight-card,
    .phone-detail-page .detail-price-snapshot {
        padding: 22px;
        border: 1px solid #dce6f4;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 10px 26px rgba(32, 66, 132, 0.06);
    }

    .phone-detail-page .detail-insight-card h3,
    .phone-detail-page .detail-price-snapshot h3 {
        color: #1b3155;
        font-size: 17px;
    }

    .phone-detail-page .detail-score-card {
        gap: 8px;
        padding: 14px;
        border: 1px solid #e0e9f6;
        border-radius: 14px;
        background: #f7faff;
    }

    .phone-detail-page .detail-score-card > div {
        padding: 4px 7px;
        border-right: 1px solid #dce6f4;
    }

    .phone-detail-page .detail-score-card > div:last-child {
        border-right: 0;
    }

    .phone-detail-page .detail-score-number {
        color: #2b63d7;
        font-size: 25px;
    }

    .phone-detail-page .detail-pros-cons {
        gap: 22px;
    }

    .phone-detail-page .detail-pros-cons ul {
        gap: 8px;
    }

    .phone-detail-page .detail-price-snapshot .snapshot-price {
        color: #245bd4;
        font-size: 30px;
    }

    .phone-detail-page .detail-price-bar {
        height: 10px;
        background: #e6edf8;
    }

    .phone-detail-page .detail-tabs {
        margin-top: 26px;
    }

    .phone-detail-page .detail-tabs .tabs {
        gap: 6px;
        border-bottom: 1px solid #dbe5f2;
    }

    .phone-detail-page .detail-tabs .tab {
        padding: 13px 17px;
        color: #71809a;
        font-size: 11px;
    }

    .phone-detail-page .detail-tabs .tab.active {
        color: #2a61d4;
        border-bottom-color: #4f7cff;
        background: linear-gradient(180deg, transparent, #edf4ff);
    }

    .phone-detail-page .detail-specs-grid {
        gap: 12px;
    }

    .phone-detail-page .detail-spec-item {
        padding: 15px 16px;
        border: 1px solid #dfe8f4;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.72);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .phone-detail-page .detail-spec-item:hover {
        transform: translateY(-2px);
        border-color: #a9c3f6;
        box-shadow: 0 8px 18px rgba(38, 78, 153, 0.08);
    }

    .phone-detail-page .detail-spec-item .label {
        color: #8291aa;
        font-size: 10px;
    }

    .phone-detail-page .detail-spec-item .value {
        color: #1d3153;
        font-size: 14px;
    }

    .phone-detail-page .detail-similar {
        margin-top: 28px;
    }

    .phone-detail-page .detail-similar h3 {
        color: #1b3155;
        font-size: 20px;
        letter-spacing: -.03em;
    }

    /* Dark theme */
    [data-theme="dark"] #page-browse > .filter-bar,
    [data-theme="dark"] #page-browse #brandListContainer {
        border-color: #2e456c;
        background: linear-gradient(145deg, rgba(22, 37, 64, .98), rgba(16, 29, 51, .96));
        box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    }

    [data-theme="dark"] #page-browse #searchInput,
    [data-theme="dark"] #page-browse #advancedFilterToggle,
    [data-theme="dark"] #page-browse #showBrandsBtn {
        border-color: #355078 !important;
        background: #172945 !important;
        color: #dce8ff !important;
    }

    [data-theme="dark"] #page-browse #advancedFiltersContainer {
        border-top-color: #304766 !important;
    }

    [data-theme="dark"] #page-browse .phone-card,
    [data-theme="dark"] .detail-similar .phone-card,
    [data-theme="dark"] .phone-detail-page .detail-hero,
    [data-theme="dark"] .phone-detail-page .detail-insight-card,
    [data-theme="dark"] .phone-detail-page .detail-price-snapshot {
        border-color: #2d456c;
        background: linear-gradient(155deg, #172945 0%, #14233c 68%, #172c4c 100%);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
    }

    [data-theme="dark"] #page-browse .phone-card .phone-img-wrap,
    [data-theme="dark"] .detail-similar .phone-card .phone-img-wrap,
    [data-theme="dark"] .phone-detail-page .detail-gallery-stage {
        border-color: #34527e;
        background:
            radial-gradient(circle at 72% 20%, rgba(94, 147, 255, .28), transparent 28%),
            linear-gradient(145deg, #1b3152, #162943);
    }

    [data-theme="dark"] #page-browse .phone-card .phone-name,
    [data-theme="dark"] .phone-detail-page .detail-name,
    [data-theme="dark"] .phone-detail-page .detail-spec-item .value,
    [data-theme="dark"] .phone-detail-page .detail-insight-card h3,
    [data-theme="dark"] .phone-detail-page .detail-price-snapshot h3,
    [data-theme="dark"] .phone-detail-page .detail-similar h3 {
        color: #edf4ff;
    }

    [data-theme="dark"] #page-browse .phone-card .phone-specs span,
    [data-theme="dark"] .detail-similar .phone-card .phone-specs span,
    [data-theme="dark"] .phone-detail-page .detail-spec-item,
    [data-theme="dark"] .phone-detail-page .detail-score-card,
    [data-theme="dark"] .phone-detail-page .detail-emi {
        border-color: #304a70;
        background: #1a2e4d;
        color: #b9c9e2;
    }

    [data-theme="dark"] .phone-detail-page .detail-header {
        border-bottom-color: #2d456c;
        background: rgba(15, 28, 48, .88);
    }

    [data-theme="dark"] .phone-detail-page .detail-back-btn {
        border-color: #385477;
        background: #1a2e4d;
        color: #e5efff;
    }

    [data-theme="dark"] .phone-detail-page .detail-brand {
        border-color: #385d9d;
        background: #1c3869;
        color: #a9c4ff;
    }

    [data-theme="dark"] .phone-detail-page .detail-rating .stars {
        background: #3d3420;
    }

    [data-theme="dark"] .phone-detail-page .detail-tabs .tabs {
        border-bottom-color: #304766;
    }

    [data-theme="dark"] .phone-detail-page .detail-tabs .tab.active {
        background: linear-gradient(180deg, transparent, #1b3765);
    }

    @media (max-width: 900px) {
        #page-browse .phone-grid {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
        }

        .phone-detail-page .detail-hero {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .phone-detail-page .detail-gallery-stage {
            min-height: min(70vw, 500px);
        }

        .phone-detail-page .detail-main-img {
            min-height: min(62vw, 440px);
        }
    }

    @media (max-width: 600px) {
        #page-browse > .filter-bar {
            padding: 13px;
            border-radius: 15px;
        }

        #page-browse #searchSuggestBtn,
        #page-browse #advancedFilterToggle {
            flex: 1 1 calc(50% - 5px);
            justify-content: center;
        }

        #page-browse .phone-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        #page-browse .phone-card,
        .detail-similar .phone-card {
            padding: 8px;
            border-radius: 14px;
        }

        #page-browse .phone-card .phone-img-wrap,
        .detail-similar .phone-card .phone-img-wrap {
            min-height: 145px;
            margin-bottom: 9px;
            border-radius: 11px;
        }

        #page-browse .phone-card .phone-img-wrap img,
        .detail-similar .phone-card .phone-img-wrap img {
            padding: 0;
        }

        #page-browse .phone-card .phone-name,
        .detail-similar .phone-card .phone-name {
            min-height: 34px;
            font-size: 12px;
        }

        #page-browse .phone-card .phone-price,
        .detail-similar .phone-card .phone-price {
            margin-top: 6px;
            font-size: 15px;
        }

        #page-browse .phone-card .phone-specs {
            display: none;
        }

        #page-browse .phone-card .fav-btn {
            top: 16px;
            right: 16px;
            width: 29px;
            height: 29px;
            font-size: 13px;
        }

        .phone-detail-page .detail-header {
            padding: 11px 14px;
        }

        .phone-detail-page .detail-hero {
            margin-top: 12px;
            padding: 12px;
            border-radius: 18px;
        }

        .phone-detail-page .detail-gallery-stage {
            min-height: 330px;
            padding: 15px;
            border-radius: 15px;
        }

        .phone-detail-page .detail-main-img {
            min-height: 300px;
        }

        .phone-detail-page .detail-info {
            padding: 4px 2px;
        }

        .phone-detail-page .detail-name {
            font-size: 30px;
        }

        .phone-detail-page .detail-price {
            font-size: 30px;
        }

        .phone-detail-page .detail-actions .btn {
            flex: 1 1 calc(50% - 4px);
            justify-content: center;
            padding-inline: 8px;
        }

        .phone-detail-page .detail-buy-links .buy-btn {
            flex: 1 1 100%;
            justify-content: center;
        }

        .phone-detail-page .detail-score-card {
            grid-template-columns: repeat(2, 1fr);
        }

        .phone-detail-page .detail-score-card > div {
            border-right: 0;
            border-bottom: 1px solid #dce6f4;
            padding: 7px;
        }

        .phone-detail-page .detail-score-card > div:nth-last-child(-n+2) {
            border-bottom: 0;
        }

        .phone-detail-page .detail-pros-cons {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .phone-detail-page .detail-tabs {
            padding: 0 14px;
        }

        .phone-detail-page .detail-tabs .tabs {
            overflow-x: auto;
            flex-wrap: nowrap;
        }

        .phone-detail-page .detail-tabs .tab {
            flex: 0 0 auto;
            padding: 12px 13px;
        }

        .phone-detail-page .detail-insights {
            padding: 18px 14px 0;
        }

        .phone-detail-page .detail-similar {
            padding: 0 14px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #page-browse .phone-card,
        #page-browse .phone-card *,
        .phone-detail-page * {
            transition-duration: .01ms !important;
        }
    }

    /* Mobile gallery guard: image swipes change the photo, never the page. */
    .phone-detail-page,
    .phone-detail-page .detail-gallery-stage {
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }

    .phone-detail-page .detail-gallery-stage {
        isolation: isolate;
    }

    .phone-detail-page .detail-main-img {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100%;
        touch-action: pan-y !important;
        user-select: none;
        -webkit-user-drag: none;
    }

    .phone-detail-page .detail-thumbnails {
        touch-action: pan-x !important;
        overscroll-behavior-x: contain !important;
    }

/* ===== styles.css block 8 ===== */
  /* Floating Ask AI button — bottom right */
  #askAiFab{position:fixed; right:18px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:9000; display:flex; align-items:center; gap:8px;
    padding:13px 18px; border:none; border-radius:40px; cursor:pointer; color:#fff; font-weight:700; font-size:14px;
    background:linear-gradient(135deg,#4f7cff,#8b5cf6); box-shadow:0 10px 30px rgba(79,124,255,.45);
    transition:transform .2s ease, box-shadow .2s ease;}
  #askAiFab:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 16px 38px rgba(139,92,246,.5);}
  #askAiFab .ai-spark{font-size:18px; animation:aiPulse 2s infinite;}
  @keyframes aiPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}

  .ai-overlay{position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center;
    background:rgba(10,12,24,.55); backdrop-filter:blur(6px); padding:18px;}
  .ai-overlay.open{display:flex;}
  .ai-lang-card{width:100%; max-width:420px; background:var(--bg-card,#fff); color:var(--text-primary,#111);
    border-radius:22px; padding:24px; box-shadow:0 30px 70px rgba(0,0,0,.35); animation:aiUp .28s ease;}
  @keyframes aiUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
  .ai-lang-card h3{margin:0 0 6px; font-size:20px;}
  .ai-lang-card p{margin:0 0 18px; font-size:13px; opacity:.7;}
  .ai-lang-grid{display:grid; gap:10px;}
  .ai-lang-btn{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; cursor:pointer;
    border:1.5px solid var(--border,#e5e7f0); background:var(--bg-input,#f4f5fb); color:inherit; font-size:15px;
    font-weight:600; text-align:left; transition:all .18s;}
  .ai-lang-btn:hover{border-color:#8b5cf6; transform:translateX(3px);}

  /* Full screen AI page */
  #askAiPage{position:fixed; inset:0; z-index:9400; display:none; flex-direction:column;
    background:var(--bg-primary,#f0f2f8); color:var(--text-primary,#111);}
  #askAiPage.open{display:flex;}
  .ai-head{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border,#e5e7f0);
    background:var(--bg-secondary,#fff);}
  .ai-head .ai-title{font-weight:800; font-size:17px;}
  .ai-head .ai-sub{font-size:11px; opacity:.6;}
  .ai-icon-btn{border:none; background:var(--bg-input,#f0f2f8); color:inherit; width:38px; height:38px; border-radius:12px;
    cursor:pointer; font-size:17px;}
  .ai-search-wrap{position:relative; padding:12px 16px; background:var(--bg-secondary,#fff); border-bottom:1px solid var(--border,#e5e7f0);}
  .ai-search-wrap input{width:100%; padding:13px 16px; border-radius:14px; border:1.5px solid var(--border,#e5e7f0);
    background:var(--bg-input,#f0f2f8); color:inherit; font-size:14px; outline:none;}
  .ai-search-wrap input:focus{border-color:#8b5cf6;}
  .ai-suggest{position:absolute; left:16px; right:16px; top:58px; z-index:20; max-height:260px; overflow-y:auto;
    background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7f0); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.18); display:none;}
  .ai-suggest.open{display:block;}
  .ai-suggest-item{padding:11px 14px; cursor:pointer; font-size:13.5px; display:flex; justify-content:space-between; gap:10px;}
  .ai-suggest-item:hover{background:var(--bg-input,#f0f2f8);}
  .ai-suggest-item small{opacity:.6;}
  .ai-chat{flex:1; overflow-y:auto; padding:18px 16px 24px; display:flex; flex-direction:column; gap:12px;}
  .ai-msg{max-width:86%; padding:12px 14px; border-radius:16px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word;}
  .ai-msg.user{align-self:flex-end; background:linear-gradient(135deg,#4f7cff,#8b5cf6); color:#fff; border-bottom-right-radius:5px;}
  .ai-msg.bot{align-self:flex-start; background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7f0); border-bottom-left-radius:5px;}
  .ai-msg.bot{background:linear-gradient(180deg,rgba(79,124,255,.06),rgba(139,92,246,.05)),var(--bg-card,#fff); border-left:3px solid #4f7cff; box-shadow:0 6px 18px rgba(79,124,255,.10);}
  .ai-msg.bot{white-space:normal; max-width:94%; --aiText:#14162e; --aiSurface:#f6f7ff; --aiLine:rgba(20,22,46,.10); color:var(--aiText);}
  [data-theme="dark"] .ai-msg.bot{--aiText:#eef1ff; --aiSurface:rgba(255,255,255,.07); --aiLine:rgba(255,255,255,.14);}
  .ai-msg.bot .ai-head{display:block; font-weight:800; font-size:14.5px; margin:0 0 10px; padding:8px 10px; border-radius:11px;
    background:linear-gradient(135deg,#4f7cff,#8b5cf6); color:#fff;}
  /* page header must stay a single row */
  #askAiPage > .ai-head{display:flex; align-items:center; gap:10px; padding:12px 14px; margin:0; border-radius:0;
    background:linear-gradient(135deg,rgba(79,124,255,.14),rgba(139,92,246,.14)), var(--bg-secondary,#fff);
    color:var(--text-primary,#111);
    border-bottom:1px solid var(--border,#e5e7f0); padding-top:calc(12px + env(safe-area-inset-top));}
  #askAiPage > .ai-head .ai-icon-btn{flex:0 0 auto;}
  /* visible gradient title on any theme */
  #askAiPage > .ai-head .ai-title{font-weight:800; font-size:17px; line-height:1.2;
    background:linear-gradient(135deg,#4f7cff,#a855f7); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:#6d7cff;}
  #askAiPage > .ai-head .ai-sub{font-size:11px; opacity:.65; color:var(--text-primary,#111);}
  /* prettier round header buttons */
  #askAiPage > .ai-head .ai-icon-btn{width:38px; height:38px; border-radius:50%; display:inline-flex;
    align-items:center; justify-content:center; font-size:16px; cursor:pointer; color:inherit;
    border:1px solid var(--border,#e5e7f0);
    background:var(--bg-input,#f0f2f8);
    box-shadow:0 2px 8px rgba(20,22,46,.10); transition:transform .15s, box-shadow .15s;}
  #askAiPage > .ai-head .ai-icon-btn:hover{transform:translateY(-1px); box-shadow:0 5px 14px rgba(79,124,255,.28);}
  #askAiPage > .ai-head .ai-icon-btn:active{transform:scale(.94);}
  #askAiPage > .ai-head #aiCloseBtn{background:linear-gradient(135deg,#4f7cff,#8b5cf6); color:#fff; border:none;
    font-weight:800; box-shadow:0 4px 12px rgba(79,124,255,.40);}
  .ai-card{border:1px solid var(--aiLine); border-radius:13px; padding:9px 10px; margin:8px 0; background:var(--aiSurface);}
  .ai-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px;}
  .ai-pname{font-weight:750; font-size:14px; color:var(--aiText);}
  .ai-price{font-weight:800; font-size:13px; color:#0f9d58; background:rgba(15,157,88,.12); padding:3px 9px; border-radius:999px; white-space:nowrap;}
  .ai-pills{display:flex; flex-wrap:wrap; gap:6px;}
  .ai-pill{font-size:11.5px; font-weight:650; padding:4px 8px; border-radius:999px; background:rgba(79,124,255,.12); color:#3b63d6;}
  .ai-pill.cam{background:rgba(0,184,148,.15); color:#00997c;}
  .ai-pill.bat{background:rgba(255,159,67,.16); color:#c2700f;}
  .ai-pill.disp{background:rgba(139,92,246,.14); color:#7248d8;}
  .ai-pill.star{background:rgba(255,193,7,.20); color:#a67c00;}
  .ai-pill.net{background:rgba(233,30,99,.13); color:#c2185b;}
  .ai-line{display:block; color:var(--aiText); margin:5px 0; font-size:13.5px; line-height:1.6;}
  .ai-line.good{color:#0f9d58; font-weight:650;}
  .ai-line.bad{color:#e5484d; font-weight:650;}
  .ai-line.note{opacity:.85;}
  [data-theme="dark"] .ai-msg.bot{background:linear-gradient(180deg,rgba(79,124,255,.14),rgba(139,92,246,.10)),var(--bg-card,#1b1c27);}
  [data-theme="dark"] .ai-pill{background:rgba(79,124,255,.22); color:#a9c0ff;}
  [data-theme="dark"] .ai-price{color:#5ee7b0; background:rgba(94,231,176,.15);}
  .ai-empty{margin:auto; text-align:center; opacity:.7; font-size:13px; max-width:320px;}
  .ai-chip-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px;}
  .ai-chip{padding:8px 12px; border-radius:20px; border:1px solid var(--border,#e5e7f0); background:var(--bg-card,#fff);
    font-size:12px; cursor:pointer;}
  .ai-bar{display:flex; gap:10px; align-items:flex-end; padding:12px 14px; background:var(--bg-secondary,#fff);
    border-top:1px solid var(--border,#e5e7f0); padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .ai-bar textarea{flex:1; resize:none; max-height:120px; padding:12px 14px; border-radius:16px; font-size:14px;
    border:1.5px solid var(--border,#e5e7f0); background:var(--bg-input,#f0f2f8); color:inherit; outline:none; font-family:inherit;}
  .ai-bar textarea:focus{border-color:#8b5cf6;}
  .ai-send{border:none; border-radius:50%; width:46px; height:46px; cursor:pointer; color:#fff; font-size:18px;
    background:linear-gradient(135deg,#4f7cff,#8b5cf6); box-shadow:0 8px 20px rgba(79,124,255,.4);}
  .ai-send:disabled{opacity:.55; cursor:not-allowed;}
  .ai-typing{font-size:12px; opacity:.65; padding:0 16px 8px;}

/* ===== styles.css block 9 ===== */
/* ===== Ask AI upgrades: rich cards, mic, compare ===== */
.ai-rich{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
.ai-rc{display:flex; gap:11px; padding:10px; border-radius:14px; background:var(--aiSurface,#f6f7ff);
  border:1px solid var(--aiLine,rgba(20,22,46,.10)); box-shadow:0 4px 14px rgba(79,124,255,.10);}
.ai-rc-img{flex:0 0 74px; width:74px; height:74px; border-radius:11px; overflow:hidden; background:var(--bg-input,#eef0f8);
  display:flex; align-items:center; justify-content:center;}
.ai-rc-img img{width:100%; height:100%; object-fit:cover;}
.ai-rc-ph{font-size:30px;}
.ai-rc-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.ai-rc-name{font-weight:750; font-size:13.8px; color:var(--aiText,#14162e); line-height:1.25;}
.ai-rc-price{font-weight:800; font-size:13px; color:#0f9d58;}
.ai-rc-specs{font-size:11.5px; opacity:.75; color:var(--aiText,#14162e); line-height:1.4;}
.ai-rc-btns{display:flex; flex-wrap:wrap; gap:6px; margin-top:5px;}
.ai-buy{font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; text-decoration:none;
  border:none; cursor:pointer; color:#fff; display:inline-flex; align-items:center; gap:4px;}
.ai-buy.fk{background:#2874f0;} .ai-buy.az{background:#ff9900;}
.ai-buy.det{background:linear-gradient(135deg,#4f7cff,#8b5cf6);}
.ai-buy:active{transform:scale(.95);}
/* compare table */
.ai-cmp{overflow-x:auto; margin:9px 0; border:1px solid var(--aiLine,rgba(20,22,46,.10)); border-radius:13px;}
.ai-cmp table{border-collapse:collapse; width:100%; font-size:12.3px; min-width:340px;}
.ai-cmp th,.ai-cmp td{padding:7px 9px; text-align:left; border-bottom:1px solid var(--aiLine,rgba(20,22,46,.10)); color:var(--aiText,#14162e); white-space:nowrap;}
.ai-cmp th{background:linear-gradient(135deg,rgba(79,124,255,.16),rgba(139,92,246,.16)); font-weight:750;}
.ai-cmp td:first-child{font-weight:700; opacity:.75;}
.ai-cmp td.win{color:#0f9d58; font-weight:800;}
/* mic */
#aiMicBtn{border:none; cursor:pointer; width:42px; height:42px; border-radius:50%; flex:0 0 auto; font-size:18px;
  background:var(--bg-input,#f0f2f8); color:inherit; border:1px solid var(--border,#e5e7f0);}
#aiMicBtn.rec{background:linear-gradient(135deg,#ff5f6d,#f43f5e); color:#fff; animation:aiMicPulse 1.1s infinite;}
@keyframes aiMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(244,63,94,.55);}50%{box-shadow:0 0 0 9px rgba(244,63,94,0);}}

/* ===== styles.css block 10 ===== */
.ph-x-row{display:flex !important;flex-wrap:wrap;align-items:flex-start !important;gap:8px;width:100%;grid-column:1/-1;padding-top:10px;margin-top:8px;border-top:1px dashed var(--border-color);}
.ph-x-row .ph-x-field{flex:1 1 130px !important;width:auto !important;min-width:120px;max-width:100%;display:flex;flex-direction:column;align-items:stretch;gap:4px;}
.ph-x-row label{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.3px;text-transform:uppercase;}
.ph-x-row select,.ph-x-row input{width:100% !important;height:38px !important;min-height:38px !important;flex:0 0 38px !important;box-sizing:border-box;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;font-size:13px;color:var(--text-primary);}
.ph-x-row input,.ph-x-row select{min-width:0 !important;max-width:100% !important;}
.ph-x-chipbar{display:flex !important;flex-wrap:wrap;gap:6px;width:100%;flex:1 1 100%;grid-column:1/-1;margin-top:2px;}
.ph-x-chip{flex:0 0 auto !important;width:auto !important;min-height:0 !important;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;}
.ph-x-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.ph-x-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:14px;margin-bottom:18px;}
.ph-x-section h3{margin:0 0 10px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--text-primary);}
.ph-x-section h3 button{margin-left:auto;font-size:11px;font-weight:700;background:transparent;border:1px solid var(--border-color);border-radius:6px;color:var(--text-muted);padding:4px 8px;cursor:pointer;}
.ph-x-rv{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;}
.ph-x-rv-item{flex:0 0 118px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:10px;padding:8px;cursor:pointer;transition:.15s;}
.ph-x-rv-item:hover{transform:translateY(-2px);border-color:var(--accent);}
.ph-x-rv-item img{width:100%;height:74px;object-fit:contain;}
.ph-x-rv-ph{height:74px;display:flex;align-items:center;justify-content:center;font-size:30px;}
.ph-x-rv-name{font-size:11.5px;font-weight:700;color:var(--text-primary);line-height:1.25;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ph-x-rv-price{font-size:11.5px;font-weight:700;color:var(--accent);margin-top:2px;}
.ph-x-cmpbtn{position:absolute;top:8px;left:8px;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ph-x-cmpbtn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.ph-x-tray{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:900;display:none;gap:10px;align-items:center;background:var(--bg-card);border:1px solid var(--border-color);box-shadow:0 14px 40px rgba(0,0,0,.25);border-radius:14px;padding:10px 12px;max-width:min(94vw,620px);}
.ph-x-tray .ph-x-tray-items{display:flex;gap:6px;overflow-x:auto;}
.ph-x-tray .ph-x-pill{font-size:11.5px;font-weight:700;background:var(--bg-input);border:1px solid var(--border-color);border-radius:999px;padding:5px 9px;white-space:nowrap;display:flex;gap:6px;align-items:center;color:var(--text-primary);}
.ph-x-tray .ph-x-pill span{cursor:pointer;color:var(--danger,#e11d48);}
.ph-x-tray button.ph-x-go{background:linear-gradient(135deg,#4f7cff,#8b5cf6);color:#fff;border:none;border-radius:9px;padding:9px 14px;font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap;}
.ph-x-share-back{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:12000;display:none;align-items:flex-end;justify-content:center;}
.ph-x-share-back.open{display:flex;}
.ph-x-share{background:var(--bg-card);width:min(460px,100%);border-radius:16px 16px 0 0;padding:16px;border:1px solid var(--border-color);}
.ph-x-share h4{margin:0 0 4px;font-size:15px;color:var(--text-primary);}
.ph-x-share p{margin:0 0 12px;font-size:12px;color:var(--text-muted);word-break:break-all;}
.ph-x-share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:10px;}
.ph-x-share-grid button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);font-size:11.5px;font-weight:600;cursor:pointer;}
.ph-x-share-grid button span{font-size:21px;}
.ph-x-share-close{width:100%;margin-top:12px;padding:11px;border-radius:10px;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);font-weight:700;cursor:pointer;}
.ph-x-rate{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;color:var(--text-secondary);}
.ph-x-bar{flex:1 1 160px;height:7px;border-radius:4px;background:var(--border-color);overflow:hidden;min-width:120px;}
.ph-x-bar i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#f97316);}
@media(max-width:640px){
  .ph-x-row .ph-x-field{flex:1 1 46% !important;min-width:0;}
  .ph-x-rv-item{flex:0 0 104px;}
  .ph-x-tray{left:8px;right:8px;transform:none;max-width:none;}
  .ph-x-share{border-radius:16px 16px 0 0;}
}

/* ===== styles.css block 11 ===== */
/* --- friendly dropdowns --- */
select, .filter-group select, #advancedFiltersContainer select, #phxFilterStorage {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position: right 12px center;
  padding-right: 34px !important;
  border-radius: 12px !important;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
select:hover { border-color: var(--accent, #6366f1) !important; }
select:focus { outline:none; border-color: var(--accent, #6366f1) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important; }
select option { padding: 10px; font-size: 15px; }
@media (max-width: 640px){
  select { width:100%; min-height:46px; font-size:16px; } /* 16px stops iOS zoom */
}
.phx-na { opacity:.55; font-style:italic; }

/* ===== styles.css block 12 ===== */
.phx-advanced-specs{margin-top:22px;border-top:1px solid var(--border-color);padding-top:18px;}
.phx-specs-header{font-size:16px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.phx-est-badge{background:var(--warning);color:#3a2c00;font-size:10px;font-weight:700;padding:2px 10px;border-radius:20px;}
.phx-verified-badge{background:var(--success);color:#fff;font-size:10px;font-weight:700;padding:2px 10px;border-radius:20px;}
.phx-spec-group{background:var(--bg-input);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:12px;}
.phx-spec-group-title{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--accent);}
.phx-spec-group-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.phx-spec-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--border-color);}
.phx-spec-row span:first-child{color:var(--text-muted);}
.phx-spec-row span:last-child{font-weight:600;text-align:right;}
.phx-est-note{font-size:11.5px;color:var(--text-muted);background:var(--bg-input);border-radius:var(--radius-xs);padding:10px 12px;margin-top:6px;line-height:1.5;}
.phx-est-note code{background:var(--bg-secondary);padding:1px 5px;border-radius:4px;}
@media (max-width:640px){ .phx-spec-group-rows{grid-template-columns:1fr;} }

.phx-compare-specs{width:100%;}
.phx-spec-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.phx-spec-table th,.phx-spec-table td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--border-color);white-space:nowrap;}
.phx-spec-table thead th{font-weight:700;background:var(--bg-input);position:sticky;top:0;}
.phx-row-label{text-align:left !important;color:var(--text-muted);font-weight:600;font-size:12px;background:var(--bg-input);}
.phx-spec-table td.phx-win{background:rgba(0,184,148,0.15);color:var(--success);font-weight:800;position:relative;}
.phx-spec-table td.phx-win::after{content:'🏆';margin-left:4px;font-size:11px;}

.phx-why{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border-color);text-align:left;}
.phx-why-title{font-size:11.5px;font-weight:700;color:var(--accent);margin-bottom:4px;}
.phx-why ul{margin:0;padding-left:16px;}
.phx-why li{font-size:11.5px;color:var(--text-secondary);line-height:1.5;margin-bottom:2px;}

/* ===== styles.css block 13 ===== */
.phx2-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-secondary);}
.ph-x-row.phx2-row{border-top-style:dashed;}
.ph-x-field select:disabled{opacity:.5;cursor:not-allowed;}

/* ===== styles.css block 14 ===== */
.phx3-card{margin-top:16px;}
.phx3-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.phx3-tab{flex:0 0 auto;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;}
.phx3-tab.active{background:linear-gradient(135deg,#4f7cff,#8b5cf6);border-color:transparent;color:#fff;}
.phx3-chartwrap{position:relative;width:100%;height:320px;}
.phx3-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:11.5px;color:var(--text-secondary);}
.phx3-legend span{display:inline-flex;align-items:center;gap:5px;}
.phx3-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.phx3-note{font-size:11.5px;color:var(--text-muted);margin-top:8px;}

/* ===== styles.css block 15 ===== */
.phx4-note{grid-column:1/-1;text-align:center;padding:26px;color:var(--text-muted);font-size:13px;}
.phx4-chart-wrap{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:14px;margin-top:14px;}
.phx4-chart-wrap h4{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:6px;}
.phx4-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:11px;color:var(--text-secondary);}
.phx4-legend span{display:inline-flex;align-items:center;gap:4px;}
.phx4-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.phx4-review-actions{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.phx4-vote-btn{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;}
.phx4-vote-btn.voted{background:var(--accent);color:#fff;border-color:var(--accent);}
.phx4-review-photo{max-width:120px;max-height:120px;border-radius:8px;margin-top:8px;display:block;border:1px solid var(--border-color);}
.phx4-photo-input-wrap{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;}
.phx4-photo-preview{max-width:100px;max-height:100px;border-radius:8px;border:1px solid var(--border-color);display:none;}
.phx4-card-vote{position:absolute;top:8px;right:44px;z-index:3;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:3px;}
.phx4-card-vote.voted{background:#f59e0b;color:#fff;border-color:#f59e0b;}
.phx4-deal-card{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,rgba(79,124,255,.1),rgba(139,92,246,.1));border:1px solid var(--border-color);border-radius:14px;padding:14px;margin-bottom:16px;cursor:pointer;}
.phx4-deal-card img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:var(--bg-input);}
.phx4-deal-badge{font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);padding:3px 9px;border-radius:999px;display:inline-block;margin-bottom:4px;}
.phx4-rec-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.phx4-rec-item{flex:0 0 128px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:8px;cursor:pointer;}
.phx4-rec-item img{width:100%;height:76px;object-fit:contain;}
.phx4-rec-name{font-size:11.5px;font-weight:700;color:var(--text-primary);margin-top:4px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.phx4-rec-price{font-size:11.5px;font-weight:700;color:var(--accent);margin-top:2px;}

/* ==== Colorful image boxes for Recently Viewed / Trending Now / Recommended ==== */
.ph-x-rv-imgbox,.phx4-rec-imgbox{border-radius:10px;padding:6px;margin-bottom:2px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ph-x-rv-item:nth-child(6n+1) .ph-x-rv-imgbox,.phx4-rec-item:nth-child(6n+1) .phx4-rec-imgbox{background:linear-gradient(135deg,rgba(79,124,255,.20),rgba(56,189,248,.20));}
.ph-x-rv-item:nth-child(6n+2) .ph-x-rv-imgbox,.phx4-rec-item:nth-child(6n+2) .phx4-rec-imgbox{background:linear-gradient(135deg,rgba(139,92,246,.20),rgba(236,72,153,.20));}
.ph-x-rv-item:nth-child(6n+3) .ph-x-rv-imgbox,.phx4-rec-item:nth-child(6n+3) .phx4-rec-imgbox{background:linear-gradient(135deg,rgba(16,185,129,.20),rgba(132,204,22,.20));}
.ph-x-rv-item:nth-child(6n+4) .ph-x-rv-imgbox,.phx4-rec-item:nth-child(6n+4) .phx4-rec-imgbox{background:linear-gradient(135deg,rgba(245,158,11,.20),rgba(239,68,68,.20));}
.ph-x-rv-item:nth-child(6n+5) .ph-x-rv-imgbox,.phx4-rec-item:nth-child(6n+5) .phx4-rec-imgbox{background:linear-gradient(135deg,rgba(236,72,153,.20),rgba(139,92,246,.20));}
.ph-x-rv-item:nth-child(6n+6) .ph-x-rv-imgbox,.phx4-rec-item:nth-child(6n+6) .phx4-rec-imgbox{background:linear-gradient(135deg,rgba(56,189,248,.20),rgba(16,185,129,.20));}
.phx4-my-review-item{background:var(--bg-input);border:1px solid var(--border-color);border-radius:10px;padding:10px;margin-top:8px;cursor:pointer;}
.phx4-variant-box{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;}
.phx4-variant-row{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-input);}
.phx4-variant-row-top{display:flex;gap:8px;align-items:center;}
.phx4-variant-row input.phx4-var-label{flex:1.4;min-width:0;padding:9px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:13px;}
.phx4-variant-row input.phx4-var-color{flex:1;min-width:0;padding:9px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:13px;}
.phx4-variant-row input.phx4-var-price{flex:1;min-width:0;padding:9px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:13px;}
.phx4-variant-row input.phx4-var-flipkart,.phx4-variant-row input.phx4-var-amazon{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:13px;box-sizing:border-box;}
.pt-oos-list{display:flex;flex-direction:column;gap:6px;}
.pt-oos-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg-input);border:1px solid var(--border-color);flex-wrap:wrap;}
.pt-oos-info{flex:1;min-width:200px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:12.5px;}
.pt-oos-name{font-weight:700;color:var(--text-primary);}
.pt-oos-variant{color:var(--text-secondary);}
.pt-oos-when{color:var(--text-muted);font-size:11.5px;width:100%;}
.pt-oos-actions{display:flex;gap:6px;flex-shrink:0;}
.pt-oos-actions button{padding:5px 9px;font-size:11.5px;white-space:nowrap;}
.phx4-var-remove{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--danger);font-weight:700;cursor:pointer;}
.phx4-var-add{align-self:flex-start;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px dashed var(--accent);background:transparent;color:var(--accent);cursor:pointer;}
.phx4-var-add:hover{background:var(--focus-ring);}
.phx4-variant-hint{grid-column:1/-1;font-size:11.5px;color:var(--text-muted);margin-top:-4px;}
.phx4-variant-price-table{display:flex;flex-direction:column;gap:6px;width:100%;}
.phx4-vpt-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:var(--bg-input);border:1px solid var(--border-color);font-size:13px;cursor:pointer;transition:all var(--transition);}
.phx4-vpt-row .phx4-vpt-label{font-weight:600;color:var(--text-primary);}
.phx4-vpt-row .phx4-vpt-price{font-weight:800;color:var(--accent);white-space:nowrap;}
.phx4-vpt-row.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.phx4-vpt-row.selected .phx4-vpt-price{color:var(--accent);}
.phx4-vpt-row .phx4-vpt-tag{font-size:10px;font-weight:700;color:var(--success);margin-left:6px;}
.phx4-variant-accordion{margin:14px 0 6px;}
.phx4-variant-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);text-align:left;font-family:inherit;}
.phx4-variant-toggle:hover{border-color:var(--accent);box-shadow:var(--shadow-hover);}
.phx4-vt-left{display:flex;flex-direction:column;gap:2px;overflow:hidden;}
.phx4-vt-heading{font-size:13px;font-weight:800;color:var(--text-primary);}
.phx4-vt-count{color:var(--text-muted);font-weight:600;}
.phx4-vt-current{font-size:12.5px;font-weight:600;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.phx4-vt-chevron{flex-shrink:0;font-size:16px;color:var(--text-muted);transition:transform var(--transition);}
.phx4-vt-chevron.open{transform:rotate(180deg);color:var(--accent);}
.phx4-variant-chips{display:flex;flex-direction:column;gap:10px;margin:10px 0 0;}
.phx4-variant-chip{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 20px;border-radius:var(--radius-pill);border:1.5px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);font-size:14px;font-weight:700;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);text-align:left;font-family:inherit;}
.phx4-variant-chip:hover{border-color:var(--accent);color:var(--text-primary);transform:translateY(-1px);box-shadow:var(--shadow-hover);}
.phx4-variant-chip:active{transform:translateY(0);}
.phx4-variant-chip .phx4-vc-label{color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.phx4-variant-chip .phx4-vc-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.phx4-variant-chip .phx4-vc-price{color:var(--accent);font-weight:800;white-space:nowrap;}
.phx4-variant-chip .phx4-vc-check{display:none;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.25);color:#fff;font-size:11px;font-weight:900;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
.phx4-variant-chip.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(79,70,229,0.32);}
.phx4-variant-chip.active .phx4-vc-price{color:#fff;}
.phx4-variant-chip.active .phx4-vc-check{display:inline-flex;}
@media (min-width:520px){
  .phx4-variant-chips{flex-direction:row;flex-wrap:wrap;}
  .phx4-variant-chip{width:auto;flex:1 1 calc(50% - 5px);}
}
.phx4-card-variant-badge{position:absolute;left:10px;bottom:10px;z-index:3;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(79,70,229,0.92);color:#fff;}
.phx4-sheet-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.phx4-sheet-toolbar input{flex:1;min-width:180px;padding:10px 14px;border-radius:10px;border:1.5px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);font-size:13.5px;}
.phx4-sheet-toolbar input:focus{outline:none;border-color:var(--accent);}
.phx4-sheet-count{font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:6px 14px;border-radius:999px;white-space:nowrap;}
.phx4-sheet-unsaved{font-size:12px;font-weight:800;color:#fff;background:var(--warning);padding:6px 14px;border-radius:999px;white-space:nowrap;align-items:center;}
.phx4-sheet-saveall{border-color:var(--success) !important;color:var(--success) !important;}
.phx4-sheet-hint{font-size:11.5px;color:var(--text-muted);margin-bottom:12px;background:var(--bg-input);border-left:3px solid var(--accent);padding:8px 12px;border-radius:8px;}
.phx4-sheet-scroll{overflow:auto;max-width:100%;max-height:70vh;border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow);}
.phx4-sheet-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12.5px;}
.phx4-sheet-table th,.phx4-sheet-table td{border:1px solid var(--border-color);padding:9px 13px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);}
.phx4-sheet-table thead th{position:sticky;top:0;z-index:4;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff !important;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;text-align:left;border-color:rgba(255,255,255,0.2);box-shadow:0 2px 8px rgba(0,0,0,0.18);}
.phx4-sheet-table tbody tr:nth-child(odd) td{background:var(--bg-card);}
.phx4-sheet-table tbody tr:nth-child(even) td{background:var(--bg-input);}
.phx4-sheet-table tbody tr:hover td{background:var(--focus-ring);}
.phx4-sheet-table td[contenteditable="true"]{cursor:text;transition:background .15s;}
.phx4-sheet-table td[contenteditable="true"]:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff !important;color:#0f172a !important;white-space:normal;position:relative;z-index:2;}
.phx4-sheet-table td.phx4-wrap{white-space:normal;min-width:200px;max-width:280px;line-height:1.5;}
.phx4-sheet-table td[data-field="variants"]{white-space:pre-line;min-width:240px;line-height:1.6;}
.phx4-sheet-table td[data-field="price"]{font-weight:800;color:var(--success);text-align:right;}
.phx4-sheet-table td[data-field="brand"],.phx4-sheet-table td[data-field="model"]{font-weight:700;}
.phx4-sheet-sticky{position:sticky;left:0;z-index:3;text-align:center;background:var(--bg-secondary) !important;}
.phx4-sheet-table thead .phx4-sheet-sticky{z-index:5;background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;}
.phx4-sheet-actions{display:flex;gap:6px;justify-content:center;align-items:center;}
.phx4-sheet-save-btn{background:var(--success);color:#fff;border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:12px;box-shadow:0 2px 6px rgba(22,163,74,0.4);transition:transform .15s, background .2s;}
.phx4-sheet-save-btn.phx4-needs-save{background:var(--warning);box-shadow:0 0 0 3px rgba(217,119,6,0.35);}
.phx4-sheet-save-btn:hover{transform:scale(1.15);}
.phx4-sheet-table tbody tr.phx4-row-dirty td{background:rgba(217,119,6,0.12) !important;}
.phx4-sheet-del-btn{background:var(--danger);color:#fff;border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:12px;box-shadow:0 2px 6px rgba(220,38,38,0.4);transition:transform .15s;}
.phx4-sheet-del-btn:hover{transform:scale(1.15);}


/* ==========================================================================
   Admin → News (advanced form) + public News card additions
   Uses the existing design tokens only (var(--accent), --border-color, ...)
   ========================================================================== */
.news-admin-form .news-hint { font-size:11px; color:var(--text-muted); }
.news-admin-form .news-opt { font-weight:400; color:var(--text-muted); }
.admin-form .form-group.news-invalid input,
.admin-form .form-group.news-invalid textarea,
.admin-form .form-group.news-invalid select { border-color:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,.12); }

.news-admin-form .news-img-row { display:flex; gap:12px; align-items:flex-start; }
.news-admin-form .news-img-row input { flex:1; min-width:0; }
.news-img-preview { width:96px; height:60px; flex-shrink:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:4px; overflow:hidden; text-align:center; font-size:10px; line-height:1.3; color:var(--text-muted); background:var(--bg-input); border:1px dashed var(--border-color); border-radius:var(--radius-xs); }
.news-img-preview img { width:100%; height:100%; object-fit:cover; display:block; border-radius:calc(var(--radius-xs) - 2px); }
.news-img-preview.is-error { border-color:var(--danger); color:var(--danger); font-weight:600; }

/* Featured ON/OFF switch */
.admin-form .form-group .news-switch { display:inline-flex; flex-direction:row; align-items:center; gap:10px; width:fit-content; max-width:100%; cursor:pointer; position:relative; }
.admin-form .form-group .news-switch input[type="checkbox"] { position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; border:0; }
.news-switch-track { position:relative; flex-shrink:0; width:38px; height:22px; border-radius:22px; background:var(--border-color); transition:background .2s; }
.news-switch-track::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .2s; }
.news-switch input:checked + .news-switch-track { background:var(--accent); }
.news-switch input:checked + .news-switch-track::after { transform:translateX(16px); }
.news-switch input:focus-visible + .news-switch-track { box-shadow:0 0 0 3px rgba(108,92,231,.25); }

.news-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; }
.news-edit-banner { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; font-size:13px; border:1px solid var(--accent); border-radius:var(--radius-xs); }
.news-edit-banner[hidden] { display:none; }
.news-preview { grid-column:1 / -1; padding:4px 14px 8px; border:1px dashed var(--border-color); border-radius:var(--radius-xs); }
.news-preview-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; font-size:12px; font-weight:600; color:var(--text-secondary); border-bottom:1px solid var(--border-color); }
.news-preview-head em { font-style:normal; font-weight:400; color:var(--text-muted); }

/* Admin list rows */
.news-admin-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-color); }
.news-admin-title { min-width:0; overflow-wrap:anywhere; }
.news-admin-actions { display:flex; gap:6px; flex-shrink:0; }
.news-chip { display:inline-block; margin-left:6px; padding:1px 8px; font-size:10px; font-weight:700; line-height:16px; vertical-align:middle; border-radius:20px; border:1px solid var(--border-color); color:var(--text-muted); }
.news-chip.draft { color:#8a6100; border-color:#d9a406; background:rgba(253,203,110,.2); }
.news-chip.featured { color:var(--accent); border-color:var(--accent); }
[data-theme="dark"] .news-chip.draft { color:#ffd36a; border-color:rgba(255,192,93,.5); background:rgba(255,192,93,.12); }

/* News cards: featured image, "Read more" body, Featured badge, source link */
.news-content .meta { flex-wrap:wrap; }
.news-content .meta a { color:var(--accent); text-decoration:none; }
.news-content .meta a:hover { text-decoration:underline; }
.news-content .news-thumb { margin-top:10px; max-width:360px; aspect-ratio:16 / 9; overflow:hidden; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-input); }
.news-content .news-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.news-content .news-body { margin-top:8px; }
.news-content .news-body[hidden] { display:none; }
.news-content .news-body p { margin:0 0 8px; line-height:1.65; }
.news-content .news-more { margin-top:8px; padding:0; background:none; border:none; font:inherit; font-size:12px; font-weight:700; color:var(--accent); cursor:pointer; }
.news-content .news-more:hover { text-decoration:underline; }
.news-content .news-featured-badge { padding:3px 6px; border-radius:3px; font-size:10px; font-weight:800; text-transform:uppercase; color:#8a6100; background:rgba(253,203,110,.3); }
[data-theme="dark"] .news-content .news-featured-badge { color:#ffd36a; background:rgba(255,192,93,.16); }

@media (max-width:480px) {
    .news-img-preview { width:76px; height:52px; }
    .news-actions .btn { flex:1 1 calc(50% - 10px); justify-content:center; }
}

/* ===== Price History page — friendlier layout ===== */
#page-pricehistory > .ph-card { padding-top:22px; }

/* Toolbar: phone picker + date range, laid out like a proper filter row */
.ph-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
    padding-bottom:18px;
    border-bottom:1px solid var(--border-color);
}
.ph-phone-picker { flex:1 1 260px; max-width:420px; }
.ph-phone-picker .phone-picker-input { padding-top:13px; padding-bottom:13px; }
.ph-date-group { display:flex; gap:10px; flex-wrap:wrap; }
.ph-date-field {
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:var(--text-muted);
}
.ph-date-field input[type="date"] {
    padding:11px 14px;
    background:var(--bg-input);
    border:1px solid var(--border-color);
    border-radius:var(--radius-xs);
    font-size:14px;
    font-family:var(--font);
    color:var(--text-primary);
    transition:border-color var(--transition), box-shadow var(--transition);
}
.ph-date-field input[type="date"]:focus {
    outline:none;
    border-color:var(--accent-2);
    box-shadow:0 0 0 3px rgba(139,92,246,0.15);
}
@media (max-width:640px) {
    .ph-toolbar { flex-direction:column; }
    .ph-phone-picker { max-width:none; width:100%; flex:0 0 auto; }
    .ph-date-group { width:100%; }
    .ph-date-field { flex:1 1 0; }
    .ph-date-field input[type="date"] { width:100%; }
}

/* Summary strip: phone name, current price, trend chip */
.ph-info {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding:16px 18px;
    margin-bottom:16px;
    border-radius:var(--radius-sm);
    background:var(--bg-input);
    border:1px solid var(--border-color);
}
.ph-info-icon { font-size:22px; line-height:1; flex-shrink:0; }
.ph-info-text { font-size:14px; color:var(--text-muted); }
.ph-info-main { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-right:auto; }
.ph-info-name { font-weight:700; font-size:15px; color:var(--text-primary); }
.ph-info-price { font-weight:800; font-size:20px; color:var(--accent); }
.ph-trend-chip {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:5px 12px;
    border-radius:var(--radius-pill);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}
.ph-trend-down { background:rgba(22,163,74,0.14); color:#15803d; }
.ph-trend-up { background:rgba(220,38,38,0.12); color:#dc2626; }
.ph-trend-flat { background:rgba(100,116,139,0.14); color:var(--text-muted); }
[data-theme="dark"] .ph-trend-down { background:rgba(74,222,128,0.14); color:#4ade80; }
[data-theme="dark"] .ph-trend-up { background:rgba(248,113,113,0.16); color:#f87171; }
.ph-info-loading .ph-info-icon { animation:phSpin 1.1s linear infinite; }
.ph-info-error { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.25); }
.ph-info-error .ph-info-text { color:#dc2626; }
[data-theme="dark"] .ph-info-error { background:rgba(248,113,113,0.1); border-color:rgba(248,113,113,0.28); }
[data-theme="dark"] .ph-info-error .ph-info-text { color:#f87171; }
@keyframes phSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Chart card: give the line chart some breathing room and a defined frame */
.ph-chart-card {
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:var(--radius-sm);
    padding:18px 16px 8px;
}
.ph-chart-card .chart-wrap { height:260px; margin-top:0; }
@media (max-width:640px) {
    .ph-chart-card { padding:14px 10px 6px; }
    .ph-chart-card .chart-wrap { height:220px; }
}

/* ===== Friendlier empty states, Favorites grid, Price Alerts & Reading List polish ===== */

/* The empty-state icon had been reduced to a bare ring by an older skin
   layer (font-size:0 hid the emoji entirely). Restore a real icon inside
   a soft tinted badge — much friendlier than a hollow circle. */
.empty-state .icon {
    font-size:26px !important;
    width:64px;
    height:64px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:var(--bg-input);
    filter:none;
    opacity:1;
}
.empty-state .icon::before { content:none; }
.empty-state { padding:56px 20px; }
.empty-state h3 { margin-top:2px; }
.empty-state p { font-size:13px; margin-top:4px; }

/* A single favorite (or any odd count) on mobile shouldn't leave a big
   empty gap next to it — collapse unused grid tracks instead of forcing
   a fixed 2-column layout. */
@media (max-width:480px) {
    #page-favorites .phone-grid { grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
}

/* ---- Price Alerts toolbar ---- */
.pa-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px;
    margin-bottom:18px;
    padding-bottom:18px;
    border-bottom:1px solid var(--border-color);
}
.pa-phone-picker { flex:1 1 240px; max-width:400px; }
.pa-phone-picker .phone-picker-input { padding-top:13px; padding-bottom:13px; }
.pa-price-field {
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:var(--text-muted);
}
.pa-price-input-wrap {
    position:relative;
    display:flex;
    align-items:center;
}
.pa-rupee {
    position:absolute;
    left:14px;
    font-size:14px;
    color:var(--text-muted);
    pointer-events:none;
}
.pa-price-input-wrap input[type="number"] {
    padding:11px 14px 11px 30px;
    width:150px;
    background:var(--bg-input);
    border:1px solid var(--border-color);
    border-radius:var(--radius-xs);
    font-size:14px;
    font-family:var(--font);
    color:var(--text-primary);
    transition:border-color var(--transition), box-shadow var(--transition);
}
.pa-price-input-wrap input[type="number"]:focus {
    outline:none;
    border-color:#f43f5e;
    box-shadow:0 0 0 3px rgba(244,63,94,0.15);
}
.pa-set-btn { background:linear-gradient(135deg,#f43f5e,#fb7185); white-space:nowrap; }
@media (max-width:640px) {
    .pa-toolbar { flex-direction:column; align-items:stretch; }
    .pa-phone-picker { max-width:none; width:100%; flex:0 0 auto; }
    .pa-price-input-wrap input[type="number"] { width:100%; }
    .pa-set-btn { width:100%; justify-content:center; }
}

/* ---- Price Alerts list ---- */
.pa-alert-list .pa-item { gap:12px; }
.pa-item-icon { font-size:20px; flex-shrink:0; }
.pa-item-info { display:flex; flex-direction:column; gap:2px; margin-right:auto; }
.pa-item-hit { background:rgba(22,163,74,0.06); border-radius:var(--radius-xs); padding-left:8px; padding-right:8px; margin:0 -8px; }
[data-theme="dark"] .pa-item-hit { background:rgba(74,222,128,0.08); }

/* ---- Reading List items ---- */
.rl-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 4px;
    border-bottom:1px solid var(--border-color);
}
.rl-item:last-child { border-bottom:none; }
.rl-item-icon {
    width:36px;
    height:36px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    background:var(--bg-input);
    border-radius:50%;
}
.rl-item-info { display:flex; flex-direction:column; gap:2px; margin-right:auto; cursor:pointer; min-width:0; }
.rl-item-name { font-weight:700; font-size:14px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rl-item-price { font-size:12px; color:var(--text-muted); }

/* ===== Vibrant colour pass: Favorites (rose→violet), Price Alerts (amber→rose), Reading List (blue→cyan) ===== */

/* Reset to a clean plain card, then layer vibrant accents on top —
   looks far more premium than a flat tinted background. */
#page-favorites > .card,
#page-pricealerts > .card,
#page-readinglist > .card {
    background:var(--bg-card) !important;
    border-color:var(--border-color) !important;
    border-top:1px solid var(--border-color) !important;
    position:relative;
}
[data-theme="dark"] #page-favorites > .card,
[data-theme="dark"] #page-pricealerts > .card,
[data-theme="dark"] #page-readinglist > .card {
    background:var(--bg-card) !important;
    border-color:var(--border-color) !important;
}

/* Bold gradient cap across the top of the card */
#page-favorites > .card::before,
#page-pricealerts > .card::before,
#page-readinglist > .card::before {
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:5px;
    border-radius:13px 13px 0 0;
    z-index:1;
}
#page-favorites > .card::before { background:linear-gradient(90deg,#ec4899,#a855f7,#8b5cf6); }
#page-pricealerts > .card::before { background:linear-gradient(90deg,#f59e0b,#fb7185,#f43f5e); }
#page-readinglist > .card::before { background:linear-gradient(90deg,#3b82f6,#22d3ee,#06b6d4); }

/* Colour-tinted glow instead of a flat grey shadow */
#page-favorites > .card { box-shadow:0 14px 34px rgba(236,72,153,0.14); }
#page-pricealerts > .card { box-shadow:0 14px 34px rgba(244,63,94,0.14); }
#page-readinglist > .card { box-shadow:0 14px 34px rgba(59,130,246,0.14); }
[data-theme="dark"] #page-favorites > .card { box-shadow:0 14px 34px rgba(236,72,153,0.22); }
[data-theme="dark"] #page-pricealerts > .card { box-shadow:0 14px 34px rgba(244,63,94,0.22); }
[data-theme="dark"] #page-readinglist > .card { box-shadow:0 14px 34px rgba(59,130,246,0.22); }

/* Gradient headline text for extra pop (emoji glyphs stay full colour) */
#page-favorites .card-title,
#page-pricealerts .card-title,
#page-readinglist .card-title {
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    width:fit-content;
}
#page-favorites .card-title { background-image:linear-gradient(135deg,#ec4899,#8b5cf6); }
#page-pricealerts .card-title { background-image:linear-gradient(135deg,#f59e0b,#f43f5e); }
#page-readinglist .card-title { background-image:linear-gradient(135deg,#3b82f6,#06b6d4); }

/* Every saved favourite gets a permanent gradient border — feels intentional
   and premium rather than a stray hover artifact. */
#page-favorites .phone-card {
    border:2px solid transparent;
    background-image:linear-gradient(var(--bg-card),var(--bg-card)), linear-gradient(135deg,#ec4899,#a855f7,#8b5cf6);
    background-origin:border-box;
    background-clip:padding-box, border-box;
}
#page-favorites .phone-card:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(139,92,246,0.22); }

/* Empty-state icon badges: a vivid gradient circle per page instead of the
   flat grey one used elsewhere. */
#page-favorites .empty-state .icon { background:linear-gradient(135deg,#ec4899,#8b5cf6); box-shadow:0 8px 20px rgba(236,72,153,0.35); }
#page-pricealerts .empty-state .icon { background:linear-gradient(135deg,#f59e0b,#f43f5e); box-shadow:0 8px 20px rgba(244,63,94,0.3); }
#page-readinglist .empty-state .icon { background:linear-gradient(135deg,#3b82f6,#06b6d4); box-shadow:0 8px 20px rgba(59,130,246,0.3); }

/* Alert list: gradient icon chip + colourful target pill */
.pa-item-icon {
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#f59e0b,#f43f5e);
    box-shadow:0 6px 16px rgba(244,63,94,0.28);
}
.pa-item-hit .pa-item-icon { background:linear-gradient(135deg,#22c55e,#16a34a); box-shadow:0 6px 16px rgba(34,197,94,0.32); }
.alert-item .target {
    display:inline-block;
    margin-top:5px;
    padding:3px 10px;
    border-radius:var(--radius-pill);
    font-weight:600;
    font-size:11px;
    color:#c2410c;
    background:linear-gradient(135deg,rgba(245,158,11,0.16),rgba(244,63,94,0.16));
}
[data-theme="dark"] .alert-item .target { color:#fdba74; background:linear-gradient(135deg,rgba(245,158,11,0.22),rgba(244,63,94,0.22)); }
.pa-item-hit .target { color:#15803d; background:linear-gradient(135deg,rgba(34,197,94,0.18),rgba(22,163,74,0.18)); }
[data-theme="dark"] .pa-item-hit .target { color:#4ade80; background:linear-gradient(135deg,rgba(34,197,94,0.24),rgba(22,163,74,0.24)); }
.pa-set-btn { background:linear-gradient(135deg,#f59e0b,#f43f5e) !important; box-shadow:0 8px 20px rgba(244,63,94,0.28); }

/* Reading list: gradient icon chip + colourful price pill */
.rl-item-icon { background:linear-gradient(135deg,#3b82f6,#06b6d4); box-shadow:0 6px 16px rgba(59,130,246,0.3); color:#fff; }
.rl-item-price {
    display:inline-block;
    width:fit-content;
    padding:2px 9px;
    border-radius:var(--radius-pill);
    font-weight:700;
    color:#0369a1;
    background:linear-gradient(135deg,rgba(59,130,246,0.14),rgba(6,182,212,0.14));
}
[data-theme="dark"] .rl-item-price { color:#7dd3fc; background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(6,182,212,0.2)); }

/* Reading list "N items" counter as a small gradient chip too */
#readingListCount {
    padding:3px 12px;
    border-radius:var(--radius-pill);
    font-weight:700;
    color:#0369a1;
    background:linear-gradient(135deg,rgba(59,130,246,0.14),rgba(6,182,212,0.14));
}
[data-theme="dark"] #readingListCount { color:#7dd3fc; background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(6,182,212,0.2)); }
#favSubtitle {
    padding:3px 12px;
    border-radius:var(--radius-pill);
    font-weight:700;
    color:#a21caf;
    background:linear-gradient(135deg,rgba(236,72,153,0.14),rgba(139,92,246,0.14));
}
[data-theme="dark"] #favSubtitle { color:#f0abfc; background:linear-gradient(135deg,rgba(236,72,153,0.2),rgba(139,92,246,0.2)); }


/* ============================================================
   ⚖️ COMPARE CARD — friendly, mobile-first layout
   (slots = number badge + search field with 🔍 / ✕ inside)
   ============================================================ */
#page-compare .cmp-card { padding-bottom: 18px; }

/* --- live progress --- */
.cmp-meter { margin: 2px 0 16px; }
.cmp-meter-top {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-bottom: 7px; font-size: 12px; font-weight: 600;
    color: var(--text-secondary, var(--text-muted));
}
.cmp-meter-top strong {
    flex-shrink: 0; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 800; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.cmp-meter-bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--text-muted) 22%, transparent);
}
.cmp-meter-bar span {
    display: block; width: 0; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #3b6bff, #7c5cff);
    transition: width .3s ease;
}

/* --- slots --- */
.cmp-slots { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.cmp-slot { display: flex; align-items: flex-start; gap: 10px; }
.cmp-slot:focus-within { position: relative; z-index: 60; }   /* dropdown stays above the next slot */

.cmp-num {
    flex: 0 0 auto; width: 30px; height: 30px; margin-top: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 13px; font-weight: 800;
    color: var(--text-muted); background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    transition: background .2s, color .2s, box-shadow .2s;
}
.cmp-slot.is-filled .cmp-num {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #3b6bff, #7c5cff);
    box-shadow: 0 4px 12px rgba(91, 92, 255, .35);
}

.cmp-field { flex: 1 1 auto; min-width: 0; }
.cmp-inputwrap { position: relative; }
.cmp-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    font-size: 14px; opacity: .65; pointer-events: none;
}
#page-compare .cmp-input {
    display: block; width: 100%; height: 46px; padding: 0 42px 0 38px;
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 12px;
    font-size: 15px; outline: none; text-overflow: ellipsis;
    transition: border-color .18s, box-shadow .18s;
}
#page-compare .cmp-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* ✕ only shows when the field has text (placeholder is hidden) */
.cmp-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; padding: 0; display: none;
    align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: transparent;
    -webkit-appearance: none; appearance: none;
    color: var(--danger); font-size: 14px; line-height: 1; cursor: pointer;
}
.cmp-input:not(:placeholder-shown) ~ .cmp-clear { display: inline-flex; }
.cmp-clear:hover, .cmp-clear:active { background: color-mix(in srgb, var(--danger) 13%, transparent); }

/* mini spec line under a picked phone */
.cmp-meta {
    display: none; margin: 6px 4px 0;
    font-size: 12px; font-weight: 500; color: var(--text-muted);
}
.cmp-slot.is-filled .cmp-meta { display: block; }

/* suggestion dropdown */
.cmp-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
    max-height: min(280px, 46vh); overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: none;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
}

/* --- actions --- */
.cmp-actions { display: flex; flex-direction: column; gap: 10px; }
#page-compare .cmp-actions .btn {
    min-height: 46px; justify-content: center; border-radius: 12px;
}
#page-compare .cmp-primary {
    width: 100%; padding: 0 20px; font-size: 15px; font-weight: 700;
    color: #fff; border: none;
    background: linear-gradient(135deg, #3b6bff, #7c5cff);
    box-shadow: 0 6px 16px rgba(91, 92, 255, .25);
    opacity: .78; transition: opacity .2s, box-shadow .2s, transform .15s;
}
#page-compare .cmp-primary.is-ready { opacity: 1; box-shadow: 0 10px 26px rgba(91, 92, 255, .42); }
.cmp-secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#page-compare .cmp-secondary .btn {
    min-width: 0; padding: 0 8px; font-size: 12.5px; white-space: nowrap;
}

/* --- footer --- */
.cmp-footer {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 12px; color: var(--text-muted);
}
.cmp-footer #compareStatus { font-size: 11.5px; }

/* --- bigger screens: 2 x 2 slots, buttons in one row --- */
@media (min-width: 720px) {
    .cmp-slots { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
    .cmp-actions { flex-direction: row; align-items: stretch; }
    #page-compare .cmp-primary { width: auto; flex: 1 1 40%; }
    .cmp-secondary { flex: 1 1 60%; }
}
@media (max-width: 640px) {
    #page-compare .cmp-input { font-size: 16px; }   /* no zoom-on-focus on phones */
}


/* ============================================================
   🔐 Admin Panel: শুধু অ্যাডমিন UID লগইন করলে (html.is-admin) দেখা যায়
   ============================================================ */
html:not(.is-admin) #adminNavBtn,
html:not(.is-admin) #adminToggle,
html:not(.is-admin) #page-admin { display: none !important; }



/* ============================================================
   🎀 Friendly confirm dialog (Logout / Delete account)
   ============================================================ */
.fc-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 23, 42, .48);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: fcFade .18s ease;
}
.fc-overlay.fc-out { opacity: 0; transition: opacity .16s ease; }
.fc-card {
    --fc-color: #4f6bff;
    width: 100%; max-width: 360px; padding: 26px 22px 20px;
    text-align: center; border-radius: 22px;
    background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
    animation: fcPop .24s cubic-bezier(.2, .9, .3, 1.15);
}
.fc-card.fc-danger { --fc-color: #e11d48; }
.fc-icon {
    width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
    background: color-mix(in srgb, var(--fc-color) 14%, transparent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--fc-color) 8%, transparent);
}
.fc-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary, #0f172a); }
.fc-msg { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--text-muted, #64748b); }
.fc-actions { display: flex; gap: 10px; }
.fc-btn {
    flex: 1; min-height: 46px; padding: 0 12px; border-radius: 13px;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.fc-btn:active { transform: scale(.97); }
.fc-cancel { background: var(--bg-input, #f1f5f9); color: var(--text-primary, #0f172a); border: 1px solid var(--border-color, #e2e8f0); }
.fc-ok {
    color: #fff; border: none;
    background: linear-gradient(135deg, var(--fc-color), color-mix(in srgb, var(--fc-color) 68%, #7c3aed));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--fc-color) 35%, transparent);
}
.fc-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--fc-color) 45%, transparent); outline-offset: 2px; }
@keyframes fcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fcPop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
    .fc-overlay { align-items: flex-end; padding: 12px; }
    .fc-card { max-width: none; }
}

/* ============================================================
   ❤️ Favorites: heart stays RED (old mono theme forced grayscale)
   ============================================================ */
.phone-card .fav-btn { filter: none !important; }
.phone-card .fav-btn.active {
    background: #fff1f2 !important; border: 1px solid #fecdd3 !important;
    color: #e11d48 !important; box-shadow: 0 4px 12px rgba(244, 63, 94, .22);
}
[data-theme="dark"] .phone-card .fav-btn.active {
    background: rgba(244, 63, 94, .2) !important; border-color: rgba(244, 63, 94, .45) !important;
}
/* not-yet-favourite: clear outline heart instead of an almost invisible white one */
.phone-card .fav-btn:not(.active) { font-size: 0 !important; }
.phone-card .fav-btn:not(.active)::before { content: '\2661'; font-size: 19px; line-height: 1; color: var(--text-muted); }
.phone-card .fav-btn:not(.active):hover::before { color: #e11d48; }
/* "❤️ Favorites" heading keeps its real colours */
#page-favorites .card-title { filter: none; }

/* ============================================================
   🦊 Login / Register: avatar picker (round avatars) + tidy fields
   ============================================================ */
#authModal .avatar-options { grid-template-columns: repeat(6, 1fr); gap: 12px 8px; }
#authModal .avatar-option {
    border-radius: 50%; border: 2px solid transparent; min-height: 0;
    font-size: 26px; position: relative;
    box-shadow: inset 0 -3px 6px rgba(15, 23, 42, .06);
}
#authModal .avatar-option:nth-child(6n+1) { background: linear-gradient(145deg, #ffe9d6, #ffd0a6); }
#authModal .avatar-option:nth-child(6n+2) { background: linear-gradient(145deg, #e8eefc, #cdd9f7); }
#authModal .avatar-option:nth-child(6n+3) { background: linear-gradient(145deg, #fff3c9, #ffe28a); }
#authModal .avatar-option:nth-child(6n+4) { background: linear-gradient(145deg, #ffe0d0, #ffc2a3); }
#authModal .avatar-option:nth-child(6n+5) { background: linear-gradient(145deg, #dcf5e6, #b7ebcb); }
#authModal .avatar-option:nth-child(6n)   { background: linear-gradient(145deg, #eadcff, #d3bcff); }
#authModal .avatar-option:hover { transform: translateY(-2px) scale(1.06); border-color: transparent; box-shadow: 0 8px 16px rgba(58, 100, 198, .2); }
#authModal .avatar-option.selected {
    border-color: #4f7cff; transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(79, 124, 255, .22), 0 8px 16px rgba(58, 100, 198, .22);
}
#authModal .avatar-option.selected::after {
    content: '\2713'; position: absolute; right: -4px; bottom: -4px;
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; line-height: 1;
    background: #4f7cff; color: #fff; border: 2px solid #fff;
}
[data-theme="dark"] #authModal .avatar-option:nth-child(n) { background: linear-gradient(145deg, #24385f, #1a2b4a); }
[data-theme="dark"] #authModal .avatar-option.selected { border-color: #70a0ff; }
[data-theme="dark"] #authModal .avatar-option.selected::after { border-color: #142443; }
@media (max-width: 420px) {
    #authModal .avatar-options { gap: 10px 6px; }
    #authModal .avatar-option { min-height: 0; font-size: 22px; border-radius: 50%; }
}

/* form fields: label on top, full-width friendly inputs */
#authModal .form-group { display: flex; flex-direction: column; gap: 6px; }
#authModal .form-group label { font-size: 12px; font-weight: 700; color: var(--text-secondary, var(--text-muted)); }
#authModal .form-group input {
    width: 100%; height: 46px; padding: 0 14px; font-size: 16px;
    color: var(--text-primary); background: var(--bg-input);
    border: 1px solid var(--border-color); border-radius: 12px; outline: none;
    transition: border-color .18s, box-shadow .18s;
}
#authModal .form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
#authModal #authSubmitBtn, #authModal #googleSignInBtn {
    width: 100%; min-height: 46px; justify-content: center; border-radius: 12px; font-size: 15px; font-weight: 700;
}
#authModal #googleSignInBtn { border: none; }


/* ---- friendly dialog: input field (Forgot password / Copy link) ---- */
.fc-input {
    display: block; width: 100%; height: 48px; margin: 0 0 6px; padding: 0 14px;
    font: inherit; font-size: 16px; text-align: left;
    color: var(--text-primary, #0f172a); background: var(--bg-input, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0); border-radius: 13px; outline: none;
    -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
    transition: border-color .18s, box-shadow .18s;
}
.fc-input:focus { border-color: var(--fc-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-color) 22%, transparent); }
.fc-input.fc-invalid { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, .16); }
.fc-error { min-height: 18px; margin: 0 2px 12px; font-size: 12.5px; font-weight: 600; text-align: left; color: #e11d48; }
.fc-card .fc-msg + .fc-input { margin-top: -6px; }


/* =====================================================================
   🔔 Push notifications (FCM) — opt-in card + admin "Notify" tab
   Uses the existing design tokens, so light/dark themes just work.
   ===================================================================== */
.ph-push-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.ph-push-card[hidden] { display: none !important; }
.ph-push-icon { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.ph-push-copy { flex: 1 1 240px; min-width: 0; }
.ph-push-copy strong { display: block; font-size: 15px; color: var(--text-primary); }
.ph-push-copy p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.ph-push-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-push-actions [hidden] { display: none !important; }
.ph-push-actions .btn[disabled] { opacity: .7; cursor: progress; }

/* Small spinner on "Enabling…" so the wait (service worker + FCM token +
   our server, usually 1-3s) reads as active progress, not a stuck button. */
.ph-push-actions .btn.ph-push-loading { position: relative; padding-left: 32px; }
.ph-push-actions .btn.ph-push-loading::before {
    content: "";
    position: absolute; left: 11px; top: 50%; margin-top: -7px;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
    border-radius: 50%;
    animation: ph-push-spin .7s linear infinite;
}
@keyframes ph-push-spin { to { transform: rotate(360deg); } }

/* ⋮ per-row menu in Admin → Manage */
.ph-complete-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; cursor: help; vertical-align: middle; }
.ph-complete-badge.ph-incomplete .ph-missing-count { font-size: 10.5px; font-weight: 700; color: var(--danger, #ef4444); background: rgba(239,68,68,0.12); border-radius: 8px; padding: 0 5px; line-height: 1.5; }
.ph-admin-row-menu { position: relative; }
.ph-admin-row-menu-btn { min-width: 36px; padding: 6px 10px; font-size: 16px; line-height: 1; }
.ph-admin-row-menu-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0;
    display: flex; flex-direction: column;
    min-width: 150px; padding: 6px 0;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    z-index: 60;
}
.ph-admin-row-menu-dropdown[hidden] { display: none; }
.ph-admin-row-menu-dropdown button {
    width: 100%; text-align: left; background: none; border: none;
    padding: 9px 14px; font-size: 13px; color: var(--text-primary);
    cursor: pointer;
}
.ph-admin-row-menu-dropdown button:hover { background: var(--bg-input); }
.ph-admin-row-menu-dropdown button.danger { color: var(--danger, #ef4444); }

.ph-push-admin-stats {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: var(--radius-sm);
}
.ph-push-admin-status { min-height: 20px; font-size: 13px; color: var(--text-secondary); }
.ph-push-admin-status[data-kind="success"] { color: var(--success); }
.ph-push-admin-status[data-kind="error"] { color: var(--danger); }

@media (max-width: 520px) {
    .ph-push-actions { width: 100%; }
    .ph-push-actions .btn { flex: 1 1 auto; }
}


/* ======================================================================
   🖼️ PhoneHub — Auto Spec Card Generator
   Everything is scoped to .phx-sc-*. The card itself uses
   explicit light colours only (no theme variables) so website dark mode can
   never change the exported PNG.
   ====================================================================== */

/* --- LIVE MODE: the phone page shows TWO images — the normal photo + the auto spec card --- */
.phx-sc-live { display: none; position: relative; width: 100%; min-width: 0; }
/* Specs slide: swap the photo stage for the card */
.detail-gallery.phx-sc-on.phx-sc-show-card .phx-sc-live { display: block; }
.detail-gallery.phx-sc-on.phx-sc-show-card .detail-gallery-stage { display: none !important; }
/* Exactly two images (Photo + Specs). The extra-gallery feature was retired (getGalleryImages() now returns []),
   so these old arrows / counter / thumbnail strip are never needed while the card is shown. */
.detail-gallery.phx-sc-on .detail-thumbnails { display: none !important; }

.phx-sc-live-scaler {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
    cursor: zoom-in;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.phx-sc-live-scaler:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.phx-sc-live-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 1080px;
    transform-origin: 0 0;
}
/* the detail page has `.phone-detail-page * { max-width:100% !important }` — the 1080px card must be exempt */
.phone-detail-page .phx-sc-live-inner,
.phone-detail-page .phx-sc-tab-mini-inner,
.phone-detail-page .phx-sc-card,
.phone-detail-page .phx-sc-card * { max-width: none !important; }

/* the card is prepared invisibly (but really laid out) before it is offered */
.phx-sc-measure {
    position: fixed;
    left: -12000px;
    top: 0;
    width: 1080px;
    height: 1080px;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/* admin-only extra: one-click PNG of the card, under the thumbnails, only while the Specs image is showing */
.phx-sc-live-tools { display: none; margin-top: 12px; }
html.is-admin .detail-gallery.phx-sc-on.phx-sc-show-card .phx-sc-live-tools { display: flex; justify-content: flex-start; }

/* [ Photo ] [ Specs ] thumbnails */
.phx-sc-tabs { display: none; gap: 10px; margin-top: 12px; }
.detail-gallery.phx-sc-on .phx-sc-tabs { display: flex; }
.phx-sc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 84px;
    padding: 4px;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.phx-sc-tab:hover { border-color: var(--accent); }
.phx-sc-tab.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 124, 255, .18); color: var(--text-primary); }
.phx-sc-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.phx-sc-tab-photo {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bg-input);
}
.phx-sc-tab-mini {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e7e9f3;
    box-sizing: border-box;
    pointer-events: none;
}
.phx-sc-tab-mini-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 1080px;
    transform-origin: 0 0;
    transform: scale(0.0667);
}
.phx-sc-tab-label { font-size: 12px; font-weight: 700; line-height: 1.1; }

/* --- Preview modal (re-uses the existing #modalOverlay / #modalContent) --- */
#modalContent.phx-sc-modal {
    width: auto;
    max-width: 100%;
    min-width: min(360px, 100%);
    padding: 18px 20px 20px;
    overflow-x: hidden;
}
#modalContent.phx-sc-modal .modal-close { margin: -4px -4px 0 8px; }
.phx-sc-shell { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.phx-sc-bar { padding-right: 34px; }
.phx-sc-title { font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--text-primary); overflow-wrap: anywhere; }
.phx-sc-auto { margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }

.phx-sc-status { font-size: 13px; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.phx-sc-status:empty { display: none; }
.phx-sc-status[data-kind="success"] { color: var(--success); }
.phx-sc-status[data-kind="error"] {
    color: var(--danger);
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .28);
    border-radius: 10px;
    padding: 9px 12px;
}

.phx-sc-stage { display: flex; justify-content: center; min-width: 0; max-width: 100%; }
.phx-sc-scaler {
    position: relative;
    overflow: hidden;
    flex: none;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 10px 34px rgba(16, 24, 40, .22);
}
.phx-sc-scaler-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 1080px;
    transform-origin: 0 0;
}
.phx-sc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}
.phx-sc-placeholder.is-error { color: var(--danger); border-color: rgba(220, 38, 38, .4); }
.phx-sc-placeholder-msg { max-width: 420px; overflow-wrap: anywhere; }
.phx-sc-spin {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    animation: phxScSpin .8s linear infinite;
}
@keyframes phxScSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .phx-sc-spin { animation-duration: 2.4s; } }

.phx-sc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.phx-sc-btn { min-height: 42px; justify-content: center; }
.phx-sc-btn[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
    #modalContent.phx-sc-modal { padding: 14px 12px 14px; min-width: 0; }
    .phx-sc-actions .phx-sc-btn { flex: 1 1 calc(50% - 6px); padding-inline: 10px; }
    .phx-sc-actions #phxScDownload { flex-basis: 100%; }
}

/* --- Off-screen 1:1 copy that html2canvas captures --- */
.phx-sc-export-stage {
    position: fixed;
    left: -12000px;
    top: 0;
    width: 1080px;
    height: 1080px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

/* --- The card (always light, always 1080 × 1080) --- */
.phx-sc-card,
.phx-sc-card * {
    box-sizing: border-box;
    text-shadow: none;
    filter: none;
    -webkit-font-smoothing: antialiased;
}
.phx-sc-card img,
.phx-sc-card svg { max-width: none; }
.phx-sc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 1080px;
    height: 1080px;
    padding: 40px 56px 30px;
    overflow: hidden;
    background-color: var(--sc-card-bg, #ffffff);
    background-image: var(--sc-card-bg-image, none);
    background-size: var(--sc-card-bg-size, auto);
    color: var(--sc-card-fg, #141b34);
    text-align: left;
    direction: ltr;
    letter-spacing: 0;
    font-family: var(--sc-font, system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif);
    font-weight: 600;
    line-height: 1.2;
}

.phx-sc-head {
    flex: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    height: 150px;
    min-width: 0;
}
.phx-sc-titlebox {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.phx-sc-brand {
    font-size: 40px;
    font-weight: var(--sc-brand-weight, 700);
    line-height: 1.1;
    color: var(--sc-brand-color, #8b1e4f);
    letter-spacing: var(--sc-brand-tracking, 0);
    text-transform: var(--sc-brand-transform, none);
}
.phx-sc-brand.phx-sc-brand-chip {
    display: inline-block;
    width: fit-content;
    padding: 3px 14px;
    margin-bottom: 4px;
    border-radius: var(--sc-brand-chip-radius, 6px);
    background: var(--sc-brand-chip-bg, transparent);
    color: var(--sc-brand-chip-fg, var(--sc-brand-color, #8b1e4f));
}
.phx-sc-model {
    margin-top: 2px;
    font-size: 96px;
    font-weight: var(--sc-title-weight, 800);
    line-height: 1.04;
    letter-spacing: var(--sc-title-tracking, -0.03em);
    color: var(--sc-title-color, #141b34);
    text-transform: var(--sc-title-transform, none);
    transform: var(--sc-title-skew, none);
    white-space: nowrap;
    overflow-wrap: anywhere;
}
.phx-sc-rule {
    flex: none;
    height: var(--sc-rule-h, 2px);
    margin: 10px 0 20px;
    background: var(--sc-rule-bg, #edeff6);
}

.phx-sc-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 30px;
}
.phx-sc-photo {
    flex: none;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.phx-sc-img {
    display: block;
    flex: none;
    width: 10px;              /* real pixel size is set by layoutCard() from the photo's aspect ratio */
    height: 10px;
    object-fit: contain;
}

.phx-sc-grid {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-content: center;
}
.phx-sc-box {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    min-height: 0;
    padding: 12px 16px 10px;
    overflow: hidden;
    border-radius: var(--sc-box-radius, 22px);
    background: var(--sc-box-bg, #f5f6fb);
    border: var(--sc-box-border, 1.5px solid #e7e9f3);
    border-left: var(--sc-box-border-left, var(--sc-box-border, 1.5px solid #e7e9f3));
}
.phx-sc-box.is-wide { grid-column: 1 / -1; }
.phx-sc-box-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
}
.phx-sc-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sc-ico-radius, 11px);
    background: var(--sc-ico-bg, #f8e9f1);
}
.phx-sc-ico svg { display: block; }
.phx-sc-label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sc-label-color, #5b6480);
    white-space: nowrap;
    text-transform: var(--sc-label-transform, none);
}
.phx-sc-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* auto margins centre the value block in the space under the label, but (unlike
   justify-content:center) overflow only ever runs downward, so scrollHeight stays reliable */
.phx-sc-body > :first-child { margin-top: auto; }
.phx-sc-body > :last-child { margin-bottom: auto; }
.phx-sc-val {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--sc-val-color, #141b34);
    overflow-wrap: anywhere;
}
.phx-sc-sub {
    margin-top: 3px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.28;
    color: var(--sc-sub-color, #5f6985);
    overflow-wrap: anywhere;
}

.phx-sc-foot {
    flex: none;
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.phx-sc-bench {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-bottom: 8px;
}
.phx-sc-pill {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 20px;
    border-radius: var(--sc-pill-radius, 999px);
    background: var(--sc-pill-bg, #f8e9f1);
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
}
.phx-sc-pill-k { font-weight: 600; color: var(--sc-pill-k, #8b1e4f); }
.phx-sc-pill-v { font-weight: 800; color: var(--sc-pill-v, #141b34); }
.phx-sc-mark {
    font-size: 21px;
    font-weight: var(--sc-mark-weight, 600);
    line-height: 1.2;
    letter-spacing: var(--sc-mark-tracking, 0.08em);
    text-transform: var(--sc-mark-transform, none);
    color: var(--sc-mark-color, #9ba2b8);
}


/* ======================================================================
   Per-brand card themes. Each brand gets its own colours, shapes and type
   treatment via data-phx-brand on .phx-sc-card; unmapped brands keep the
   neutral default look defined above (no attribute block needed for it).
   Icon stroke colours live in script.js (THEME_ICON_COLOR) since the SVGs
   are drawn with explicit hex, not CSS.
   ====================================================================== */

/* Samsung — brand blue, soft rounded */
.phx-sc-card[data-phx-brand="samsung"] {
    --sc-brand-color: #1428A0;
    --sc-title-color: #0b1330;
    --sc-rule-bg: linear-gradient(90deg, #1428A0, #5570F5);
    --sc-box-bg: #EEF1FC;
    --sc-box-border: 1.5px solid #D6DEF8;
    --sc-ico-bg: #DCE3FA;
    --sc-ico-radius: 12px;
    --sc-pill-bg: #E3E8FC;
    --sc-pill-k: #1428A0;
    --sc-mark-color: #1428A0;
}

/* Apple — monochrome, quiet, hairline */
.phx-sc-card[data-phx-brand="apple"] {
    --sc-card-fg: #1d1d1f;
    --sc-brand-color: #6e6e73;
    --sc-brand-weight: 600;
    --sc-brand-tracking: 0.14em;
    --sc-brand-transform: uppercase;
    --sc-title-color: #1d1d1f;
    --sc-title-weight: 700;
    --sc-title-tracking: -0.02em;
    --sc-rule-bg: #d2d2d7;
    --sc-rule-h: 1px;
    --sc-box-bg: #fbfbfd;
    --sc-box-border: 1px solid #e5e5ea;
    --sc-box-radius: 18px;
    --sc-ico-bg: #f5f5f7;
    --sc-ico-radius: 50%;
    --sc-label-color: #86868b;
    --sc-val-color: #1d1d1f;
    --sc-sub-color: #86868b;
    --sc-pill-bg: #f5f5f7;
    --sc-pill-k: #86868b;
    --sc-pill-v: #1d1d1f;
    --sc-mark-color: #86868b;
    --sc-mark-transform: uppercase;
    --sc-mark-tracking: 0.18em;
}

/* OnePlus — signature red, bold black, sharp corners */
.phx-sc-card[data-phx-brand="oneplus"] {
    --sc-brand-color: #EB0028;
    --sc-brand-transform: uppercase;
    --sc-brand-tracking: 0.08em;
    --sc-title-color: #111111;
    --sc-title-weight: 800;
    --sc-rule-bg: #EB0028;
    --sc-rule-h: 4px;
    --sc-box-bg: #ffffff;
    --sc-box-border: 2px solid #111111;
    --sc-box-radius: 6px;
    --sc-ico-bg: #111111;
    --sc-ico-radius: 6px;
    --sc-label-color: #6b6b6b;
    --sc-val-color: #111111;
    --sc-sub-color: #6b6b6b;
    --sc-pill-bg: #111111;
    --sc-pill-k: #EB0028;
    --sc-pill-v: #ffffff;
    --sc-mark-color: #EB0028;
    --sc-mark-weight: 800;
    --sc-mark-transform: uppercase;
    --sc-mark-tracking: 0.22em;
}

/* Xiaomi / Redmi — orange, bold, warm */
.phx-sc-card[data-phx-brand="xiaomi"] {
    --sc-brand-color: #FF6900;
    --sc-brand-weight: 800;
    --sc-title-color: #161616;
    --sc-rule-bg: linear-gradient(90deg, #FF6900, #FFB27A);
    --sc-box-bg: #FFF3E9;
    --sc-box-border: 1.5px solid #FFDAB8;
    --sc-box-radius: 16px;
    --sc-ico-bg: #FFE3CC;
    --sc-ico-radius: 12px;
    --sc-pill-bg: #FFE3CC;
    --sc-pill-k: #FF6900;
    --sc-mark-color: #FF6900;
}

/* POCO — high-contrast yellow & black, slanted */
.phx-sc-card[data-phx-brand="poco"] {
    --sc-brand-color: #111111;
    --sc-brand-weight: 900;
    --sc-brand-transform: uppercase;
    --sc-brand-tracking: 0.02em;
    --sc-title-color: #111111;
    --sc-title-weight: 900;
    --sc-title-transform: uppercase;
    --sc-title-skew: skewX(-6deg);
    --sc-rule-bg: #FFD300;
    --sc-rule-h: 5px;
    --sc-box-bg: #111111;
    --sc-box-border: none;
    --sc-box-radius: 4px;
    --sc-ico-bg: #FFD300;
    --sc-ico-radius: 4px;
    --sc-label-color: #FFD300;
    --sc-val-color: #ffffff;
    --sc-sub-color: #cfcfcf;
    --sc-pill-bg: #FFD300;
    --sc-pill-k: #111111;
    --sc-pill-v: #111111;
    --sc-mark-color: #FFD300;
    --sc-mark-weight: 800;
    --sc-mark-transform: uppercase;
}

/* vivo — brand blue, soft pill shapes */
.phx-sc-card[data-phx-brand="vivo"] {
    --sc-brand-color: #3355FF;
    --sc-brand-weight: 800;
    --sc-title-color: #101636;
    --sc-rule-bg: linear-gradient(90deg, #3355FF, #8CA6FF);
    --sc-box-bg: #EEF1FF;
    --sc-box-border: 1.5px solid #D6DEFF;
    --sc-box-radius: 26px;
    --sc-ico-bg: #DDE4FF;
    --sc-ico-radius: 50%;
    --sc-pill-bg: #DDE4FF;
    --sc-pill-k: #3355FF;
    --sc-mark-color: #3355FF;
}

/* iQOO — racing navy + orange, angled */
.phx-sc-card[data-phx-brand="iqoo"] {
    --sc-brand-color: #0B1F5C;
    --sc-brand-transform: uppercase;
    --sc-brand-tracking: 0.06em;
    --sc-title-color: #0B1F5C;
    --sc-title-transform: uppercase;
    --sc-title-skew: skewX(-4deg);
    --sc-rule-bg: linear-gradient(90deg, #0B1F5C, #FF5B00);
    --sc-box-bg: #FFF4EC;
    --sc-box-border: none;
    --sc-box-border-left: 4px solid #FF5B00;
    --sc-box-radius: 8px;
    --sc-ico-bg: #FFE1CC;
    --sc-ico-radius: 8px;
    --sc-pill-bg: #0B1F5C;
    --sc-pill-k: #FF5B00;
    --sc-pill-v: #ffffff;
    --sc-mark-color: #FF5B00;
    --sc-mark-transform: uppercase;
}

/* realme — dash-pattern yellow & black */
.phx-sc-card[data-phx-brand="realme"] {
    --sc-brand-chip-bg: #FFE100;
    --sc-brand-chip-fg: #111111;
    --sc-brand-chip-radius: 4px;
    --sc-brand-weight: 900;
    --sc-title-color: #111111;
    --sc-title-weight: 900;
    --sc-title-transform: uppercase;
    --sc-rule-bg: repeating-linear-gradient(90deg, #111111 0 14px, #FFE100 14px 28px);
    --sc-rule-h: 5px;
    --sc-box-bg: #ffffff;
    --sc-box-border: 2px solid #111111;
    --sc-box-radius: 2px;
    --sc-ico-bg: #111111;
    --sc-ico-radius: 2px;
    --sc-label-color: #111111;
    --sc-val-color: #111111;
    --sc-sub-color: #4c4c4c;
    --sc-pill-bg: #FFE100;
    --sc-pill-k: #111111;
    --sc-pill-v: #111111;
    --sc-mark-color: #111111;
    --sc-mark-weight: 800;
    --sc-mark-transform: uppercase;
}

/* OPPO — clean green, minimal */
.phx-sc-card[data-phx-brand="oppo"] {
    --sc-brand-color: #0DA968;
    --sc-title-color: #0f1f18;
    --sc-rule-bg: #0DA968;
    --sc-box-bg: #EAF9F1;
    --sc-box-border: 1.5px solid #CDEFDD;
    --sc-box-radius: 20px;
    --sc-ico-bg: #D5F3E3;
    --sc-ico-radius: 50%;
    --sc-pill-bg: #D5F3E3;
    --sc-pill-k: #0DA968;
    --sc-mark-color: #0DA968;
}

/* Google / Pixel — multicolour rule, blue accent */
.phx-sc-card[data-phx-brand="google"] {
    --sc-brand-color: #1A73E8;
    --sc-brand-weight: 700;
    --sc-title-color: #202124;
    --sc-rule-bg: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853);
    --sc-rule-h: 4px;
    --sc-box-bg: #F1F6FE;
    --sc-box-border: 1.5px solid #D7E6FD;
    --sc-box-radius: 20px;
    --sc-ico-bg: #E3EEFD;
    --sc-ico-radius: 50%;
    --sc-pill-bg: #E3EEFD;
    --sc-pill-k: #1A73E8;
    --sc-mark-color: #1A73E8;
}

/* Motorola — teal, rounded */
.phx-sc-card[data-phx-brand="motorola"] {
    --sc-brand-color: #00A19A;
    --sc-title-color: #0f2422;
    --sc-rule-bg: #00A19A;
    --sc-box-bg: #E6F7F6;
    --sc-box-border: 1.5px solid #C6ECE9;
    --sc-box-radius: 24px;
    --sc-ico-bg: #CFF1EE;
    --sc-ico-radius: 50%;
    --sc-pill-bg: #CFF1EE;
    --sc-pill-k: #00A19A;
    --sc-mark-color: #00A19A;
}

/* Nothing — dot-matrix mono, red glyph accent */
.phx-sc-card[data-phx-brand="nothing"] {
    --sc-card-bg-image: radial-gradient(circle, #e6e6e6 1px, transparent 1.4px);
    --sc-card-bg-size: 14px 14px;
    --sc-font: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sc-brand-color: #E4002B;
    --sc-brand-transform: uppercase;
    --sc-brand-tracking: 0.24em;
    --sc-title-color: #000000;
    --sc-title-transform: uppercase;
    --sc-title-tracking: 0.02em;
    --sc-rule-bg: #000000;
    --sc-rule-h: 1px;
    --sc-box-bg: #ffffff;
    --sc-box-border: 1.5px dashed #000000;
    --sc-box-radius: 0px;
    --sc-ico-bg: #000000;
    --sc-ico-radius: 50%;
    --sc-label-color: #000000;
    --sc-val-color: #000000;
    --sc-sub-color: #555555;
    --sc-pill-bg: #000000;
    --sc-pill-k: #E4002B;
    --sc-pill-v: #ffffff;
    --sc-mark-color: #E4002B;
    --sc-mark-transform: uppercase;
    --sc-mark-tracking: 0.3em;
}

/* ASUS / ROG — dark gaming, neon red */
.phx-sc-card[data-phx-brand="asus"] {
    --sc-card-bg: #0b0b0d;
    --sc-card-fg: #f5f5f7;
    --sc-brand-color: #D6001C;
    --sc-brand-transform: uppercase;
    --sc-brand-tracking: 0.1em;
    --sc-title-color: #ffffff;
    --sc-title-transform: uppercase;
    --sc-title-skew: skewX(-3deg);
    --sc-rule-bg: linear-gradient(90deg, #D6001C, #7a0010);
    --sc-rule-h: 3px;
    --sc-box-bg: #17181c;
    --sc-box-border: 1px solid #2a2b30;
    --sc-box-radius: 6px;
    --sc-ico-bg: #D6001C;
    --sc-ico-radius: 6px;
    --sc-label-color: #9a9aa2;
    --sc-val-color: #ffffff;
    --sc-sub-color: #9a9aa2;
    --sc-pill-bg: #1c1d22;
    --sc-pill-k: #D6001C;
    --sc-pill-v: #ffffff;
    --sc-mark-color: #D6001C;
    --sc-mark-transform: uppercase;
    --sc-mark-tracking: 0.2em;
}

/* Honor — clean blue, minimal */
.phx-sc-card[data-phx-brand="honor"] {
    --sc-brand-color: #0072F0;
    --sc-title-color: #101820;
    --sc-rule-bg: #0072F0;
    --sc-box-bg: #EAF2FE;
    --sc-box-border: 1.5px solid #CFE3FC;
    --sc-box-radius: 20px;
    --sc-ico-bg: #D9E9FD;
    --sc-ico-radius: 50%;
    --sc-pill-bg: #D9E9FD;
    --sc-pill-k: #0072F0;
    --sc-mark-color: #0072F0;
}

/* Infinix — bold green & black */
.phx-sc-card[data-phx-brand="infinix"] {
    --sc-brand-color: #111111;
    --sc-brand-weight: 900;
    --sc-title-color: #111111;
    --sc-title-weight: 900;
    --sc-title-transform: uppercase;
    --sc-rule-bg: #00B140;
    --sc-rule-h: 4px;
    --sc-box-bg: #EAFBF0;
    --sc-box-border: 1.5px solid #C8F0D6;
    --sc-box-radius: 10px;
    --sc-ico-bg: #CFF3DB;
    --sc-ico-radius: 8px;
    --sc-pill-bg: #CFF3DB;
    --sc-pill-k: #00B140;
    --sc-mark-color: #00B140;
    --sc-mark-transform: uppercase;
}

/* ======================================================================
   Phone page gallery (Photo + Specs): same look as the old gallery —
   ‹ › arrows, "1 / 2" counter, small thumbnails aligned to the LEFT
   ====================================================================== */
.phx-sc-live .detail-gallery-nav.prev { left: 12px; }
.phx-sc-live .detail-gallery-nav.next { right: 12px; }
.phone-detail-page .phx-sc-live .detail-gallery-count { right: 14px; bottom: 14px; }

/* .detail-gallery centers its children (align-items:center !important) → pin the thumbnails to the left */
.detail-gallery.phx-sc-on .phx-sc-tabs {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    width: auto;
    gap: 10px;
    margin: 14px 0 0 2px;
}
.detail-gallery.phx-sc-on .phx-sc-live-tools { align-self: flex-start !important; }

.phx-sc-tab {
    width: 70px;
    height: 70px;
    padding: 3px;
    gap: 0;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #f4f8ff;
    justify-content: center;
}
.phx-sc-tab:hover { border-color: #4f7cff; }
.phx-sc-tab.active { border-color: #4f7cff; box-shadow: 0 5px 12px rgba(79, 124, 255, 0.18); }
.phx-sc-tab-label { display: none; }
.phx-sc-tab-photo { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background: transparent; }
.phx-sc-tab-mini { width: 60px; height: 60px; border-radius: 8px; }
.phx-sc-tab-mini-inner { transform: scale(0.0556); }
@media (max-width: 480px) {
    .phx-sc-tab { width: 58px; height: 58px; }
    .phx-sc-tab-mini { width: 48px; height: 48px; }
    .phx-sc-tab-mini-inner { transform: scale(0.0444); }
}


/* ============================================================
   👍 Vote + ♡ Favourite — একই লাইনে (একই উচ্চতা, একই top)
   আগে vote বাটন top:8px আর fav বাটন top:16–22px ছিল, তাই নিচে-উপরে
   হয়ে যেত। এখন দুটোই একই CSS ভ্যারিয়েবল থেকে position নেয়, তাই
   কোনো theme/breakpoint বদলালেও দুটো সবসময় এক সারিতে থাকবে।
   ============================================================ */
.phone-card {
    --act-top: 18px;     /* কার্ডের উপর থেকে দূরত্ব (দুই বাটনেরই এক) */
    --act-right: 18px;   /* কার্ডের ডান থেকে দূরত্ব (♡ বাটনের) */
    --act-size: 34px;    /* দুই বাটনেরই উচ্চতা এক */
    --act-gap: 6px;      /* 👍 আর ♡ এর মাঝের ফাঁক */
}
.phone-card .fav-btn,
#page-browse .phone-card .fav-btn,
#page-favorites .phone-card .fav-btn,
.detail-similar .phone-card .fav-btn {
    position: absolute !important;
    top: var(--act-top) !important;
    right: var(--act-right) !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--act-size) !important;
    height: var(--act-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.phone-card .phx4-card-vote,
#page-browse .phone-card .phx4-card-vote {
    position: absolute !important;
    top: var(--act-top) !important;
    right: calc(var(--act-right) + var(--act-size) + var(--act-gap)) !important;
    bottom: auto !important;
    left: auto !important;
    height: var(--act-size) !important;
    margin: 0 !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    white-space: nowrap;
}
.phone-card .phx4-card-vote span { line-height: 1; }

@media (max-width: 768px) {
    .phone-card {
        --act-top: 15px;
        --act-right: 15px;
        --act-size: 30px;
        --act-gap: 5px;
    }
    .phone-card .phx4-card-vote { padding: 0 9px !important; font-size: 11px !important; }
}
/* ফোনে (≤640px) উপরের বাম কোণের "Premium / Mid-range" ribbon ছোট হয়ে উপরের
   ~22px জুড়ে থাকে; বাটন সারিটা তার ঠিক নিচে বসানো হলো যাতে কোনো ফোনের
   width-এই ribbon আর 👍 বাটন একে অপরের গায়ে না লাগে */
@media (max-width: 640px) {
    .phone-card { --act-top: 26px; }
}
@media (max-width: 350px) {
    .phone-card { --act-right: 10px; --act-size: 28px; --act-gap: 4px; }
    .phone-card .phx4-card-vote { padding: 0 7px !important; }
}


/* AnTuTu estimated range shown in a small box next to the exact score */
.phx-antutu-est {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    white-space: nowrap;
    vertical-align: middle;
}


/* ==========================================================================
   DARK MODE 2.0  —  softer "midnight blue" night theme
   --------------------------------------------------------------------------
   Why: the old night theme stacked near-black surfaces (#080d18 / #0b1120 /
   #111c2f) on top of each other, so page, cards and sidebar melted together,
   and the blue accent (#2563eb) was too dark to read on them.
   What this block does:
     1. lifts every surface one step (clear layers: page < card < raised)
     2. gives borders / muted text real contrast
     3. adds a light "accent-text" colour for prices, links and numbers
     4. re-tints the coloured dashboard / page cards so they look rich, not black
   Everything is scoped to html[data-theme="dark"] so LIGHT MODE is untouched.
   To go back to the old look, simply delete this whole block.
   ========================================================================== */

html[data-theme="dark"] {
    --bg-primary:#161e36;      /* page            */
    --bg-secondary:#111830;    /* sidebar/header  */
    --bg-card:#1f2a48;         /* cards           */
    --bg-input:#2a3759;        /* inputs / chips  */
    --border-color:#3a4a76;
    --text-primary:#eef2fb;
    --text-secondary:#c5cfe6;
    --text-muted:#98a6c8;
    --shadow:0 8px 22px rgba(6,10,24,.30);
    --shadow-hover:0 16px 34px rgba(6,10,24,.42);

    /* extra tokens used only by this block */
    --dk-raise:#2a3759;
    --dk-raise-2:#34426b;
    --dk-line:#3a4a76;
    --dk-accent:#8db2ff;       /* readable blue for text on dark */
    --dk-green:#62e6b8;
    --dk-amber:#ffcb6b;
    --dk-rose:#ff94ac;
    --dk-violet:#b9a9ff;
    --dk-edge:inset 0 1px 0 rgba(255,255,255,.05);
    color-scheme:dark;         /* dark date-pickers, scrollbars, native controls */
}

/* ---- page canvas: soft coloured glows instead of flat black ---- */
html[data-theme="dark"] body {
    background:
        radial-gradient(56rem 30rem at 92% -6%, rgba(99,140,255,.16), transparent 62%),
        radial-gradient(46rem 28rem at -4% 102%, rgba(139,92,246,.12), transparent 60%),
        var(--bg-primary);
    color:var(--text-primary);
}
html[data-theme="dark"] .main,
html[data-theme="dark"] #mainContent { background:transparent; }

html[data-theme="dark"] .sidebar {
    background:linear-gradient(180deg,#151d38 0%,#111830 100%);
    border-color:var(--dk-line);
}
html[data-theme="dark"] .header {
    background:rgba(17,24,48,.88);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-color:var(--dk-line);
}
html[data-theme="dark"] .sidebar-nav .nav-item { color:#b9c5e2; }
html[data-theme="dark"] .sidebar-nav .nav-item:hover { background:rgba(141,178,255,.12); color:#fff; }
html[data-theme="dark"] .sidebar-nav .nav-item.active,
html[data-theme="dark"] .sidebar-footer .nav-item.active { color:#fff; }
html[data-theme="dark"] .sidebar-footer .nav-item,
html[data-theme="dark"] .sidebar-footer .nav-item .icon,
html[data-theme="dark"] .sidebar-nav .nav-item.about-btn { color:var(--dk-accent); }
html[data-theme="dark"] .sidebar-footer .nav-item.active,
html[data-theme="dark"] .sidebar-footer .nav-item.active .icon { color:#fff; }

/* ---- generic surfaces: cards, chips, inputs get an edge highlight ---- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .phone-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .modal {
    border-color:var(--dk-line);
    box-shadow:var(--dk-edge), 0 8px 22px rgba(6,10,24,.28);
}
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .phone-card {
    background:linear-gradient(160deg,#243056 0%,#1f2a48 70%);
}
html[data-theme="dark"] .phone-card:hover { border-color:#6d97ff; box-shadow:0 14px 32px rgba(6,10,24,.42), 0 0 0 1px rgba(109,151,255,.35); }
html[data-theme="dark"] .filter-bar { background:rgba(31,42,72,.92); }

html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .ui-select-trigger {
    background-color:var(--bg-input);
    border-color:#485a8a;
    color:var(--text-primary);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#8fa0c6; }
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus { border-color:#79a2ff; box-shadow:0 0 0 3px rgba(121,162,255,.22); }
html[data-theme="dark"] .ui-select-menu { background:#243056; border-color:#485a8a; }

html[data-theme="dark"] .tabs { background:var(--bg-card); border-color:var(--dk-line); }
html[data-theme="dark"] .tabs .tab { color:var(--text-secondary); }
html[data-theme="dark"] .tabs .tab.active { color:#fff; }
html[data-theme="dark"] .btn-outline { color:#c9d6f5; border-color:#5a6ea3; }
html[data-theme="dark"] .btn-outline:hover { background:#2f6bff; border-color:#2f6bff; color:#fff; }

/* ---- text accents: the old #2563eb blue was unreadable on dark ---- */
html[data-theme="dark"] .phone-card .phone-price,
html[data-theme="dark"] .phone-price,
html[data-theme="dark"] .phx4-rec-price,
html[data-theme="dark"] .phx5-dash-price,
html[data-theme="dark"] .detail-price,
html[data-theme="dark"] .phone-detail-page .detail-price,
html[data-theme="dark"] .phone-detail-page .detail-price-snapshot .price,
html[data-theme="dark"] .emi-result,
html[data-theme="dark"] .compare-selector strong,
html[data-theme="dark"] .phx4-deal-price { color:var(--dk-accent) !important; -webkit-text-fill-color:currentColor; background:none; }
html[data-theme="dark"] .card-title { color:var(--text-primary); }
html[data-theme="dark"] a:not(.btn):not(.nav-item) { color:var(--dk-accent); }
html[data-theme="dark"] .phone-brand,
html[data-theme="dark"] .phone-card .phone-brand { color:#a9b7d9; }
html[data-theme="dark"] .fav-btn,
html[data-theme="dark"] .phone-card .fav-btn { color:#c5cfe6; }

/* ---- dashboard: coloured stat cards (were almost-black tints) ---- */
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(1) { background:linear-gradient(135deg,#1e3a72,#284c93); border-color:#3d63b5; border-left-color:#7aa5ff; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(2) { background:linear-gradient(135deg,#175349,#1c6a5b); border-color:#2f8c78; border-left-color:#4fe0b0; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(3) { background:linear-gradient(135deg,#5a4318,#73551d); border-color:#a67c2c; border-left-color:#ffc857; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(4) { background:linear-gradient(135deg,#5b2440,#75304f); border-color:#a8496f; border-left-color:#ff8cab; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(1) .stat-info h3 { color:#cfe0ff; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(2) .stat-info h3 { color:#c3f7e6; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(3) .stat-info h3 { color:#ffe7b0; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(4) .stat-info h3 { color:#ffd3df; }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card .stat-info p { color:rgba(255,255,255,.78); }
html[data-theme="dark"] #page-dashboard > .grid-4 .stat-card:nth-child(n) .stat-icon { background:rgba(255,255,255,.14) !important; color:#fff; }
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .stat-card .stat-icon { background:rgba(255,255,255,.14) !important; color:#fff; }

html[data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(1) { background:linear-gradient(150deg,#1f2c52,#25366a); border-color:#3d63b5; }
html[data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(2) { background:linear-gradient(150deg,#1d3040,#1c4a4a); border-color:#2f8c78; }
html[data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(1) .card-title { color:#b5cdff; }
html[data-theme="dark"] #page-dashboard > .grid-2 > .card:nth-child(2) .card-title { color:#8df0cc; }
html[data-theme="dark"] #recentPhonesList > div { border-bottom-color:rgba(255,255,255,.10) !important; }
html[data-theme="dark"] #recentPhonesList > div strong,
html[data-theme="dark"] #recentPhonesList > div b { color:#dbe7ff; }

/* hero: keep the "deep space" feel but make it clearly lighter than the page */
html[data-theme="dark"] .dashboard-hero {
    background:
        radial-gradient(circle at 76% 20%, rgba(94,231,255,.22), transparent 14rem),
        radial-gradient(circle at 94% 100%, rgba(167,139,250,.26), transparent 19rem),
        linear-gradient(120deg,#132148 0%,#1c3170 55%,#26439a 100%);
    border-color:#4a6fc4;
    box-shadow:0 18px 40px rgba(6,10,24,.35);
}

/* ---- inner pages: same idea, richer tints ---- */
html[data-theme="dark"] #page-compare > .card,
html[data-theme="dark"] #page-toplists .tab-content > .card,
html[data-theme="dark"] #page-profile > .card { background:linear-gradient(150deg,#1f2c52 0%,#25366a 100%); border-color:#3d63b5; }
html[data-theme="dark"] #page-news > .card { background:linear-gradient(150deg,#1d3040 0%,#1c4a4a 100%); border-color:#2f8c78; }
html[data-theme="dark"] #page-favorites > .card { background:linear-gradient(150deg,#33244a 0%,#43295c 100%); border-color:#7d4a9e; }
html[data-theme="dark"] #page-pricehistory > .card { background:linear-gradient(150deg,#282653 0%,#322d69 100%); border-color:#6a5bc2; }
html[data-theme="dark"] #page-pricealerts > .card { background:linear-gradient(150deg,#3a2540 0%,#4b2a48 100%); border-color:#9a4e78; }
html[data-theme="dark"] #page-browse > .filter-bar {
    background-image:linear-gradient(#1f2a48,#1f2a48),linear-gradient(90deg,#5b8cff,#5ee7ff) !important;
    border-color:#3d63b5;
}
html[data-theme="dark"] #page-toplists .top-list-item,
html[data-theme="dark"] #page-news .news-item,
html[data-theme="dark"] #page-favorites .phone-card,
html[data-theme="dark"] #page-pricehistory .history-item,
html[data-theme="dark"] #page-pricealerts .alert-item { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }

/* ---- phone images: a lit "stage" so devices pop instead of sinking ---- */
html[data-theme="dark"] .phone-card .phone-img-wrap,
html[data-theme="dark"] #page-browse .phone-card .phone-img-wrap,
html[data-theme="dark"] .detail-similar .phone-card .phone-img-wrap,
html[data-theme="dark"] .phone-detail-page .detail-gallery-stage {
    background:
        radial-gradient(circle at 50% 38%, rgba(141,178,255,.34), transparent 62%),
        linear-gradient(160deg,#2f3d69,#263255);
    border-color:#4a5c8e;
}
html[data-theme="dark"] .phone-card .phone-specs span,
html[data-theme="dark"] #page-browse .phone-card .phone-specs span,
html[data-theme="dark"] .detail-similar .phone-card .phone-specs span { background:#2c3a62; border-color:#485a8a; color:#d5def3; }

/* ---- phone detail page ---- */
html[data-theme="dark"] .phone-detail-page .detail-hero,
html[data-theme="dark"] .phone-detail-page .detail-insight-card,
html[data-theme="dark"] .phone-detail-page .detail-price-snapshot,
html[data-theme="dark"] .detail-similar { background:linear-gradient(150deg,#222f56,#1f2a48); border-color:var(--dk-line); }
html[data-theme="dark"] .phone-detail-page .detail-header { background:rgba(17,24,48,.9); border-color:var(--dk-line); }
html[data-theme="dark"] .phone-detail-page .detail-spec-item,
html[data-theme="dark"] .phone-detail-page .detail-score-card,
html[data-theme="dark"] .phone-detail-page .detail-emi { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .phone-detail-page .detail-name,
html[data-theme="dark"] .phone-detail-page .detail-spec-item .value { color:#fff; }

/* ---- dropdowns / popups ---- */
html[data-theme="dark"] .notif-dropdown { background:#243056; border-color:#485a8a; color:var(--text-primary); }
html[data-theme="dark"] .notif-dropdown .notif-item { color:var(--text-primary); border-bottom-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .notif-dropdown .notif-item:hover { background:rgba(141,178,255,.12); }
html[data-theme="dark"] #searchSuggestions { background:#243056; border-color:#485a8a; }


/* ---- second pass: hard-coded blues / muted text that survived ---- */
html[data-theme="dark"] .trending-item .views strong,
html[data-theme="dark"] #cmpCount,
html[data-theme="dark"] .cmp-meter strong,
html[data-theme="dark"] #seriesBrowserGrid .series-card .sc-price,
html[data-theme="dark"] #seriesResultContainer .series-card .sc-price,
html[data-theme="dark"] .score-card .score-price { color:var(--dk-accent) !important; }
html[data-theme="dark"] .score-details-grid .score-item .value.good { color:#7db0ff; }
html[data-theme="dark"] .score-details-grid .score-item .value.poor { color:#ff8b9a; }
html[data-theme="dark"] .hero-signal span { color:#b4c4e6; }
html[data-theme="dark"] .hero-phone-label { color:#d6e3ff; }
html[data-theme="dark"] #page-browse .phone-card .phone-brand,
html[data-theme="dark"] .detail-similar .phone-card .phone-brand,
html[data-theme="dark"] .phone-card .phone-brand { color:#a9b7d9; }

/* heart / vote / compare mini-buttons on phone cards: same dark glass chip */
html[data-theme="dark"] .phone-card .fav-btn,
html[data-theme="dark"] #page-browse .phone-card .fav-btn,
html[data-theme="dark"] .fav-btn,
html[data-theme="dark"] .phx4-card-vote,
html[data-theme="dark"] .ph-x-cmpbtn {
    background:rgba(17,24,48,.72);
    border:1px solid rgba(255,255,255,.18);
    color:#eef2fb;
}
html[data-theme="dark"] .fav-btn:hover,
html[data-theme="dark"] .phx4-card-vote:hover,
html[data-theme="dark"] .ph-x-cmpbtn:hover { background:rgba(47,107,255,.85); border-color:#7aa5ff; }

/* active nav / primary buttons: slightly deeper blue so white text passes AA */
html[data-theme="dark"] .sidebar-nav .nav-item.active,
html[data-theme="dark"] .sidebar-footer .nav-item.active,
html[data-theme="dark"] .tabs .tab.active { background:#2560e6; }
html[data-theme="dark"] .sidebar-footer .nav-item:not(.active),
html[data-theme="dark"] .sidebar-footer .nav-item:not(.active) .icon { color:var(--dk-accent); }


/* ---- third pass: rules that use #page-… ids or inline styles ---- */
html[data-theme="dark"] .sidebar-footer .nav-item[style]:not(.active) {
    color:var(--dk-accent) !important;
    border-left-color:var(--dk-accent) !important;
}
html[data-theme="dark"] #page-browse > .filter-bar,
html[data-theme="dark"] #page-browse #brandListContainer {
    border-color:#3d63b5;
    background:linear-gradient(150deg,rgba(33,45,80,.98),rgba(28,40,72,.96));
    box-shadow:var(--dk-edge), 0 12px 30px rgba(6,10,24,.28);
}
html[data-theme="dark"] #page-browse #searchInput,
html[data-theme="dark"] #page-browse #advancedFilterToggle,
html[data-theme="dark"] #page-browse #showBrandsBtn {
    border-color:#4d6296 !important;
    background:#2a3759 !important;
    color:#eaf1ff !important;
}
html[data-theme="dark"] #page-browse #advancedFiltersContainer { border-top-color:#3f4f7c !important; }
html[data-theme="dark"] #page-browse .phone-card,
html[data-theme="dark"] .detail-similar .phone-card,
html[data-theme="dark"] .phone-detail-page .detail-hero,
html[data-theme="dark"] .phone-detail-page .detail-insight-card,
html[data-theme="dark"] .phone-detail-page .detail-price-snapshot {
    border-color:#3f5088;
    background:linear-gradient(160deg,#27345c 0%,#212d4e 70%,#27365f 100%);
    box-shadow:var(--dk-edge), 0 10px 26px rgba(6,10,24,.30);
}
html[data-theme="dark"] #page-browse .phone-card .phone-img-wrap,
html[data-theme="dark"] .detail-similar .phone-card .phone-img-wrap,
html[data-theme="dark"] .phone-detail-page .detail-gallery-stage {
    border-color:#4f639a;
    background:
        radial-gradient(circle at 50% 36%, rgba(141,178,255,.36), transparent 64%),
        linear-gradient(160deg,#34446f,#28365d);
}
html[data-theme="dark"] #page-browse .phone-card .phone-specs span,
html[data-theme="dark"] .detail-similar .phone-card .phone-specs span,
html[data-theme="dark"] .phone-detail-page .detail-spec-item,
html[data-theme="dark"] .phone-detail-page .detail-score-card,
html[data-theme="dark"] .phone-detail-page .detail-emi {
    border-color:#4d6296;
    background:#2d3b64;
    color:#d5def3;
}
html[data-theme="dark"] .phone-detail-page .detail-header { border-bottom-color:#3f5088; background:rgba(17,24,48,.9); }
html[data-theme="dark"] .phone-detail-page .detail-back-btn { border-color:#4d6296; background:#2d3b64; color:#eef4ff; }
html[data-theme="dark"] .phone-detail-page .detail-brand { border-color:#5a7cc8; background:#2a4680; color:#c8daff; }
html[data-theme="dark"] .phone-detail-page .detail-rating .stars { background:#4a3f22; }
html[data-theme="dark"] .phone-detail-page .detail-tabs .tabs { border-bottom-color:#3f4f7c; }
html[data-theme="dark"] .phone-detail-page .detail-tabs .tab.active { background:linear-gradient(180deg,transparent,#2b4a86); }


/* ---- fourth pass: every place that used the dark-blue accent as TEXT ---- */
html[data-theme="dark"] .detail-estimate-value,
html[data-theme="dark"] .detail-score-number,
html[data-theme="dark"] .phone-detail-page .detail-score-number,
html[data-theme="dark"] .detail-price-snapshot .snapshot-price,
html[data-theme="dark"] .phone-detail-page .detail-price-snapshot .snapshot-price,
html[data-theme="dark"] .speed-test-container .speed-value,
html[data-theme="dark"] #searchSuggestions .suggestion-item .highlight,
html[data-theme="dark"] .compare-suggestion-item .highlight,
html[data-theme="dark"] .compare-result-grid .compare-phone-card .phone-price,
html[data-theme="dark"] .compare-result-grid .compare-phone-card .spec-item .value.best,
html[data-theme="dark"] .compare-winner-row,
html[data-theme="dark"] .notif-header-actions button,
html[data-theme="dark"] .ui-select-option.selected,
html[data-theme="dark"] .ui-select-option:hover,
html[data-theme="dark"] .ui-select-option.selected .ui-select-check,
html[data-theme="dark"] #seriesSuggestions .sg-title .sg-brand,
html[data-theme="dark"] .sb-back-btn,
html[data-theme="dark"] .ph-x-rv-price,
html[data-theme="dark"] .phx-spec-group-title,
html[data-theme="dark"] .phx-why-title,
html[data-theme="dark"] .phx4-vpt-row .phx4-vpt-price,
html[data-theme="dark"] .phx4-vpt-row.selected .phx4-vpt-price,
html[data-theme="dark"] .phx4-vt-current,
html[data-theme="dark"] .phx4-vt-chevron.open,
html[data-theme="dark"] .phx4-variant-chip .phx4-vc-price,
html[data-theme="dark"] .phx4-var-add,
html[data-theme="dark"] .news-content .meta a,
html[data-theme="dark"] .news-content .news-more,
html[data-theme="dark"] .ph-info-price,
html[data-theme="dark"] .phx-antutu-est { color:var(--dk-accent); }
/* inline style="color:var(--accent)" (used in many JS-built templates) */
html[data-theme="dark"] [style*=";color:var(--accent)"],
html[data-theme="dark"] [style*="; color:var(--accent)"],
html[data-theme="dark"] [style*="; color: var(--accent)"],
html[data-theme="dark"] [style^="color:var(--accent)"],
html[data-theme="dark"] [style^="color: var(--accent)"] { color:var(--dk-accent) !important; }

/* ---- detail page leftovers ---- */
html[data-theme="dark"] .detail-main-img { background:transparent; }
html[data-theme="dark"] .detail-estimate-card { background:#26325a; border-color:#7aa5ff; }
html[data-theme="dark"] .detail-price .detail-price-tag { background:#26325a; border-color:#4d6296; color:#c5cfe6; }
html[data-theme="dark"] .detail-rating > span:not(.stars) { color:#aab8d9; }
html[data-theme="dark"] .detail-spec-item .label,
html[data-theme="dark"] .detail-score-label { color:#aab8d9; }
html[data-theme="dark"] .detail-scores .score.gaming { background:rgba(185,169,255,.18); color:#cfc4ff; }
html[data-theme="dark"] .detail-scores .score.camera { background:rgba(98,230,184,.16); color:#7cf0c8; }
html[data-theme="dark"] .detail-scores .score.battery { background:rgba(255,203,107,.16); color:#ffd98a; }
html[data-theme="dark"] .detail-pros-cons h4[style*="danger"],
html[data-theme="dark"] .detail-pros-cons h4[style*="e11d48"] { color:#ff8fa3 !important; }
html[data-theme="dark"] .detail-pros-cons h4[style*="success"] { color:#62e6b8 !important; }
html[data-theme="dark"] .detail-similar .phone-card .phone-name { color:#eef2fb; }
html[data-theme="dark"] .score-badge.gaming,
html[data-theme="dark"] .phone-card .score-badge.gaming { color:#cfc4ff; }

html[data-theme="dark"] .phone-detail-page .detail-tabs .tab.active,
html[data-theme="dark"] .detail-tabs .tab.active { color:#fff; }

/* ---- scrollbars ---- */
html[data-theme="dark"] ::-webkit-scrollbar-track { background:var(--bg-primary); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#4b5f96; }
/* ===== end DARK MODE 2.0 ===== */

/* ===== Price Tracking Dashboard (admin) ===== */
.pt-progress-wrap { margin-top:16px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:16px 18px; }
.pt-progress-text { font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:10px; }
.pt-progress-bar { width:100%; height:10px; border-radius:var(--radius-pill); background:var(--bg-input); overflow:hidden; }
.pt-progress-bar-fill { height:100%; width:0%; border-radius:var(--radius-pill); background:linear-gradient(135deg, #6c5ce7, #00cec9); transition:width 0.25s ease; }
.pt-progress-summary { margin-top:10px; font-size:13px; color:var(--text-secondary); }
html[data-theme="dark"] .pt-progress-wrap { background:var(--bg-card); border-color:var(--border-color); }

/* ---- Price tracking: Tracked vs Catalog list ---- */
.pt-mismatch-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:16px 18px; }
.pt-mm-title { font-size:16px; margin:0 0 6px; color:var(--text-primary); }
.pt-mm-meta { font-size:12px; color:var(--text-secondary); font-weight:500; }
.pt-mm-desc { font-size:13px; color:var(--text-secondary); margin:0 0 12px; }
.pt-mm-empty { font-size:13px; color:var(--text-secondary); padding:8px 0; }
.pt-mm-row { padding:12px 0; border-top:1px solid var(--border-color); }
.pt-mm-name { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.pt-mm-line { font-size:13px; color:var(--text-secondary); }
.pt-mm-tracked { font-size:15px; font-weight:700; color:#e63757; }
.pt-mm-warn { font-size:12px; color:#e8a317; margin-top:6px; }
.pt-mm-apply { margin-top:8px; padding:6px 12px; font-size:12px; }

/* ---- Price tracking: compact stat cards ---- */
#tab-admin-pricetracking .pt-stats { grid-template-columns:repeat(3,1fr) !important; gap:8px !important; }
@media (max-width:768px) { #tab-admin-pricetracking .pt-stats { grid-template-columns:repeat(2,1fr) !important; } }
#tab-admin-pricetracking .pt-stats .stat-card { min-height:0 !important; padding:8px 10px !important; gap:8px !important; align-items:center !important; border-radius:10px !important; box-shadow:none !important; }
#tab-admin-pricetracking .pt-stats .stat-card::after { display:none !important; }
#tab-admin-pricetracking .pt-stats .stat-icon { width:28px !important; height:28px !important; font-size:14px !important; border-radius:8px !important; }
#tab-admin-pricetracking .pt-stats .stat-info h3 { font-size:15px !important; line-height:1.2 !important; letter-spacing:0 !important; }
#tab-admin-pricetracking .pt-stats .stat-info p { font-size:10.5px !important; }
#tab-admin-pricetracking #ptStatLastTime { font-size:11.5px !important; }

/* ---- Price tracking: brand cards ---- */
.pt-brand-card, .pt-result-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:14px 16px; }
.pt-brand-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.pt-brand-item { border:1px solid var(--border-color); border-radius:12px; padding:10px 12px; background:var(--bg-input); min-width:0; }
.pt-brand-name { font-size:15px; font-weight:700; color:var(--text-primary); }
.pt-brand-meta { font-size:12px; color:var(--text-secondary); }
.pt-brand-when { font-size:10.5px; color:var(--text-muted); margin:2px 0 8px; }
.pt-brand-actions { display:flex; gap:6px; flex-wrap:wrap; }
.pt-brand-actions .btn { padding:6px 10px; font-size:12px; }
.pt-brand-actions .pt-brand-view { background:transparent; color:var(--text-primary); border:1px solid var(--border-color); box-shadow:none; }
.pt-brand-actions .btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---- Price tracking: result list ---- */
.pt-result-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.pt-result-summary { font-size:13px; margin:6px 0 10px; color:var(--text-secondary); }
.pt-res-row { padding:10px 12px; margin-bottom:8px; border:1px solid var(--border-color); border-left-width:4px; border-radius:10px; }
.pt-res-up { border-left-color:#e63757; }
.pt-res-down { border-left-color:#12a05c; }
.pt-res-same { border-left-color:#2563eb; }
.pt-res-fail { border-left-color:#8a8f98; }
.pt-res-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.pt-res-variant { font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
.pt-res-prices { font-size:14px; }
.pt-res-old { color:var(--text-secondary); }
.pt-res-arrow { color:var(--text-muted); }
.pt-res-new { font-weight:700; }
.pt-res-diff { font-size:12px; margin-left:8px; font-weight:600; }
.pt-res-up .pt-res-new, .pt-res-up .pt-res-diff, .pt-c-up { color:#e63757; }
.pt-res-down .pt-res-new, .pt-res-down .pt-res-diff, .pt-c-down { color:#12a05c; }
.pt-res-same .pt-res-new, .pt-res-same .pt-res-diff, .pt-c-same { color:#2563eb; }
.pt-res-status { font-size:11.5px; color:var(--text-muted); margin-top:4px; }

/* ---- Spreadsheet: focus korle Variants cell-er line-break jeno space na hoye jay ---- */
.phx4-sheet-table td[contenteditable="true"][data-field="variants"]:focus { white-space:pre-line; }

/* ---- One-click apply buttons ---- */
.pt-brand-actions .pt-brand-apply { background:#12a05c; border-color:#12a05c; color:#fff; }
.pt-result-apply { margin:0; background:#12a05c; border-color:#12a05c; color:#fff; }
.pt-result-btnrow { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.pt-result-retry { margin:0; background:#8a5cf6; border-color:#8a5cf6; color:#fff; }
.pt-res-section { margin-bottom:14px; }
.pt-res-section-head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; margin:4px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--border-color); color:var(--text-primary); }
.pt-res-section-head .pt-res-section-count { font-weight:600; color:var(--text-secondary); }
.pt-res-section-up .pt-res-section-head { color:#e63757; }
.pt-res-section-down .pt-res-section-head { color:#12a05c; }
.pt-res-section-same .pt-res-section-head { color:#2563eb; }
.pt-res-section-fail .pt-res-section-head { color:#8a8f98; }

/* ---- Detail page: Flipkart-style price row (Launch Price badge nei) ---- */
.phone-detail-page .detail-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.detail-price .detail-price-cut { display:inline-flex; align-items:baseline; gap:8px; order:-1; }
.detail-price .detail-price-cut:empty { display:none; }
.detail-price .detail-price-maingroup { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.detail-price .detail-price-alertbtn:empty { display:none; }
.detail-price .dp-pct { font-size:20px; font-weight:800; color:#12a05c; letter-spacing:0; }
.detail-price .dp-old { font-size:20px; font-weight:500; color:var(--text-muted); text-decoration:line-through; letter-spacing:0; }
.detail-price .dp-up { font-size:13px; font-weight:700; color:#e63757; letter-spacing:0; }
.detail-price .dp-up em { font-style:normal; font-weight:500; color:var(--text-muted); }
.detail-price .dp-alert-hint { display:inline-block; margin-left:8px; padding:2px 10px 2px 6px; font-size:11.5px; font-weight:600; color:#2563eb; background:rgba(37,99,235,0.1); border:1px solid rgba(37,99,235,0.25); border-radius:var(--radius-pill); cursor:pointer; font-family:inherit; vertical-align:middle; }
.detail-price .dp-alert-hint:hover { background:rgba(37,99,235,0.18); }
.phx4-variant-trust { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--text-secondary); margin:8px 2px 2px; line-height:1.5; }
.phx4-variant-trust strong { color:var(--text-primary); font-weight:700; }
.detail-price:has(.detail-price-cut:not(:empty)) .original,
.detail-price:has(.detail-price-cut:not(:empty)) .discount { display:none; }

/* ---- Detail page: Flipkart button (alta color, upore, highlighted) ---- */
.phone-detail-page .detail-buy-links { margin:8px 0 14px; }
.phone-detail-page .detail-buy-links .buy-btn.flipkart,
.detail-buy-links .buy-btn.flipkart {
    background:linear-gradient(135deg, #ff4d4f 0%, #e11d48 100%) !important;
    color:#fff !important;
    flex:1 1 100%;
    justify-content:center;
    padding:15px 22px !important;
    font-size:17px !important;
    font-weight:800 !important;
    letter-spacing:.01em;
    border-radius:14px !important;
    border:0;
    box-shadow:0 10px 26px rgba(225,29,72,.42);
    animation:phxAltaPulse 2.4s ease-in-out infinite;
}
.detail-buy-links .buy-btn.flipkart:hover { filter:brightness(1.07); transform:translateY(-2px); }
@keyframes phxAltaPulse {
    0%, 100% { box-shadow:0 10px 26px rgba(225,29,72,.42); }
    50% { box-shadow:0 10px 34px rgba(225,29,72,.68), 0 0 0 6px rgba(225,29,72,.13); }
}
@media (prefers-reduced-motion: reduce) { .detail-buy-links .buy-btn.flipkart { animation:none; } }

.pt-res-cands { font-size:11px; color:var(--text-muted); margin-top:4px; word-break:break-word; }

/* ---- Price tracking: debug ---- */
.pt-debug-btn { margin-top:8px; padding:5px 10px; font-size:12px; background:transparent; color:var(--text-primary); border:1px solid var(--border-color); box-shadow:none; }
.pt-debug-box { margin-top:12px; border:1px dashed var(--border-color); border-radius:10px; padding:10px; }
.pt-debug-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.pt-debug-box textarea { width:100%; box-sizing:border-box; font-family:monospace; font-size:11px; line-height:1.4; border:1px solid var(--border-color); border-radius:8px; padding:8px; background:var(--bg-input); color:var(--text-primary); }

.pt-res-oos { font-size:12px; color:#c2410c; margin-top:4px; font-weight:600; }

/* ---- Detail page: Out of stock on Flipkart ---- */
.phone-detail-page .detail-buy-links .buy-btn.flipkart.oos,
.detail-buy-links .buy-btn.flipkart.oos {
    background:linear-gradient(135deg, #7b8494 0%, #4b5563 100%) !important;
    box-shadow:0 6px 16px rgba(75,85,99,.35) !important;
    animation:none !important;
}
.detail-stock-note { display:flex; flex-direction:column; gap:3px; margin:-4px 0 14px; padding:10px 12px; border-radius:12px; background:#fff4ed; border:1px solid #fdc9a8; }
.detail-stock-note .dsn-badge { font-size:14px; font-weight:800; color:#c2410c; }
.detail-stock-note .dsn-sub { font-size:12px; line-height:1.4; color:#7c5a48; }
html[data-theme="dark"] .detail-stock-note { background:#2b1d16; border-color:#6b3a1f; }
html[data-theme="dark"] .detail-stock-note .dsn-badge { color:#fb923c; }
html[data-theme="dark"] .detail-stock-note .dsn-sub { color:#d9b8a3; }
.phx4-vc-oos, .phx4-vpt-oos { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; background:#fee2e2; color:#b91c1c; vertical-align:middle; }
.phx4-variant-chip.active .phx4-vc-oos { background:#fff; }
/* ============================================================
   📊 SMART SCORE 2.0 — compact card additions + full modal
   ============================================================ */
.ss2-status { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 10px; border-radius:20px; margin-top:2px; margin-bottom:6px; }
.ss2-status-excellent { color:#22c55e; background:rgba(34,197,94,0.12); }
.ss2-status-good { color:#3b82f6; background:rgba(59,130,246,0.12); }
.ss2-status-average { color:#f59e0b; background:rgba(245,158,11,0.12); }
.ss2-status-poor { color:#ef4444; background:rgba(239,68,68,0.12); }

.ss2-mini-bars { width:100%; margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.ss2-bar-row { display:flex; align-items:center; gap:8px; width:100%; }
.ss2-bar-label { font-size:11px; color:var(--text-muted); font-weight:600; flex:0 0 auto; min-width:78px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss2-bar-track { flex:1; height:6px; border-radius:6px; background:var(--bg-input); overflow:hidden; }
.ss2-bar-fill { height:100%; border-radius:6px; transition:width .4s ease; }
.ss2-bar-fill.ss2-excellent { background:#22c55e; }
.ss2-bar-fill.ss2-good { background:#3b82f6; }
.ss2-bar-fill.ss2-average { background:#f59e0b; }
.ss2-bar-fill.ss2-poor { background:#ef4444; }
.ss2-bar-value { font-size:11px; font-weight:800; min-width:24px; text-align:right; color:var(--text-primary); }

.ss2-badge-row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:10px; }
.ss2-badge { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:var(--bg-input); border:1px solid var(--border-color); color:var(--text-primary); white-space:nowrap; }
.ss2-badge-row-lg { justify-content:flex-start; margin-bottom:6px; }

.ss2-strength-weak { width:100%; display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-color); font-size:11px; font-weight:700; text-align:left; }
.ss2-strength-weak-lg { font-size:13px; color:var(--text-primary); border:1px solid var(--border-color); border-radius:12px; padding:12px 14px; background:var(--bg-input); }
.ss2-strength-weak-lg div { flex:1; }
.ss2-sw-good, .ss2-sw-bad { padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.ss2-sw-good { color:#16a34a; background:rgba(34,197,94,0.12); }
.ss2-sw-bad { color:#ea580c; background:rgba(245,158,11,0.14); }

.ss2-view-full-btn {
    width: 100%;
    margin-top: auto;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent)));
    border: none;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ss2-view-full-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0,0,0,0.18);
}

/* ============================================================
   📱 MY PHONE DASHBOARD
   ============================================================ */
.myphone-login-card, .myphone-picker-card {
    text-align: center;
    padding: 32px 20px;
}
.myphone-search-wrap { position: relative; max-width: 480px; margin: 0 auto; }
.myphone-search-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
}
.myphone-suggest-box {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    max-height: 280px;
    overflow-y: auto;
    z-index: 20;
    text-align: left;
}
.myphone-suggest-box.open { display: block; }
.myphone-suggest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}
.myphone-suggest-item:last-child { border-bottom: none; }
.myphone-suggest-item:hover { background: var(--bg-input); }
.msi-price { color: var(--accent); font-weight: 700; }
.myphone-suggest-empty { padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }

.myphone-hero { position: relative; }
.myphone-change-btn { position: absolute; top: 16px; right: 16px; }
.myphone-hero-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.myphone-hero-img { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: var(--bg-input); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.myphone-hero-img img { width: 100%; height: 100%; object-fit: contain; }
.myphone-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; }
.myphone-name { font-size: 20px; font-weight: 900; color: var(--text-primary); margin: 2px 0 8px; }

.myphone-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.myphone-stat { background: var(--bg-input); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.mps-label { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.mps-value { font-size: 17px; font-weight: 800; color: var(--accent); }

.myphone-vs-row { display: flex; align-items: center; gap: 12px; }
.myphone-vs-col { flex: 1; text-align: center; padding: 14px; border-radius: 10px; background: var(--bg-input); }
.myphone-vs-latest { border: 1.5px solid var(--accent); }
.myphone-vs-name { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.myphone-vs-price { font-size: 13px; color: var(--accent); font-weight: 700; margin-top: 4px; }
.myphone-vs-score { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.myphone-vs-arrow { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }

@media (max-width: 480px) {
    .myphone-stat-grid { grid-template-columns: 1fr; }
    .myphone-vs-row { flex-direction: column; }
    .myphone-vs-arrow { transform: rotate(90deg); }
    .myphone-change-btn { position: static; margin-bottom: 12px; display: block; }
}

/* ---- Modal ---- */
.ss2-modal { max-width:640px; padding:24px; }
.ss2-modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.ss2-modal-brand { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; }
.ss2-modal-model { font-size:19px; font-weight:800; color:var(--text-primary); }
.ss2-modal-score { text-align:center; flex-shrink:0; }
.ss2-modal-score-num { font-size:30px; font-weight:900; line-height:1; }
.ss2-modal-score-num span { font-size:14px; font-weight:700; color:var(--text-muted); }
.ss2-modal-score.ss2-excellent .ss2-modal-score-num { color:#22c55e; }
.ss2-modal-score.ss2-good .ss2-modal-score-num { color:#3b82f6; }
.ss2-modal-score.ss2-average .ss2-modal-score-num { color:#f59e0b; }
.ss2-modal-score.ss2-poor .ss2-modal-score-num { color:#ef4444; }
.ss2-modal-score-status { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-top:2px; }

.ss2-section { margin-top:20px; padding-top:16px; border-top:1px solid var(--border-color); }
.ss2-section h4 { font-size:14px; font-weight:800; margin-bottom:8px; color:var(--text-primary); }
.ss2-muted { font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.ss2-note { font-size:12.5px; color:var(--text-secondary); line-height:1.5; }

.ss2-breakdown-row { margin-bottom:12px; }
.ss2-breakdown-top { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.ss2-breakdown-note { font-size:11.5px; color:var(--text-muted); margin-top:4px; }

.ss2-slider-row { display:grid; grid-template-columns:110px 1fr 44px; align-items:center; gap:10px; margin-bottom:10px; }
.ss2-slider-row label { font-size:12.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
.ss2-slider { width:100%; accent-color:var(--accent); height:22px; touch-action:pan-y; }
.ss2-slider-val { font-size:12px; font-weight:800; text-align:right; color:var(--accent); }
.ss2-personal-result { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-top:8px; padding:10px 12px; background:var(--bg-input); border-radius:10px; flex-wrap:wrap; }
.ss2-reset-weights { width:100%; margin-top:10px; font-size:12.5px; }

.ss2-value-prices { display:flex; flex-wrap:wrap; gap:16px; font-size:13px; margin-bottom:6px; }

.ss2-insights, .ss2-hidden-details { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.ss2-insights li, .ss2-hidden-details li { font-size:12.5px; line-height:1.5; padding:8px 10px; border-radius:8px; background:var(--bg-input); }

.ss2-explainer { background:var(--bg-input); border-radius:12px; padding:14px; border-top:none; margin-top:16px; }

/* ---- Mobile ---- */
@media (max-width:768px) {
    .ss2-modal { padding:18px; max-width:100%; }
    .ss2-modal-model { font-size:16px; }
    .ss2-modal-score-num { font-size:24px; }
    .ss2-slider-row { grid-template-columns:88px 1fr 38px; gap:6px; }
    .ss2-slider-row label { font-size:11.5px; }
    .ss2-value-prices { gap:10px; font-size:12px; }
    .ss2-personal-result { flex-direction:column; gap:4px; }
    .ss2-bar-label { min-width:64px; font-size:10.5px; }
}
@media (max-width:480px) {
    .ss2-strength-weak-lg { flex-direction:column; }
}

/* ===== PhoneHub App (future Android APK) download popup =====
   Fully inert until PHONEHUB_APK_URL is configured in script.js —
   see initPhoneHubAppDownload()/showPhoneHubAppPopup(). Styled to match
   the existing .modal / .card design tokens. */
.ph-app-popup-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 20px; animation: fcFade 0.2s ease;
}
.ph-app-popup {
    background: var(--bg-card); border-radius: var(--radius);
    box-shadow: 0 24px 64px rgba(0,0,0,0.4); max-width: 340px; width: 100%;
    padding: 28px 24px 24px; text-align: center; position: relative;
    border: 1px solid var(--border-color);
}
.ph-app-popup-close {
    position: absolute; top: 12px; right: 12px; background: var(--bg-input);
    border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer;
    color: var(--text-muted); font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.ph-app-popup-icon { font-size: 40px; margin-bottom: 8px; }
.ph-app-popup h3 { margin: 4px 0 8px; font-size: 18px; color: var(--text-primary); }
.ph-app-popup p { margin: 0 0 20px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.ph-app-popup-actions { display: flex; flex-direction: column; gap: 10px; }
.ph-app-popup-btn {
    border: none; border-radius: var(--radius-xs); padding: 12px 16px;
    font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--font);
    transition: all var(--transition);
}
.ph-app-popup-btn.primary { background: linear-gradient(135deg, #6c5ce7, #00cec9); color: #fff; }
.ph-app-popup-btn.secondary { background: var(--bg-input); color: var(--text-secondary); }


/* Out of Stock (Notify Me) table — full width of its card, wraps text (no tiny grid cell / sideways scroll) */
.pt-oos-wrap{display:block;width:100%;}
.pt-oos-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;}
.phx4-sheet-table.pt-oos-table{width:100%;min-width:0;table-layout:auto;}
.pt-oos-table th,.pt-oos-table td{white-space:normal;max-width:none;overflow:visible;text-overflow:clip;word-break:break-word;padding:8px 10px;vertical-align:middle;}
.pt-oos-table th:last-child,.pt-oos-table td:last-child{white-space:nowrap;width:1%;}
@media (max-width:600px){
  .pt-oos-table{font-size:12px;}
  .pt-oos-table th,.pt-oos-table td{padding:7px 8px;}
  .pt-oos-table thead th{font-size:10px;}
}


/* ===== Price source labels: Flipkart price / Amazon price / Flipkart not available ===== */
.phx6-src{display:inline-block;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:800;line-height:1.35;letter-spacing:.2px;white-space:nowrap;text-transform:none;vertical-align:middle;}
.phx6-src-fk{background:#2874f0;color:#fff;}
.phx6-src-az{background:#ff9900;color:#111;}
.phx6-src-na{background:#111;color:#fff;}
.detail-price-src{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px;}
.detail-price-src:empty{display:none;}
.detail-price-src .phx6-src{font-size:11px;padding:3px 9px;border-radius:6px;}
.phx4-vpt-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}
.phx4-vpt-right .phx6-src{margin:0;}
.phx4-variant-chip .phx4-vc-pricebox{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.phx4-variant-chip .phx4-vc-pricebox .phx6-src{margin:0;}
[data-theme="dark"] .phx6-src-na,body.dark .phx6-src-na{border:1px solid #4b5563;}

/* 📸 "more images" note under the detail image */
.detail-more-img-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
  color: #92400e; background: #fffbeb;
  border: 1px solid #fcd34d; border-left: 4px solid #f59e0b;
  border-radius: 10px;
}
.detail-more-img-note .dmin-ico { flex-shrink: 0; font-size: 15px; line-height: 1.3; }
[data-theme="dark"] .detail-more-img-note,
body.dark .detail-more-img-note,
body.dark-mode .detail-more-img-note {
  color: #fde68a; background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.45); border-left-color: #f59e0b;
}

/* ========================================================================
   ✨ Premium toasts (success / error / info / warn)
   ======================================================================== */
.toast-container {
  position: fixed; z-index: 10000;
  right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 24px)); max-width: none;
  pointer-events: none;
}
.toast-container .toast.ph-toast {
  --tc: #38bdf8;
  position: relative; overflow: hidden; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 14px 12px;
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.94));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  color: #f8fafc; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .1px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 18px 40px -12px rgba(2,6,23,.55), 0 2px 0 rgba(255,255,255,.04) inset;
  animation: phToastIn .45s cubic-bezier(.2,.9,.25,1.15) both;
}
.toast-container .toast.ph-toast.success { --tc: #22c55e; }
.toast-container .toast.ph-toast.error   { --tc: #f43f5e; }
.toast-container .toast.ph-toast.warn    { --tc: #f59e0b; }
.toast-container .toast.ph-toast.info    { --tc: #38bdf8; }
.toast-container .toast.ph-toast::before {            /* soft coloured glow in the corner */
  content: ""; position: absolute; left: -30px; top: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, var(--tc) 0%, transparent 68%); opacity: .22; pointer-events: none;
}
.ph-toast-ico {
  position: relative; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 62%, #0f172a));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 22%, transparent), 0 6px 14px -4px var(--tc);
}
.ph-toast-msg { position: relative; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ph-toast-bar {                                         /* countdown line */
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--tc), color-mix(in srgb, var(--tc) 40%, #fff));
  transform-origin: left center; opacity: .9;
  animation: phToastBar var(--ph-toast-life, 3400ms) linear forwards;
}
.toast-container .toast.ph-toast.leaving { animation: phToastOut .3s ease forwards; }
@keyframes phToastIn  { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes phToastOut { to   { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes phToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) {
  .toast-container { right: 12px; left: 12px; width: auto; align-items: center; }
  .toast-container .toast.ph-toast { width: 100%; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast-container .toast.ph-toast, .ph-toast-bar { animation-duration: .01ms !important; }
}

/* ========================================================================
   ✨ Premium popups: confirm/prompt dialogs, modals, notification dropdown
   ======================================================================== */
.fc-overlay { background: rgba(2,6,23,.62) !important; -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
.fc-card {
  position: relative; overflow: hidden;
  border-radius: 24px !important; padding: 30px 24px 22px !important;
  background: linear-gradient(160deg, rgba(30,41,59,.98), rgba(15,23,42,.98)) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 30px 70px -18px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06) inset !important;
  animation: fcPop .34s cubic-bezier(.2,.9,.25,1.12) both !important;
}
.fc-card::before {
  content: ""; position: absolute; left: 50%; top: -70px; width: 240px; height: 170px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--fc-color) 0%, transparent 70%); opacity: .30; pointer-events: none;
}
.fc-card.fc-danger { --fc-color: #f43f5e; }
.fc-icon {
  position: relative; width: 62px !important; height: 62px !important; font-size: 28px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fc-color) 85%, #fff), color-mix(in srgb, var(--fc-color) 60%, #0f172a)) !important;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--fc-color) 18%, transparent), 0 12px 24px -8px var(--fc-color) !important;
}
.fc-title { position: relative; color: #f8fafc !important; font-size: 20px !important; }
.fc-msg { position: relative; color: #cbd5e1 !important; }
.fc-actions { position: relative; }
.fc-btn { border-radius: 14px !important; min-height: 48px !important; letter-spacing: .1px; }
.fc-cancel { background: rgba(255,255,255,.07) !important; color: #e2e8f0 !important; border: 1px solid rgba(255,255,255,.14) !important; }
.fc-cancel:hover { background: rgba(255,255,255,.12) !important; }
.fc-ok:hover { filter: brightness(1.08); }
.fc-input {
  background: rgba(255,255,255,.06) !important; color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.16) !important; border-radius: 12px !important;
}
.fc-input::placeholder { color: #94a3b8; }
.fc-error { color: #fb7185 !important; }

/* Modals (login, admin access, smart score, detail popups) */
.modal-overlay { background: rgba(2,6,23,.60) !important; -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
.modal-overlay.open .modal { animation: phModalIn .32s cubic-bezier(.2,.9,.25,1.08) both; }
.modal {
  border-radius: 22px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, rgba(255,255,255,.4)) !important;
  box-shadow: 0 32px 80px -20px rgba(2,6,23,.55), 0 2px 0 rgba(255,255,255,.04) inset !important;
}
.modal .modal-close {
  width: 34px; height: 34px; border-radius: 50%; line-height: 1; font-size: 18px !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-input) !important; border: 1px solid var(--border-color) !important;
  transition: transform .15s ease, background .15s ease;
}
.modal .modal-close:hover { transform: rotate(90deg); background: var(--border-color) !important; }
@keyframes phModalIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal-overlay .modal { border-radius: 24px 24px 0 0 !important; max-width: 100% !important; }
}

/* Notification dropdown */
.notif-dropdown {
  border-radius: 18px !important; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, rgba(255,255,255,.4)) !important;
  box-shadow: 0 24px 60px -16px rgba(2,6,23,.5) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.notif-dropdown.open { animation: phModalIn .25s cubic-bezier(.2,.9,.25,1.08) both; }
.notif-dropdown .notif-item { padding: 12px 18px !important; transition: background .15s ease, padding-left .15s ease; }
.notif-dropdown .notif-item:hover { padding-left: 22px !important; }
@media (prefers-reduced-motion: reduce) {
  .fc-card, .modal-overlay.open .modal, .notif-dropdown.open { animation-duration: .01ms !important; }
}

/* ---- Variant/Color-wise Price Alerts ---- */
.pa-variant-select { width:100%; min-width:200px; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-input); color:var(--text-primary); font-size:14px; }
.pa-variant-field { min-width:200px; }
.pav-users summary { cursor:pointer; white-space:nowrap; }
.pav-users div { font-size:12px; padding:2px 0; color:var(--text-secondary); }

/* ---- OOS sheet: Amazon status column + Retry All ---- */
.pt-oos-bar{margin:8px 0 10px;}
.pt-oos-table tr.pt-oos-na td{background:rgba(239,68,68,.16);}
.pt-oos-table tr.pt-oos-na td:first-child{box-shadow:inset 3px 0 0 #ef4444;}
.pt-az-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22);vertical-align:middle;}
.pt-az-na{width:18px;height:18px;cursor:pointer;accent-color:#ef4444;vertical-align:middle;}

/* ===== Always-visible top header =====
   .header আগে থেকেই position:sticky ছিল, কিন্তু html/body/.main এ overflow-x:hidden থাকায়
   ওগুলো scroll container হয়ে যেত এবং sticky কাজ করত না (স্ক্রলে হেডার উঠে যেত)।
   overflow-x:clip ডান দিকে উপচে পড়া আগের মতোই আটকায়, কিন্তু scroll container বানায় না। */
html, body { overflow-x: clip !important; }
.main { overflow-x: clip !important; }
.header { position: sticky !important; top: 0 !important; }

/* ======================================================================
   💬 PHONEHUB FEEDBACK SYSTEM — styles (uses site design tokens, dark-mode aware)
   ====================================================================== */
html.phx-fb-lock { overflow: hidden; }

/* ---- prompt card ---- */
.phx-fb-prompt { position: fixed; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 24px)); z-index: 1500;
    background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15,23,42,.22); padding: 16px 16px 12px; opacity: 0; transform: translateY(20px) scale(.98);
    transition: opacity .3s ease, transform .3s ease; font-family: var(--font); }
.phx-fb-prompt.show { opacity: 1; transform: none; }
.phx-fb-prompt::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.phx-fb-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent;
    color: var(--text-muted); cursor: pointer; font-size: 14px; }
.phx-fb-x:hover { background: var(--bg-input); color: var(--text-primary); }
.phx-fb-prompt-title { font-weight: 800; font-size: 16px; padding-right: 24px; }
.phx-fb-prompt-sub { font-size: 13px; color: var(--text-muted); margin: 4px 0 12px; line-height: 1.45; }
.phx-fb-quick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.phx-fb-quick { border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); border-radius: 12px;
    padding: 9px 4px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-family: var(--font); transition: transform .15s, border-color .15s, background .15s; line-height: 1.2; text-align: center; }
.phx-fb-quick span { font-size: 22px; }
.phx-fb-quick:hover { transform: translateY(-2px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-input)); }
.phx-fb-prompt-foot { margin-top: 10px; text-align: center; font-size: 12px; color: var(--text-muted); }
.phx-fb-prompt-foot button { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 2px 6px; font-family: var(--font); }
.phx-fb-prompt-foot button:hover { color: var(--text-primary); }

/* ---- dialog ---- */
.phx-fb-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(16,24,40,.6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .25s ease; }
.phx-fb-overlay.show { opacity: 1; }
.phx-fb-dialog { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35); padding: 24px 22px 18px; transform: translateY(14px) scale(.98); transition: transform .25s ease; font-family: var(--font); }
.phx-fb-overlay.show .phx-fb-dialog { transform: none; }
.phx-fb-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--bg-input);
    color: var(--text-muted); cursor: pointer; font-size: 14px; }
.phx-fb-close:hover { color: var(--text-primary); }
.phx-fb-dialog h2 { font-size: 21px; font-weight: 800; padding-right: 34px; }
.phx-fb-lead { color: var(--text-muted); font-size: 14px; margin: 4px 0 6px; }
.phx-fb-q { font-weight: 700; font-size: 14px; margin: 18px 0 8px; }
.phx-fb-q b { color: var(--danger); }
.phx-fb-q.sm { font-size: 13px; margin: 14px 0 6px; color: var(--text-secondary); }

.phx-fb-useful { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.phx-fb-ubtn { border: 1.5px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); border-radius: 14px; padding: 12px 6px;
    cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; font-family: var(--font);
    transition: all .15s; text-align: center; line-height: 1.25; }
.phx-fb-ubtn .e { font-size: 26px; }
.phx-fb-ubtn:hover { border-color: var(--accent); }
.phx-fb-ubtn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-input)); box-shadow: 0 0 0 3px var(--focus-ring); }

.phx-fb-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.phx-fb-face { border: 1.5px solid transparent; background: var(--bg-input); border-radius: 12px; padding: 8px 2px; cursor: pointer; display: flex;
    flex-direction: column; align-items: center; gap: 2px; font-family: var(--font); color: var(--text-muted); transition: all .15s; }
.phx-fb-face .e { font-size: 26px; filter: grayscale(.85); opacity: .75; transition: all .15s; }
.phx-fb-face .t { font-size: 11px; font-weight: 600; }
.phx-fb-face:hover .e { filter: none; opacity: 1; transform: scale(1.12); }
.phx-fb-face.on { border-color: var(--accent); color: var(--text-primary); background: color-mix(in srgb, var(--accent) 12%, var(--bg-input)); }
.phx-fb-face.on .e { filter: none; opacity: 1; transform: scale(1.18); }

.phx-fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.phx-fb-chip { border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-secondary); border-radius: 999px; padding: 7px 13px;
    font-size: 13px; cursor: pointer; font-family: var(--font); transition: all .15s; }
.phx-fb-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.phx-fb-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.phx-fb-input { width: 100%; background: var(--bg-input); color: var(--text-primary); border: 1.5px solid var(--border-color); border-radius: 12px;
    padding: 11px 13px; font-size: 14px; font-family: var(--font); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.phx-fb-input { margin-top: 10px; resize: vertical; min-height: 96px; line-height: 1.5; }
.phx-fb-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.phx-fb-count { text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.phx-fb-more { margin-top: 12px; border: 1px dashed var(--border-color); border-radius: 12px; padding: 10px 14px; }
.phx-fb-more summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--accent); list-style: none; }
.phx-fb-more summary::-webkit-details-marker { display: none; }
.phx-fb-more summary em { font-weight: 400; color: var(--text-muted); font-style: normal; }
.phx-fb-more[open] { padding-bottom: 14px; }

.phx-fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.phx-fb-row label { font-size: 12px; font-weight: 700; color: var(--text-secondary); display: flex; flex-direction: column; gap: 5px; }
.phx-fb-row label i { font-weight: 400; color: var(--text-muted); font-style: normal; }
.phx-fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.phx-fb-err { color: var(--danger); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 10px; }
.phx-fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.phx-fb-send { border: 0; border-radius: 12px; padding: 12px 24px; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer; font-family: var(--font);
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 20px rgba(79,70,229,.3); transition: transform .15s, opacity .15s; }
.phx-fb-send:hover:not(:disabled) { transform: translateY(-1px); }
.phx-fb-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.phx-fb-ghost { border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); border-radius: 12px; padding: 12px 18px;
    font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--font); }
.phx-fb-ghost:hover { color: var(--text-primary); border-color: var(--text-muted); }
.phx-fb-priv { font-size: 11px; color: var(--text-muted); margin-top: 12px; text-align: center; }
.phx-fb-thanks { text-align: center; padding: 22px 6px 8px; }
.phx-fb-thanks .big { font-size: 56px; }
.phx-fb-thanks p { color: var(--text-muted); margin: 6px 0 18px; line-height: 1.5; }

@media (max-width: 520px) {
    .phx-fb-overlay { align-items: flex-end; padding: 0; }
    .phx-fb-dialog { max-width: none; border-radius: 22px 22px 0 0; max-height: 92vh; padding: 20px 16px 16px; transform: translateY(40px); }
    .phx-fb-row { grid-template-columns: 1fr; }
    .phx-fb-prompt { right: 12px; left: 12px; width: auto; bottom: 12px; }
    .phx-fb-actions { position: sticky; bottom: -16px; background: var(--bg-card); padding: 10px 0 6px; }
    .phx-fb-actions .phx-fb-send { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .phx-fb-prompt, .phx-fb-overlay, .phx-fb-dialog { transition: none; } }

/* ---- admin dashboard ---- */
.phx-fb-a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.phx-fb-a-stats .s { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; text-align: center; }
.phx-fb-a-stats .s b { display: block; font-size: 22px; font-weight: 800; }
.phx-fb-a-stats .s span { font-size: 12px; color: var(--text-muted); }
.phx-fb-a-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.phx-fb-a-panel { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; }
.phx-fb-a-panel h5 { font-size: 13px; margin-bottom: 8px; }
.phx-fb-bar { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: 8px; font-size: 12px; margin: 5px 0; }
.phx-fb-bar .b { height: 8px; background: var(--border-color); border-radius: 99px; overflow: hidden; }
.phx-fb-bar .b i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.phx-fb-bar .b i.g { background: var(--success); } .phx-fb-bar .b i.y { background: var(--warning); } .phx-fb-bar .b i.r { background: var(--danger); }
.phx-fb-bar .c { text-align: right; font-weight: 700; }
.phx-fb-a-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.phx-fb-a-sel { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-family: var(--font); }
.phx-fb-a-btn { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor: pointer; font-family: var(--font); }
.phx-fb-a-btn:hover { border-color: var(--accent); }
.phx-fb-a-count { font-size: 12px; color: var(--text-muted); margin: 4px 0 10px; }
.phx-fb-a-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.phx-fb-a-card.is-new { border-left: 4px solid var(--accent); }
.phx-fb-a-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.phx-fb-a-top .face { font-size: 24px; margin-right: 2px; }
.phx-fb-a-top .pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); }
.phx-fb-a-top .pill.u-yes { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); border-color: transparent; }
.phx-fb-a-top .pill.u-no { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); border-color: transparent; }
.phx-fb-a-top .pill.u-somewhat { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); border-color: transparent; }
.phx-fb-a-top .pill.newp { background: var(--accent); color: #fff; border-color: transparent; }
.phx-fb-a-top .pill.done { color: var(--success); }
.phx-fb-a-top .when { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.phx-fb-a-text { margin: 10px 0 6px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.phx-fb-a-muted { font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.phx-fb-a-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.phx-fb-a-tags span { font-size: 11px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 99px; padding: 2px 9px; color: var(--text-secondary); }
.phx-fb-a-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.phx-fb-a-meta a { color: var(--accent); }
.phx-fb-a-acts { display: flex; gap: 8px; margin-top: 10px; }
.phx-fb-a-acts button { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 9px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: var(--font); }
.phx-fb-a-acts button:hover { border-color: var(--accent); }
.phx-fb-a-acts button.danger:hover { border-color: var(--danger); color: var(--danger); }
.phx-fb-a-empty { padding: 28px 12px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* =====================================================================
   SIDEBAR v2 — real SVG icons in tinted tiles (replaces blank boxes)
   ===================================================================== */
.sidebar .sidebar-nav .nav-item .icon::before,
.sidebar .sidebar-footer .nav-item .icon::before { content:none !important; display:none !important; }

.sidebar .sidebar-nav .nav-item,
.sidebar .sidebar-footer .nav-item {
    position:relative;
    gap:13px;
    min-height:48px;
    padding:7px 12px 7px 8px;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.005em;
}
.sidebar .sidebar-nav .nav-item .icon,
.sidebar .sidebar-footer .nav-item .icon {
    --ic:#8da2ff;
    width:36px; height:36px; flex:0 0 36px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0; border-radius:11px;
    color:var(--ic);
    background:color-mix(in srgb, var(--ic) 16%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ic) 22%, transparent);
    transition:transform .18s ease, background .18s ease, color .18s ease;
}
.sidebar .nav-item .icon svg { width:19px; height:19px; display:block; }
.sidebar .nav-item:hover .icon { transform:scale(1.07); background:color-mix(in srgb, var(--ic) 26%, transparent); }

/* per-item accent colours */
.sidebar .nav-item[data-page="dashboard"] .icon    { --ic:#6ea0ff; }
.sidebar .nav-item[data-page="myphone"] .icon      { --ic:#2ee6b6; }
.sidebar .nav-item[data-page="browse"] .icon       { --ic:#4cc9f0; }
.sidebar .nav-item[data-page="smartscores"] .icon  { --ic:#ffb84d; }
.sidebar .nav-item[data-page="compare"] .icon      { --ic:#b08cff; }
.sidebar .nav-item[data-page="rankings"] .icon     { --ic:#ffd23f; }
.sidebar .nav-item[data-page="mobileseries"] .icon { --ic:#5eead4; }
.sidebar .nav-item[data-page="aifinder"] .icon     { --ic:#f472d0; }
.sidebar .nav-item[data-page="news"] .icon         { --ic:#7dd3fc; }
.sidebar .nav-item[data-page="pricehistory"] .icon { --ic:#4ade80; }
.sidebar .nav-item[data-page="pricealerts"] .icon  { --ic:#fb923c; }
.sidebar .nav-item[data-page="favorites"] .icon    { --ic:#ff6b81; }
.sidebar .nav-item[data-page="readinglist"] .icon  { --ic:#a3e635; }
.sidebar .nav-item[data-page="community"] .icon    { --ic:#c4b5fd; }
.sidebar .nav-item[data-page="profile"] .icon      { --ic:#93c5fd; }
.sidebar .nav-item[data-page="admin"] .icon        { --ic:#fbbf24; }
.sidebar .nav-item[data-icon="about"] .icon        { --ic:#60a5fa; }
.sidebar .nav-item[data-icon="terms"] .icon        { --ic:#94a3b8; }
.sidebar .nav-item[data-icon="contact"] .icon      { --ic:#34d399; }
.sidebar .nav-item[data-icon="disclaimer"] .icon   { --ic:#fbbf24; }

/* active item: white tile on the blue pill */
.sidebar .sidebar-nav .nav-item.active .icon,
.sidebar .sidebar-footer .nav-item.active .icon {
    color:#fff !important;
    background:rgba(255,255,255,.2);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* footer links: calm text, no left border */
.sidebar .sidebar-footer .nav-item.footer-link,
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link {
    color:var(--text-secondary) !important;
    border-left:1px solid transparent !important;
    font-weight:500;
    min-height:44px;
}
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link { color:#b9c5e2 !important; }
.sidebar .sidebar-footer .nav-item.footer-link:hover { color:var(--text-primary) !important; }
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link:hover { color:#fff !important; }
.sidebar .sidebar-footer .nav-item.footer-link .icon { width:32px; height:32px; flex-basis:32px; border-radius:10px; }
.sidebar .sidebar-footer .nav-item.footer-link .icon svg { width:17px; height:17px; }

/* keep the icon colour the tile's own colour in dark theme (old rules forced blue) */
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item:not(.active) .icon,
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item .icon { color:var(--ic); }
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.active .icon { color:#fff; }

/* badge + DEV tag pinned right */
.sidebar .sidebar-nav .nav-item .badge { margin-left:auto; min-width:22px; text-align:center; font-weight:700; }

/* spacing between sections */
.sidebar .sidebar-nav { gap:3px; }
.sidebar .sidebar-footer { margin-top:10px; padding-top:12px; gap:2px; }
.sidebar .sidebar-brand { padding-bottom:22px; }

.sidebar .nav-item[data-icon="download"] .icon { --ic:#22d3ee; }

/* ---- Sidebar v2.1: footer links — same size/brightness as the main menu ---- */
.sidebar .sidebar-footer .nav-item.footer-link,
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link,
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link[style]:not(.active) {
    min-height:48px;
    padding:7px 12px 7px 8px;
    gap:13px;
    font-size:14.5px;
    font-weight:600;
    white-space:nowrap;
    opacity:1;
    border-left:1px solid transparent !important;
    color:var(--text-primary) !important;
}
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link,
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link[style]:not(.active) {
    color:#e3eaf9 !important;
}
.sidebar .sidebar-footer .nav-item.footer-link:hover,
html[data-theme="dark"] .sidebar .sidebar-footer .nav-item.footer-link:hover { color:#fff !important; }
.sidebar .sidebar-footer .nav-item.footer-link .icon {
    width:36px; height:36px; flex:0 0 36px; border-radius:11px;
}
.sidebar .sidebar-footer .nav-item.footer-link .icon svg { width:19px; height:19px; }
.sidebar .sidebar-footer .nav-item { white-space:nowrap; }
.sidebar .sidebar-footer .nav-item .dev-badge { margin-left:auto; }
@media (max-width:360px) {
    .sidebar .sidebar-footer .nav-item.footer-link { font-size:14px; }
}

/* ---- Sidebar v2.2: footer link text — the sidebar is dark in BOTH themes, so use a fixed light colour ---- */
html body .sidebar .sidebar-footer .nav-item.footer-link:not(.active),
html[data-theme="dark"] body .sidebar .sidebar-footer .nav-item.footer-link:not(.active),
html[data-theme="light"] body .sidebar .sidebar-footer .nav-item.footer-link:not(.active) {
    color:#d3dcf1 !important;
    -webkit-text-fill-color:#d3dcf1 !important;
    opacity:1 !important;
}
html body .sidebar .sidebar-footer .nav-item.footer-link:not(.active):hover,
html[data-theme="dark"] body .sidebar .sidebar-footer .nav-item.footer-link:not(.active):hover,
html[data-theme="light"] body .sidebar .sidebar-footer .nav-item.footer-link:not(.active):hover {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

/* =====================================================================
   SPEC CARDS v2 — key-spec tiles (2 columns) + compact detail rows
   ===================================================================== */
.phone-detail-page .detail-specs-grid {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
}
.phone-detail-page .detail-spec-item { --sc:#4f7cff; }

/* ---- key tiles ---- */
.phone-detail-page .detail-spec-item.spec-key {
    display:flex; align-items:flex-start; gap:11px;
    padding:13px 12px !important;
    min-width:0;
    border-radius:16px !important;
    background:linear-gradient(160deg, color-mix(in srgb, var(--sc) 9%, #fff) 0%, #fff 70%) !important;
    border:1px solid color-mix(in srgb, var(--sc) 22%, #e3eaf6) !important;
    box-shadow:0 2px 10px rgba(30,60,120,.05);
}
.phone-detail-page .detail-spec-item.spec-key .spec-txt { min-width:0; flex:1; }
.phone-detail-page .detail-spec-item.spec-key .label {
    font-size:10.5px !important; letter-spacing:.07em; color:#7a8aa6 !important; margin:0;
}
.phone-detail-page .detail-spec-item.spec-key .value {
    font-size:14.5px !important; font-weight:700; line-height:1.3; margin-top:3px;
    color:#16294a !important; overflow-wrap:anywhere;
}

/* ---- icon tile (shared) ---- */
.phone-detail-page .detail-spec-item .spec-ico {
    flex:0 0 auto; width:36px; height:36px; border-radius:11px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--sc);
    background:color-mix(in srgb, var(--sc) 14%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sc) 20%, transparent);
}
.phone-detail-page .detail-spec-item .spec-ico svg { width:19px; height:19px; display:block; }
.phone-detail-page .detail-spec-item .spec-ico:empty { display:none; }

/* ---- compact rows ---- */
.phone-detail-page .detail-spec-item.spec-row {
    grid-column:1 / -1;
    display:flex; align-items:center; gap:12px;
    padding:9px 12px !important;
    border-radius:13px !important;
    min-height:50px;
}
.phone-detail-page .detail-spec-item.spec-row .spec-ico { width:32px; height:32px; border-radius:10px; }
.phone-detail-page .detail-spec-item.spec-row .spec-ico svg { width:17px; height:17px; }
.phone-detail-page .detail-spec-item.spec-row .label {
    flex:0 0 auto; margin:0; font-size:11px !important; letter-spacing:.06em; min-width:84px;
}
.phone-detail-page .detail-spec-item.spec-row .value {
    flex:1; min-width:0; margin:0 !important; text-align:right;
    font-size:14px !important; font-weight:700; overflow-wrap:anywhere;
}
.phone-detail-page .detail-spec-item.spec-row .value .chip,
.phone-detail-page .detail-spec-item.spec-row .value > * { vertical-align:middle; }
.phone-detail-page .detail-spec-item[data-spec="colors"].spec-row { align-items:flex-start; }

/* ---- full-width blocks (variants table, AnTuTu) ---- */
.phone-detail-page .detail-spec-item.spec-block {
    display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:8px; align-items:center;
    padding:12px !important; border-radius:14px !important;
}
.phone-detail-page .detail-spec-item.spec-block .spec-ico { grid-column:1; grid-row:1; width:32px; height:32px; border-radius:10px; }
.phone-detail-page .detail-spec-item.spec-block .spec-ico svg { width:17px; height:17px; }
.phone-detail-page .detail-spec-item.spec-block .label { grid-column:2; grid-row:1; margin:0; }
.phone-detail-page .detail-spec-item.spec-block .value { grid-column:1 / -1; grid-row:2; margin:0 !important; min-width:0; }
.phone-detail-page .detail-spec-item.spec-block .spec-ico:empty + .label { grid-column:1 / -1; }

/* ---- per-spec accent colours ---- */
.phone-detail-page .detail-spec-item[data-spec="processor"] { --sc:#6c5ce7; }
.phone-detail-page .detail-spec-item[data-spec="ram"]       { --sc:#0ea5e9; }
.phone-detail-page .detail-spec-item[data-spec="storage"]   { --sc:#14b8a6; }
.phone-detail-page .detail-spec-item[data-spec="battery"]   { --sc:#16a34a; }
.phone-detail-page .detail-spec-item[data-spec="display"]   { --sc:#f59e0b; }
.phone-detail-page .detail-spec-item[data-spec="camera"]    { --sc:#ec4899; }
.phone-detail-page .detail-spec-item[data-spec="launch"]    { --sc:#6366f1; }
.phone-detail-page .detail-spec-item[data-spec="charging"]  { --sc:#f97316; }
.phone-detail-page .detail-spec-item[data-spec="weight"]    { --sc:#64748b; }
.phone-detail-page .detail-spec-item[data-spec="os"]        { --sc:#3b82f6; }
.phone-detail-page .detail-spec-item[data-spec="gpu"]       { --sc:#8b5cf6; }
.phone-detail-page .detail-spec-item[data-spec="5g"]        { --sc:#10b981; }
.phone-detail-page .detail-spec-item[data-spec="colors"]    { --sc:#d946ef; }
.phone-detail-page .detail-spec-item.phx4-extra-spec        { --sc:#4f7cff; }

/* ---- dark theme ---- */
html[data-theme="dark"] .phone-detail-page .detail-spec-item.spec-key {
    background:linear-gradient(160deg, color-mix(in srgb, var(--sc) 20%, #2a3759) 0%, #2a3759 75%) !important;
    border-color:color-mix(in srgb, var(--sc) 38%, #485a8a) !important;
    box-shadow:none;
}
html[data-theme="dark"] .phone-detail-page .detail-spec-item.spec-key .label { color:#aab8d8 !important; }
html[data-theme="dark"] .phone-detail-page .detail-spec-item.spec-key .value { color:#fff !important; }
html[data-theme="dark"] .phone-detail-page .detail-spec-item .spec-ico {
    color:color-mix(in srgb, var(--sc) 55%, #fff);
    background:color-mix(in srgb, var(--sc) 24%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sc) 34%, transparent);
}

/* very narrow phones: keep tiles readable */
@media (max-width:340px) {
    .phone-detail-page .detail-spec-item.spec-key { flex-direction:column; gap:8px; }
}

/* =====================================================================
   DETAIL INFO v2 — price row, alert pill, stock note, buy button, estimate
   ===================================================================== */
.phone-detail-page .detail-info svg { width:1em; height:1em; flex:0 0 auto; display:inline-block; vertical-align:-.15em; }

/* image hint: slim, calm */
.phone-detail-page .detail-more-img-note {
    align-items:center; gap:10px; padding:9px 12px;
    font-size:12.5px; font-weight:600; line-height:1.4;
    color:#8a5a12; background:#fff8e8; border:1px solid #f6dfa8; border-left-width:1px;
    border-radius:12px;
}
.phone-detail-page .detail-more-img-note .dmin-ico {
    width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
    color:#d98a0b; background:rgba(245,158,11,.16); font-size:16px;
}
.phone-detail-page .detail-more-img-note .dmin-ico svg { width:17px; height:17px; }
html[data-theme="dark"] .phone-detail-page .detail-more-img-note { color:#fde68a; background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.35); }

/* rating: empty state is a quiet inline note */
.phone-detail-page .detail-rating { margin:2px 0 4px; }
.phone-detail-page .detail-rating .stars.is-empty {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:999px;
    background:#f1f4fa; color:#6b7a96; font-size:12.5px; font-weight:600;
}
.phone-detail-page .detail-rating .stars.is-empty svg { width:14px; height:14px; color:#f59e0b; vertical-align:0; }
html[data-theme="dark"] .phone-detail-page .detail-rating .stars.is-empty { background:#2a3759; color:#b9c5e2; }

/* source badge sits right above the price */
.phone-detail-page .detail-price-src { margin:10px 0 0; }

/* ---- price block: big price first, change info beside it, alert pill below ---- */
.phone-detail-page .detail-price {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
    margin:4px 0 2px; font-size:40px; line-height:1.1;
}
.phone-detail-page .detail-price .detail-price-maingroup { display:contents; }
.phone-detail-page .detail-price .detail-price-now { order:1; }
.phone-detail-page .detail-price .detail-price-cut { order:2; display:inline-flex; align-items:center; gap:8px; }
.phone-detail-page .detail-price .original { order:2; margin:0; }
.phone-detail-page .detail-price .discount { order:3; margin:0; }
.phone-detail-page .detail-price .detail-price-alertbtn { order:4; flex:1 1 100%; display:block; }
.phone-detail-page .detail-price .detail-price-alertbtn:empty { display:none; }

.phone-detail-page .detail-price .dp-pct {
    font-size:14px; font-weight:800; color:#0f9d58; padding:4px 9px; border-radius:999px; background:#e7f8ef;
}
.phone-detail-page .detail-price .dp-old { font-size:15px; font-weight:500; }
.phone-detail-page .detail-price .dp-up { display:inline-flex; align-items:center; gap:8px; font-size:14px; }
.phone-detail-page .detail-price .dp-up b {
    font-weight:800; color:#e11d48; padding:4px 9px; border-radius:999px; background:#ffe9ee;
}
.phone-detail-page .detail-price .dp-up em {
    font-style:normal; font-weight:500; font-size:14px; color:var(--text-muted); text-decoration:line-through;
}
html[data-theme="dark"] .phone-detail-page .detail-price .dp-pct { background:rgba(16,185,129,.16); color:#4ade80; }
html[data-theme="dark"] .phone-detail-page .detail-price .dp-up b { background:rgba(244,63,94,.18); color:#fb7185; }

.phone-detail-page .detail-price .dp-alert-hint {
    display:inline-flex; align-items:center; gap:7px; margin:2px 0 0;
    padding:7px 13px; font-size:12.5px; font-weight:700; letter-spacing:0;
    color:#1d4ed8; background:#eef3ff; border:1px solid #cddbff; border-radius:999px;
}
.phone-detail-page .detail-price .dp-alert-hint svg { width:15px; height:15px; vertical-align:0; }
.phone-detail-page .detail-price .dp-alert-hint:hover { background:#e1eaff; }
html[data-theme="dark"] .phone-detail-page .detail-price .dp-alert-hint { color:#bcd0ff; background:rgba(79,124,255,.16); border-color:rgba(122,165,255,.4); }

/* updated / source line */
.phone-detail-page .detail-last-updated { gap:6px 16px; margin:6px 0 4px; font-size:12px; }
.phone-detail-page .detail-last-updated > span { display:inline-flex; align-items:center; gap:6px; }
.phone-detail-page .detail-last-updated svg { width:14px; height:14px; opacity:.8; vertical-align:0; }

/* ---- buy button ---- */
.phone-detail-page .detail-buy-links { margin:10px 0 10px; }
.phone-detail-page .detail-buy-links .buy-btn { gap:10px; }
.phone-detail-page .detail-buy-links .buy-btn svg { width:20px; height:20px; vertical-align:0; }
.phone-detail-page .detail-buy-links .buy-btn.flipkart.oos,
.detail-buy-links .buy-btn.flipkart.oos {
    background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow:0 8px 20px rgba(37,99,235,.35) !important;
    animation:none !important;
}

/* ---- stock note: one slim line, not a second alarm box ---- */
.phone-detail-page .detail-stock-note {
    display:flex; flex-direction:row; align-items:center; gap:10px;
    margin:0 0 14px; padding:9px 12px; border-radius:12px;
    background:#fff4ed; border:1px solid #fbd3b5;
}
.phone-detail-page .detail-stock-note[style*="display: none"], .phone-detail-page .detail-stock-note:empty { display:none !important; }
.phone-detail-page .detail-stock-note .dsn-ico {
    width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
    color:#c2410c; background:rgba(234,88,12,.14);
}
.phone-detail-page .detail-stock-note .dsn-ico svg { width:16px; height:16px; vertical-align:0; }
.phone-detail-page .detail-stock-note .dsn-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.phone-detail-page .detail-stock-note .dsn-badge { font-size:13px; font-weight:800; color:#c2410c; }
.phone-detail-page .detail-stock-note .dsn-sub { font-size:12px; line-height:1.35; color:#7c5a48; }
html[data-theme="dark"] .phone-detail-page .detail-stock-note { background:#2b1d16; border-color:#6b3a1f; }
html[data-theme="dark"] .phone-detail-page .detail-stock-note .dsn-ico { color:#fb923c; background:rgba(251,146,60,.16); }

/* ---- estimated price range: solid, light card ---- */
.phone-detail-page .detail-estimate-card {
    align-items:center; gap:12px; margin:12px 0 6px; padding:12px 14px;
    border:1px solid #d6e2fb !important; border-radius:14px;
    background:linear-gradient(135deg, #f3f7ff 0%, #ffffff 80%) !important;
}
.phone-detail-page .detail-estimate-icon {
    width:38px; height:38px; flex:0 0 38px; border-radius:12px;
    display:inline-flex; align-items:center; justify-content:center;
    color:#2f6bff; background:rgba(47,107,255,.12); font-size:20px;
}
.phone-detail-page .detail-estimate-icon svg { width:20px; height:20px; vertical-align:0; }
.phone-detail-page .detail-estimate-label { color:#6b7a96 !important; font-size:11px; letter-spacing:.07em; }
.phone-detail-page .detail-estimate-value { color:#16294a !important; font-size:19px; }
.phone-detail-page .detail-estimate-note { color:#8190aa !important; }
html[data-theme="dark"] .phone-detail-page .detail-estimate-card {
    border-color:#485a8a !important; background:linear-gradient(135deg, #2c3a64 0%, #26325a 85%) !important;
}
html[data-theme="dark"] .phone-detail-page .detail-estimate-icon { color:#9db9ff; background:rgba(122,165,255,.18); }
html[data-theme="dark"] .phone-detail-page .detail-estimate-label { color:#aab8d8 !important; }
html[data-theme="dark"] .phone-detail-page .detail-estimate-value { color:#fff !important; }
html[data-theme="dark"] .phone-detail-page .detail-estimate-note { color:#98a8cc !important; }

@media (max-width:480px) {
    .phone-detail-page .detail-price { font-size:36px; }
}

/* =====================================================================
   DETAIL PAGE v2 — scores, actions, EMI, quick take, advanced specs
   ===================================================================== */
.phone-detail-page svg { flex:0 0 auto; }
.phone-detail-page .h-ico, .phone-detail-page .pg-ico, .phone-detail-page .btn-ico, .phone-detail-page .emi-ico, .phone-detail-page .sc-ico {
    display:inline-flex; align-items:center; justify-content:center; font-style:normal;
}
.phone-detail-page .h-ico svg, .phone-detail-page .pg-ico svg, .phone-detail-page .btn-ico svg,
.phone-detail-page .emi-ico svg, .phone-detail-page .sc-ico svg { width:1.15em; height:1.15em; display:block; }

/* ---- score tiles ---- */
.phone-detail-page .detail-scores {
    display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px !important; padding:14px 0 6px !important;
}
.phone-detail-page .detail-scores .score {
    --sc:#6c5ce7; position:relative; overflow:hidden;
    display:flex !important; align-items:center; gap:9px;
    padding:10px 10px 13px !important; border-radius:14px !important;
    background:color-mix(in srgb, var(--sc) 9%, #fff) !important;
    border:1px solid color-mix(in srgb, var(--sc) 24%, #e6ecf7) !important;
    color:#16294a !important; font-size:12px !important; font-weight:600;
}
.phone-detail-page .detail-scores .score.camera  { --sc:#ec4899; }
.phone-detail-page .detail-scores .score.battery { --sc:#16a34a; }
.phone-detail-page .detail-scores .score .sc-ico {
    width:30px; height:30px; flex:0 0 30px; border-radius:10px; color:var(--sc);
    background:color-mix(in srgb, var(--sc) 16%, transparent); font-size:15px;
}
.phone-detail-page .detail-scores .score .sc-txt { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.phone-detail-page .detail-scores .score b { font-size:16px; font-weight:800; }
.phone-detail-page .detail-scores .score b small { font-size:11px; font-weight:600; color:#7a8aa6; margin-left:1px; }
.phone-detail-page .detail-scores .score em { font-style:normal; font-size:11px; color:#6b7a96; }
.phone-detail-page .detail-scores .score::after {
    content:""; position:absolute; left:10px; right:10px; bottom:6px; height:3px; border-radius:3px;
    background:linear-gradient(90deg, var(--sc) var(--pct,0%), color-mix(in srgb, var(--sc) 16%, transparent) var(--pct,0%));
}
html[data-theme="dark"] .phone-detail-page .detail-scores .score {
    background:color-mix(in srgb, var(--sc) 16%, #2a3759) !important;
    border-color:color-mix(in srgb, var(--sc) 36%, #485a8a) !important; color:#fff !important;
}
html[data-theme="dark"] .phone-detail-page .detail-scores .score .sc-ico { color:color-mix(in srgb, var(--sc) 55%, #fff); }
html[data-theme="dark"] .phone-detail-page .detail-scores .score em, html[data-theme="dark"] .phone-detail-page .detail-scores .score b small { color:#b3c0de; }

/* ---- action buttons: 2 x 2 ---- */
.phone-detail-page .detail-actions { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px !important; margin-top:6px; }
.phone-detail-page .detail-actions .btn {
    width:auto !important; flex:none !important; margin:0 !important;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:48px; padding:10px 8px !important; border-radius:14px !important;
    font-size:14px; font-weight:700; white-space:nowrap;
}
.phone-detail-page .detail-actions .btn .btn-ico svg { width:18px; height:18px; }
.phone-detail-page .detail-actions .btn-fav.active { background:#ffe9ee !important; color:#e11d48 !important; border:1px solid #fbb6c4 !important; }
.phone-detail-page .detail-actions .btn-fav.active .btn-ico svg { fill:currentColor; }
.phone-detail-page .detail-actions .btn-compare .btn-ico { color:#6c5ce7; }
html[data-theme="dark"] .phone-detail-page .detail-actions .btn-fav.active { background:rgba(244,63,94,.18) !important; color:#fb7185 !important; border-color:rgba(251,113,133,.45) !important; }

/* ---- EMI ---- */
.phone-detail-page .detail-emi { padding:16px !important; border-radius:18px !important; }
.phone-detail-page .detail-emi .emi-title { display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; margin-bottom:12px; }
.phone-detail-page .detail-emi .emi-ico {
    width:34px; height:34px; border-radius:11px; color:#2f6bff; background:rgba(47,107,255,.13); font-size:17px;
}
.phone-detail-page .detail-emi .emi-row { display:grid !important; grid-template-columns:1fr 1fr; gap:10px 12px; align-items:end; }
.phone-detail-page .detail-emi .emi-row label { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#7a8aa6; min-width:0; }
.phone-detail-page .detail-emi .emi-row input, .phone-detail-page .detail-emi .emi-row select { width:100% !important; min-width:0; box-sizing:border-box; height:46px; font-size:15px; font-weight:600; text-transform:none; letter-spacing:0; color:inherit; }
.phone-detail-page .detail-emi .emi-row .btn { grid-column:1 / -1; width:100%; min-height:46px; justify-content:center; border-radius:12px !important; }
.phone-detail-page .detail-emi .emi-result {
    grid-column:1 / -1; display:flex; align-items:baseline; justify-content:center; gap:6px;
    padding:12px; border-radius:14px; background:color-mix(in srgb, #2f6bff 9%, transparent);
    font-size:24px; font-weight:800; color:#2f6bff;
}

/* ---- quick take ---- */
.phone-detail-page .detail-insight-card h3, .phone-detail-page .detail-price-snapshot h3, .phone-detail-page .detail-similar h3 {
    display:flex; align-items:center; gap:10px;
}
.phone-detail-page .detail-insight-card h3 .h-ico, .phone-detail-page .detail-price-snapshot h3 .h-ico, .phone-detail-page .detail-similar h3 .h-ico {
    width:34px; height:34px; border-radius:11px; color:#2f6bff; background:rgba(47,107,255,.12); font-size:17px; flex:0 0 34px;
}
.phone-detail-page .detail-score-card { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px !important; padding:0 !important; background:transparent !important; border:0 !important; }
.phone-detail-page .detail-score-card > div {
    position:relative; padding:14px 14px 18px !important; border-radius:14px; border:1px solid #dfe7f6 !important;
    background:#f6f9ff; display:flex; flex-direction:column; gap:2px; text-align:left;
}
.phone-detail-page .detail-score-card > div::after {
    content:""; position:absolute; left:14px; right:14px; bottom:9px; height:4px; border-radius:4px;
    background:linear-gradient(90deg, #2f6bff var(--pct,0%), rgba(47,107,255,.14) var(--pct,0%));
}
.phone-detail-page .detail-score-card > div.dsc-overall { grid-column:1 / -1; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); border-color:transparent !important; }
.phone-detail-page .detail-score-card > div.dsc-overall::after { background:linear-gradient(90deg, #fff var(--pct,0%), rgba(255,255,255,.28) var(--pct,0%)); }
.phone-detail-page .detail-score-card > div.dsc-overall .detail-score-number { color:#fff !important; font-size:32px; }
.phone-detail-page .detail-score-card > div.dsc-overall .detail-score-label { color:rgba(255,255,255,.85) !important; }
.phone-detail-page .detail-score-card .detail-score-number { font-size:22px; font-weight:800; line-height:1.1; }
.phone-detail-page .detail-score-card .detail-score-label { font-size:11px; letter-spacing:.07em; font-weight:700; text-transform:uppercase; }
html[data-theme="dark"] .phone-detail-page .detail-score-card > div:not(.dsc-overall) { background:#2a3759; border-color:#485a8a !important; }

.phone-detail-page .pc-head { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; margin:16px 0 6px; }
.phone-detail-page .pc-head .h-ico { width:26px; height:26px; border-radius:8px; font-size:14px; }
.phone-detail-page .pc-pros { color:#0f9d58 !important; } .phone-detail-page .pc-pros .h-ico { background:rgba(15,157,88,.14); }
.phone-detail-page .pc-cons { color:#e11d48 !important; } .phone-detail-page .pc-cons .h-ico { background:rgba(225,29,72,.12); }
.phone-detail-page .detail-pros li::before { content:"✓"; font-weight:900; }

/* ---- advanced specs ---- */
.phone-detail-page .phx-specs-header, .phx-specs-header { gap:10px; font-size:17px; }
.phx-specs-header .pg-ico { width:34px; height:34px; border-radius:11px; color:#6c5ce7; background:rgba(108,92,231,.13); font-size:17px; display:inline-flex; align-items:center; justify-content:center; }
.phx-spec-group { --gc:#4f7cff; padding:14px 14px 6px !important; border-radius:16px !important; border:1px solid color-mix(in srgb, var(--gc) 16%, #e6ecf7); }
.phx-spec-group[data-grp="display"] { --gc:#f59e0b; } .phx-spec-group[data-grp="cpu"] { --gc:#6c5ce7; }
.phx-spec-group[data-grp="camera"] { --gc:#ec4899; } .phx-spec-group[data-grp="battery"] { --gc:#16a34a; }
.phx-spec-group[data-grp="tools"] { --gc:#64748b; } .phx-spec-group[data-grp="plug"] { --gc:#0ea5e9; }
.phx-spec-group[data-grp="laptop"] { --gc:#3b82f6; }
.phx-spec-group-title { display:flex; align-items:center; gap:10px; font-size:14px !important; color:var(--text-primary) !important; margin-bottom:6px !important; }
.phx-spec-group-title .pg-ico {
    width:30px; height:30px; border-radius:10px; color:var(--gc); font-size:15px;
    background:color-mix(in srgb, var(--gc) 15%, transparent); display:inline-flex; align-items:center; justify-content:center;
}
.phx-spec-group-title .pg-ico svg { width:1.15em; height:1.15em; display:block; }
.phx-spec-group-rows { grid-template-columns:1fr !important; gap:0 !important; }
.phx-spec-row { align-items:center; padding:10px 0 !important; font-size:13.5px !important; border-bottom:1px solid color-mix(in srgb, var(--gc) 10%, #e6ecf7) !important; }
.phx-spec-row:last-child { border-bottom:0 !important; }
.phx-spec-row span:last-child { font-weight:700 !important; max-width:62%; overflow-wrap:anywhere; }
.phx-spec-row .yn { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px; border-radius:999px; font-size:12px; font-weight:800; }
.phx-spec-row .yn svg { width:13px; height:13px; display:block; }
.phx-spec-row .yn.yes { color:#0f9d58; background:#e7f8ef; }
.phx-spec-row .yn.no { color:#e11d48; background:#ffe9ee; }
html[data-theme="dark"] .phx-spec-group { border-color:color-mix(in srgb, var(--gc) 30%, #485a8a); }
html[data-theme="dark"] .phx-spec-row { border-bottom-color:rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .phx-spec-row .yn.yes { color:#4ade80; background:rgba(16,185,129,.16); }
html[data-theme="dark"] .phx-spec-row .yn.no { color:#fb7185; background:rgba(244,63,94,.18); }

@media (max-width:360px) {
    .phone-detail-page .detail-scores { grid-template-columns:1fr; }
}

/* quick take: Overall on top, Gaming / Camera / Battery in one row */
.phone-detail-page .detail-score-card { grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
.phone-detail-page .detail-score-card > div { padding:12px 10px 16px !important; }
.phone-detail-page .detail-score-card > div::after { left:10px; right:10px; bottom:8px; }
.phone-detail-page .detail-score-card > div:not(.dsc-overall) .detail-score-number { font-size:18px; }
.phone-detail-page .detail-score-card > div:not(.dsc-overall) .detail-score-label { font-size:10px; letter-spacing:.05em; }
.phone-detail-page .detail-insight-card h3 { font-size:17px; line-height:1.25; }

/* =====================================================================
   BROWSE — swipe to change page
   ===================================================================== */
.browse-swipe-hint { display:none; align-items:center; justify-content:center; gap:8px; margin:14px auto 0; padding:7px 14px; width:fit-content; border-radius:999px; font-size:12px; font-weight:600; color:#6b7a96; background:rgba(79,124,255,.08); border:1px solid rgba(79,124,255,.18); }
.browse-swipe-hint svg { width:16px; height:16px; }
@media (pointer:coarse) {
    #page-browse:has(#browsePagination[style*="flex"]) .browse-swipe-hint:not(.done) { display:flex; }
}
html[data-theme="dark"] .browse-swipe-hint { color:#b9c5e2; background:rgba(122,165,255,.12); border-color:rgba(122,165,255,.3); }

@keyframes phSwipeInNext { from { opacity:.25; transform:translateX(38px); }  to { opacity:1; transform:none; } }
@keyframes phSwipeInPrev { from { opacity:.25; transform:translateX(-38px); } to { opacity:1; transform:none; } }
@keyframes phSwipeEdgeL  { 0%,100% { transform:none; } 40% { transform:translateX(-14px); } }
@keyframes phSwipeEdgeR  { 0%,100% { transform:none; } 40% { transform:translateX(14px); } }
#browseGrid.swipe-in-next, .phone-grid.swipe-in-next { animation:phSwipeInNext .28s ease-out; }
#browseGrid.swipe-in-prev, .phone-grid.swipe-in-prev { animation:phSwipeInPrev .28s ease-out; }
#browseGrid.swipe-edge-l,  .phone-grid.swipe-edge-l  { animation:phSwipeEdgeL .28s ease-out; }
#browseGrid.swipe-edge-r,  .phone-grid.swipe-edge-r  { animation:phSwipeEdgeR .28s ease-out; }
@media (prefers-reduced-motion:reduce) {
    .swipe-in-next, .swipe-in-prev, .swipe-edge-l, .swipe-edge-r { animation:none !important; }
}

/* =====================================================================
   RANKINGS v2 — scrolling category chips, hero, podium, compact rows
   ===================================================================== */
#page-rankings .card-title { display:flex; align-items:center; gap:10px; }
#page-rankings .rk-title-ico {
    width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
    color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow:0 6px 16px rgba(47,107,255,.3);
}
#page-rankings .rk-title-ico svg { width:20px; height:20px; }
#page-rankings .card-subtitle { text-transform:none !important; letter-spacing:0 !important; font-size:13px; }

/* ---- category chips: one scrolling row ---- */
#page-rankings #rankingsTabs.rk-chips {
    display:flex !important; flex-wrap:nowrap; gap:8px !important; overflow-x:auto; overflow-y:hidden;
    padding:4px 2px 10px !important; margin:0 -2px; background:transparent !important; border:0 !important; border-radius:0 !important;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#page-rankings #rankingsTabs.rk-chips::-webkit-scrollbar { display:none; }
#page-rankings #rankingsTabs.rk-chips .tab {
    flex:0 0 auto; scroll-snap-align:center; display:inline-flex; align-items:center; gap:7px;
    padding:9px 14px !important; min-height:40px; border-radius:999px !important; white-space:nowrap;
    font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important;
    background:#fff !important; color:#3d4f72 !important; border:1px solid #dbe4f5 !important; box-shadow:none !important;
}
#page-rankings #rankingsTabs.rk-chips .tab svg { width:16px; height:16px; color:#6b7fa8; }
#page-rankings #rankingsTabs.rk-chips .tab.active {
    background:linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%) !important; color:#fff !important; border-color:transparent !important;
    box-shadow:0 6px 14px rgba(47,107,255,.32) !important;
}
#page-rankings #rankingsTabs.rk-chips .tab.active svg { color:#fff; }
html[data-theme="dark"] #page-rankings #rankingsTabs.rk-chips .tab:not(.active) { background:#2a3759 !important; color:#d3dcf1 !important; border-color:#485a8a !important; }
html[data-theme="dark"] #page-rankings #rankingsTabs.rk-chips .tab:not(.active) svg { color:#9db0d9; }

/* ---- best of year: second chip row ---- */
#page-rankings .phx5-boy-section { margin:2px 0 6px !important; padding:0 !important; background:transparent !important; border:0 !important; }
#page-rankings .phx5-boy-title { display:flex; align-items:center; gap:8px; font-size:12px !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a8aa6 !important; margin:4px 0 6px !important; }
#page-rankings .rk-boy-ico { display:inline-flex; color:#f59e0b; } #page-rankings .rk-boy-ico svg { width:16px; height:16px; }
#page-rankings .phx5-boy-grid {
    display:flex !important; grid-template-columns:none !important; flex-wrap:nowrap; gap:8px !important; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:none;
}
#page-rankings .phx5-boy-grid::-webkit-scrollbar { display:none; }
#page-rankings .phx5-year-btn {
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 14px !important; border-radius:999px !important; min-height:38px;
    font-size:13px !important; font-weight:800 !important; color:#8a5a12 !important; background:#fff8e8 !important; border:1px solid #f3dca4 !important; box-shadow:none !important; transform:none !important;
}
#page-rankings .phx5-year-btn svg { width:15px; height:15px; color:#e69a0e; }
#page-rankings .phx5-year-btn.active { background:linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 14px rgba(249,115,22,.3) !important; }
#page-rankings .phx5-year-btn.active svg { color:#fff; }
html[data-theme="dark"] #page-rankings .phx5-year-btn:not(.active) { background:rgba(245,158,11,.12) !important; color:#fde68a !important; border-color:rgba(245,158,11,.35) !important; }

/* ---- hero ---- */
.rk-hero { display:flex; align-items:center; gap:12px; padding:14px; margin:6px 0 14px; border-radius:18px;
    background:linear-gradient(135deg, #f3f7ff 0%, #ffffff 80%); border:1px solid #d6e2fb; }
.rk-hero-ico { width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); }
.rk-hero-ico svg { width:23px; height:23px; }
.rk-hero-txt { min-width:0; flex:1; } .rk-hero-txt h3 { margin:0; font-size:17px; font-weight:800; line-height:1.25; } .rk-hero-txt p { margin:3px 0 0; font-size:12.5px; color:var(--text-muted); line-height:1.4; }
.rk-count { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#7a8aa6; }
.rk-count b { font-size:22px; letter-spacing:0; color:#2f6bff; line-height:1.1; }
html[data-theme="dark"] .rk-hero { background:linear-gradient(135deg, #2c3a64 0%, #26325a 85%); border-color:#485a8a; }
html[data-theme="dark"] .rk-count b { color:#9db9ff; }

/* ---- podium ---- */
.rk-podium { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rk-top { position:relative; cursor:pointer; border-radius:18px; padding:12px; background:#fff; border:1px solid #e1e8f6; box-shadow:0 4px 14px rgba(30,60,120,.06); display:flex; flex-direction:column; gap:8px; min-width:0; }
.rk-top-1 { grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px; padding:14px;
    background:linear-gradient(135deg, #fff8e6 0%, #ffffff 70%); border:1.5px solid #f3cf72; box-shadow:0 10px 26px rgba(245,158,11,.18); }
.rk-top-2 { border-color:#cfd8e8; } .rk-top-3 { border-color:#ecc7a1; }
.rk-badge { position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 8px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.03em; color:#fff; background:#94a3b8; }
.rk-badge b { font-size:12px; } .rk-badge svg { width:13px; height:13px; }
.rk-top-1 .rk-badge { background:linear-gradient(135deg, #f59e0b, #f97316); } .rk-top-3 .rk-badge { background:#d4894a; }
.rk-top-img { height:120px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:#f4f7fd; overflow:hidden; margin-top:24px; }
.rk-top-1 .rk-top-img { flex:0 0 118px; height:140px; margin-top:26px; }
.rk-top-img img { max-width:100%; max-height:100%; object-fit:contain; }
.rk-top-body { min-width:0; flex:1; }
.rk-brand { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }
.rk-name { font-size:14px; font-weight:800; line-height:1.25; color:var(--text-primary); overflow-wrap:anywhere; }
.rk-top-1 .rk-name { font-size:17px; }
.rk-price { margin-top:3px; font-size:16px; font-weight:800; color:#2f6bff; } .rk-top-1 .rk-price { font-size:21px; }
.rk-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.rk-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; color:#5b6c8c; background:#eef2fa; }
.rk-chip svg { width:12px; height:12px; }
.rk-chip-hl { color:#1d4ed8; background:#e4ecff; }
.rk-rate { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:#b7791f; } .rk-rate svg { width:14px; height:14px; fill:#f5a524; stroke:#f5a524; }
.rk-cmp { position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:11px; border:1px solid #dbe4f5; background:#fff; color:#4a5f8a; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.rk-cmp svg { width:17px; height:17px; }

/* ---- rest of the list ---- */
.rk-list-title { margin:18px 2px 8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a8aa6; }
.rk-list { display:flex; flex-direction:column; gap:8px; }
.rk-row { position:relative; display:flex; align-items:center; gap:10px; padding:10px; border-radius:16px; background:#fff; border:1px solid #e6ecf7; cursor:pointer; }
.rk-pos { flex:0 0 26px; text-align:center; font-size:13px; font-weight:800; color:#8b9ab6; }
.rk-row-img { flex:0 0 54px; height:54px; border-radius:12px; background:#f4f7fd; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rk-row-img img { max-width:100%; max-height:100%; object-fit:contain; }
.rk-noimg { color:#9aa8c4; } .rk-noimg svg { width:22px; height:22px; }
.rk-row-info { min-width:0; flex:1; }
.rk-row .rk-name { font-size:13.5px; }
.rk-row-sub { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; margin-top:4px; font-size:13px; } .rk-row-sub b { color:#2f6bff; font-weight:800; }
.rk-row .rk-cmp { position:static; flex:0 0 34px; }
@media (max-width:380px) { .rk-row > .rk-rate { display:none; } }

/* ---- empty state ---- */
.rk-empty { text-align:center; padding:34px 18px; border-radius:18px; background:#f6f9ff; border:1px dashed #cdd9f2; }
.rk-empty-ico { width:56px; height:56px; margin:0 auto 12px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); }
.rk-empty-ico svg { width:28px; height:28px; }
.rk-empty h3 { margin:0 0 6px; font-size:17px; font-weight:800; } .rk-empty p { margin:0 0 14px; font-size:13px; color:var(--text-muted); }
.rk-empty-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.rk-empty-actions button { padding:9px 14px; border-radius:999px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font-weight:700; font-size:13px; cursor:pointer; }

/* ---- dark ---- */
html[data-theme="dark"] .rk-top, html[data-theme="dark"] .rk-row { background:#2a3759; border-color:#485a8a; box-shadow:none; }
html[data-theme="dark"] .rk-top-1 { background:linear-gradient(135deg, rgba(245,158,11,.18) 0%, #2a3759 70%); border-color:rgba(245,158,11,.55); }
html[data-theme="dark"] .rk-top-img, html[data-theme="dark"] .rk-row-img { background:#1f2a4a; }
html[data-theme="dark"] .rk-chip { background:#35446d; color:#c5d0ea; } html[data-theme="dark"] .rk-chip-hl { background:rgba(79,124,255,.25); color:#bcd0ff; }
html[data-theme="dark"] .rk-price, html[data-theme="dark"] .rk-row-sub b { color:#9db9ff; }
html[data-theme="dark"] .rk-cmp { background:#35446d; border-color:#485a8a; color:#d3dcf1; }
html[data-theme="dark"] .rk-empty { background:#26325a; border-color:#485a8a; } html[data-theme="dark"] .rk-empty-actions button { background:#35446d; border-color:#485a8a; color:#d3dcf1; }

/* ---- wider screens ---- */
@media (min-width:720px) {
    .rk-podium { grid-template-columns:1.25fr 1fr 1fr; }
    .rk-top-1 { grid-column:auto; flex-direction:column; align-items:stretch; }
    .rk-top-1 .rk-top-img { flex:none; height:150px; }
}

/* rankings chips: neutralise legacy full-width grid rules */
#page-rankings #rankingsTabs.rk-chips .tab { width:auto !important; min-width:0 !important; max-width:none !important; flex:0 0 auto !important; text-align:left; }
#page-rankings #rankingsTabs.rk-chips .tab span { font-size:13px; }
@media (max-width:480px) {
    #page-rankings #rankingsTabs.rk-chips { grid-template-columns:none !important; padding:4px 2px 10px !important; gap:8px !important; }
    #page-rankings #rankingsTabs.rk-chips .tab { font-size:13px !important; padding:9px 14px !important; min-height:40px; }
}

/* rankings polish */
#page-rankings .rk-title-ico {
    background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%) !important;
    -webkit-background-clip:border-box !important; background-clip:border-box !important;
    -webkit-text-fill-color:#fff !important; color:#fff !important; opacity:1 !important;
}
.rk-top-2 .rk-badge, .rk-top-3 .rk-badge { font-size:0; padding:4px 10px; }
.rk-top-2 .rk-badge b, .rk-top-3 .rk-badge b { font-size:12px; }

/* legacy rule greyscales every .card-title (to tame emoji) — our title uses a real SVG icon */
#page-rankings .card-title { filter:none !important; }

/* =====================================================================
   MY PHONE v2 — hero with score ring, VS cards, update info, headings
   ===================================================================== */
#page-myphone svg { flex:0 0 auto; }
#page-myphone .mp-card, #page-myphone .mp-hero { padding:16px !important; border-radius:20px !important; margin-bottom:14px; }
#page-myphone .mp-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
#page-myphone .mp-head h3 { margin:0; font-size:16px; font-weight:800; line-height:1.25; flex:1; min-width:0; }
#page-myphone .mp-head-ico, #page-myphone .mp-hero-ico {
    width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; font-style:normal;
    color:#2f6bff; background:rgba(47,107,255,.12);
}
#page-myphone .mp-head-ico svg { width:19px; height:19px; }
#page-myphone .mp-sub { font-size:11.5px; font-weight:700; color:#6b7a96; background:#eef2fa; padding:4px 10px; border-radius:999px; }

/* ---- hero ---- */
#page-myphone .mp-hero { position:relative; overflow:hidden;
    background:linear-gradient(160deg, #eef3ff 0%, #ffffff 62%); border:1px solid #d6e2fb; }
#page-myphone .mp-hero::before { content:""; position:absolute; right:-60px; top:-60px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle, rgba(79,124,255,.18), transparent 70%); pointer-events:none; }
#page-myphone .mp-change {
    position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
    padding:7px 12px; border-radius:999px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font-size:12px; font-weight:700; cursor:pointer;
}
#page-myphone .mp-change svg { width:14px; height:14px; }
#page-myphone .mp-hero-top { position:relative; display:flex; align-items:center; gap:14px; padding-top:30px; }
#page-myphone .mp-img { flex:0 0 88px; height:112px; border-radius:16px; background:#fff; border:1px solid #e1e8f6; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 6px 16px rgba(30,60,120,.08); }
#page-myphone .mp-img img { max-width:100%; max-height:100%; object-fit:contain; }
#page-myphone .mp-noimg { color:#9aa8c4; } #page-myphone .mp-noimg svg { width:34px; height:34px; }
#page-myphone .mp-info { min-width:0; flex:1; }
#page-myphone .mp-label { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#2f6bff; }
#page-myphone .mp-name { margin:3px 0 8px; font-size:19px; font-weight:900; line-height:1.2; color:var(--text-primary); overflow-wrap:anywhere; }
#page-myphone .mp-chips { display:flex; flex-wrap:wrap; gap:6px; }
#page-myphone .mp-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; color:#5b6c8c; background:#eef2fa; }
#page-myphone .mp-chip svg { width:13px; height:13px; }

#page-myphone .mp-score { display:flex; align-items:center; gap:14px; margin-top:16px; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid #e1e8f6; }
#page-myphone .mp-ring {
    --p:0; --c:#3b82f6; flex:0 0 58px; width:58px; height:58px; border-radius:50%; position:relative;
    display:flex; align-items:center; justify-content:center;
    background:conic-gradient(var(--c) calc(var(--p) * 1%), #e6ecf7 0);
}
#page-myphone .mp-ring::before { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; }
#page-myphone .mp-ring b { position:relative; font-size:18px; font-weight:900; color:var(--text-primary); }
#page-myphone .mp-score-txt { display:flex; flex-direction:column; gap:5px; align-items:flex-start; min-width:0; }
#page-myphone .mp-score-txt small { font-size:12px; color:#7a8aa6; font-weight:600; }

#page-myphone .myphone-stat-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin-top:12px !important; }
#page-myphone .myphone-stat { flex-direction:row !important; align-items:center; gap:10px !important; padding:12px !important; border-radius:14px !important; background:#fff !important; border:1px solid #e1e8f6; min-width:0; }
#page-myphone .mps-ico { flex:0 0 34px; width:34px; height:34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); font-style:normal; }
#page-myphone .mps-ico svg { width:17px; height:17px; }
#page-myphone #myPhoneLowestStat .mps-ico { color:#0f9d58; background:rgba(15,157,88,.13); }
#page-myphone .mps-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
#page-myphone .mps-label { font-size:10.5px !important; letter-spacing:.06em; }
#page-myphone .mps-value { font-size:17px !important; font-weight:800 !important; line-height:1.2; }
#page-myphone .mps-note { font-size:10.5px; font-weight:700; line-height:1.3; }
#page-myphone .mps-note.good { color:#0f9d58; } #page-myphone .mps-note.warn { color:#d97706; }

/* ---- versus ---- */
#page-myphone .mp-vs { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#page-myphone .mp-vs-col { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 10px 14px; border-radius:16px; background:#f6f9ff; border:1px solid #e1e8f6; min-width:0; }
#page-myphone .mp-vs-latest { background:linear-gradient(160deg, #eef3ff, #fff); border:1.5px solid #2f6bff; box-shadow:0 8px 20px rgba(47,107,255,.14); }
#page-myphone .mp-vs-tag { position:absolute; top:8px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; color:#5b6c8c; background:#e8edf7; }
#page-myphone .mp-vs-latest .mp-vs-tag { color:#fff; background:#2f6bff; }
#page-myphone .mp-vs-img { height:92px; width:100%; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
#page-myphone .mp-vs-img img { max-width:100%; max-height:100%; object-fit:contain; }
#page-myphone .mp-vs-name { font-size:12.5px; font-weight:800; line-height:1.3; color:var(--text-primary); overflow-wrap:anywhere; min-height:32px; }
#page-myphone .mp-vs-price { margin-top:4px; font-size:16px; font-weight:800; color:#2f6bff; }
#page-myphone .mp-vs-score { margin-top:8px; display:flex; align-items:baseline; gap:6px; font-size:11px; color:#7a8aa6; font-weight:700; } #page-myphone .mp-vs-score b { font-size:16px; color:var(--text-primary); font-weight:900; }
#page-myphone .mp-vs-bar { display:block; width:80%; height:5px; border-radius:5px; margin-top:6px; background:linear-gradient(90deg, #2f6bff var(--pct,0%), #dfe7f6 var(--pct,0%)); }
#page-myphone .mp-vs-badge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(135deg, #f97316, #ef4444); box-shadow:0 4px 12px rgba(239,68,68,.35); border:2px solid #fff; }
#page-myphone .mp-diff { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#page-myphone .mp-diff-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:800; color:#5b6c8c; background:#eef2fa; }
#page-myphone .mp-diff-chip svg { width:14px; height:14px; }
#page-myphone .mp-diff-chip.good { color:#0f9d58; background:#e7f8ef; } #page-myphone .mp-diff-chip.warn { color:#c2410c; background:#fff1e6; }
#page-myphone .mp-cta { width:100%; margin-top:12px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:13px !important; }
#page-myphone .mp-cta-ico svg { width:16px; height:16px; display:block; }

/* ---- update info ---- */
#page-myphone .mp-update { display:flex; align-items:center; gap:14px; }
#page-myphone .mp-years { flex:0 0 66px; height:66px; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff, #6c5ce7); }
#page-myphone .mp-years b { font-size:25px; font-weight:900; line-height:1; } #page-myphone .mp-years span { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.9; margin-top:3px; }
#page-myphone .mp-years-na { background:#e8edf7; color:#7a8aa6; }
#page-myphone .mp-update-text { margin:0; font-size:13.5px; line-height:1.5; font-weight:600; color:var(--text-primary); }
#page-myphone .mp-alert { display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 12px; border-radius:12px; font-size:12.5px; font-weight:600; line-height:1.45; color:#b42318; background:#fff1f0; border:1px solid #fbc9c4; }
#page-myphone .mp-alert svg { width:17px; height:17px; margin-top:1px; }

/* ---- login / picker ---- */
#page-myphone .mp-hero-ico { width:60px; height:60px; border-radius:18px; margin:0 auto 12px; color:#fff; background:linear-gradient(135deg, #2f6bff, #6c5ce7); box-shadow:0 8px 20px rgba(47,107,255,.3); }
#page-myphone .mp-hero-ico svg { width:30px; height:30px; }
#page-myphone .mp-login-btn { display:inline-flex; align-items:center; gap:8px; } #page-myphone .mp-login-btn svg { width:17px; height:17px; }
#page-myphone .myphone-search-wrap .mp-search-ico { position:absolute; left:14px; top:23px; transform:translateY(-50%); color:#7a8aa6; display:flex; z-index:1; }
#page-myphone .myphone-search-wrap .mp-search-ico svg { width:18px; height:18px; }
#page-myphone .myphone-search-input { padding-left:42px !important; }

/* ---- dark ---- */
html[data-theme="dark"] #page-myphone .mp-hero { background:linear-gradient(160deg, #2c3a64 0%, #26325a 70%); border-color:#485a8a; }
html[data-theme="dark"] #page-myphone .mp-img, html[data-theme="dark"] #page-myphone .mp-score, html[data-theme="dark"] #page-myphone .myphone-stat { background:#1f2a4a !important; border-color:#485a8a; }
html[data-theme="dark"] #page-myphone .mp-ring { background:conic-gradient(var(--c) calc(var(--p) * 1%), #3a4a78 0); }
html[data-theme="dark"] #page-myphone .mp-ring::before { background:#1f2a4a; }
html[data-theme="dark"] #page-myphone .mp-chip, html[data-theme="dark"] #page-myphone .mp-sub, html[data-theme="dark"] #page-myphone .mp-diff-chip { background:#35446d; color:#c5d0ea; }
html[data-theme="dark"] #page-myphone .mp-label, html[data-theme="dark"] #page-myphone .mp-vs-price { color:#9db9ff; }
html[data-theme="dark"] #page-myphone .mp-change { background:#35446d; border-color:#485a8a; color:#bcd0ff; }
html[data-theme="dark"] #page-myphone .mp-vs-col { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] #page-myphone .mp-vs-latest { background:linear-gradient(160deg, rgba(47,107,255,.25), #2a3759); border-color:#6a95ff; box-shadow:none; }
html[data-theme="dark"] #page-myphone .mp-vs-tag { background:#35446d; color:#c5d0ea; } html[data-theme="dark"] #page-myphone .mp-vs-latest .mp-vs-tag { background:#2f6bff; color:#fff; }
html[data-theme="dark"] #page-myphone .mp-vs-bar { background:linear-gradient(90deg, #6a95ff var(--pct,0%), #3a4a78 var(--pct,0%)); }
html[data-theme="dark"] #page-myphone .mp-vs-badge { border-color:#26325a; }
html[data-theme="dark"] #page-myphone .mp-diff-chip.good { background:rgba(16,185,129,.16); color:#4ade80; } html[data-theme="dark"] #page-myphone .mp-diff-chip.warn { background:rgba(249,115,22,.16); color:#fdba74; }
html[data-theme="dark"] #page-myphone .mp-years-na { background:#35446d; color:#aab8d8; }
html[data-theme="dark"] #page-myphone .mp-alert { background:rgba(239,68,68,.12); border-color:rgba(248,113,113,.4); color:#fecaca; }

@media (max-width:360px) {
    #page-myphone .myphone-stat-grid { grid-template-columns:1fr !important; }
    #page-myphone .mp-vs { grid-template-columns:1fr; }
    #page-myphone .mp-vs-badge { top:auto; bottom:auto; position:relative; left:auto; transform:none; margin:-6px auto; }
}

/* my phone: a little more room under the VS tags */
#page-myphone .mp-vs-col { padding-top:36px; }
#page-myphone .mp-vs-tag { top:10px; }

/* =====================================================================
   MOBILE SERIES v2 — hero, smart toolbar, series cards, variant compare
   ===================================================================== */
#page-mobileseries svg { flex:0 0 auto; }
#page-mobileseries .sr-hero { padding:16px !important; border-radius:22px !important; position:relative; overflow:visible;
    background:linear-gradient(160deg, #eef3ff 0%, #ffffff 65%); border:1px solid #d6e2fb; }
#page-mobileseries .sr-hero-top { display:flex; align-items:center; gap:12px; }
#page-mobileseries .sr-hero-ico { width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow:0 8px 18px rgba(47,107,255,.3); }
#page-mobileseries .sr-hero-ico svg { width:23px; height:23px; }
#page-mobileseries .sr-hero-txt h2 { margin:0; font-size:20px; font-weight:900; letter-spacing:-.02em; }
#page-mobileseries .sr-hero-txt p { margin:3px 0 0; font-size:12.5px; color:var(--text-muted); line-height:1.4; }
#page-mobileseries .sr-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:14px 0 12px; }
#page-mobileseries .sr-stats:empty { display:none; }
#page-mobileseries .sr-stats > div { display:flex; flex-direction:column; align-items:center; padding:9px 6px; border-radius:14px; background:#fff; border:1px solid #e1e8f6; }
#page-mobileseries .sr-stats b { font-size:20px; font-weight:900; color:#2f6bff; line-height:1.1; }
#page-mobileseries .sr-stats span { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7a8aa6; margin-top:2px; }
#page-mobileseries .sr-search { position:relative; }
#page-mobileseries .sr-search-ico { position:absolute; left:14px; top:25px; transform:translateY(-50%); color:#7a8aa6; display:flex; z-index:2; pointer-events:none; }
#page-mobileseries .sr-search-ico svg { width:19px; height:19px; }
#page-mobileseries #seriesSearchInput { width:100%; box-sizing:border-box; height:50px; padding:0 44px 0 44px !important; border-radius:15px !important; font-size:15px !important; font-weight:600; background:#fff !important; border:1.5px solid #d6e2fb !important; color:var(--text-primary); box-shadow:0 4px 14px rgba(47,107,255,.07); }
#page-mobileseries #seriesSearchInput:focus { outline:0; border-color:#2f6bff !important; box-shadow:0 0 0 4px rgba(47,107,255,.14); }
#page-mobileseries .sr-clear { position:absolute; right:10px; top:9px; width:32px; height:32px; border-radius:50%; border:0; background:#eef2fa; color:#5b6c8c; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; padding:0; }
#page-mobileseries .sr-clear[hidden] { display:none; }
#page-mobileseries .sr-clear svg { width:16px; height:16px; }

/* ---- toolbar ---- */
#page-mobileseries #seriesResultContainer { padding:14px !important; border-radius:22px !important; }
#page-mobileseries .sr-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; margin:0 -2px; scrollbar-width:none; }
#page-mobileseries .sr-chips::-webkit-scrollbar { display:none; }
#page-mobileseries .sr-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 14px !important; min-height:38px; border-radius:999px !important; font-size:13px !important; font-weight:700 !important; background:#fff !important; color:#3d4f72 !important; border:1px solid #dbe4f5 !important; cursor:pointer; box-shadow:none !important; }
#page-mobileseries .sr-chip em { font-style:normal; font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; background:#eef2fa; color:#6b7a96; }
#page-mobileseries .sr-chip.active { background:linear-gradient(135deg, #2f6bff, #5b5bf0) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 14px rgba(47,107,255,.3) !important; }
#page-mobileseries .sr-chip.active em { background:rgba(255,255,255,.25); color:#fff; }
#page-mobileseries .sr-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
#page-mobileseries .sr-sort { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
#page-mobileseries .sr-sort i { position:absolute; left:12px; color:#6b7a96; display:flex; pointer-events:none; } #page-mobileseries .sr-sort i svg { width:16px; height:16px; }
#page-mobileseries .sr-sort select { width:100%; height:42px; padding:0 12px 0 36px; border-radius:12px; border:1px solid #dbe4f5; background:#fff; font-size:13px; font-weight:700; color:var(--text-primary); appearance:none; -webkit-appearance:none; }
#page-mobileseries .sr-view { display:inline-flex; padding:3px; border-radius:12px; background:#eef2fa; gap:2px; }
#page-mobileseries .sr-view button { width:38px; height:36px; border-radius:9px; border:0; background:transparent; color:#6b7a96; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
#page-mobileseries .sr-view button svg { width:18px; height:18px; }
#page-mobileseries .sr-view button.active { background:#fff; color:#2f6bff; box-shadow:0 2px 8px rgba(30,60,120,.12); }
#page-mobileseries .sr-count { margin:10px 2px 12px; font-size:12px; font-weight:700; color:#7a8aa6; }

/* ---- series cards ---- */
#page-mobileseries .sr-grid { display:grid; gap:12px; }
#page-mobileseries .sr-grid.is-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
#page-mobileseries .sr-grid.is-list { grid-template-columns:1fr; }
#page-mobileseries .sr-card { position:relative; display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:18px; background:#fff; border:1px solid #e1e8f6; box-shadow:0 4px 14px rgba(30,60,120,.05); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; min-width:0; }
#page-mobileseries .sr-card:active { transform:scale(.985); }
#page-mobileseries .sr-card:hover { border-color:#b9ccf7; box-shadow:0 10px 24px rgba(47,107,255,.12); }
#page-mobileseries .sr-badge { position:absolute; top:10px; left:10px; z-index:2; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800; color:#1d4ed8; background:rgba(228,236,255,.95); border:1px solid #cddbff; }
#page-mobileseries .sr-badge-solid { position:static; flex:0 0 auto; }
#page-mobileseries .sr-card-img { height:150px; border-radius:14px; background:#f4f7fd; display:flex; align-items:center; justify-content:center; overflow:hidden; padding-top:14px; box-sizing:border-box; }
#page-mobileseries .sr-card-img img { max-width:100%; max-height:100%; object-fit:contain; }
#page-mobileseries .sr-noimg { color:#9aa8c4; } #page-mobileseries .sr-noimg svg { width:36px; height:36px; }
#page-mobileseries .sr-brand { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }
#page-mobileseries .sr-name { font-size:15px; font-weight:800; line-height:1.25; color:var(--text-primary); overflow-wrap:anywhere; }
#page-mobileseries .sr-price { margin-top:2px; font-size:13.5px; font-weight:800; color:#2f6bff; }
#page-mobileseries .sr-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
#page-mobileseries .sr-tags span { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; color:#5b6c8c; background:#eef2fa; }
#page-mobileseries .sr-tags svg { width:12px; height:12px; }
#page-mobileseries .sr-tags .g5 { color:#0f9d58; background:#e7f8ef; }
#page-mobileseries .sr-grid.is-list .sr-card { flex-direction:row; align-items:center; gap:12px; padding:10px 12px; }
#page-mobileseries .sr-grid.is-list .sr-card-img { flex:0 0 84px; height:96px; padding-top:0; }
#page-mobileseries .sr-grid.is-list .sr-badge { top:8px; left:auto; right:10px; }
#page-mobileseries .sr-grid.is-list .sr-card-body { min-width:0; flex:1; }
#page-mobileseries .sr-empty, #page-mobileseries .sr-empty-big { grid-column:1 / -1; text-align:center; padding:28px 16px; color:var(--text-muted); font-size:13px; }
#page-mobileseries .sr-empty-big i { width:56px; height:56px; margin:0 auto 10px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); } #page-mobileseries .sr-empty-big i svg { width:28px; height:28px; }
#page-mobileseries .sr-empty-big h3 { margin:0 0 4px; color:var(--text-primary); }

/* ---- series detail ---- */
#page-mobileseries .sr-detail-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#page-mobileseries .sr-back { display:inline-flex; align-items:center; gap:4px; padding:8px 12px 8px 8px; border-radius:999px; border:1px solid #dbe4f5; background:#fff; color:#1d4ed8; font-size:12.5px; font-weight:800; cursor:pointer; }
#page-mobileseries .sr-back svg { width:16px; height:16px; }
#page-mobileseries .sr-detail-title { flex:1; min-width:0; }
#page-mobileseries .sr-detail-title h3 { margin:1px 0 0; font-size:19px; font-weight:900; line-height:1.2; overflow-wrap:anywhere; }
#page-mobileseries .sr-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 10px; }
#page-mobileseries .sr-summary > div { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:#f6f9ff; border:1px solid #e1e8f6; min-width:0; }
#page-mobileseries .sr-summary i { grid-row:1 / 3; width:34px; height:34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); } #page-mobileseries .sr-summary i svg { width:17px; height:17px; }
#page-mobileseries .sr-summary span { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#7a8aa6; }
#page-mobileseries .sr-summary b { font-size:13.5px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
#page-mobileseries .sr-picks { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
#page-mobileseries .sr-pick { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:700; color:#5b6c8c; background:#eef2fa; line-height:1.3; }
#page-mobileseries .sr-pick svg { width:13px; height:13px; } #page-mobileseries .sr-pick b { color:var(--text-primary); }
#page-mobileseries .sr-pick.good { color:#0f9d58; background:#e7f8ef; }
#page-mobileseries .sr-sec-title { margin:18px 2px 10px; font-size:13px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--text-primary); }
#page-mobileseries .sr-sec-title small { display:block; margin-top:2px; font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:#7a8aa6; }
#page-mobileseries .sr-variants { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
#page-mobileseries .sr-var { position:relative; display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:18px; background:#fff; border:1.5px solid #e1e8f6; min-width:0; }
#page-mobileseries .sr-var.picked { border-color:#2f6bff; box-shadow:0 8px 20px rgba(47,107,255,.16); background:linear-gradient(160deg, #eef3ff, #fff); }
#page-mobileseries .sr-var-pick { position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; border-radius:50%; border:1.5px solid #cbd6ee; background:#fff; color:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:all .15s ease; }
#page-mobileseries .sr-var-pick svg { width:16px; height:16px; }
#page-mobileseries .sr-var-pick.on { background:#2f6bff; border-color:#2f6bff; color:#fff; }
#page-mobileseries .sr-var-img { height:118px; border-radius:13px; background:#f4f7fd; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
#page-mobileseries .sr-var-img img { max-width:100%; max-height:100%; object-fit:contain; }
#page-mobileseries .sr-var-name { font-size:13.5px; font-weight:800; line-height:1.3; cursor:pointer; overflow-wrap:anywhere; min-height:35px; }
#page-mobileseries .sr-var-price { font-size:16px; font-weight:900; color:#2f6bff; }
#page-mobileseries .sr-var-btn { margin-top:6px; padding:9px; border-radius:11px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font-weight:800; font-size:12.5px; cursor:pointer; }
#page-mobileseries .sr-table-wrap { overflow-x:auto; border-radius:16px; border:1px solid #e1e8f6; -webkit-overflow-scrolling:touch; }
#page-mobileseries .sr-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; min-width:100%; }
#page-mobileseries .sr-table th, #page-mobileseries .sr-table td { padding:10px 12px; text-align:left; border-bottom:1px solid #edf1f9; white-space:nowrap; font-weight:700; }
#page-mobileseries .sr-table thead th { background:#f4f7fd; font-size:12px; color:var(--text-primary); position:sticky; top:0; }
#page-mobileseries .sr-table tbody th { position:sticky; left:0; z-index:1; background:#fafcff; color:#6b7a96; font-size:11.5px; letter-spacing:.03em; box-shadow:1px 0 0 #edf1f9; }
#page-mobileseries .sr-table tbody th i { display:inline-flex; vertical-align:middle; margin-right:6px; color:#2f6bff; } #page-mobileseries .sr-table tbody th i svg { width:14px; height:14px; }
#page-mobileseries .sr-table tr:last-child th, #page-mobileseries .sr-table tr:last-child td { border-bottom:0; }
#page-mobileseries .sr-table td.best { color:#0f9d58; background:#effaf4; }
#page-mobileseries .sr-table td.best::after { content:" ★"; font-size:10px; }
#page-mobileseries .sr-table .yn { display:inline-flex; align-items:center; gap:4px; padding:2px 9px 2px 6px; border-radius:999px; font-size:11.5px; font-weight:800; } #page-mobileseries .sr-table .yn svg { width:12px; height:12px; }
#page-mobileseries .sr-table .yn.yes { color:#0f9d58; background:#e7f8ef; } #page-mobileseries .sr-table .yn.no { color:#e11d48; background:#ffe9ee; }
#page-mobileseries .sr-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
#page-mobileseries .sr-actions .btn { min-height:48px; border-radius:14px !important; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; }
#page-mobileseries .sr-act-main { flex:1 1 200px; opacity:.55; } #page-mobileseries .sr-act-main.has { opacity:1; }
#page-mobileseries .sr-act-main svg { width:18px; height:18px; }
#page-mobileseries .sr-act-main em { font-style:normal; min-width:22px; height:22px; border-radius:999px; background:rgba(255,255,255,.25); display:inline-flex; align-items:center; justify-content:center; font-size:12px; padding:0 6px; }
#page-mobileseries .sr-act-alt { flex:1 1 150px; }

/* ---- dark ---- */
html[data-theme="dark"] #page-mobileseries .sr-hero { background:linear-gradient(160deg, #2c3a64 0%, #26325a 75%); border-color:#485a8a; }
html[data-theme="dark"] #page-mobileseries .sr-stats > div, html[data-theme="dark"] #page-mobileseries .sr-card, html[data-theme="dark"] #page-mobileseries .sr-var, html[data-theme="dark"] #page-mobileseries .sr-back, html[data-theme="dark"] #page-mobileseries .sr-var-btn { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] #page-mobileseries .sr-card { box-shadow:none; }
html[data-theme="dark"] #page-mobileseries #seriesSearchInput, html[data-theme="dark"] #page-mobileseries .sr-sort select { background:#1f2a4a !important; border-color:#485a8a !important; color:#fff; }
html[data-theme="dark"] #page-mobileseries .sr-clear, html[data-theme="dark"] #page-mobileseries .sr-view { background:#35446d; color:#c5d0ea; }
html[data-theme="dark"] #page-mobileseries .sr-view button.active { background:#1f2a4a; color:#9db9ff; box-shadow:none; }
html[data-theme="dark"] #page-mobileseries .sr-chip:not(.active) { background:#2a3759 !important; color:#d3dcf1 !important; border-color:#485a8a !important; }
html[data-theme="dark"] #page-mobileseries .sr-chip:not(.active) em { background:#35446d; color:#aab8d8; }
html[data-theme="dark"] #page-mobileseries .sr-card-img, html[data-theme="dark"] #page-mobileseries .sr-var-img { background:#1f2a4a; }
html[data-theme="dark"] #page-mobileseries .sr-badge { background:rgba(79,124,255,.28); border-color:#6a95ff; color:#cfdcff; }
html[data-theme="dark"] #page-mobileseries .sr-tags span, html[data-theme="dark"] #page-mobileseries .sr-pick { background:#35446d; color:#c5d0ea; }
html[data-theme="dark"] #page-mobileseries .sr-tags .g5, html[data-theme="dark"] #page-mobileseries .sr-pick.good { background:rgba(16,185,129,.16); color:#4ade80; }
html[data-theme="dark"] #page-mobileseries .sr-price, html[data-theme="dark"] #page-mobileseries .sr-var-price, html[data-theme="dark"] #page-mobileseries .sr-stats b { color:#9db9ff; }
html[data-theme="dark"] #page-mobileseries .sr-summary > div { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] #page-mobileseries .sr-var.picked { background:linear-gradient(160deg, rgba(47,107,255,.25), #2a3759); border-color:#6a95ff; box-shadow:none; }
html[data-theme="dark"] #page-mobileseries .sr-var-pick { background:#1f2a4a; border-color:#485a8a; }
html[data-theme="dark"] #page-mobileseries .sr-var-pick.on { background:#2f6bff; border-color:#2f6bff; }
html[data-theme="dark"] #page-mobileseries .sr-table-wrap { border-color:#485a8a; }
html[data-theme="dark"] #page-mobileseries .sr-table th, html[data-theme="dark"] #page-mobileseries .sr-table td { border-bottom-color:#3a4a78; }
html[data-theme="dark"] #page-mobileseries .sr-table thead th { background:#26325a; }
html[data-theme="dark"] #page-mobileseries .sr-table tbody th { background:#2a3759; box-shadow:1px 0 0 #3a4a78; color:#aab8d8; }
html[data-theme="dark"] #page-mobileseries .sr-table td { color:#e6ecfa; }
html[data-theme="dark"] #page-mobileseries .sr-table td.best { background:rgba(16,185,129,.14); color:#4ade80; }
html[data-theme="dark"] #page-mobileseries .sr-table .yn.yes { background:rgba(16,185,129,.16); color:#4ade80; } html[data-theme="dark"] #page-mobileseries .sr-table .yn.no { background:rgba(244,63,94,.18); color:#fb7185; }

@media (min-width:720px) {
    #page-mobileseries .sr-grid.is-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
    #page-mobileseries .sr-variants { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:360px) {
    #page-mobileseries .sr-summary { grid-template-columns:1fr; }
}

/* series: placeholder + dark-mode button text */
#page-mobileseries #seriesSearchInput::placeholder { font-size:14px; font-weight:500; color:#8b9ab6; opacity:1; }
html[data-theme="dark"] #page-mobileseries .sr-back, html[data-theme="dark"] #page-mobileseries .sr-var-btn { color:#bcd0ff; }
html[data-theme="dark"] #page-mobileseries #seriesSearchInput::placeholder { color:#8fa0c6; }

/* =====================================================================
   SMART SCORES v2 — hero stats, chip filters, leaderboard cards
   ===================================================================== */
#page-smartscores svg { flex:0 0 auto; }
#page-smartscores .sc2-page { padding:16px !important; border-radius:22px !important; }
#page-smartscores .sc2-hero { padding:14px; margin-bottom:14px; border-radius:18px; background:linear-gradient(160deg, #eef3ff 0%, #ffffff 70%); border:1px solid #d6e2fb; }
#page-smartscores .sc2-hero-top { display:flex; align-items:center; gap:12px; }
#page-smartscores .sc2-hero-ico { width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow:0 8px 18px rgba(47,107,255,.3); }
#page-smartscores .sc2-hero-ico svg { width:23px; height:23px; }
#page-smartscores .sc2-hero h2 { margin:0; font-size:20px; font-weight:900; letter-spacing:-.02em; }
#page-smartscores .sc2-hero p { margin:3px 0 0; font-size:12.5px; color:var(--text-muted); }
#page-smartscores .sc2-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; }
#page-smartscores .sc2-stats:empty { display:none; }
#page-smartscores .sc2-stats > div { display:flex; flex-direction:column; align-items:center; padding:9px 6px; border-radius:14px; background:#fff; border:1px solid #e1e8f6; }
#page-smartscores .sc2-stats b { font-size:20px; font-weight:900; color:#2f6bff; line-height:1.1; }
#page-smartscores .sc2-stats span { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7a8aa6; margin-top:2px; }

/* ---- filters ---- */
#page-smartscores #scoreFilterBar.sc2-filters { display:block !important; padding:0 !important; margin:0 0 16px !important; background:transparent !important; border:0 !important; border-radius:0 !important; }
#page-smartscores .sc2-label { margin:2px 2px 6px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a8aa6; }
#page-smartscores .sc2-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
#page-smartscores .sc2-chips::-webkit-scrollbar { display:none; }
#page-smartscores .sc2-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; min-height:40px; border-radius:999px; font-size:13px; font-weight:700; background:#fff; color:#3d4f72; border:1px solid #dbe4f5; cursor:pointer; }
#page-smartscores .sc2-chip svg { width:16px; height:16px; color:#6b7fa8; }
#page-smartscores .sc2-chip.active { background:linear-gradient(135deg, #2f6bff, #5b5bf0); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(47,107,255,.3); }
#page-smartscores .sc2-chip.active svg { color:#fff; }
#page-smartscores .sc2-chips-sm .sc2-chip { padding:7px 16px; min-height:36px; }
#page-smartscores .sc2-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); opacity:0; pointer-events:none; }
#page-smartscores .sc2-reset { display:inline-flex; align-items:center; gap:7px; margin-top:2px; padding:8px 14px; min-height:38px; border-radius:999px !important; font-size:12.5px; font-weight:700; color:#1d4ed8 !important; background:#eef3ff !important; border:1px solid #cddbff !important; box-shadow:none !important; width:auto !important; flex:none !important; }
#page-smartscores .sc2-reset svg { width:15px; height:15px; }

/* ---- list ---- */
#page-smartscores #scoreGrid.sc2-list { display:flex !important; flex-direction:column; gap:12px; grid-template-columns:none !important; }
#page-smartscores .sc2-card { position:relative; display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:20px; background:#fff; border:1px solid #e1e8f6; box-shadow:0 4px 14px rgba(30,60,120,.05); cursor:pointer; }
#page-smartscores .sc2-card.is-top { border:1.5px solid #f3cf72; background:linear-gradient(160deg, #fff8e6 0%, #ffffff 55%); box-shadow:0 10px 26px rgba(245,158,11,.16); }
#page-smartscores .sc2-rank { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; color:#5b6c8c; background:#eef2fa; }
#page-smartscores .sc2-card.is-top .sc2-rank { color:#fff; background:linear-gradient(135deg, #f59e0b, #f97316); }
#page-smartscores .sc2-rank svg { width:13px; height:13px; }
#page-smartscores .sc2-cmp { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:12px; border:1px solid #dbe4f5; background:#fff; color:#4a5f8a; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
#page-smartscores .sc2-cmp svg { width:18px; height:18px; }
#page-smartscores .sc2-main { display:flex; align-items:center; gap:12px; }
#page-smartscores .sc2-img { flex:0 0 76px; height:92px; border-radius:14px; background:#f4f7fd; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#page-smartscores .sc2-img img { max-width:100%; max-height:100%; object-fit:contain; }
#page-smartscores .sc2-noimg { color:#9aa8c4; } #page-smartscores .sc2-noimg svg { width:30px; height:30px; }
#page-smartscores .sc2-info { flex:1; min-width:0; }
#page-smartscores .sc2-brand { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }
#page-smartscores .sc2-name { font-size:15.5px; font-weight:800; line-height:1.25; color:var(--text-primary); overflow-wrap:anywhere; }
#page-smartscores .sc2-price-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; margin-top:4px; }
#page-smartscores .sc2-price-row b { font-size:16px; font-weight:900; color:#2f6bff; }
#page-smartscores .sc2-price-row s { font-size:12px; color:#8b9ab6; }
#page-smartscores .sc2-price-row em { font-style:normal; font-size:11px; font-weight:800; color:#0f9d58; background:#e7f8ef; padding:2px 8px; border-radius:999px; }
#page-smartscores .sc2-ring { --p:0; --c:#3b82f6; flex:0 0 64px; width:64px; height:64px; border-radius:50%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:34px; background:conic-gradient(var(--c) calc(var(--p) * 1%), #e6ecf7 0); }
#page-smartscores .sc2-ring::before { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; }
#page-smartscores .sc2-ring b, #page-smartscores .sc2-ring small { position:relative; line-height:1; }
#page-smartscores .sc2-ring b { font-size:20px; font-weight:900; color:var(--text-primary); }
#page-smartscores .sc2-ring small { font-size:8.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8b9ab6; margin-top:2px; }
#page-smartscores .sc2-card .sc2-main { position:relative; }
#page-smartscores .sc2-card .sc2-ring { margin-top:0; }
#page-smartscores .sc2-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
#page-smartscores .sc2-tags .ss2-status { padding:4px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; }
#page-smartscores .sc2-tag, #page-smartscores .sc2-extra { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; color:#5b6c8c; background:#eef2fa; }
#page-smartscores .sc2-extra { color:#1d4ed8; background:#e4ecff; } #page-smartscores .sc2-extra svg { width:12px; height:12px; }
#page-smartscores .sc2-metrics { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
#page-smartscores .sc2-metric { min-width:0; padding:9px 10px; border-radius:12px; background:#f6f9ff; border:1px solid #e6edf8; }
#page-smartscores .sc2-metric-top { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#6b7a96; }
#page-smartscores .sc2-metric-top i { display:inline-flex; color:#2f6bff; } #page-smartscores .sc2-metric-top i svg { width:13px; height:13px; }
#page-smartscores .sc2-metric-top span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-smartscores .sc2-metric-top b { font-size:14px; font-weight:900; color:var(--text-primary); }
#page-smartscores .sc2-bar { height:5px; border-radius:5px; background:#e1e8f6; margin-top:7px; overflow:hidden; }
#page-smartscores .sc2-bar i { display:block; height:100%; border-radius:5px; }
#page-smartscores .sc2-bar i.ss2-excellent { background:#22c55e; } #page-smartscores .sc2-bar i.ss2-good { background:#3b82f6; }
#page-smartscores .sc2-bar i.ss2-average { background:#f59e0b; } #page-smartscores .sc2-bar i.ss2-poor { background:#ef4444; }
#page-smartscores .sc2-sw { display:flex; flex-wrap:wrap; gap:8px; }
#page-smartscores .sc2-sw span { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; }
#page-smartscores .sc2-sw svg { width:13px; height:13px; }
#page-smartscores .sc2-sw .good { color:#0f9d58; background:#e7f8ef; } #page-smartscores .sc2-sw .bad { color:#c2410c; background:#fff1e6; }
#page-smartscores .sc2-full { width:100%; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:13px !important; font-weight:800; }
#page-smartscores .sc2-full svg { width:18px; height:18px; }
#page-smartscores .sc2-more { width:100%; min-height:48px; border-radius:14px !important; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#page-smartscores .sc2-more em { font-style:normal; font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; background:#eef2fa; color:#6b7a96; }
#page-smartscores .sc2-empty { text-align:center; padding:34px 16px; color:var(--text-muted); }
#page-smartscores .sc2-empty i { width:56px; height:56px; margin:0 auto 10px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); } #page-smartscores .sc2-empty i svg { width:28px; height:28px; }
#page-smartscores .sc2-empty h3 { margin:0 0 4px; color:var(--text-primary); }

/* ---- dark ---- */
html[data-theme="dark"] #page-smartscores .sc2-hero { background:linear-gradient(160deg, #2c3a64 0%, #26325a 75%); border-color:#485a8a; }
html[data-theme="dark"] #page-smartscores .sc2-stats > div, html[data-theme="dark"] #page-smartscores .sc2-card, html[data-theme="dark"] #page-smartscores .sc2-cmp { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] #page-smartscores .sc2-card { box-shadow:none; }
html[data-theme="dark"] #page-smartscores .sc2-card.is-top { background:linear-gradient(160deg, rgba(245,158,11,.18), #2a3759 60%); border-color:rgba(245,158,11,.55); }
html[data-theme="dark"] #page-smartscores .sc2-chip:not(.active) { background:#2a3759; color:#d3dcf1; border-color:#485a8a; }
html[data-theme="dark"] #page-smartscores .sc2-chip:not(.active) svg { color:#9db0d9; }
html[data-theme="dark"] #page-smartscores .sc2-reset { color:#bcd0ff !important; background:rgba(79,124,255,.16) !important; border-color:rgba(122,165,255,.4) !important; }
html[data-theme="dark"] #page-smartscores .sc2-img { background:#1f2a4a; }
html[data-theme="dark"] #page-smartscores .sc2-ring { background:conic-gradient(var(--c) calc(var(--p) * 1%), #3a4a78 0); }
html[data-theme="dark"] #page-smartscores .sc2-ring::before { background:#2a3759; }
html[data-theme="dark"] #page-smartscores .sc2-rank, html[data-theme="dark"] #page-smartscores .sc2-tag, html[data-theme="dark"] #page-smartscores .sc2-more em { background:#35446d; color:#c5d0ea; }
html[data-theme="dark"] #page-smartscores .sc2-card.is-top .sc2-rank { background:linear-gradient(135deg, #f59e0b, #f97316); color:#fff; }
html[data-theme="dark"] #page-smartscores .sc2-extra { background:rgba(79,124,255,.25); color:#bcd0ff; }
html[data-theme="dark"] #page-smartscores .sc2-metric { background:#1f2a4a; border-color:#3a4a78; }
html[data-theme="dark"] #page-smartscores .sc2-bar { background:#3a4a78; }
html[data-theme="dark"] #page-smartscores .sc2-price-row b, html[data-theme="dark"] #page-smartscores .sc2-stats b { color:#9db9ff; }
html[data-theme="dark"] #page-smartscores .sc2-price-row em, html[data-theme="dark"] #page-smartscores .sc2-sw .good { background:rgba(16,185,129,.16); color:#4ade80; }
html[data-theme="dark"] #page-smartscores .sc2-sw .bad { background:rgba(249,115,22,.16); color:#fdba74; }

@media (min-width:760px) {
    #page-smartscores #scoreGrid.sc2-list { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
    #page-smartscores .sc2-more { grid-column:1 / -1; }
}
@media (max-width:360px) {
    #page-smartscores .sc2-metrics { grid-template-columns:1fr; }
}

/* smart scores: full metric labels (no truncation) */
#page-smartscores .sc2-metric-top { flex-wrap:wrap; row-gap:3px; }
#page-smartscores .sc2-metric-top i { order:1; }
#page-smartscores .sc2-metric-top b { order:2; margin-left:auto; }
#page-smartscores .sc2-metric-top span { order:3; flex:1 1 100%; white-space:normal; overflow:visible; text-overflow:clip; font-size:11px; }

/* =====================================================================
   AI FINDER v2 — guided form (budget, use chips, filters) + ranked results
   ===================================================================== */
#page-aifinder svg { flex:0 0 auto; }
#page-aifinder > .card.af-page { padding:16px; border-radius:22px; background:var(--bg-card); border:1px solid #e1e8f6; border-top:1px solid #e1e8f6; box-shadow:0 8px 28px rgba(30,60,120,.07); }
#page-aifinder > .card.af-page::before, #page-aifinder > .card.af-page::after { display:none; }
html[data-theme="dark"] #page-aifinder > .card.af-page { background:#1f2a4a; border-color:#485a8a; box-shadow:none; }

#page-aifinder .af-hero { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:14px; border-radius:18px; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); color:#fff; box-shadow:0 12px 26px rgba(79,70,229,.28); }
#page-aifinder .af-hero-ico { width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2); }
#page-aifinder .af-hero-ico svg { width:24px; height:24px; }
#page-aifinder .af-hero h2 { margin:0; font-size:20px; font-weight:900; letter-spacing:-.02em; color:#fff; }
#page-aifinder .af-hero p { margin:3px 0 0; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.88); }

#page-aifinder .af-form { display:flex !important; flex-direction:column; gap:12px; max-width:none; padding:0; background:transparent; }
#page-aifinder .af-sec { padding:14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; }
html[data-theme="dark"] #page-aifinder .af-sec { background:#2a3759; border-color:#485a8a; }
#page-aifinder .af-sec-title { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#5b6c8c; margin:0 0 12px; }
#page-aifinder .af-sec-title i { width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; color:#2f6bff; background:rgba(47,107,255,.12); }
#page-aifinder .af-sec-title i svg { width:15px; height:15px; }
html[data-theme="dark"] #page-aifinder .af-sec-title { color:#aab8d8; } html[data-theme="dark"] #page-aifinder .af-sec-title i { color:#9db9ff; }

/* budget */
#page-aifinder .af-budget { display:flex; align-items:center; gap:6px; padding:6px 14px; margin-bottom:12px; border-radius:16px; background:#fff; border:1.5px solid #d6e2fb; }
#page-aifinder .af-budget:focus-within { border-color:#2f6bff; box-shadow:0 0 0 4px rgba(47,107,255,.14); }
#page-aifinder .af-rupee { font-size:26px; font-weight:900; color:#2f6bff; }
#page-aifinder .af-form input#aiBudget { flex:1; min-width:0; width:auto !important; min-height:52px; padding:0; border:0; background:transparent; box-shadow:none; font-size:30px; font-weight:900; letter-spacing:-.01em; color:var(--text-primary); }
#page-aifinder .af-form input#aiBudget:focus { box-shadow:none; }
html[data-theme="dark"] #page-aifinder .af-budget { background:#1f2a4a; border-color:#485a8a; }
html[data-theme="dark"] #page-aifinder .af-rupee { color:#9db9ff; }
html[data-theme="dark"] #page-aifinder .af-form input#aiBudget { background:transparent; color:#fff; }
#page-aifinder .af-form input[type=range] { width:100%; height:6px; padding:0; margin:4px 0 14px; min-height:0; border:0; box-shadow:none; background:transparent; accent-color:#2f6bff; }
#page-aifinder .af-presets { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin:0 -2px; scrollbar-width:none; }
#page-aifinder .af-presets::-webkit-scrollbar { display:none; }
#page-aifinder .af-preset { flex:0 0 auto; padding:8px 14px; min-height:38px; border-radius:999px; font-size:13px; font-weight:800; color:#3d4f72; background:#fff; border:1px solid #dbe4f5; cursor:pointer; }
#page-aifinder .af-preset.active { color:#fff; background:linear-gradient(135deg, #2f6bff, #5b5bf0); border-color:transparent; box-shadow:0 6px 14px rgba(47,107,255,.3); }
html[data-theme="dark"] #page-aifinder .af-preset:not(.active) { background:#1f2a4a; color:#d3dcf1; border-color:#485a8a; }

/* use chips */
#page-aifinder .af-uses { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
#page-aifinder .af-use { display:flex; align-items:center; gap:10px; padding:11px 12px; min-height:50px; border-radius:15px; font-size:13.5px; font-weight:800; color:#3d4f72; background:#fff; border:1.5px solid #dbe4f5; cursor:pointer; text-align:left; }
#page-aifinder .af-use svg { width:20px; height:20px; color:#6b7fa8; }
#page-aifinder .af-use.active { color:#fff; background:linear-gradient(135deg, #2f6bff, #6c5ce7); border-color:transparent; box-shadow:0 8px 18px rgba(79,70,229,.3); }
#page-aifinder .af-use.active svg { color:#fff; }
html[data-theme="dark"] #page-aifinder .af-use:not(.active) { background:#1f2a4a; color:#d3dcf1; border-color:#485a8a; }
#page-aifinder .af-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); opacity:0; pointer-events:none; }

/* more filters */
#page-aifinder .af-more { padding:0; overflow:visible; }
#page-aifinder .af-more > summary { list-style:none; display:flex; align-items:center; gap:10px; padding:14px; cursor:pointer; }
#page-aifinder .af-more > summary::-webkit-details-marker { display:none; }
#page-aifinder .af-more > summary .af-sec-title { margin:0; flex:0 0 auto; }
#page-aifinder .af-summary { flex:1; min-width:0; font-size:12px; font-weight:600; color:#7a8aa6; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-aifinder .af-chev { display:inline-flex; color:#6b7fa8; transition:transform .2s ease; } #page-aifinder .af-chev svg { width:18px; height:18px; }
#page-aifinder .af-more[open] .af-chev { transform:rotate(180deg); }
#page-aifinder .af-more[open] > summary { border-bottom:1px solid #e1e8f6; }
html[data-theme="dark"] #page-aifinder .af-more[open] > summary { border-bottom-color:#485a8a; }
#page-aifinder .af-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; }
#page-aifinder .af-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
#page-aifinder .af-lab { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#6b7a96; }
#page-aifinder .af-lab i { display:inline-flex; color:#2f6bff; font-style:normal; } #page-aifinder .af-lab svg { width:14px; height:14px; }
html[data-theme="dark"] #page-aifinder .af-lab { color:#aab8d8; } html[data-theme="dark"] #page-aifinder .af-lab i { color:#9db9ff; }
#page-aifinder .af-form select { width:100%; min-height:46px; padding:0 12px; border-radius:13px; font-size:14px; font-weight:700; background:#fff; border:1px solid #dbe4f5; color:var(--text-primary); }
#page-aifinder .af-form .ui-select-wrapper { width:100%; }
#page-aifinder .af-form .ui-select-trigger { min-height:46px; border-radius:13px; font-size:14px; font-weight:700; }
#page-aifinder .af-form .ui-select-label { font-size:14px; font-weight:700; }
#page-aifinder .af-form .ui-select-menu { z-index:60; }
html[data-theme="dark"] #page-aifinder .af-form select { background:#1f2a4a; border-color:#485a8a; color:#fff; }

/* switches */
#page-aifinder .af-switches { display:flex; flex-direction:column; gap:12px; }
#page-aifinder .af-switch { display:flex; align-items:center; gap:12px; cursor:pointer; }
#page-aifinder .af-switch input { position:absolute; opacity:0; width:0; height:0; min-height:0; }
#page-aifinder .af-track { position:relative; flex:0 0 46px; width:46px; height:26px; border-radius:999px; background:#cbd6ee; transition:background .2s ease; }
#page-aifinder .af-track::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .2s ease; }
#page-aifinder .af-switch input:checked + .af-track { background:linear-gradient(135deg, #2f6bff, #6c5ce7); }
#page-aifinder .af-switch input:checked + .af-track::after { transform:translateX(20px); }
#page-aifinder .af-switch input:focus-visible + .af-track { outline:3px solid rgba(47,107,255,.35); outline-offset:2px; }
#page-aifinder .af-sw-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
#page-aifinder .af-sw-txt b { font-size:14px; font-weight:800; color:var(--text-primary); text-transform:none; letter-spacing:0; }
#page-aifinder .af-sw-txt small { font-size:12px; font-weight:500; color:#7a8aa6; }
html[data-theme="dark"] #page-aifinder .af-track { background:#485a8a; }

/* actions */
#page-aifinder .af-actions { display:flex; gap:10px; }
#page-aifinder .af-find { flex:1 1 auto; min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:16px !important; font-size:15.5px; font-weight:900; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%) !important; border:0 !important; box-shadow:0 10px 24px rgba(79,70,229,.35); }
#page-aifinder .af-find svg { width:20px; height:20px; }
#page-aifinder .af-reset { flex:0 0 auto; min-height:54px; padding:0 18px; display:inline-flex; align-items:center; gap:8px; border-radius:16px !important; font-weight:800; color:#3d4f72 !important; background:#fff !important; border:1px solid #dbe4f5 !important; box-shadow:none !important; }
#page-aifinder .af-reset svg { width:17px; height:17px; }
html[data-theme="dark"] #page-aifinder .af-reset { background:#2a3759 !important; color:#d3dcf1 !important; border-color:#485a8a !important; }

/* results */
#page-aifinder .af-results { margin-top:18px; padding:0; }
#page-aifinder .af-results:empty { display:none; }
#page-aifinder .af-res-head { margin-bottom:12px; }
#page-aifinder .af-res-title { display:flex; align-items:center; gap:12px; }
#page-aifinder .af-res-title i { width:40px; height:40px; flex:0 0 40px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; color:#fff; background:linear-gradient(135deg, #2f6bff, #6c5ce7); }
#page-aifinder .af-res-title svg { width:20px; height:20px; }
#page-aifinder .af-res-title h3 { margin:0; font-size:18px; font-weight:900; color:var(--text-primary); }
#page-aifinder .af-res-title p { margin:2px 0 0; font-size:12px; color:var(--text-muted); }
#page-aifinder .af-crit { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
#page-aifinder .af-crit span { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:700; color:#1d4ed8; background:#e4ecff; }
#page-aifinder .af-crit svg { width:13px; height:13px; }
html[data-theme="dark"] #page-aifinder .af-crit span { color:#bcd0ff; background:rgba(79,124,255,.22); }
#page-aifinder .af-list { display:flex; flex-direction:column; gap:12px; }

#page-aifinder .af-list .phone-card.ai-card { position:relative; display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:20px; background:#fff; border:1px solid #e1e8f6; color:var(--text-primary); box-shadow:0 4px 14px rgba(30,60,120,.05); cursor:pointer; transform:none; }
#page-aifinder .af-list .phone-card.ai-card.is-best { border:1.5px solid #f3cf72; background:linear-gradient(160deg, #fff8e6 0%, #fff 55%); box-shadow:0 10px 26px rgba(245,158,11,.16); }
html[data-theme="dark"] #page-aifinder .af-list .phone-card.ai-card { background:#2a3759; border-color:#485a8a; box-shadow:none; color:#fff; }
html[data-theme="dark"] #page-aifinder .af-list .phone-card.ai-card.is-best { background:linear-gradient(160deg, rgba(245,158,11,.18), #2a3759 60%); border-color:rgba(245,158,11,.55); }
#page-aifinder .ai-rank { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; color:#5b6c8c; background:#eef2fa; }
#page-aifinder .ai-rank svg { width:13px; height:13px; }
#page-aifinder .is-best .ai-rank { color:#fff; background:linear-gradient(135deg, #f59e0b, #f97316); }
html[data-theme="dark"] #page-aifinder .ai-rank { background:#35446d; color:#c5d0ea; } html[data-theme="dark"] #page-aifinder .is-best .ai-rank { background:linear-gradient(135deg, #f59e0b, #f97316); color:#fff; }
#page-aifinder .ai-top { display:flex; align-items:center; gap:12px; }
#page-aifinder .ai-img { flex:0 0 76px; height:92px; border-radius:14px; background:#f4f7fd; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#page-aifinder .ai-img img { max-width:100%; max-height:100%; object-fit:contain; }
#page-aifinder .ai-noimg { color:#9aa8c4; } #page-aifinder .ai-noimg svg { width:30px; height:30px; }
html[data-theme="dark"] #page-aifinder .ai-img { background:#1f2a4a; }
#page-aifinder .ai-info { flex:1; min-width:0; }
#page-aifinder .ai-brand { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }
#page-aifinder .ai-name { font-size:15.5px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
#page-aifinder .ai-price { margin-top:4px; font-size:17px; font-weight:900; color:#2f6bff; }
html[data-theme="dark"] #page-aifinder .ai-price { color:#9db9ff; }
#page-aifinder .ai-match { --p:0; --c:#3b82f6; flex:0 0 64px; width:64px; height:64px; border-radius:50%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; background:conic-gradient(var(--c) calc(var(--p) * 1%), #e6ecf7 0); }
#page-aifinder .ai-match::before { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; }
#page-aifinder .ai-match b, #page-aifinder .ai-match small { position:relative; line-height:1; }
#page-aifinder .ai-match b { font-size:19px; font-weight:900; color:var(--text-primary); }
#page-aifinder .ai-match small { font-size:8.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8b9ab6; margin-top:2px; }
html[data-theme="dark"] #page-aifinder .ai-match { background:conic-gradient(var(--c) calc(var(--p) * 1%), #3a4a78 0); } html[data-theme="dark"] #page-aifinder .ai-match::before { background:#2a3759; } html[data-theme="dark"] #page-aifinder .ai-match b { color:#fff; }
#page-aifinder .ai-chips { display:flex; flex-wrap:wrap; gap:6px; }
#page-aifinder .ai-chips span { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; color:#5b6c8c; background:#eef2fa; }
#page-aifinder .ai-chips svg { width:13px; height:13px; }
#page-aifinder .ai-chips .g5 { color:#0f9d58; background:#e7f8ef; } #page-aifinder .ai-chips .rt { color:#b7791f; background:#fff4de; } #page-aifinder .ai-chips .rt svg { color:#f5a524; }
html[data-theme="dark"] #page-aifinder .ai-chips span { background:#35446d; color:#c5d0ea; } html[data-theme="dark"] #page-aifinder .ai-chips .g5 { background:rgba(16,185,129,.16); color:#4ade80; } html[data-theme="dark"] #page-aifinder .ai-chips .rt { background:rgba(245,158,11,.16); color:#fcd34d; }

/* "Why this phone?" block added by the enhancer */
#page-aifinder .ai-card .phx-why { margin:0; padding:11px 12px; border-radius:14px; background:#f3f8ff; border:1px solid #dbe8ff; }
#page-aifinder .ai-card .phx-why-title { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#1d4ed8; margin-bottom:6px; }
#page-aifinder .ai-card .phx-why ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px; }
#page-aifinder .ai-card .phx-why li { font-size:12.5px; line-height:1.45; color:#3d4f72; }
html[data-theme="dark"] #page-aifinder .ai-card .phx-why { background:#1f2a4a; border-color:#485a8a; } html[data-theme="dark"] #page-aifinder .ai-card .phx-why-title { color:#9db9ff; } html[data-theme="dark"] #page-aifinder .ai-card .phx-why li { color:#c5d0ea; }

#page-aifinder .af-empty { text-align:center; padding:34px 16px; border-radius:18px; background:#f6f9ff; border:1px dashed #cdd9f2; }
#page-aifinder .af-empty i { width:56px; height:56px; margin:0 auto 10px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); } #page-aifinder .af-empty svg { width:28px; height:28px; }
#page-aifinder .af-empty h3 { margin:0 0 4px; color:var(--text-primary); } #page-aifinder .af-empty p { margin:0; font-size:13px; color:var(--text-muted); }
html[data-theme="dark"] #page-aifinder .af-empty { background:#26325a; border-color:#485a8a; }

@media (min-width:760px) {
    #page-aifinder .af-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
    #page-aifinder .af-uses { grid-template-columns:repeat(3, minmax(0,1fr)); }
    #page-aifinder .af-grid { grid-template-columns:repeat(4, 1fr); }
}
@media (max-width:360px) { #page-aifinder .af-grid { grid-template-columns:1fr; } #page-aifinder .af-uses { grid-template-columns:1fr; } }

/* ai finder polish */
#page-aifinder #aiResults.af-results { padding:0 !important; margin-top:18px; }
#page-aifinder .af-list .ai-price, #page-aifinder .ai-info .ai-price { background:transparent !important; padding:0 !important; border:0 !important; border-radius:0 !important; display:block; margin-top:4px; }
#page-aifinder .af-find { white-space:nowrap; font-size:15px; padding:0 14px; }
#page-aifinder .af-find span { white-space:nowrap; }
#page-aifinder .af-reset { padding:0 16px; }
#page-aifinder .af-actions { flex-wrap:nowrap; }

/* =====================================================================
   NEWS v2 — hero header, search, category chips, story cards
   ===================================================================== */
.nw-page svg, .nw-card svg { flex:0 0 auto; }
#page-news > .card.nw-page { padding:16px; border-radius:22px; border:1px solid #e1e8f6; border-top:1px solid #e1e8f6; background:var(--bg-card); box-shadow:0 8px 28px rgba(30,60,120,.07); }
#page-news > .card.nw-page::before, #page-news > .card.nw-page::after { display:none; }
html[data-theme="dark"] #page-news > .card.nw-page { background:#1f2a4a; border-color:#485a8a; box-shadow:none; }

.nw-head { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:12px; border-radius:18px; background:linear-gradient(135deg, #0ea5e9 0%, #2f6bff 55%, #6c5ce7 100%); color:#fff; box-shadow:0 12px 26px rgba(47,107,255,.28); }
.nw-head-ico { width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2); }
.nw-head-ico svg { width:24px; height:24px; }
.nw-head h2 { margin:0; font-size:20px; font-weight:900; letter-spacing:-.02em; color:#fff; }
.nw-head p { margin:3px 0 0; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.9); }
.nw-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:12px; }
.nw-stats:empty { display:none; }
.nw-stats > div { display:flex; flex-direction:column; align-items:center; padding:9px 6px; border-radius:14px; background:#f6f9ff; border:1px solid #e1e8f6; }
.nw-stats b { font-size:20px; font-weight:900; color:#2f6bff; line-height:1.1; }
.nw-stats span { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7a8aa6; margin-top:2px; }
html[data-theme="dark"] .nw-stats > div { background:#2a3759; border-color:#485a8a; } html[data-theme="dark"] .nw-stats b { color:#9db9ff; }

.nw-search { position:relative; margin-bottom:10px; }
.nw-search-ico { position:absolute; left:14px; top:25px; transform:translateY(-50%); display:flex; color:#7a8aa6; pointer-events:none; z-index:2; }
.nw-search-ico svg { width:19px; height:19px; }
.nw-search input { width:100%; box-sizing:border-box; height:50px; padding:0 46px 0 44px; border-radius:15px; font-size:15px; font-weight:600; background:#fff; border:1.5px solid #d6e2fb; color:var(--text-primary); }
.nw-search input:focus { outline:0; border-color:#2f6bff; box-shadow:0 0 0 4px rgba(47,107,255,.14); }
.nw-clear { position:absolute; right:10px; top:9px; width:32px; height:32px; border-radius:50%; border:0; background:#eef2fa; color:#5b6c8c; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; z-index:2; }
.nw-clear[hidden] { display:none; } .nw-clear svg { width:16px; height:16px; }
html[data-theme="dark"] .nw-search input { background:#2a3759; border-color:#485a8a; color:#fff; } html[data-theme="dark"] .nw-clear { background:#35446d; color:#c5d0ea; }

.nw-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.nw-chips:empty { display:none; }
.nw-chips::-webkit-scrollbar { display:none; }
.nw-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; min-height:40px; border-radius:999px; font-size:13px; font-weight:700; color:#3d4f72; background:#fff; border:1px solid #dbe4f5; cursor:pointer; }
.nw-chip svg { width:16px; height:16px; color:#6b7fa8; }
.nw-chip em { font-style:normal; font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; background:#eef2fa; color:#6b7a96; }
.nw-chip.active { color:#fff; background:linear-gradient(135deg, #2f6bff, #5b5bf0); border-color:transparent; box-shadow:0 6px 14px rgba(47,107,255,.3); }
.nw-chip.active svg { color:#fff; } .nw-chip.active em { background:rgba(255,255,255,.25); color:#fff; }
html[data-theme="dark"] .nw-chip:not(.active) { background:#2a3759; color:#d3dcf1; border-color:#485a8a; } html[data-theme="dark"] .nw-chip:not(.active) em { background:#35446d; color:#aab8d8; }

/* ---- cards ---- */
.nw-list { display:flex; flex-direction:column; gap:14px; }
.nw-card { --nc:#2f6bff; position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:20px; background:#fff; border:1px solid #e1e8f6; box-shadow:0 4px 14px rgba(30,60,120,.05); }
.nw-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--nc); }
.nw-cat-launch { --nc:#16a34a; } .nw-cat-rumor { --nc:#f59e0b; } .nw-cat-update { --nc:#2f6bff; }
.nw-cat-review { --nc:#8b5cf6; } .nw-cat-deal { --nc:#ef4444; } .nw-cat-news { --nc:#0ea5e9; }
.nw-card .news-thumb { width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#eef2fa; }
.nw-card .news-thumb img { width:100%; height:100%; object-fit:cover; display:block; margin:0; border-radius:0; max-height:none; }
.nw-content { padding:14px 16px 16px 18px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.nw-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.nw-ico { width:30px; height:30px; flex:0 0 30px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--nc); background:color-mix(in srgb, var(--nc) 14%, transparent); }
.nw-ico svg { width:16px; height:16px; }
.nw-pill { padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--nc); background:color-mix(in srgb, var(--nc) 13%, transparent); }
.nw-feat { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; color:#b45309; background:#fff3d6; }
.nw-feat svg { width:12px; height:12px; }
.nw-date { margin-left:auto; font-size:12px; font-weight:600; color:#7a8aa6; }
.nw-content h4 { margin:2px 0 0; font-size:17px; font-weight:800; line-height:1.3; letter-spacing:-.01em; color:var(--text-primary); }
.nw-sum { margin:0; font-size:14px; line-height:1.55; color:#5b6c8c; }
.nw-content .news-body { display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.nw-content .news-body[hidden] { display:none; }
.nw-content .news-body p { margin:0; font-size:14px; line-height:1.65; color:var(--text-primary); }
.nw-content .news-more { align-self:flex-start; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:800; color:#1d4ed8; background:#eef3ff; border:1px solid #cddbff; cursor:pointer; }
.nw-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding-top:10px; margin-top:2px; border-top:1px solid #edf1f9; font-size:12px; font-weight:600; color:#7a8aa6; }
.nw-foot svg { width:13px; height:13px; vertical-align:-2px; margin-right:5px; }
.nw-foot a { color:#2f6bff; text-decoration:none; font-weight:700; }
.nw-read { display:inline-flex; align-items:center; }

/* featured hero */
.nw-card.is-hero { border:0; background:linear-gradient(160deg, #0b1b3f 0%, #1d3b8f 100%); box-shadow:0 14px 34px rgba(29,59,143,.35); }
.nw-card.is-hero::before { display:none; }
.nw-card.is-hero .nw-content { padding:18px; }
.nw-card.is-hero h4 { font-size:21px; line-height:1.25; color:#fff; }
.nw-card.is-hero .nw-sum { color:rgba(255,255,255,.82); font-size:14.5px; }
.nw-card.is-hero .nw-ico { color:#fff; background:rgba(255,255,255,.18); }
.nw-card.is-hero .nw-pill { color:#fff; background:rgba(255,255,255,.18); }
.nw-card.is-hero .nw-feat { color:#fde68a; background:rgba(253,230,138,.16); }
.nw-card.is-hero .nw-date { color:rgba(255,255,255,.7); }
.nw-card.is-hero .news-body p { color:rgba(255,255,255,.92); }
.nw-card.is-hero .news-more { color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.nw-card.is-hero .nw-foot { border-top-color:rgba(255,255,255,.18); color:rgba(255,255,255,.75); }
.nw-card.is-hero .nw-foot a { color:#bcd0ff; }

/* dark */
html[data-theme="dark"] .nw-card:not(.is-hero) { background:#2a3759; border-color:#485a8a; box-shadow:none; }
html[data-theme="dark"] .nw-sum { color:#b9c5e2; } html[data-theme="dark"] .nw-date { color:#98a8cc; }
html[data-theme="dark"] .nw-card:not(.is-hero) .nw-foot { border-top-color:#3a4a78; color:#98a8cc; } html[data-theme="dark"] .nw-card:not(.is-hero) .nw-foot a { color:#9db9ff; }
html[data-theme="dark"] .nw-card:not(.is-hero) .news-more { color:#bcd0ff; background:rgba(79,124,255,.18); border-color:rgba(122,165,255,.4); }
html[data-theme="dark"] .nw-card:not(.is-hero) .nw-feat { color:#fcd34d; background:rgba(245,158,11,.16); }
html[data-theme="dark"] .nw-card .news-thumb { background:#1f2a4a; }

.nw-empty { text-align:center; padding:34px 16px; border-radius:18px; background:#f6f9ff; border:1px dashed #cdd9f2; }
.nw-empty i { width:56px; height:56px; margin:0 auto 10px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); } .nw-empty svg { width:28px; height:28px; }
.nw-empty h3 { margin:0 0 4px; color:var(--text-primary); } .nw-empty p { margin:0 0 12px; font-size:13px; color:var(--text-muted); }
.nw-reset { padding:9px 16px; border-radius:999px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font-weight:800; font-size:13px; cursor:pointer; }
html[data-theme="dark"] .nw-empty { background:#26325a; border-color:#485a8a; } html[data-theme="dark"] .nw-reset { background:#35446d; color:#d3dcf1; border-color:#485a8a; }

@media (min-width:760px) {
    .nw-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
    .nw-card.is-hero { grid-column:1 / -1; }
    .nw-card.is-hero:has(.news-thumb) { flex-direction:row; }
    .nw-card.is-hero:has(.news-thumb) .news-thumb { width:46%; aspect-ratio:auto; min-height:260px; }
}

/* news: brighter category colours on dark backgrounds */
html[data-theme="dark"] .nw-card:not(.is-hero) .nw-pill,
html[data-theme="dark"] .nw-card:not(.is-hero) .nw-ico { color:color-mix(in srgb, var(--nc) 55%, #fff); }
html[data-theme="dark"] .nw-card:not(.is-hero) .nw-pill, html[data-theme="dark"] .nw-card:not(.is-hero) .nw-ico { background:color-mix(in srgb, var(--nc) 24%, transparent); }

/* =====================================================================
   PRICE HISTORY v2 — "market panel" look: dark chart panel, range tabs,
   buying-signal meter, 2x2 stats (deliberately different from other pages)
   ===================================================================== */
#page-pricehistory svg { flex:0 0 auto; }
#page-pricehistory > .card.phh-page { padding:16px; border-radius:22px; border:1px solid #e1e8f6; border-top:1px solid #e1e8f6; background:var(--bg-card); box-shadow:0 8px 28px rgba(30,60,120,.07); display:flex; flex-direction:column; gap:14px; }
#page-pricehistory > .card.phh-page::before, #page-pricehistory > .card.phh-page::after { display:none; }
html[data-theme="dark"] #page-pricehistory > .card.phh-page { background:#1f2a4a; border-color:#485a8a; box-shadow:none; }

.phh-title { display:flex; align-items:center; gap:12px; }
.phh-ico { width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#16a34a; background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.25); }
.phh-ico svg { width:21px; height:21px; }
.phh-title h2 { margin:0; font-size:21px; font-weight:900; letter-spacing:-.02em; }
.phh-title p { margin:2px 0 0; font-size:12.5px; color:var(--text-muted); }

/* search */
.phh-toolbar { display:block !important; margin:0 !important; padding:0 !important; }
.phh-picker { width:100%; }
.phh-picker .phone-picker-input { height:52px; border-radius:16px; font-size:15px; font-weight:600; }

/* empty / info */
.phh-info:empty { display:none; }
.phh-empty { text-align:center; padding:26px 12px 8px; }
.phh-empty i { width:60px; height:60px; margin:0 auto 12px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#16a34a; background:rgba(22,163,74,.12); }
.phh-empty i svg { width:30px; height:30px; }
.phh-empty h3 { margin:0 0 4px; font-size:17px; font-weight:800; }
.phh-empty p { margin:0 0 14px; font-size:13px; color:var(--text-muted); }
.phh-quick { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.phh-quick button { padding:9px 14px; border-radius:999px; border:1px solid #dbe4f5; background:#fff; color:#2b3d63; font-size:13px; font-weight:700; cursor:pointer; }
html[data-theme="dark"] .phh-quick button { background:#2a3759; color:#d3dcf1; border-color:#485a8a; }
.phh-note { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:#f6f9ff; border:1px solid #e1e8f6; font-size:13px; font-weight:600; color:var(--text-muted); }
.phh-note i { display:inline-flex; } .phh-note i svg { width:18px; height:18px; }
.phh-note i.spin svg { animation:phSpin 1s linear infinite; }
.phh-note.err { color:#c2410c; background:#fff1e6; border-color:#fbd3b5; }
html[data-theme="dark"] .phh-note { background:#2a3759; border-color:#485a8a; }

.phh-phone { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; background:#f6f9ff; border:1px solid #e1e8f6; }
.phh-img { flex:0 0 52px; height:62px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#9aa8c4; }
.phh-img img { max-width:100%; max-height:100%; object-fit:contain; } .phh-img svg { width:24px; height:24px; }
.phh-pi { flex:1; min-width:0; display:flex; flex-direction:column; }
.phh-pi span { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }
.phh-pi b { font-size:15.5px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.phh-details { display:inline-flex; align-items:center; gap:2px; padding:8px 8px 8px 14px; border-radius:999px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font-size:12.5px; font-weight:800; cursor:pointer; }
.phh-details svg { width:15px; height:15px; }
html[data-theme="dark"] .phh-phone { background:#2a3759; border-color:#485a8a; } html[data-theme="dark"] .phh-img { background:#1f2a4a; }
html[data-theme="dark"] .phh-details { background:#35446d; border-color:#485a8a; color:#bcd0ff; }

/* chart panel */
.phh-panel { padding:16px 14px 12px; border-radius:20px; color:#fff; background:linear-gradient(180deg, #0b1635 0%, #111f47 100%); border:1px solid #1d2c5a; box-shadow:0 14px 30px rgba(10,22,53,.3); }
.phh-panel[hidden], .phh-signal[hidden], .phh-stats[hidden] { display:none !important; }
.phh-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.phh-cur span { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8fa0c8; }
.phh-cur b { display:block; font-size:32px; font-weight:900; letter-spacing:-.02em; line-height:1.15; color:#fff; }
.phh-delta { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:800; white-space:nowrap; }
.phh-delta em { font-style:normal; font-size:12px; opacity:.9; }
.phh-delta svg { width:14px; height:14px; }
.phh-delta.phh-down { color:#34d399; background:rgba(52,211,153,.15); }
.phh-delta.phh-up { color:#f87171; background:rgba(248,113,113,.15); }
.phh-delta.phh-flat { color:#9fb0d9; background:rgba(159,176,217,.15); }
.phh-ranges { display:inline-flex; gap:4px; padding:4px; margin:14px 0 6px; border-radius:12px; background:rgba(255,255,255,.07); }
.phh-ranges button { min-width:46px; padding:7px 12px; border-radius:9px; border:0; background:transparent; color:#9fb0d9; font-size:12.5px; font-weight:800; cursor:pointer; }
.phh-ranges button.active { color:#0b1635; background:#fff; }
.phh-chart { position:relative; height:230px; margin:6px -4px 0; }
.phh-src { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); font-size:11.5px; color:#8fa0c8; line-height:1.4; }
.phh-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; }
.phh-badge svg { width:12px; height:12px; }
.phh-badge.real { color:#34d399; background:rgba(52,211,153,.15); } .phh-badge.est { color:#fbbf24; background:rgba(251,191,36,.15); }
.phh-note-line { flex:1 1 100%; color:#fbbf24; }

/* buying signal */
.phh-signal { padding:14px; border-radius:18px; border:1px solid #e1e8f6; background:#f6f9ff; }
.phh-sig-top { display:flex; gap:12px; align-items:flex-start; }
.phh-sig-top p { margin:0; font-size:14px; font-weight:700; line-height:1.45; }
.phh-sig-ico { width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; }
.phh-sig-ico svg { width:18px; height:18px; }
.phh-sig-good { background:#effaf4; border-color:#bfe9d1; } .phh-sig-good .phh-sig-ico { color:#0f9d58; background:rgba(15,157,88,.14); }
.phh-sig-high { background:#fff4ed; border-color:#fbd3b5; } .phh-sig-high .phh-sig-ico { color:#c2410c; background:rgba(234,88,12,.14); }
.phh-sig-mid .phh-sig-ico { color:#2f6bff; background:rgba(47,107,255,.12); }
.phh-meter { position:relative; height:10px; margin:16px 4px 8px; border-radius:10px; background:linear-gradient(90deg, #34d399 0%, #fbbf24 55%, #f87171 100%); }
.phh-meter i { position:absolute; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:#fff; border:3px solid #16213f; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.phh-meter-lab { display:flex; justify-content:space-between; font-size:13px; font-weight:800; }
.phh-meter-lab small { display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7a8aa6; }
.phh-meter-lab span:last-child { text-align:right; }
.phh-alert { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; min-height:46px; border-radius:13px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font-size:13.5px; font-weight:800; cursor:pointer; }
.phh-alert svg { width:17px; height:17px; }
html[data-theme="dark"] .phh-signal { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .phh-sig-good { background:rgba(16,185,129,.12); border-color:rgba(52,211,153,.4); } html[data-theme="dark"] .phh-sig-high { background:rgba(249,115,22,.12); border-color:rgba(251,146,60,.4); }
html[data-theme="dark"] .phh-meter i { border-color:#0b1635; }
html[data-theme="dark"] .phh-alert { background:#35446d; border-color:#485a8a; color:#bcd0ff; }

/* stats 2x2 */
.phh-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.phh-stat { display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:1px; align-items:center; padding:12px; border-radius:16px; background:#fff; border:1px solid #e1e8f6; min-width:0; }
.phh-stat i { grid-row:1 / 4; width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; font-style:normal; }
.phh-stat i svg { width:18px; height:18px; }
.phh-stat i.g { color:#0f9d58; background:rgba(15,157,88,.13); } .phh-stat i.r { color:#e11d48; background:rgba(225,29,72,.11); }
.phh-stat i.b { color:#2f6bff; background:rgba(47,107,255,.12); } .phh-stat i.v { color:#7c3aed; background:rgba(124,58,237,.12); }
.phh-stat span { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7a8aa6; }
.phh-stat b { font-size:16px; font-weight:900; line-height:1.2; overflow-wrap:anywhere; }
.phh-stat small { font-size:11px; font-weight:600; color:#8b9ab6; }
html[data-theme="dark"] .phh-stat { background:#2a3759; border-color:#485a8a; }

/* custom range */
.phh-custom { border-radius:14px; border:1px dashed #cdd9f2; padding:0 12px; }
.phh-custom summary { display:flex; align-items:center; gap:8px; min-height:46px; cursor:pointer; font-size:13px; font-weight:700; color:#5b6c8c; list-style:none; }
.phh-custom summary::-webkit-details-marker { display:none; }
.phh-custom summary i { display:inline-flex; color:#6b7fa8; } .phh-custom summary svg { width:16px; height:16px; }
.phh-dates { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:2px 0 14px; }
html[data-theme="dark"] .phh-custom { border-color:#485a8a; } html[data-theme="dark"] .phh-custom summary { color:#aab8d8; }

@media (min-width:760px) { .phh-stats { grid-template-columns:repeat(4, 1fr); } .phh-chart { height:300px; } }

/* price history polish */
.phh-picker .phone-picker-icon { display:flex !important; align-items:center; justify-content:center; font-size:0 !important; color:#7a8aa6; }
.phh-picker .phone-picker-icon svg { width:19px; height:19px; display:block; }
.phh-picker .phone-picker-icon::before, .phh-picker .phone-picker-icon::after { content:none !important; display:none !important; }
.phh-picker .phone-picker-clear { display:none; align-items:center; justify-content:center; font-size:0 !important; }
.phh-picker.has-value .phone-picker-clear { display:flex; }
.phh-picker .phone-picker-clear svg { width:15px; height:15px; }
html[data-theme="dark"] .phh-stat i.g { color:#4ade80; } html[data-theme="dark"] .phh-stat i.r { color:#fb7185; }
html[data-theme="dark"] .phh-stat i.b { color:#9db9ff; } html[data-theme="dark"] .phh-stat i.v { color:#c4b5fd; }
html[data-theme="dark"] .phh-sig-mid .phh-sig-ico { color:#9db9ff; }
html[data-theme="dark"] .phh-panel { background:linear-gradient(180deg, #08112b 0%, #0e1b40 100%); border-color:#2a3d78; }

/* =====================================================================
   COMMUNITY POLLS v2 — same visual grammar as Price History / Rankings:
   rounded card, gradient icon, stat tiles, pill chips, clean option rows
   ===================================================================== */
#page-community svg { flex:0 0 auto; }
#page-community > .card.pl-page { padding:16px; border-radius:22px; border:1px solid #e1e8f6; border-top:1px solid #e1e8f6; background:var(--bg-card); box-shadow:0 8px 28px rgba(30,60,120,.07); display:flex; flex-direction:column; gap:14px; }
#page-community > .card.pl-page::before, #page-community > .card.pl-page::after { display:none; }
html[data-theme="dark"] #page-community > .card.pl-page { background:#1f2a4a; border-color:#485a8a; box-shadow:none; }

.pl-title { display:flex; align-items:center; gap:12px; }
.pl-ico { width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow:0 6px 16px rgba(47,107,255,.3); }
.pl-ico svg { width:22px; height:22px; }
.pl-title h2 { margin:0; font-size:21px; font-weight:900; letter-spacing:-.02em; }
.pl-title p { margin:2px 0 0; font-size:12.5px; color:var(--text-muted); }

/* stat tiles */
.pl-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.pl-stats[hidden], .pl-chips[hidden] { display:none !important; }
.pl-stats > div { display:flex; flex-direction:column; align-items:center; padding:12px 6px; border-radius:16px; background:#f6f9ff; border:1px solid #e1e8f6; }
.pl-stats b { font-size:22px; font-weight:900; line-height:1.1; color:#2f6bff; }
.pl-stats span { margin-top:3px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a8aa6; }
html[data-theme="dark"] .pl-stats > div { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .pl-stats b { color:#9db9ff; }

/* filter chips */
.pl-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin:0 -2px; scrollbar-width:none; }
.pl-chips::-webkit-scrollbar { display:none; }
.pl-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:9px 14px; border-radius:999px; border:1px solid #dbe4f5; background:#fff; color:#3d4f72; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.pl-chip em { font-style:normal; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px; background:#eef2fb; color:#5a6c93; }
.pl-chip.active { background:linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(47,107,255,.32); }
.pl-chip.active em { background:rgba(255,255,255,.22); color:#fff; }
html[data-theme="dark"] .pl-chip:not(.active) { background:#2a3759; color:#d3dcf1; border-color:#485a8a; }
html[data-theme="dark"] .pl-chip:not(.active) em { background:#35446d; color:#c3d0ee; }

/* list + cards */
.pl-list { display:flex; flex-direction:column; gap:14px; }
.pl-card { padding:14px; border-radius:20px; background:linear-gradient(135deg, #f3f7ff 0%, #ffffff 80%); border:1px solid #d6e2fb; display:flex; flex-direction:column; gap:12px; }
.pl-card.is-voted { background:#ffffff; }
html[data-theme="dark"] .pl-card { background:linear-gradient(135deg, #2c3a64 0%, #26325a 85%); border-color:#485a8a; }
.pl-card-head { display:flex; gap:12px; align-items:flex-start; }
.pl-q-ico { width:38px; height:38px; flex:0 0 38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); border:1px solid rgba(47,107,255,.22); }
.pl-q-ico svg { width:19px; height:19px; }
html[data-theme="dark"] .pl-q-ico { color:#9db9ff; }
.pl-q { margin:0; font-size:16.5px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }

.pl-opts { display:flex; flex-direction:column; gap:9px; }
.pl-opt { position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 14px 10px 10px; border-radius:16px; border:1.5px solid #dbe4f5; background:#fff; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .15s, transform .12s, box-shadow .15s; }
.pl-opt:not(.done):active { transform:scale(.985); }
.pl-opt:not(.done):hover { border-color:#2f6bff; box-shadow:0 4px 14px rgba(47,107,255,.14); }
.pl-opt.done { cursor:default; }
.pl-letter { position:relative; z-index:1; width:32px; height:32px; flex:0 0 32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#4b5f88; background:#eef2fb; }
.pl-letter svg { width:16px; height:16px; }
.pl-label { position:relative; z-index:1; flex:1; min-width:0; font-size:14.5px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.pl-radio { position:relative; z-index:1; width:20px; height:20px; flex:0 0 20px; border-radius:50%; border:2px solid #c3cfe6; }
.pl-fill { position:absolute; left:0; top:0; bottom:0; border-radius:inherit; background:rgba(47,107,255,.12); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.pl-pct { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-end; font-size:15px; font-weight:900; line-height:1.1; }
.pl-pct small { font-size:10.5px; font-weight:700; color:var(--text-muted); }
.pl-opt.lead { border-color:#34c38f; } .pl-opt.lead .pl-fill { background:rgba(34,197,94,.16); }
.pl-opt.mine { border-color:#2f6bff; } .pl-opt.mine .pl-letter { color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%); }
.pl-opt.lead.mine { border-color:#2f6bff; }
html[data-theme="dark"] .pl-opt { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .pl-letter { background:#35446d; color:#c3d0ee; }
html[data-theme="dark"] .pl-radio { border-color:#6679a8; }
html[data-theme="dark"] .pl-fill { background:rgba(122,165,255,.18); }
html[data-theme="dark"] .pl-opt.lead .pl-fill { background:rgba(52,211,153,.2); }

.pl-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.pl-meta { font-size:12px; font-weight:600; color:var(--text-muted); }
.pl-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:800; }
.pl-pill svg { width:13px; height:13px; }
.pl-pill.ok { color:#15803d; background:rgba(34,197,94,.14); }
.pl-pill.lock { color:#b45309; background:rgba(245,158,11,.15); }
.pl-pill.tap { color:#3b5bdb; background:rgba(47,107,255,.1); }
html[data-theme="dark"] .pl-pill.ok { color:#6ee7b7; } html[data-theme="dark"] .pl-pill.lock { color:#fcd34d; } html[data-theme="dark"] .pl-pill.tap { color:#a9c0ff; }

/* empty / error */
.pl-empty { text-align:center; padding:30px 14px 26px; border-radius:20px; border:1.5px dashed #c9d6f2; background:#f8faff; }
.pl-empty i { width:64px; height:64px; margin:0 auto 12px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); }
.pl-empty i svg { width:30px; height:30px; }
.pl-empty h3 { margin:0 0 6px; font-size:17px; font-weight:800; }
.pl-empty p { margin:0 auto; max-width:30em; font-size:13px; line-height:1.5; color:var(--text-muted); }
.pl-empty.err i { color:#c2410c; background:rgba(234,88,12,.12); }
.pl-retry { margin-top:14px; padding:9px 18px; border-radius:999px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font-size:13px; font-weight:800; cursor:pointer; }
html[data-theme="dark"] .pl-empty { background:#26325a; border-color:#485a8a; }
html[data-theme="dark"] .pl-retry { background:#35446d; border-color:#485a8a; color:#bcd0ff; }

/* skeleton */
.pl-skel { height:170px; border-radius:20px; background:linear-gradient(90deg, #eef2fb 25%, #f8faff 50%, #eef2fb 75%); background-size:200% 100%; animation:plShimmer 1.3s linear infinite; }
html[data-theme="dark"] .pl-skel { background:linear-gradient(90deg, #26325a 25%, #2f3d6a 50%, #26325a 75%); background-size:200% 100%; }
@keyframes plShimmer { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .pl-skel { animation:none; } .pl-fill { transition:none; } }

/* admin list */
.pl-admin-card { padding:14px; margin-bottom:12px; border-radius:16px; border:1px solid #e1e8f6; background:#f6f9ff; }
.pl-admin-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.pl-admin-meta { margin-top:8px; font-size:13px; color:var(--text-muted); }
.pl-admin-err { padding:14px; border-radius:14px; background:#fff1e6; border:1px solid #fbd3b5; color:#c2410c; font-size:13px; font-weight:600; line-height:1.5; }
html[data-theme="dark"] .pl-admin-card { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .pl-admin-err { background:rgba(234,88,12,.14); border-color:rgba(234,88,12,.4); color:#fdba74; }

/* =====================================================================
   MY PROFILE v2 — same visual grammar as Price History / Community Polls
   ===================================================================== */
#page-profile svg { flex:0 0 auto; }
#page-profile > .card.pf-page { padding:16px; border-radius:22px; border:1px solid #e1e8f6; border-top:1px solid #e1e8f6; background:var(--bg-card); box-shadow:0 8px 28px rgba(30,60,120,.07); display:flex; flex-direction:column; gap:14px; }
#page-profile > .card.pf-page::before, #page-profile > .card.pf-page::after { display:none; }
html[data-theme="dark"] #page-profile > .card.pf-page, [data-theme="dark"] #page-profile > .card.pf-page { background:#1f2a4a; border-color:#485a8a; box-shadow:none; }

.pf-title { display:flex; align-items:center; gap:12px; }
.pf-ico { width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow:0 6px 16px rgba(47,107,255,.3); }
.pf-ico svg { width:22px; height:22px; }
.pf-title h2 { margin:0; font-size:21px; font-weight:900; letter-spacing:-.02em; }
.pf-title p { margin:2px 0 0; font-size:12.5px; color:var(--text-muted); }

/* hero */
.pf-hero { display:flex; align-items:center; gap:14px; padding:14px; border-radius:20px; background:linear-gradient(135deg, #f3f7ff 0%, #ffffff 80%); border:1px solid #d6e2fb; }
#page-profile .profile-avatar.pf-avatar { width:68px; height:68px; flex:0 0 68px; border-radius:22px; font-size:34px; line-height:1; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow:0 8px 18px rgba(47,107,255,.32); color:#fff; }
.pf-who { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.pf-who h3 { margin:0; font-size:20px; font-weight:900; letter-spacing:-.01em; line-height:1.2; overflow-wrap:anywhere; }
.pf-handle { display:inline-block; max-width:100%; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:800; color:#3b5bdb; background:rgba(47,107,255,.1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="dark"] .pf-hero { background:linear-gradient(135deg, #2c3a64 0%, #26325a 85%); border-color:#485a8a; }
html[data-theme="dark"] .pf-handle { color:#a9c0ff; background:rgba(122,165,255,.14); }

/* stat tiles */
.pf-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.pf-stat { appearance:none; font:inherit; color:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border-radius:16px; background:#f6f9ff; border:1px solid #e1e8f6; text-align:center; }
button.pf-stat { cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s, border-color .15s; }
button.pf-stat:active { transform:scale(.97); } button.pf-stat:hover { border-color:#2f6bff; }
.pf-s-ico { width:34px; height:34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:4px; }
.pf-s-ico svg { width:18px; height:18px; }
.pf-s-fav { color:#e11d48; background:rgba(225,29,72,.12); } .pf-s-rev { color:#d97706; background:rgba(245,158,11,.16); } .pf-s-cmp { color:#2f6bff; background:rgba(47,107,255,.12); }
.pf-stat b { font-size:22px; font-weight:900; line-height:1.1; }
.pf-stat span { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#7a8aa6; }
html[data-theme="dark"] .pf-stat { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .pf-s-fav { color:#fda4af; } html[data-theme="dark"] .pf-s-rev { color:#fcd34d; } html[data-theme="dark"] .pf-s-cmp { color:#9db9ff; }

/* actions */
.pf-actions { display:flex; flex-wrap:wrap; gap:8px; }
.pf-btn { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:9px 15px; border-radius:999px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font:inherit; font-size:13px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pf-btn svg { width:16px; height:16px; }
.pf-btn:active { transform:scale(.97); }
.pf-btn.pf-danger { color:#dc2626; border-color:#f8c9cf; background:#fff5f6; }
html[data-theme="dark"] .pf-btn { background:#35446d; border-color:#485a8a; color:#bcd0ff; }
html[data-theme="dark"] .pf-btn.pf-danger { background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.4); color:#fda4af; }
#page-profile.pf-guest .pf-actions, #page-profile.pf-guest .pf-stats, #page-profile.pf-guest .pf-sec-head { display:none; }

/* reviews */
.pf-sec-head { display:flex; align-items:center; gap:10px; margin-top:2px; }
.pf-sec-head h3 { margin:0; font-size:17px; font-weight:900; letter-spacing:-.01em; }
.pf-count { min-width:26px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:800; text-align:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%); }
.pf-count[hidden] { display:none; }
.pf-reviews { display:flex; flex-direction:column; gap:12px; }
.pf-rev { padding:14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; display:flex; flex-direction:column; gap:10px; }
html[data-theme="dark"] .pf-rev { background:#2a3759; border-color:#485a8a; }
.pf-rev-top { display:flex; align-items:center; gap:12px; }
.pf-rev-top.clickable { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pf-rev-img { flex:0 0 46px; height:54px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#9aa8c4; }
.pf-rev-img img { max-width:100%; max-height:100%; object-fit:contain; } .pf-rev-img svg { width:22px; height:22px; }
html[data-theme="dark"] .pf-rev-img { background:#1f2a4a; }
.pf-rev-name { min-width:0; display:flex; flex-direction:column; }
.pf-rev-name span { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }
.pf-rev-name b { font-size:15.5px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.pf-rev-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pf-rev-meta time { font-size:12px; font-weight:600; color:var(--text-muted); }
.pf-stars { display:inline-flex; gap:2px; }
.pf-stars span { display:inline-flex; } .pf-stars svg { width:17px; height:17px; }
.pf-stars .on svg { fill:#f59e0b; } .pf-stars .off svg { fill:#d3dbec; }
html[data-theme="dark"] .pf-stars .off svg { fill:#4a5a85; }
.pf-rev-text { margin:0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.pf-rev-tags { display:flex; flex-wrap:wrap; gap:8px; }
.pf-tag { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.pf-tag svg { width:13px; height:13px; }
.pf-tag.pro { color:#15803d; background:rgba(34,197,94,.14); } .pf-tag.con { color:#b91c1c; background:rgba(239,68,68,.12); }
html[data-theme="dark"] .pf-tag.pro { color:#6ee7b7; } html[data-theme="dark"] .pf-tag.con { color:#fca5a5; }
.pf-more { align-self:center; padding:10px 20px; border-radius:999px; border:1px solid #cddbff; background:#fff; color:#1d4ed8; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
html[data-theme="dark"] .pf-more { background:#35446d; border-color:#485a8a; color:#bcd0ff; }

/* empty */
.pf-empty { text-align:center; padding:28px 14px 24px; border-radius:20px; border:1.5px dashed #c9d6f2; background:#f8faff; }
.pf-empty i { width:60px; height:60px; margin:0 auto 12px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); }
.pf-empty i svg { width:28px; height:28px; }
.pf-empty h4 { margin:0 0 6px; font-size:17px; font-weight:800; }
.pf-empty p { margin:0 auto; max-width:28em; font-size:13px; line-height:1.5; color:var(--text-muted); }
.pf-cta { margin-top:14px; padding:10px 20px; border-radius:999px; border:0; background:linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%); color:#fff; font:inherit; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 6px 14px rgba(47,107,255,.32); }
html[data-theme="dark"] .pf-empty { background:#26325a; border-color:#485a8a; }

/* =====================================================================
   HEADER v2 — glass icon buttons (menu / theme / bell / profile / admin)
   Emoji glyphs are hidden and replaced by SVG masks, so the existing JS
   (which still writes 🌙 / ☀️ / 🔔) keeps working untouched.
   ===================================================================== */
.main > .header { --hd-ico:#cfdbf7; --hd-bg:rgba(255,255,255,.07); --hd-bd:rgba(255,255,255,.13); }
.main > .header .header-title { font-weight:800; letter-spacing:-.01em; }

.main > .header .menu-toggle,
.main > .header .header-right .theme-toggle,
.main > .header .header-right .notif-btn,
.main > .header .header-right .user-btn {
    position:relative; width:40px; height:40px; min-width:40px; padding:0; border-radius:13px;
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px;
    background:var(--hd-bg); border:1px solid var(--hd-bd); color:var(--hd-ico);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    cursor:pointer; -webkit-tap-highlight-color:transparent; line-height:1;
    transition:background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.main > .header .menu-toggle { font-size:0; }
.main > .header .header-right .theme-toggle { font-size:0; }
.main > .header .header-right .notif-btn > span[aria-hidden="true"] { font-size:0; display:block; width:20px; height:20px; }
.main > .header .header-right .theme-toggle:hover,
.main > .header .header-right .notif-btn:hover,
.main > .header .header-right .user-btn:hover,
.main > .header .menu-toggle:hover { background:rgba(255,255,255,.13); border-color:rgba(138,170,255,.55); transform:none; }
.main > .header .header-right .theme-toggle:active,
.main > .header .header-right .notif-btn:active,
.main > .header .header-right .user-btn:active,
.main > .header .menu-toggle:active { transform:scale(.93); }
.main > .header .header-right .theme-toggle:focus-visible,
.main > .header .header-right .notif-btn:focus-visible,
.main > .header .header-right .user-btn:focus-visible,
.main > .header .menu-toggle:focus-visible,
.main > .header .header-right .admin-badge:focus-visible { outline:2px solid #8aaaff; outline-offset:2px; }

/* SVG icons via mask (inherit the button colour) */
.main > .header .menu-toggle::before,
.main > .header .header-right .theme-toggle::before,
.main > .header .header-right .notif-btn > span[aria-hidden="true"]::before {
    content:""; display:block; width:20px; height:20px; background-color:currentColor;
    -webkit-mask:var(--hd-mask) center/contain no-repeat; mask:var(--hd-mask) center/contain no-repeat;
}
.main > .header .menu-toggle { --hd-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h10M4 17h16'/%3E%3C/svg%3E"); }
.main > .header .header-right .theme-toggle { --hd-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .main > .header .header-right .theme-toggle { --hd-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); color:#fcd34d; }
.main > .header .header-right .notif-btn > span[aria-hidden="true"] { --hd-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }

/* notification dot + count badge */
.main > .header .header-right .notif-btn .notif-dot { top:7px; right:8px; width:9px; height:9px; background:#f43f5e; border:2px solid #141c3a; box-shadow:none; }
.main > .header .header-right .notif-btn .notif-count { top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; font-size:10.5px; font-weight:800; background:linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); color:#fff; border:2px solid #141c3a; box-shadow:0 2px 8px rgba(244,63,94,.45); }

/* profile (avatar emoji stays — it is the user's own avatar) */
.main > .header .header-right .user-btn { font-size:19px; font-weight:700; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); border-color:rgba(255,255,255,.22); box-shadow:0 6px 16px rgba(47,107,255,.34); }
.main > .header .header-right .user-btn:hover { background:linear-gradient(135deg, #3b77ff 0%, #7a6cf0 100%); border-color:rgba(255,255,255,.4); }

/* admin pill */
.main > .header .header-right .admin-badge { display:inline-flex; align-items:center; gap:6px; height:40px; max-width:none; padding:0 14px 0 11px; border-radius:13px; overflow:visible; font-size:12.5px; font-weight:800; letter-spacing:.01em; color:#fff; white-space:nowrap; background:rgba(47,107,255,.18); border:1px solid rgba(138,170,255,.5); box-shadow:none; cursor:pointer; opacity:1; -webkit-tap-highlight-color:transparent; transition:background .15s, transform .12s; }
.main > .header .header-right .admin-badge svg { width:17px; height:17px; flex:0 0 17px; color:#9db9ff; }
.main > .header .header-right .admin-badge:hover { background:rgba(47,107,255,.32); opacity:1; }
.main > .header .header-right .admin-badge:active { transform:scale(.96); }
.main > .header .header-right .admin-badge[style*="display: none"], .main > .header .header-right .admin-badge[style*="display:none"] { display:none !important; }

/* small phones: keep everything on one row */
@media (max-width:420px) {
    .main > .header { padding:0 10px; gap:8px; }
    .main > .header .header-right { gap:6px; }
    .main > .header .menu-toggle, .main > .header .header-right .theme-toggle, .main > .header .header-right .notif-btn, .main > .header .header-right .user-btn { width:38px; height:38px; min-width:38px; flex-basis:38px; border-radius:12px; }
    .main > .header .header-right .admin-badge { height:38px; padding:0 11px 0 9px; border-radius:12px; }
    .main > .header .header-title { max-width:none; }
}
@media (max-width:360px) {
    .main > .header .header-right .admin-badge { padding:0 10px; font-size:0; gap:0; }
    .main > .header .header-right .admin-badge svg { width:19px; height:19px; }
}
@media (prefers-reduced-motion:reduce) { .main > .header * { transition:none !important; } }

/* =====================================================================
   WHY PHONEHUB (dashboard footer content) v2 — same visual grammar as the
   other redesigned pages. Text/markup order unchanged (SEO + i18n safe).
   ===================================================================== */
#phoneHubAbout.ab-page { padding:18px 16px; border-radius:22px; border:1px solid #e1e8f6; border-top:1px solid #e1e8f6; background:var(--bg-card); box-shadow:0 8px 28px rgba(30,60,120,.07); display:flex; flex-direction:column; gap:14px; }
#phoneHubAbout.ab-page::before, #phoneHubAbout.ab-page::after { display:none; }
html[data-theme="dark"] #phoneHubAbout.ab-page { background:#1f2a4a; border-color:#485a8a; box-shadow:none; }
#phoneHubAbout svg { flex:0 0 auto; }

.ab-title { display:flex; align-items:center; gap:12px; }
.ab-ico { width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow:0 6px 16px rgba(47,107,255,.3); }
.ab-ico svg { width:22px; height:22px; }
#phoneHubAbout .ab-title h2 { margin:0; font-size:22px; font-weight:900; letter-spacing:-.02em; line-height:1.2; }

#phoneHubAbout .ab-lead { margin:0; padding:14px 16px; border-radius:18px; font-size:14.5px; line-height:1.65; color:var(--text-secondary, #475569);
    background:linear-gradient(135deg, #f3f7ff 0%, #ffffff 80%); border:1px solid #d6e2fb; }
html[data-theme="dark"] #phoneHubAbout .ab-lead { background:linear-gradient(135deg, #2c3a64 0%, #26325a 85%); border-color:#485a8a; color:#d3dcf1; }

.ab-sub { display:flex; align-items:center; gap:10px; margin-top:4px; }
.ab-sub-ico { width:32px; height:32px; flex:0 0 32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); border:1px solid rgba(47,107,255,.22); }
.ab-sub-ico svg { width:17px; height:17px; }
html[data-theme="dark"] .ab-sub-ico { color:#9db9ff; }
#phoneHubAbout .ab-sub h3 { margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.3; }

/* tip cards */
#phoneHubAbout .ab-tips { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
#phoneHubAbout .ab-tips li { display:flex; align-items:flex-start; gap:12px; margin:0; padding:13px 14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; list-style:none; }
html[data-theme="dark"] #phoneHubAbout .ab-tips li { background:#2a3759; border-color:#485a8a; }
.ab-ti { width:40px; height:40px; flex:0 0 40px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; }
.ab-ti svg { width:21px; height:21px; }
.ab-ti.t-battery { color:#16a34a; background:rgba(22,163,74,.13); }
.ab-ti.t-camera { color:#db2777; background:rgba(219,39,119,.12); }
.ab-ti.t-long { color:#2f6bff; background:rgba(47,107,255,.13); }
.ab-ti.t-game { color:#7c3aed; background:rgba(124,58,237,.13); }
html[data-theme="dark"] .ab-ti.t-battery { color:#6ee7b7; } html[data-theme="dark"] .ab-ti.t-camera { color:#f9a8d4; }
html[data-theme="dark"] .ab-ti.t-long { color:#9db9ff; } html[data-theme="dark"] .ab-ti.t-game { color:#c4b5fd; }
.ab-tb { min-width:0; font-size:13.5px; line-height:1.55; color:var(--text-secondary, #475569); overflow-wrap:anywhere; }
.ab-tb strong { display:block; margin-bottom:2px; font-size:14.5px; font-weight:800; line-height:1.35; color:var(--text-primary); }
html[data-theme="dark"] .ab-tb { color:#c3d0ee; }

/* price-alert callout */
.ab-callout { display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:18px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); }
.ab-ci { width:38px; height:38px; flex:0 0 38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #f59e0b 0%, #f97316 100%); box-shadow:0 6px 14px rgba(249,115,22,.3); }
.ab-ci svg { width:19px; height:19px; }
#phoneHubAbout .ab-callout p { margin:0; font-size:13.5px; line-height:1.6; color:var(--text-secondary, #475569); }
html[data-theme="dark"] .ab-callout { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.4); }
html[data-theme="dark"] #phoneHubAbout .ab-callout p { color:#e6dcc4; }

/* FAQ */
.ab-qm svg { width:16px; height:16px; }
.ab-faq { display:flex; flex-direction:column; gap:10px; }
.ab-q { display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; }
html[data-theme="dark"] .ab-q { background:#2a3759; border-color:#485a8a; }
.ab-qm { width:30px; height:30px; flex:0 0 30px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%); }
#phoneHubAbout .ab-q p { margin:0; min-width:0; font-size:13.5px; line-height:1.55; color:var(--text-secondary, #475569); overflow-wrap:anywhere; }
#phoneHubAbout .ab-q p strong { display:block; margin-bottom:3px; font-size:14.5px; font-weight:800; line-height:1.35; color:var(--text-primary); }
html[data-theme="dark"] #phoneHubAbout .ab-q p { color:#c3d0ee; }

@media (min-width:700px) {
    #phoneHubAbout .ab-tips { grid-template-columns:1fr 1fr; }
    .ab-faq { display:grid; grid-template-columns:1fr 1fr; }
    #phoneHubAbout.ab-page { padding:22px; }
}


/* =====================================================================
   FEEDBACK v2 — same design language as Rankings / Smart Score / Phone Detail
   (gradient icon tile, blue top accent, pill chips, soft tiles, dashed box)
   ===================================================================== */
.phx-fb-overlay { background: rgba(10,18,40,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.phx-fb-dialog {
    max-width: 580px; border-radius: 28px; border: 1px solid #dbe4f5; border-top: 5px solid #2f6bff;
    padding: 22px 22px 18px; box-shadow: 0 30px 80px rgba(20,30,70,.38);
}
.phx-fb-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; padding-bottom: 16px; border-bottom: 1px solid #e3eaf7; }
.phx-fb-ico {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, #2f6bff 0%, #6c5ce7 100%); box-shadow: 0 8px 18px rgba(47,107,255,.32);
}
.phx-fb-ico svg { width: 24px; height: 24px; }
.phx-fb-ico.sm { width: 40px; height: 40px; border-radius: 13px; }
.phx-fb-ico.sm svg { width: 20px; height: 20px; }
.phx-fb-dialog h2 { font-size: 21px; font-weight: 800; letter-spacing: -.025em; padding: 0; margin: 0; line-height: 1.2; }
.phx-fb-lead { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; line-height: 1.4; }
.phx-fb-close {
    top: 16px; right: 16px; width: 34px; height: 34px; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
    background: #f1f5fd; border: 1px solid #dbe4f5; color: #55688f; padding: 0;
}
.phx-fb-close:hover { background: #e4ecfb; color: #1d3a8a; }

/* section labels (same as "RANK BY" / "MINIMUM SCORE") */
.phx-fb-q { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b7fa8; margin: 20px 0 10px; }
.phx-fb-q.sm { font-size: 11px; margin: 14px 0 8px; color: #6b7fa8; }
.phx-fb-q b { color: #e5484d; }

/* useful? tiles */
.phx-fb-useful { gap: 10px; }
.phx-fb-ubtn {
    border: 1.5px solid #dbe4f5; background: #fff; border-radius: 18px; padding: 14px 6px 12px; gap: 8px;
    font-size: 13px; font-weight: 700; color: #3d4f72; transition: all .18s ease;
}
.phx-fb-ubtn .e {
    width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 0;
    background: #eef3ff; color: #2f6bff; transition: all .18s ease;
}
.phx-fb-ubtn .e svg { width: 22px; height: 22px; }
.phx-fb-ubtn[data-u="yes"] .e { background: rgba(22,163,74,.12); color: #16a34a; }
.phx-fb-ubtn[data-u="somewhat"] .e { background: rgba(245,158,11,.14); color: #d97706; }
.phx-fb-ubtn[data-u="no"] .e { background: rgba(229,72,77,.12); color: #e5484d; }
.phx-fb-ubtn:hover { border-color: #9db8ff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(47,107,255,.12); }
.phx-fb-ubtn.on {
    border-color: #2f6bff; color: #1d3a8a; background: linear-gradient(135deg, rgba(47,107,255,.10), rgba(108,92,231,.10));
    box-shadow: 0 0 0 3px rgba(47,107,255,.16), 0 8px 18px rgba(47,107,255,.14);
}
.phx-fb-ubtn.on .e { background: linear-gradient(135deg, #2f6bff, #6c5ce7); color: #fff; }

/* experience faces */
.phx-fb-faces { gap: 8px; }
.phx-fb-face { background: #f6f9ff; border: 1.5px solid #e1e9f8; border-radius: 16px; padding: 10px 2px 9px; gap: 4px; }
.phx-fb-face .t { font-size: 11px; font-weight: 700; color: #55688f; }
.phx-fb-face.on { border-color: #2f6bff; background: linear-gradient(135deg, rgba(47,107,255,.10), rgba(108,92,231,.10)); box-shadow: 0 0 0 3px rgba(47,107,255,.14); }
.phx-fb-face.on .t { color: #1d3a8a; }

/* pill chips (same as ranking chips) */
.phx-fb-chips { gap: 8px; }
.phx-fb-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 14px; border-radius: 999px;
    background: #fff; color: #3d4f72; border: 1px solid #dbe4f5; font-size: 13px; font-weight: 700; letter-spacing: 0; box-shadow: none;
}
.phx-fb-chip svg { width: 16px; height: 16px; color: #6b7fa8; flex: 0 0 auto; }
.phx-fb-chip:hover { border-color: #9db8ff; color: #1d3a8a; }
.phx-fb-chip.on {
    background: linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(47,107,255,.32);
}
.phx-fb-chip.on svg { color: #fff; }

/* inputs */
.phx-fb-input { background: #f6f9ff; border: 1.5px solid #dbe4f5; border-radius: 16px; padding: 12px 14px; font-size: 14px; }
textarea.phx-fb-input { min-height: 104px; margin-top: 12px; }
.phx-fb-input:focus { border-color: #2f6bff; box-shadow: 0 0 0 3px rgba(47,107,255,.18); outline: none; background: #fff; }
.phx-fb-count { font-size: 11px; color: #8a97b5; }

/* "Add more details" dashed box */
.phx-fb-more { background: #f6f9ff; border: 1px dashed #cdd9f2; border-radius: 18px; padding: 12px 14px; margin-top: 14px; }
.phx-fb-more summary { display: flex; align-items: center; gap: 8px; color: #2f6bff; font-weight: 800; font-size: 13.5px; }
.phx-fb-more summary svg { width: 18px; height: 18px; flex: 0 0 auto; }
.phx-fb-more summary em { color: #6b7fa8; font-weight: 600; }
.phx-fb-more[open] { padding-bottom: 16px; }

.phx-fb-row label { font-size: 12px; font-weight: 800; color: #3d4f72; gap: 6px; }
.phx-fb-row label i { color: #8a97b5; font-weight: 600; }

/* buttons */
.phx-fb-actions { gap: 12px; margin-top: 10px; }
.phx-fb-ghost {
    height: 48px; padding: 0 22px; border-radius: 16px; background: #fff; border: 1.5px solid #dbe4f5; color: #3d4f72; font-weight: 800; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.phx-fb-ghost:hover { border-color: #9db8ff; color: #1d3a8a; }
.phx-fb-send {
    height: 48px; padding: 0 26px; border-radius: 16px; font-weight: 800; font-size: 14.5px; color: #fff;
    background: linear-gradient(135deg, #2f6bff 0%, #5b5bf0 100%); box-shadow: 0 10px 22px rgba(47,107,255,.34);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.phx-fb-send svg { width: 18px; height: 18px; }
.phx-fb-send:disabled { opacity: .5; box-shadow: none; }
.phx-fb-priv { display: flex; align-items: flex-start; justify-content: center; gap: 7px; font-size: 11.5px; color: #8a97b5; margin-top: 14px; line-height: 1.45; text-align: left; }
.phx-fb-priv svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.phx-fb-err:empty { display: none; }
.phx-fb-err { background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.25); border-radius: 12px; padding: 9px 12px; }

/* thank-you screen */
.phx-fb-thanks { padding: 26px 6px 8px; }
.phx-fb-thanks-ico { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 26px; display: flex; align-items: center; justify-content: center; color: #fff; }
.phx-fb-thanks-ico svg { width: 38px; height: 38px; }
.phx-fb-thanks-ico.happy { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 14px 30px rgba(22,163,74,.32); }
.phx-fb-thanks-ico.calm { background: linear-gradient(135deg, #2f6bff, #6c5ce7); box-shadow: 0 14px 30px rgba(47,107,255,.32); }
.phx-fb-thanks h2 { font-size: 22px; font-weight: 800; }

/* quick prompt card */
.phx-fb-prompt { border-radius: 22px; border: 1px solid #dbe4f5; border-top: 4px solid #2f6bff; padding: 16px 16px 12px; box-shadow: 0 18px 50px rgba(20,30,70,.26); }
.phx-fb-prompt::before { display: none; }
.phx-fb-prompt-head { display: flex; align-items: center; gap: 12px; padding-right: 22px; margin-bottom: 12px; }
.phx-fb-prompt-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; padding: 0; }
.phx-fb-prompt-sub { font-size: 12.5px; margin: 2px 0 0; }
.phx-fb-x { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.phx-fb-quick { border: 1.5px solid #dbe4f5; background: #fff; border-radius: 16px; padding: 10px 4px; gap: 6px; color: #3d4f72; font-weight: 700; }
.phx-fb-quick .ic { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; background: #eef3ff; color: #2f6bff; }
.phx-fb-quick .ic svg { width: 18px; height: 18px; }
.phx-fb-quick[data-u="yes"] .ic { background: rgba(22,163,74,.12); color: #16a34a; }
.phx-fb-quick[data-u="somewhat"] .ic { background: rgba(245,158,11,.14); color: #d97706; }
.phx-fb-quick[data-u="no"] .ic { background: rgba(229,72,77,.12); color: #e5484d; }
.phx-fb-quick:hover { border-color: #2f6bff; background: linear-gradient(135deg, rgba(47,107,255,.08), rgba(108,92,231,.08)); }

/* dark theme */
html[data-theme="dark"] .phx-fb-dialog, html[data-theme="dark"] .phx-fb-prompt { border-color: #485a8a; border-top-color: #4f86ff; }
html[data-theme="dark"] .phx-fb-head { border-bottom-color: #3a4a76; }
html[data-theme="dark"] .phx-fb-close { background: #2a3759; border-color: #485a8a; color: #d3dcf1; }
html[data-theme="dark"] .phx-fb-q, html[data-theme="dark"] .phx-fb-q.sm { color: #9db0d9; }
html[data-theme="dark"] .phx-fb-ubtn, html[data-theme="dark"] .phx-fb-quick { background: #2a3759; border-color: #485a8a; color: #d3dcf1; }
html[data-theme="dark"] .phx-fb-ubtn .e, html[data-theme="dark"] .phx-fb-quick .ic { background: #35446d; color: #9db8ff; }
html[data-theme="dark"] .phx-fb-ubtn[data-u="yes"] .e, html[data-theme="dark"] .phx-fb-quick[data-u="yes"] .ic { background: rgba(34,197,94,.18); color: #4ade80; }
html[data-theme="dark"] .phx-fb-ubtn[data-u="somewhat"] .e, html[data-theme="dark"] .phx-fb-quick[data-u="somewhat"] .ic { background: rgba(245,158,11,.2); color: #fbbf24; }
html[data-theme="dark"] .phx-fb-ubtn[data-u="no"] .e, html[data-theme="dark"] .phx-fb-quick[data-u="no"] .ic { background: rgba(248,113,113,.18); color: #f87171; }
html[data-theme="dark"] .phx-fb-ubtn.on { color: #fff; background: linear-gradient(135deg, rgba(79,134,255,.25), rgba(139,92,246,.25)); border-color: #4f86ff; }
html[data-theme="dark"] .phx-fb-ubtn.on .e { background: linear-gradient(135deg, #2f6bff, #6c5ce7); color: #fff; }
html[data-theme="dark"] .phx-fb-face { background: #26325a; border-color: #3a4a76; }
html[data-theme="dark"] .phx-fb-face .t { color: #b8c5e4; }
html[data-theme="dark"] .phx-fb-face.on { border-color: #4f86ff; background: linear-gradient(135deg, rgba(79,134,255,.25), rgba(139,92,246,.25)); }
html[data-theme="dark"] .phx-fb-face.on .t { color: #fff; }
html[data-theme="dark"] .phx-fb-chip:not(.on) { background: #2a3759; color: #d3dcf1; border-color: #485a8a; }
html[data-theme="dark"] .phx-fb-chip:not(.on) svg { color: #9db0d9; }
html[data-theme="dark"] .phx-fb-input { background: #26325a; border-color: #485a8a; color: #eef2fb; }
html[data-theme="dark"] .phx-fb-input:focus { background: #2a3759; border-color: #4f86ff; }
html[data-theme="dark"] .phx-fb-more { background: #26325a; border-color: #485a8a; }
html[data-theme="dark"] .phx-fb-more summary { color: #8fb0ff; }
html[data-theme="dark"] .phx-fb-more summary em, html[data-theme="dark"] .phx-fb-row label i, html[data-theme="dark"] .phx-fb-count, html[data-theme="dark"] .phx-fb-priv { color: #9db0d9; }
html[data-theme="dark"] .phx-fb-row label { color: #d3dcf1; }
html[data-theme="dark"] .phx-fb-ghost { background: #2a3759; border-color: #485a8a; color: #d3dcf1; }

@media (max-width: 560px) {
    .phx-fb-dialog { border-radius: 26px 26px 0 0; border-top-width: 5px; padding: 20px 16px 16px; }
    .phx-fb-ico { width: 44px; height: 44px; }
    .phx-fb-faces { gap: 5px; }
    .phx-fb-face .t { font-size: 10.5px; }
    .phx-fb-actions { position: sticky; bottom: -16px; background: var(--bg-card); padding: 10px 0 8px; }
    .phx-fb-ghost { padding: 0 18px; }
}

/* Price History — honest "tracking in progress" card (replaces the old estimated chart) */
.phh-pending { text-align:center; padding:28px 18px 22px; margin-top:14px; border-radius:22px; background:#f6f9ff; border:1px dashed #cdd9f2; }
.phh-pending-ico { width:56px; height:56px; margin:0 auto 12px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); }
.phh-pending-ico svg { width:28px; height:28px; }
.phh-pending h3 { margin:0 0 6px; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.phh-pending p { margin:0 auto 16px; max-width:360px; font-size:13px; line-height:1.5; color:var(--text-muted); }
.phh-pending-price { display:inline-flex; flex-direction:column; gap:2px; padding:10px 22px; margin-bottom:14px; border-radius:16px; background:#fff; border:1px solid #dbe4f5; }
.phh-pending-price span { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#6b7fa8; }
.phh-pending-price b { font-size:22px; font-weight:800; color:#1d3a8a; }
.phh-pending .phh-alert { margin:0 auto; }
html[data-theme="dark"] .phh-pending { background:#26325a; border-color:#485a8a; }
html[data-theme="dark"] .phh-pending-ico { background:rgba(79,134,255,.2); color:#9db8ff; }
html[data-theme="dark"] .phh-pending-price { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .phh-pending-price b { color:#fff; }
html[data-theme="dark"] .phh-pending-price span { color:#9db0d9; }
.phh-pending .phh-alert { max-width:320px; }

/* ---- "Our Opinion" box on the phone detail page ---- */
.detail-opinion-wrap { margin-top: 16px; }
.detail-opinion { border-left: 4px solid var(--accent); }
.detail-opinion-body p {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}
.detail-opinion-body p:last-child { margin-bottom: 0; }
.detail-opinion-by {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
@media (max-width: 700px) {
  .detail-opinion-wrap { margin-top: 12px; }
  .detail-opinion-body p { font-size: 13.5px; }
}

/* =====================================================================
   ADMIN v2 — console header, icon tabs, KPI tiles, quick actions, brand bars
   ===================================================================== */
#page-admin svg { flex:0 0 auto; }
#page-admin > .card.ad-page { padding:16px; border-radius:22px; border:1px solid #e1e8f6; background:var(--bg-card); box-shadow:0 8px 28px rgba(30,60,120,.07); }
html[data-theme="dark"] #page-admin > .card.ad-page { background:#1f2a4a; border-color:#485a8a; box-shadow:none; }

.ad-head { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:14px; border-radius:18px; color:#fff; background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border:1px solid #2b3a57; box-shadow:0 12px 26px rgba(15,23,42,.3); }
.ad-head-ico { width:44px; height:44px; flex:0 0 44px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; color:#7aa5ff; background:rgba(122,165,255,.14); border:1px solid rgba(122,165,255,.3); }
.ad-head-ico svg { width:23px; height:23px; }
.ad-head-txt { flex:1; min-width:0; }
.ad-head-txt h2 { margin:0; font-size:19px; font-weight:900; letter-spacing:-.01em; color:#fff; }
.ad-dev { display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fecaca; background:rgba(239,68,68,.18); border:1px solid rgba(248,113,113,.35); }
.ad-dev svg { width:11px; height:11px; }
.ad-live { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#86efac; white-space:nowrap; }
.ad-live i { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.22); }

/* tabs */
#page-admin #adminTabs.ad-tabs { display:flex !important; flex-wrap:nowrap !important; gap:8px !important; overflow-x:auto; padding:2px 2px 12px !important; margin:0 -2px 6px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
#page-admin #adminTabs.ad-tabs::-webkit-scrollbar { display:none; }
#page-admin #adminTabs.ad-tabs .tab { flex:0 0 auto !important; width:auto !important; display:inline-flex; align-items:center; gap:8px; padding:9px 14px !important; min-height:42px; border-radius:12px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap; color:#3d4f72 !important; background:#fff !important; border:1px solid #dbe4f5 !important; box-shadow:none !important; }
#page-admin #adminTabs.ad-tabs .tab svg { width:17px; height:17px; color:#6b7fa8; }
#page-admin #adminTabs.ad-tabs .tab.active { color:#fff !important; background:linear-gradient(135deg, #2f6bff, #5b5bf0) !important; border-color:transparent !important; box-shadow:0 6px 14px rgba(47,107,255,.3) !important; }
#page-admin #adminTabs.ad-tabs .tab.active svg { color:#fff; }
html[data-theme="dark"] #page-admin #adminTabs.ad-tabs .tab:not(.active) { background:#2a3759 !important; color:#d3dcf1 !important; border-color:#485a8a !important; }
html[data-theme="dark"] #page-admin #adminTabs.ad-tabs .tab:not(.active) svg { color:#9db0d9; }

.ad-sec-title { margin:6px 2px 10px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }

/* KPI tiles */
.ad-kpis { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px !important; margin:0 0 16px; }
.ad-kpi { --kc:#2f6bff; position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:#fff; border:1px solid #e1e8f6; box-shadow:0 4px 14px rgba(30,60,120,.05); min-width:0; }
.ad-kpi::after { content:""; position:absolute; right:-18px; top:-18px; width:70px; height:70px; border-radius:50%; background:color-mix(in srgb, var(--kc) 10%, transparent); }
.ad-kpi:last-child:nth-child(odd) { grid-column:1 / -1; }
.ad-kpi-ico { position:relative; z-index:1; width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:var(--kc); background:color-mix(in srgb, var(--kc) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kc) 22%, transparent); }
.ad-kpi-ico svg { width:22px; height:22px; }
.ad-kpi > div { position:relative; z-index:1; display:flex; flex-direction:column; min-width:0; }
.ad-kpi b { font-size:26px; font-weight:900; letter-spacing:-.02em; line-height:1.1; color:var(--text-primary); overflow-wrap:anywhere; }
.ad-kpi > div > span { margin-top:3px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#7a8aa6; }
html[data-theme="dark"] .ad-kpi { background:#2a3759; border-color:#485a8a; box-shadow:none; }
html[data-theme="dark"] .ad-kpi-ico { color:color-mix(in srgb, var(--kc) 55%, #fff); background:color-mix(in srgb, var(--kc) 22%, transparent); }
html[data-theme="dark"] .ad-kpi b { color:#fff; }

/* quick actions */
.ad-actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.ad-act { --kc:#2f6bff; display:flex; align-items:center; gap:10px; padding:12px; min-height:54px; border-radius:15px; font-size:13.5px; font-weight:800; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; cursor:pointer; text-align:left; }
.ad-act span { width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:var(--kc); background:color-mix(in srgb, var(--kc) 14%, transparent); }
.ad-act span svg { width:18px; height:18px; }
.ad-act:active { transform:scale(.98); }
html[data-theme="dark"] .ad-act { background:#2a3759; border-color:#485a8a; color:#fff; }
html[data-theme="dark"] .ad-act span { color:color-mix(in srgb, var(--kc) 55%, #fff); }

/* cards */
.ad-card { padding:14px; margin-bottom:14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; }
html[data-theme="dark"] .ad-card { background:#2a3759; border-color:#485a8a; }
.ad-card-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ad-card-head h3 { margin:0; flex:1; font-size:15px; font-weight:800; }
.ad-card-head em { font-style:normal; font-size:11.5px; font-weight:700; color:#7a8aa6; }
.ad-card-ico { width:32px; height:32px; flex:0 0 32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#2f6bff; background:rgba(47,107,255,.12); }
.ad-card-ico svg { width:17px; height:17px; }
html[data-theme="dark"] .ad-card-ico { color:#9db9ff; }

/* brand bars */
.ad-bars { display:flex; flex-direction:column; gap:12px; }
.ad-bar { display:grid; grid-template-columns:minmax(64px, 26%) 1fr auto auto; align-items:center; gap:10px; }
.ad-bar-name { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-bar-track { height:10px; border-radius:10px; background:rgba(122,138,166,.18); overflow:hidden; }
.ad-bar-track i { display:block; height:100%; border-radius:10px; background:var(--bc); }
.ad-bar b { font-size:13px; font-weight:900; min-width:20px; text-align:right; }
.ad-bar small { font-size:11px; font-weight:700; color:#8b9ab6; min-width:32px; text-align:right; }

/* speed */
#page-admin .ad-card .speed-test-container { margin:0 0 4px; }
#page-admin .ad-card .speed-details { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px; }

/* security chips */
.ad-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ad-chips span { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; color:#0f9d58; background:#e7f8ef; }
.ad-chips svg { width:14px; height:14px; }
html[data-theme="dark"] .ad-chips span { color:#4ade80; background:rgba(16,185,129,.16); }

@media (min-width:760px) { .ad-kpis { grid-template-columns:repeat(3, minmax(0,1fr)) !important; } .ad-kpi:last-child:nth-child(odd) { grid-column:auto; } .ad-actions { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:360px) { .ad-bar { grid-template-columns:minmax(56px, 30%) 1fr auto; } .ad-bar small { display:none; } }

/* admin: keep the developer badge on one line */
.ad-dev { white-space:nowrap; font-size:10px; padding:3px 9px; }
.ad-live { font-size:10px; }
@media (max-width:400px) { .ad-live { display:none; } }


/* =====================================================================
   Admin · Price Tracking — same visual language as the Dashboard (.ad-*)
   ===================================================================== */
#tab-admin-pricetracking .ad-sec-title { margin:18px 2px 10px; }
#tab-admin-pricetracking .ad-kpis + .ad-sec-title { margin-top:6px; }
#tab-admin-pricetracking .ad-card { margin-bottom:14px; }
#tab-admin-pricetracking .ad-card-ico { --kc:#2f6bff; color:var(--kc); background:color-mix(in srgb, var(--kc) 14%, transparent); }
html[data-theme="dark"] #tab-admin-pricetracking .ad-card-ico { color:color-mix(in srgb, var(--kc) 55%, #fff); }
#tab-admin-pricetracking .ad-card-head h3 { font-size:15px; font-weight:800; letter-spacing:0; }

.pt-note { margin:-4px 0 14px; font-size:12.5px; line-height:1.6; font-weight:500; color:#6b7a99; }
html[data-theme="dark"] .pt-note { color:#aab7d8; }
.pt-note:empty { display:none; }

/* ---- buttons ---- */
#tab-admin-pricetracking .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 16px; border-radius:13px; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.2; color:#fff; background:linear-gradient(135deg, #2f6bff, #5b5bf0); border:1px solid transparent; box-shadow:0 6px 14px rgba(47,107,255,.26); cursor:pointer; transition:transform .12s ease, opacity .12s ease; }
#tab-admin-pricetracking .btn svg { width:16px; height:16px; flex:0 0 16px; }
#tab-admin-pricetracking .btn:active { transform:scale(.97); }
#tab-admin-pricetracking .btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
#tab-admin-pricetracking .btn.btn-sm { min-height:38px; padding:7px 13px; font-size:12.5px; }
#tab-admin-pricetracking .btn.pt-brand-view { color:#3d4f72; background:#fff; border-color:#dbe4f5; box-shadow:none; }
html[data-theme="dark"] #tab-admin-pricetracking .btn.pt-brand-view { color:#e1e8fa; background:#33426a; border-color:#52659a; }
#tab-admin-pricetracking .btn.pt-brand-apply,
#tab-admin-pricetracking .btn.pt-result-apply { background:linear-gradient(135deg, #0ea371, #10b981); box-shadow:0 6px 14px rgba(16,185,129,.26); }
#tab-admin-pricetracking .btn.pt-result-retry { background:linear-gradient(135deg, #7c3aed, #8b5cf6); box-shadow:0 6px 14px rgba(124,58,237,.26); }
#tab-admin-pricetracking .btn.pt-ib { width:40px; min-width:40px; padding:0; }
#tab-admin-pricetracking .btn.pt-go::before { content:""; width:15px; height:15px; flex:0 0 15px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
#tab-admin-pricetracking .btn.pt-go { width:100%; min-height:46px; font-size:14px; }
#tab-admin-pricetracking .pt-brand-item .btn.pt-brand-track { background:var(--kc); box-shadow:none; }

/* ---- form fields (Bright Data) ---- */
.pt-bd-settings-row { display:grid; grid-template-columns:1fr; gap:12px; align-items:end; }
.pt-bd-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pt-bd-field label, .pt-real-field { font-size:12px; font-weight:800; color:#51628a; }
html[data-theme="dark"] .pt-bd-field label, html[data-theme="dark"] .pt-real-field { color:#b9c6e6; }
#tab-admin-pricetracking .pt-bd-field input,
#tab-admin-pricetracking .pt-real-field input { width:100%; box-sizing:border-box; height:46px; padding:0 14px; border-radius:13px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; }
#tab-admin-pricetracking .pt-bd-field input:focus,
#tab-admin-pricetracking .pt-real-field input:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
html[data-theme="dark"] #tab-admin-pricetracking .pt-bd-field input,
html[data-theme="dark"] #tab-admin-pricetracking .pt-real-field input { background:#1f2a4a; border-color:#52659a; color:#fff; }
.pt-bd-actions { flex-direction:row; gap:8px; }
.pt-bd-actions .btn { flex:1; }
.pt-bd-status { display:flex; align-items:center; gap:8px; margin:14px 0 0; padding:10px 13px; border-radius:13px; font-size:12.5px; font-weight:700; line-height:1.45; color:#51628a; background:#eef2fb; }
.pt-bd-status:empty { display:none; }
.pt-bd-status.ok { color:#0f9d58; background:#e7f8ef; }
.pt-bd-status.warn { color:#b45309; background:#fff4e0; }
html[data-theme="dark"] .pt-bd-status { background:rgba(148,163,184,.14); color:#d3dcf1; }
html[data-theme="dark"] .pt-bd-status.ok { color:#4ade80; background:rgba(16,185,129,.16); }
html[data-theme="dark"] .pt-bd-status.warn { color:#fbbf24; background:rgba(245,158,11,.16); }
.pt-real-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; align-items:end; }
.pt-real-field { display:flex; flex-direction:column; gap:6px; }

/* ---- quota meter ---- */
.pt-quota { margin-bottom:14px; }
.pt-quota:last-child { margin-bottom:0; }
.pt-quota-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; font-size:12.5px; font-weight:700; color:#51628a; }
.pt-quota-top b { font-size:15px; font-weight:900; color:var(--text-primary); }
.pt-quota-track { height:12px; border-radius:12px; background:rgba(122,138,166,.2); overflow:hidden; }
.pt-quota-track i { display:block; height:100%; width:0; border-radius:12px; background:linear-gradient(90deg, #10b981, #34d399); transition:width .5s ease; }
.pt-quota-track i.is-warn { background:linear-gradient(90deg, #f59e0b, #fbbf24); }
.pt-quota-track i.is-hot { background:linear-gradient(90deg, #ef4444, #f87171); }
html[data-theme="dark"] .pt-quota-top { color:#b9c6e6; }
html[data-theme="dark"] .pt-quota-top b { color:#fff; }

/* ---- alerts: mini stats + toolbar ---- */
.pt-mini { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.pt-mini > div { --kc:#2f6bff; display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 6px; border-radius:15px; background:#fff; border:1px solid #e1e8f6; text-align:center; }
.pt-mini b { font-size:22px; font-weight:900; line-height:1.1; letter-spacing:-.02em; color:var(--kc); }
.pt-mini span { font-size:11px; font-weight:700; color:#7a8aa6; }
html[data-theme="dark"] .pt-mini > div { background:#33426a; border-color:#52659a; }
html[data-theme="dark"] .pt-mini b { color:color-mix(in srgb, var(--kc) 55%, #fff); }
.pt-toolbar { display:flex; gap:8px; margin-bottom:14px; }
.pt-toolbar .btn { flex:1; }

/* ---- list rows (alerts + out of stock) ---- */
.pt-oos-wrap { display:block; width:100%; }
.pt-list { display:flex; flex-direction:column; gap:10px; }
.pt-item { display:flex; align-items:flex-start; gap:10px; padding:13px; border-radius:16px; background:#fff; border:1px solid #e1e8f6; }
.pt-item.pt-oos-na { background:#fff3f3; border-color:#f5cccc; box-shadow:inset 3px 0 0 #ef4444; }
.pt-item-main { flex:1; min-width:0; }
.pt-item-name { font-size:14.5px; font-weight:800; line-height:1.3; overflow-wrap:anywhere; }
.pt-item-sub { margin-top:2px; font-size:12.5px; font-weight:600; color:#6b7a99; overflow-wrap:anywhere; }
.pt-item-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.pt-tag { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; color:#51628a; background:#eef2fb; }
.pt-tag.is-amber { color:#b45309; background:#fff1d6; }
.pt-tag.is-red { color:#c2332b; background:#fde7e6; }
.pt-tag.is-blue { color:#2f6bff; background:#e6eeff; }
.pt-tag.is-green { color:#0f9d58; background:#e7f8ef; }
.pt-item-az { margin-top:11px; font-size:12px; font-weight:700; }
.pt-az-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:#51628a; }
.pt-az-ok { display:inline-flex; align-items:center; gap:8px; color:#0f9d58; }
.pt-az-na { width:20px; height:20px; margin:0; cursor:pointer; accent-color:#ef4444; }
.pt-az-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.pt-item-actions { display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.pav-users { margin-top:11px; }
.pav-users summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12px; font-weight:800; color:#2f6bff; list-style:none; }
.pav-users summary::-webkit-details-marker { display:none; }
.pav-users summary::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; }
.pav-users[open] summary::after { transform:rotate(-135deg) translate(-2px, -2px); }
.pav-users div { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding:7px 11px; border-radius:10px; font-size:12.5px; color:#51628a; background:#f1f5fd; }
.pav-users div b { color:var(--text-primary); font-weight:800; }
html[data-theme="dark"] .pt-item { background:#33426a; border-color:#52659a; }
html[data-theme="dark"] .pt-item.pt-oos-na { background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.45); }
html[data-theme="dark"] .pt-item-sub, html[data-theme="dark"] .pt-az-toggle { color:#b9c6e6; }
html[data-theme="dark"] .pt-tag { color:#d3dcf1; background:rgba(148,163,184,.18); }
html[data-theme="dark"] .pt-tag.is-amber { color:#fbbf24; background:rgba(245,158,11,.18); }
html[data-theme="dark"] .pt-tag.is-red { color:#fca5a5; background:rgba(239,68,68,.2); }
html[data-theme="dark"] .pt-tag.is-blue { color:#9db9ff; background:rgba(47,107,255,.22); }
html[data-theme="dark"] .pav-users summary { color:#9db9ff; }
html[data-theme="dark"] .pav-users div { background:rgba(15,23,42,.35); color:#d3dcf1; }
html[data-theme="dark"] .pav-users div b { color:#fff; }
.pt-mm-empty { padding:16px; border-radius:14px; border:1px dashed #cbd6ee; font-size:12.5px; font-weight:600; line-height:1.55; text-align:center; color:#7a8aa6; }
html[data-theme="dark"] .pt-mm-empty { border-color:#52659a; color:#aab7d8; }

/* ---- brand tiles ---- */
.pt-brand-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.pt-brand-item { --kc:#2f6bff; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:11px; padding:13px; min-width:0; border-radius:17px; background:#fff; border:1px solid #e1e8f6; }
.pt-brand-item::after { content:""; position:absolute; right:-20px; top:-20px; width:72px; height:72px; border-radius:50%; background:color-mix(in srgb, var(--kc) 10%, transparent); pointer-events:none; }
.pt-brand-item > * { position:relative; z-index:1; }
.pt-brand-top { display:flex; align-items:center; gap:10px; min-width:0; }
.pt-brand-av { width:40px; height:40px; flex:0 0 40px; display:inline-flex; align-items:center; justify-content:center; border-radius:13px; font-size:17px; font-weight:900; color:var(--kc); background:color-mix(in srgb, var(--kc) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kc) 24%, transparent); }
.pt-brand-id { min-width:0; }
.pt-brand-name { font-size:14.5px; font-weight:800; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-brand-meta { margin-top:1px; font-size:11.5px; font-weight:700; color:#7a8aa6; }
.pt-brand-when { display:flex; align-items:flex-start; gap:6px; margin:0; font-size:11px; font-weight:600; line-height:1.4; color:#6b7a99; }
.pt-brand-when svg { width:13px; height:13px; flex:0 0 13px; margin-top:1px; }
.pt-brand-when.is-never { color:#9aa6bf; }
.pt-brand-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.pt-brand-actions .btn { flex:1 1 auto; min-height:36px; padding:6px 10px; font-size:12px; }
html[data-theme="dark"] .pt-brand-item { background:#33426a; border-color:#52659a; }
html[data-theme="dark"] .pt-brand-av { color:color-mix(in srgb, var(--kc) 50%, #fff); }
html[data-theme="dark"] .pt-brand-meta, html[data-theme="dark"] .pt-brand-when { color:#b0bddd; }

/* ---- card footer with the track-all button ---- */
.pt-foot { display:flex; flex-direction:column; gap:8px; margin-top:14px; padding-top:14px; border-top:1px dashed #d3dcf0; }
.pt-foot span { font-size:12px; font-weight:600; text-align:center; color:#7a8aa6; }
html[data-theme="dark"] .pt-foot { border-top-color:#52659a; }

/* ---- live progress ---- */
.pt-progress-wrap { margin:0 0 14px; padding:14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; }
.pt-progress-text { margin-bottom:10px; font-size:13px; font-weight:800; color:var(--text-primary); }
.pt-progress-bar { height:12px; border-radius:12px; background:rgba(122,138,166,.2); overflow:hidden; }
.pt-progress-bar-fill { height:100%; border-radius:12px; background:linear-gradient(90deg, #2f6bff, #5b5bf0); transition:width .25s ease; }
.pt-progress-summary { margin-top:10px; font-size:12.5px; font-weight:600; color:#6b7a99; }
.pt-progress-summary:empty { display:none; }
html[data-theme="dark"] .pt-progress-wrap { background:#2a3759; border-color:#485a8a; }

/* ---- result report ---- */
.pt-result-card { margin:0 0 14px; padding:14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; }
html[data-theme="dark"] .pt-result-card { background:#2a3759; border-color:#485a8a; }
.pt-result-head { margin-bottom:12px; }
.pt-result-head .pt-mm-title { flex:1; margin:0; min-width:0; font-size:15px; font-weight:800; overflow-wrap:anywhere; }
.pt-result-head .pt-mm-meta { flex:0 0 100%; order:5; margin:-2px 0 0 42px; font-size:11.5px; font-weight:600; font-style:normal; color:#7a8aa6; }
.pt-result-head .pt-mm-meta:empty { display:none; }
.pt-result-head { flex-wrap:wrap; }
.pt-result-summary { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.pt-result-summary:empty { display:none; }
.pt-sum { padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:800; }
.pt-sum-up { color:#c2332b; background:#fde7e6; }
.pt-sum-down { color:#0f9d58; background:#e7f8ef; }
.pt-sum-same { color:#2f6bff; background:#e6eeff; }
.pt-sum-fail { color:#5b6678; background:#e9edf3; }
.pt-result-btnrow { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.pt-result-btnrow .btn { flex:1 1 auto; }
.pt-res-section { margin-bottom:16px; }
.pt-res-section-head { display:flex; align-items:center; gap:8px; margin:2px 0 9px; padding:0; border:0; font-size:12.5px; font-weight:800; color:var(--text-primary); }
.pt-res-section-head::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.pt-res-section-head .pt-res-section-count { margin-left:auto; padding:1px 9px; border-radius:999px; font-size:11px; font-weight:800; color:#7a8aa6; background:rgba(122,138,166,.16); }
.pt-res-section-up .pt-res-section-head { color:#e5484d; }
.pt-res-section-down .pt-res-section-head { color:#0ea371; }
.pt-res-section-same .pt-res-section-head { color:#2f6bff; }
.pt-res-section-fail .pt-res-section-head { color:#7b8798; }
.pt-res-row { margin-bottom:8px; padding:12px 13px; border-radius:15px; border:1px solid #e1e8f6; border-left-width:4px; background:#fff; }
.pt-res-up { border-left-color:#e5484d; }
.pt-res-down { border-left-color:#10b981; }
.pt-res-same { border-left-color:#2f6bff; }
.pt-res-fail { border-left-color:#9aa6bf; }
.pt-res-name { font-size:14px; font-weight:800; line-height:1.3; }
.pt-res-variant { margin:2px 0 8px; font-size:12px; font-weight:600; color:#6b7a99; }
.pt-res-prices { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px; font-size:14px; }
.pt-res-old { font-weight:600; color:#8b9ab6; text-decoration:line-through; text-decoration-thickness:1px; }
.pt-res-new { font-size:16px; font-weight:900; letter-spacing:-.01em; }
.pt-res-diff { margin-left:2px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:800; background:rgba(122,138,166,.14); }
.pt-res-up .pt-res-diff { background:#fde7e6; }
.pt-res-down .pt-res-diff { background:#e7f8ef; }
.pt-res-same .pt-res-diff { background:#e6eeff; }
.pt-res-status { margin-top:8px; font-size:12px; font-weight:600; color:#6b7a99; }
.pt-res-oos { margin-top:6px; font-size:12px; font-weight:700; color:#c2410c; }
.pt-res-cands { margin-top:5px; font-size:11px; font-weight:500; color:#8b9ab6; word-break:break-word; }
#tab-admin-pricetracking .btn.pt-debug-btn { min-height:32px; margin-top:10px; padding:5px 12px; font-size:11.5px; color:#3d4f72; background:transparent; border:1px solid #dbe4f5; box-shadow:none; }
.pt-debug-box { margin-top:12px; padding:12px; border-radius:15px; border:1px dashed #b9c6e3; background:rgba(255,255,255,.5); }
.pt-debug-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; }
.pt-debug-head > span { display:inline-flex; gap:6px; }
.pt-debug-box textarea { width:100%; box-sizing:border-box; padding:10px; border-radius:11px; border:1px solid #dbe4f5; background:#fff; color:var(--text-primary); font:11px/1.45 ui-monospace, Menlo, monospace; }
html[data-theme="dark"] .pt-res-row { background:#33426a; border-color:#52659a; border-left-color:inherit; }
html[data-theme="dark"] .pt-res-up { border-left-color:#e5484d; }
html[data-theme="dark"] .pt-res-down { border-left-color:#10b981; }
html[data-theme="dark"] .pt-res-same { border-left-color:#2f6bff; }
html[data-theme="dark"] .pt-res-fail { border-left-color:#9aa6bf; }
html[data-theme="dark"] .pt-res-variant, html[data-theme="dark"] .pt-res-status { color:#b0bddd; }
html[data-theme="dark"] .pt-res-old { color:#93a2c6; }
html[data-theme="dark"] .pt-sum-up { color:#fca5a5; background:rgba(239,68,68,.2); }
html[data-theme="dark"] .pt-sum-down { color:#4ade80; background:rgba(16,185,129,.18); }
html[data-theme="dark"] .pt-sum-same { color:#9db9ff; background:rgba(47,107,255,.22); }
html[data-theme="dark"] .pt-sum-fail { color:#cbd5e1; background:rgba(148,163,184,.18); }
html[data-theme="dark"] .pt-debug-box { background:rgba(15,23,42,.3); border-color:#52659a; }
html[data-theme="dark"] .pt-debug-box textarea { background:#1f2a4a; border-color:#52659a; }
html[data-theme="dark"] #tab-admin-pricetracking .btn.pt-debug-btn { color:#e1e8fa; border-color:#52659a; }

/* ---- wider screens ---- */
@media (min-width:560px) {
  .pt-bd-settings-row { grid-template-columns:1fr 1fr auto; }
  .pt-real-row { grid-template-columns:1fr 1fr auto auto; }
  .pt-foot { flex-direction:row; align-items:center; }
  #tab-admin-pricetracking .btn.pt-go { width:auto; min-width:220px; }
  .pt-foot span { text-align:left; }
}
@media (min-width:760px) {
  .pt-brand-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .pt-item { align-items:center; }
}
@media (min-width:1040px) { .pt-brand-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:340px) { .pt-brand-grid { grid-template-columns:1fr; } }

/* tile polish */
.pt-brand-top { gap:9px; }
.pt-brand-av { width:36px; height:36px; flex:0 0 36px; border-radius:12px; font-size:16px; }
.pt-brand-name { font-size:14px; text-overflow:clip; }
.pt-brand-actions .btn { flex:1 1 calc(50% - 3px); min-width:0; }
.pt-brand-actions .btn.pt-brand-apply { order:3; flex-basis:100%; }


/* =====================================================================
   Admin · Add phone — same visual language as Dashboard / Price Tracking
   ===================================================================== */
#tab-admin-add .ad-sec-title { margin:18px 2px 10px; }
#tab-admin-add .ad-sec-title:first-child { margin-top:6px; }
#tab-admin-add .ad-addform { display:block; max-width:none; width:100%; }
#tab-admin-add .ad-addcard { margin-bottom:14px; min-width:0; }
#tab-admin-add .ad-card-ico { color:var(--kc, #2f6bff); background:color-mix(in srgb, var(--kc, #2f6bff) 14%, transparent); }
html[data-theme="dark"] #tab-admin-add .ad-card-ico { color:color-mix(in srgb, var(--kc, #2f6bff) 55%, #fff); }
#tab-admin-add .ad-card-head h3 { font-size:15px; font-weight:800; letter-spacing:0; }

/* field grid */
.ad-fgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; min-width:0; }
.ad-fgrid > .form-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ad-fgrid > .form-group.full, .ad-fgrid > .phx4-variant-box { grid-column:1 / -1; }
@media (min-width:760px) { .ad-fgrid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
#tab-admin-add .ad-fgrid > .form-group > label { font-size:12px; font-weight:800; color:#51628a; }
html[data-theme="dark"] #tab-admin-add .ad-fgrid > .form-group > label { color:#b9c6e6; }
#tab-admin-add .ad-fgrid > .form-group > input,
#tab-admin-add .ad-fgrid > .form-group > select { width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:46px; padding:0 14px; border-radius:13px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; }
#tab-admin-add .ad-fgrid > .form-group > select { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8aa6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
#tab-admin-add .ad-fgrid > .form-group > textarea { width:100%; max-width:100%; box-sizing:border-box; padding:12px 14px; border-radius:13px; font-size:14px; font-weight:500; line-height:1.55; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; resize:vertical; font-family:var(--font); }
#tab-admin-add .ad-fgrid > .form-group > input::placeholder,
#tab-admin-add .ad-fgrid > .form-group > textarea::placeholder { color:#9aa8c4; font-weight:500; }
#tab-admin-add .ad-fgrid > .form-group > input:focus,
#tab-admin-add .ad-fgrid > .form-group > select:focus,
#tab-admin-add .ad-fgrid > .form-group > textarea:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
html[data-theme="dark"] #tab-admin-add .ad-fgrid > .form-group > input,
html[data-theme="dark"] #tab-admin-add .ad-fgrid > .form-group > select,
html[data-theme="dark"] #tab-admin-add .ad-fgrid > .form-group > textarea { background:#1f2a4a; border-color:#52659a; color:#fff; }
html[data-theme="dark"] #tab-admin-add .ad-fgrid > .form-group > input::placeholder,
html[data-theme="dark"] #tab-admin-add .ad-fgrid > .form-group > textarea::placeholder { color:#7f90b8; }
.ad-colors-prev { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.ad-colors-prev:empty { display:none; }

/* collapsible advanced card */
.ad-adv > summary { list-style:none; cursor:pointer; margin-bottom:0; }
.ad-adv > summary::-webkit-details-marker { display:none; }
.ad-adv[open] > summary { margin-bottom:14px; }
.ad-adv .ad-chev { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:9px; color:#7a8aa6; background:rgba(122,138,166,.14); transition:transform .18s ease; }
.ad-adv .ad-chev svg { width:16px; height:16px; }
.ad-adv[open] .ad-chev { transform:rotate(180deg); }

/* videos + buttons */
.ad-videos { display:flex; flex-direction:column; gap:10px; width:100%; max-width:100%; box-sizing:border-box; overflow-x:hidden; }
.ad-videos:not(:empty) { margin-bottom:10px; }
#tab-admin-add .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 16px; border-radius:13px; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.2; color:#fff; background:linear-gradient(135deg, #2f6bff, #5b5bf0); border:1px solid transparent; box-shadow:0 6px 14px rgba(47,107,255,.26); cursor:pointer; }
#tab-admin-add .btn svg { width:16px; height:16px; flex:0 0 16px; }
#tab-admin-add .btn:active { transform:scale(.97); }
#tab-admin-add .btn.btn-sm { min-height:38px; padding:7px 13px; font-size:12.5px; }
#tab-admin-add .btn.btn-outline { color:#3d4f72; background:#fff; border-color:#dbe4f5; box-shadow:none; }
html[data-theme="dark"] #tab-admin-add .btn.btn-outline { color:#e1e8fa; background:#33426a; border-color:#52659a; }
.ad-addrow { width:100%; }

/* submit */
.ad-submit { padding:4px 0 6px; }
#tab-admin-add .btn.ad-submit-btn { width:100%; min-height:50px; font-size:15px; border-radius:15px; background:linear-gradient(135deg, #0ea371, #10b981); box-shadow:0 8px 18px rgba(16,185,129,.28); }
#tab-admin-add .btn.ad-submit-btn svg { width:18px; height:18px; flex-basis:18px; }
#tab-admin-add .btn.btn-danger { color:#fff; background:linear-gradient(135deg, #e5484d, #f26a6e); box-shadow:0 6px 14px rgba(239,68,68,.24); }
#tab-admin-add .phx4-video-row { border-radius:14px !important; border-color:#dbe4f5 !important; background:#fff !important; }
html[data-theme="dark"] #tab-admin-add .phx4-video-row { background:#33426a !important; border-color:#52659a !important; }


/* Add phone · variants & extra details */
#addExtrasSlot { display:block; min-width:0; }
.ad-xgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.ad-xgrid > .form-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ad-xgrid > .form-group.full { grid-column:1 / -1; }
@media (min-width:760px) { .ad-xgrid { grid-template-columns:repeat(3, minmax(0,1fr)); } .ad-xgrid > .form-group.full { grid-column:auto; } }
.ad-xgrid > .form-group > label { font-size:12px; font-weight:800; color:#51628a; }
html[data-theme="dark"] .ad-xgrid > .form-group > label { color:#b9c6e6; }
.ad-xgrid input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:46px; padding:0 14px; border-radius:13px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; font-family:var(--font); }
.ad-xgrid input::placeholder { color:#9aa8c4; font-weight:500; }
.ad-xgrid input:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
html[data-theme="dark"] .ad-xgrid input { background:#1f2a4a; border-color:#52659a; color:#fff; }
.ad-vhead { display:flex; align-items:center; gap:8px; margin:2px 2px 10px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }
.ad-vhead::after { content:""; flex:1; height:1px; background:rgba(122,138,166,.28); }

#addVariantsBox { display:flex; flex-direction:column; gap:12px; }
#addVariantsBox .phx4-variant-row { position:relative; display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; background:#fff; border:1px solid #dbe4f5; box-shadow:0 2px 8px rgba(30,60,120,.04); }
html[data-theme="dark"] #addVariantsBox .phx4-variant-row { background:#33426a; border-color:#52659a; box-shadow:none; }
#addVariantsBox .phx4-variant-row-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px; grid-template-areas:"label label rm" "color price price"; gap:8px; align-items:center; }
#addVariantsBox .phx4-var-label { grid-area:label; }
#addVariantsBox .phx4-var-color { grid-area:color; }
#addVariantsBox .phx4-var-price { grid-area:price; }
#addVariantsBox .phx4-var-remove { grid-area:rm; width:42px; height:42px; border-radius:12px; font-size:15px; color:#e5484d; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.28); }
#addVariantsBox .phx4-variant-row input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; flex:none; height:42px; padding:0 12px; border-radius:12px; font-size:13.5px; font-weight:600; color:var(--text-primary); background:#f6f9ff; border:1px solid #dbe4f5; }
html[data-theme="dark"] #addVariantsBox .phx4-variant-row input { background:#1f2a4a; border-color:#52659a; color:#fff; }
#addVariantsBox .phx4-variant-row input::placeholder { color:#9aa8c4; font-weight:500; }
#addVariantsBox .phx4-variant-row input:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
#addVariantsBox .phx4-var-flipkart { border-left:3px solid #2f6bff !important; }
#addVariantsBox .phx4-var-amazon { border-left:3px solid #f59e0b !important; }
.ad-xadd { width:100%; margin-top:12px; min-height:44px; border-radius:13px; font-size:13px; font-weight:800; color:#2f6bff; background:transparent; border:1.5px dashed #2f6bff; cursor:pointer; }
.ad-xadd:active { transform:scale(.98); }
html[data-theme="dark"] .ad-xadd { color:#9db9ff; border-color:#6f8fe0; }


/* =====================================================================
   Admin · Manage phones — same visual language as Dashboard / Price Tracking
   ===================================================================== */
.ad-mstats { margin-bottom:12px; }
.ad-mstats button { --kc:#2f6bff; display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 6px; border-radius:15px; background:#fff; border:1.5px solid #e1e8f6; text-align:center; cursor:pointer; font-family:inherit; }
.ad-mstats button b { font-size:22px; font-weight:900; line-height:1.1; letter-spacing:-.02em; color:var(--kc); }
.ad-mstats button span { font-size:11px; font-weight:700; color:#7a8aa6; }
.ad-mstats button.on { border-color:var(--kc); background:color-mix(in srgb, var(--kc) 9%, #fff); box-shadow:0 0 0 3px color-mix(in srgb, var(--kc) 14%, transparent); }
.ad-mstats button:active { transform:scale(.97); }
html[data-theme="dark"] .ad-mstats button { background:#33426a; border-color:#52659a; }
html[data-theme="dark"] .ad-mstats button b { color:color-mix(in srgb, var(--kc) 55%, #fff); }
html[data-theme="dark"] .ad-mstats button.on { background:color-mix(in srgb, var(--kc) 22%, #33426a); border-color:color-mix(in srgb, var(--kc) 60%, #fff); }

.ad-search { position:relative; display:block; margin-bottom:14px; }
.ad-search svg { position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:#7a8aa6; pointer-events:none; }
.ad-search input { width:100%; box-sizing:border-box; height:46px; padding:0 14px 0 42px; border-radius:14px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; font-family:var(--font); }
.ad-search input::placeholder { color:#9aa8c4; font-weight:500; }
.ad-search input:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
html[data-theme="dark"] .ad-search input { background:#1f2a4a; border-color:#52659a; color:#fff; }

.ad-plist { display:flex; flex-direction:column; gap:10px; }
.ad-prow { position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:16px; background:#fff; border:1px solid #e1e8f6; box-shadow:0 2px 8px rgba(30,60,120,.04); }
.ad-prow.is-bad { box-shadow:inset 3px 0 0 #ef4444, 0 2px 8px rgba(30,60,120,.04); }
.ad-prow.is-ok { box-shadow:inset 3px 0 0 #10b981, 0 2px 8px rgba(30,60,120,.04); }
.ad-pthumb { width:52px; height:52px; flex:0 0 52px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:24px; overflow:hidden; background:#eef2fb; border:1px solid #e1e8f6; }
.ad-pthumb img { width:100%; height:100%; object-fit:contain; background:#fff; }
.ad-pmain { flex:1; min-width:0; }
.ad-pname { font-size:14.5px; font-weight:800; line-height:1.3; overflow-wrap:anywhere; color:var(--text-primary); }
.ad-pname small { display:block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a8aa6; margin-bottom:1px; }
.ad-pmeta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px; }
.ad-pmeta b { font-size:13.5px; font-weight:900; color:#2f6bff; }
.ad-pchip { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; cursor:help; }
.ad-pchip.ok { color:#0f9d58; background:#e7f8ef; }
.ad-pchip.bad { color:#c2332b; background:#fde7e6; }
.ad-pmiss { margin-top:5px; font-size:11.5px; font-weight:600; line-height:1.4; color:#8b9ab6; overflow-wrap:anywhere; }
.ad-prow .ph-admin-row-menu { flex:0 0 auto; }
.ad-prow .ph-admin-row-menu-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; padding:0; border-radius:12px; color:#51628a; background:#f1f5fd; border:1px solid #dbe4f5; cursor:pointer; }
.ad-prow .ph-admin-row-menu-btn svg { width:18px; height:18px; }
.ad-prow .ph-admin-row-menu-btn:active { transform:scale(.94); }
.ad-prow .ph-admin-row-menu-dropdown { border-radius:14px; border:1px solid #dbe4f5; box-shadow:0 14px 36px rgba(30,60,120,.2); overflow:hidden; min-width:160px; }
.ad-prow .ph-admin-row-menu-dropdown button { padding:11px 16px; font-size:13.5px; font-weight:700; }
.ad-pempty { padding:26px 14px; text-align:center; font-size:13px; font-weight:600; color:#7a8aa6; border-radius:16px; border:1.5px dashed #dbe4f5; }
html[data-theme="dark"] .ad-prow { background:#33426a; border-color:#52659a; }
html[data-theme="dark"] .ad-pthumb { background:#2a3759; border-color:#52659a; }
html[data-theme="dark"] .ad-pmeta b { color:#9db9ff; }
html[data-theme="dark"] .ad-pchip.ok { color:#4ade80; background:rgba(16,185,129,.16); }
html[data-theme="dark"] .ad-pchip.bad { color:#fca5a5; background:rgba(239,68,68,.2); }
html[data-theme="dark"] .ad-pmiss, html[data-theme="dark"] .ad-pname small { color:#aab7d8; }
html[data-theme="dark"] .ad-prow .ph-admin-row-menu-btn { color:#e1e8fa; background:#2a3759; border-color:#52659a; }
html[data-theme="dark"] .ad-prow .ph-admin-row-menu-dropdown { background:#2a3759; border-color:#52659a; }
html[data-theme="dark"] .ad-prow .ph-admin-row-menu-dropdown button { color:#fff; }
html[data-theme="dark"] .ad-prow .ph-admin-row-menu-dropdown button:hover { background:#33426a; }
html[data-theme="dark"] .ad-prow .ph-admin-row-menu-dropdown button.danger { color:#fca5a5; }
html[data-theme="dark"] .ad-pempty { border-color:#52659a; color:#aab7d8; }
@media (min-width:760px) { .ad-plist { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); } }


/* =====================================================================
   Admin · Spreadsheet — same visual language as Dashboard / Price Tracking / Manage
   (markup hooks unchanged: #phx4SheetTable, td[data-field], .phx4-sheet-save-btn …)
   ===================================================================== */
#phx4SheetContainer .ad-search { margin-bottom:12px; }

.ad-sh-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ad-sh-count { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:800; color:#2f6bff; background:#eaf0ff; border:1px solid #cfdcff; }
.ad-sh-count b { font-size:14px; font-weight:900; }
.ad-sh-unsaved { display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:800; color:#b45309 !important; background:#fff3dc !important; border:1px solid #fbd38d; }

.ad-sh-actions { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.ad-sh-btn { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 8px; border-radius:14px; font-family:inherit; font-size:12.5px; font-weight:800; color:#51628a; background:#fff; border:1.5px solid #e1e8f6; cursor:pointer; white-space:nowrap; }
.ad-sh-btn svg { width:17px; height:17px; flex:0 0 17px; }
.ad-sh-btn:active { transform:scale(.97); }
.ad-sh-btn.is-save { color:#fff; border-color:transparent; background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 8px 18px rgba(16,185,129,.28); }
@media (max-width:380px) { .ad-sh-btn span { font-size:11.5px; } }

.ad-sh-hint { margin-bottom:14px; border-radius:16px; background:#f6f9ff; border:1px solid #e1e8f6; overflow:hidden; }
.ad-sh-hint summary { display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer; list-style:none; font-size:12.5px; font-weight:800; color:#51628a; }
.ad-sh-hint summary::-webkit-details-marker { display:none; }
.ad-sh-hint summary svg { width:18px; height:18px; flex:0 0 18px; color:#2f6bff; }
.ad-sh-hint summary::after { content:"›"; margin-left:auto; font-size:20px; line-height:1; color:#7a8aa6; transition:transform .2s; }
.ad-sh-hint[open] summary::after { transform:rotate(90deg); }
.ad-sh-hint-body { padding:0 14px 13px; font-size:12px; font-weight:500; line-height:1.65; color:#6b7a99; }
.ad-sh-hint-body code { font-size:11.5px; padding:1px 6px; border-radius:6px; background:#e9efff; color:#3558c7; overflow-wrap:anywhere; }

.ad-sh-scroll { border-radius:20px !important; border:1px solid #e1e8f6 !important; background:#fff; box-shadow:0 4px 16px rgba(30,60,120,.07) !important; max-height:72vh; }
#phx4SheetTable { font-size:13px; }
#phx4SheetTable th, #phx4SheetTable td { border:0; border-bottom:1px solid #edf1f9; padding:12px 14px; vertical-align:middle; }
#phx4SheetTable thead th { background:linear-gradient(135deg,#2f6bff,#5b5bf0) !important; color:#fff !important; font-size:10.5px; font-weight:800; letter-spacing:.09em; border-bottom:0; box-shadow:none; padding:13px 14px; }
#phx4SheetTable tbody tr:nth-child(odd) td, #phx4SheetTable tbody tr:nth-child(even) td { background:#fff; }
#phx4SheetTable tbody tr:hover td { background:#f4f7ff; }
#phx4SheetTable tbody tr:last-child td { border-bottom:0; }
#phx4SheetTable td[contenteditable="true"]:focus { outline:2px solid #2f6bff; outline-offset:-2px; border-radius:6px; background:#fff !important; color:#0f172a !important; box-shadow:0 0 0 4px rgba(47,107,255,.14); }
#phx4SheetTable td[data-field="brand"] { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a8aa6; }
#phx4SheetTable td[data-field="model"] { font-weight:800; color:var(--text-primary); }
#phx4SheetTable td[data-field="price"] { font-weight:900; color:#2f6bff; }
#phx4SheetTable tbody tr.phx4-row-dirty td { background:#fff6e5 !important; }
#phx4SheetTable tbody tr.phx4-row-dirty td.phx4-sheet-sticky { box-shadow:inset 3px 0 0 #f59e0b; }

#phx4SheetTable .phx4-sheet-sticky { position:sticky; left:0; z-index:3; width:92px; min-width:92px; padding:8px 10px; text-align:center; background:#fff !important; border-right:1px solid #e1e8f6; }
#phx4SheetTable thead .phx4-sheet-sticky { z-index:5; background:linear-gradient(135deg,#2f6bff,#4a62f3) !important; border-right:0; }
#phx4SheetTable tbody tr:hover td.phx4-sheet-sticky { background:#f4f7ff !important; }
#phx4SheetTable tbody tr.phx4-row-dirty td.phx4-sheet-sticky { background:#fff6e5 !important; }
.phx4-sheet-actions { display:flex; gap:8px; justify-content:center; align-items:center; }
#phx4SheetTable .phx4-sheet-save-btn, #phx4SheetTable .phx4-sheet-del-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:11px; font-size:14px; box-shadow:none; border:1px solid transparent; padding:0; }
#phx4SheetTable .phx4-sheet-save-btn { color:#0f9d58; background:#e7f8ef; border-color:#bfead2; }
#phx4SheetTable .phx4-sheet-save-btn.phx4-needs-save { color:#fff; background:#f59e0b; border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.25); }
#phx4SheetTable .phx4-sheet-del-btn { color:#e5484d; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.28); }
#phx4SheetTable .phx4-sheet-save-btn:hover, #phx4SheetTable .phx4-sheet-del-btn:hover { transform:none; }
#phx4SheetTable .phx4-sheet-save-btn:active, #phx4SheetTable .phx4-sheet-del-btn:active { transform:scale(.92); }

/* dark theme */
html[data-theme="dark"] .ad-sh-count { color:#9db9ff; background:rgba(47,107,255,.2); border-color:#52659a; }
html[data-theme="dark"] .ad-sh-unsaved { color:#fcd34d !important; background:rgba(245,158,11,.18) !important; border-color:rgba(245,158,11,.4); }
html[data-theme="dark"] .ad-sh-btn { color:#e1e8fa; background:#33426a; border-color:#52659a; }
html[data-theme="dark"] .ad-sh-btn.is-save { color:#fff; background:linear-gradient(135deg,#10b981,#059669); border-color:transparent; }
html[data-theme="dark"] .ad-sh-hint { background:#2a3759; border-color:#52659a; }
html[data-theme="dark"] .ad-sh-hint summary { color:#e1e8fa; }
html[data-theme="dark"] .ad-sh-hint summary svg { color:#9db9ff; }
html[data-theme="dark"] .ad-sh-hint-body { color:#b9c6e6; }
html[data-theme="dark"] .ad-sh-hint-body code { background:#1f2a4a; color:#9db9ff; }
html[data-theme="dark"] .ad-sh-scroll { background:#33426a; border-color:#52659a !important; box-shadow:none !important; }
html[data-theme="dark"] #phx4SheetTable th, html[data-theme="dark"] #phx4SheetTable td { border-bottom-color:#46568a; }
html[data-theme="dark"] #phx4SheetTable tbody tr:nth-child(odd) td, html[data-theme="dark"] #phx4SheetTable tbody tr:nth-child(even) td { background:#33426a; color:#fff; }
html[data-theme="dark"] #phx4SheetTable tbody tr:hover td { background:#3b4b78; }
html[data-theme="dark"] #phx4SheetTable td[data-field="brand"] { color:#aab7d8; }
html[data-theme="dark"] #phx4SheetTable td[data-field="price"] { color:#9db9ff; }
html[data-theme="dark"] #phx4SheetTable tbody tr.phx4-row-dirty td { background:rgba(245,158,11,.2) !important; }
html[data-theme="dark"] #phx4SheetTable .phx4-sheet-sticky { background:#2a3759 !important; border-right-color:#52659a; }
html[data-theme="dark"] #phx4SheetTable tbody tr:hover td.phx4-sheet-sticky { background:#33426a !important; }
html[data-theme="dark"] #phx4SheetTable tbody tr.phx4-row-dirty td.phx4-sheet-sticky { background:#4a3f2a !important; }
html[data-theme="dark"] #phx4SheetTable .phx4-sheet-save-btn { color:#4ade80; background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.4); }
html[data-theme="dark"] #phx4SheetTable .phx4-sheet-del-btn { color:#fca5a5; background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.4); }


/* =====================================================================
   Admin · News — same visual language as Dashboard / Price Tracking / Add / Manage
   (IDs and JS hooks unchanged; only structure into cards + styling)
   ===================================================================== */
#tab-admin-news .ad-sec-title { margin:6px 2px 10px; }
#tab-admin-news .ad-addform { display:block; max-width:none; width:100%; }
#tab-admin-news .ad-addcard { margin-bottom:14px; min-width:0; }
#tab-admin-news .ad-card-ico { color:var(--kc, #2f6bff); background:color-mix(in srgb, var(--kc, #2f6bff) 14%, transparent); }
html[data-theme="dark"] #tab-admin-news .ad-card-ico { color:color-mix(in srgb, var(--kc, #2f6bff) 55%, #fff); }
#tab-admin-news .ad-card-head h3 { font-size:15px; font-weight:800; letter-spacing:0; }

#tab-admin-news .ad-fgrid > .form-group > label { font-size:12px; font-weight:800; color:#51628a; }
html[data-theme="dark"] #tab-admin-news .ad-fgrid > .form-group > label { color:#b9c6e6; }
#tab-admin-news .ad-fgrid > .form-group > input:not([type="checkbox"]),
#tab-admin-news .ad-fgrid > .form-group > select,
#tab-admin-news .news-img-row input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:46px; padding:0 14px; border-radius:13px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; font-family:var(--font); }
#tab-admin-news .ad-fgrid > .form-group > select { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8aa6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
#tab-admin-news .ad-fgrid > .form-group > textarea { width:100%; max-width:100%; box-sizing:border-box; padding:12px 14px; border-radius:13px; font-size:14px; font-weight:500; line-height:1.55; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; resize:vertical; font-family:var(--font); }
#tab-admin-news .ad-fgrid > .form-group > input::placeholder,
#tab-admin-news .ad-fgrid > .form-group > textarea::placeholder,
#tab-admin-news .news-img-row input::placeholder { color:#9aa8c4; font-weight:500; }
#tab-admin-news .ad-fgrid > .form-group > input:focus,
#tab-admin-news .ad-fgrid > .form-group > select:focus,
#tab-admin-news .ad-fgrid > .form-group > textarea:focus,
#tab-admin-news .news-img-row input:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
html[data-theme="dark"] #tab-admin-news .ad-fgrid > .form-group > input:not([type="checkbox"]),
html[data-theme="dark"] #tab-admin-news .ad-fgrid > .form-group > select,
html[data-theme="dark"] #tab-admin-news .ad-fgrid > .form-group > textarea,
html[data-theme="dark"] #tab-admin-news .news-img-row input { background:#1f2a4a; border-color:#52659a; color:#fff; }
html[data-theme="dark"] #tab-admin-news .ad-fgrid > .form-group > input::placeholder,
html[data-theme="dark"] #tab-admin-news .ad-fgrid > .form-group > textarea::placeholder,
html[data-theme="dark"] #tab-admin-news .news-img-row input::placeholder { color:#7f90b8; }
html[data-theme="dark"] #tab-admin-news input[type="date"] { color-scheme:dark; }

/* invalid state keeps working with the new borders */
#tab-admin-news .form-group.news-invalid input,
#tab-admin-news .form-group.news-invalid textarea,
#tab-admin-news .form-group.news-invalid select { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.14) !important; }

#tab-admin-news .news-hint { font-size:11.5px; font-weight:600; color:#8b9ab6; }
#tab-admin-news .news-hint-full { grid-column:1 / -1; margin-top:-2px; }
#tab-admin-news .news-opt { font-weight:500; color:#8b9ab6; }
html[data-theme="dark"] #tab-admin-news .news-hint, html[data-theme="dark"] #tab-admin-news .news-opt { color:#aab7d8; }

#tab-admin-news .news-img-row { display:flex; gap:10px; align-items:center; }
#tab-admin-news .news-img-preview { width:78px; height:58px; border-radius:13px; border:1.5px dashed #cdd8ee; background:#f1f5fd; font-weight:700; color:#8b9ab6; }
html[data-theme="dark"] #tab-admin-news .news-img-preview { background:#2a3759; border-color:#52659a; color:#aab7d8; }

/* featured switch as a tappable tile */
#tab-admin-news .form-group .news-switch { display:flex; width:100%; box-sizing:border-box; gap:12px; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid #dbe4f5; font-size:13.5px; font-weight:700; color:var(--text-primary); }
#tab-admin-news .news-switch-track { width:44px; height:26px; background:#cdd8ee; }
#tab-admin-news .news-switch-track::after { top:3px; left:3px; width:20px; height:20px; }
#tab-admin-news .news-switch input:checked + .news-switch-track { background:linear-gradient(135deg,#2f6bff,#5b5bf0); }
#tab-admin-news .news-switch input:checked + .news-switch-track::after { transform:translateX(18px); }
html[data-theme="dark"] #tab-admin-news .form-group .news-switch { background:#1f2a4a; border-color:#52659a; }
html[data-theme="dark"] #tab-admin-news .news-switch-track { background:#52659a; }

/* edit banner + preview */
#tab-admin-news .news-edit-banner { margin-bottom:12px; padding:11px 14px; border-radius:15px; background:#eaf0ff; border:1px solid #cfdcff; font-size:13px; font-weight:700; color:#2c4aa8; }
html[data-theme="dark"] #tab-admin-news .news-edit-banner { background:rgba(47,107,255,.18); border-color:#52659a; color:#cfdcff; }
#tab-admin-news .news-preview { margin-top:14px; padding:6px 14px 12px; border-radius:18px; border:1.5px dashed #cdd8ee; background:#fff; }
html[data-theme="dark"] #tab-admin-news .news-preview { background:#2a3759; border-color:#52659a; }

/* buttons */
#tab-admin-news .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 14px; border-radius:13px; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.2; color:#fff; background:linear-gradient(135deg,#2f6bff,#5b5bf0); border:1px solid transparent; box-shadow:0 6px 14px rgba(47,107,255,.26); cursor:pointer; }
#tab-admin-news .btn:active { transform:scale(.97); }
#tab-admin-news .btn.btn-sm { min-height:38px; padding:7px 13px; font-size:12.5px; }
#tab-admin-news .btn.btn-outline { color:#3d4f72; background:#fff; border-color:#dbe4f5; box-shadow:none; }
html[data-theme="dark"] #tab-admin-news .btn.btn-outline { color:#e1e8fa; background:#33426a; border-color:#52659a; }
#tab-admin-news .news-actions { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:4px; }
#tab-admin-news .btn.ad-submit-btn { grid-column:1 / -1; width:100%; min-height:50px; font-size:15px; border-radius:15px; background:linear-gradient(135deg,#0ea371,#10b981); box-shadow:0 8px 18px rgba(16,185,129,.28); }
@media (max-width:380px) { #tab-admin-news .news-actions .btn:not(.ad-submit-btn) { font-size:12px; padding:9px 6px; } }

/* list of existing news */
.ad-news-listtitle { margin-top:26px !important; }
.ad-nrow.is-draft { box-shadow:inset 3px 0 0 #f59e0b, 0 2px 8px rgba(30,60,120,.04); }
.ad-nrow .ad-pname small { text-transform:none; letter-spacing:.02em; font-size:11px; }
.ad-pchip.draft { color:#b45309; background:#fff3dc; cursor:default; }
.ad-pchip.feat { color:#2f6bff; background:#eaf0ff; cursor:default; }
html[data-theme="dark"] .ad-pchip.draft { color:#fcd34d; background:rgba(245,158,11,.18); }
html[data-theme="dark"] .ad-pchip.feat { color:#9db9ff; background:rgba(47,107,255,.2); }
.ad-nacts { display:flex; gap:8px; flex:0 0 auto; }
.ad-nbtn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:12px; font-size:15px; color:#51628a; background:#f1f5fd; border:1px solid #dbe4f5; cursor:pointer; }
.ad-nbtn.is-del { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.28); }
.ad-nbtn:active { transform:scale(.92); }
html[data-theme="dark"] .ad-nbtn { background:#2a3759; border-color:#52659a; }
html[data-theme="dark"] .ad-nbtn.is-del { background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.4); }
@media (max-width:380px) { .ad-nacts { flex-direction:column; gap:6px; } }


/* =====================================================================
   Admin · Notify / Community / Feedback — same visual language as the other admin tabs
   (all ids / JS hooks unchanged)
   ===================================================================== */

/* ---- shared form look for Notify + Community (mirrors Add / News) ---- */
#tab-admin-notify .ad-sec-title, #tab-admin-community .ad-sec-title { margin:6px 2px 10px; }
#tab-admin-notify .ad-addform, #tab-admin-community .ad-addform { display:block; max-width:none; width:100%; }
#tab-admin-notify .ad-addcard, #tab-admin-community .ad-addcard { margin-bottom:14px; min-width:0; }
#tab-admin-notify .ad-card-ico, #tab-admin-community .ad-card-ico { color:var(--kc, #2f6bff); background:color-mix(in srgb, var(--kc, #2f6bff) 14%, transparent); }
html[data-theme="dark"] #tab-admin-notify .ad-card-ico, html[data-theme="dark"] #tab-admin-community .ad-card-ico { color:color-mix(in srgb, var(--kc, #2f6bff) 55%, #fff); }
#tab-admin-notify .ad-card-head h3, #tab-admin-community .ad-card-head h3 { font-size:15px; font-weight:800; letter-spacing:0; }

#tab-admin-notify .ad-fgrid > .form-group > label, #tab-admin-community .ad-fgrid > .form-group > label { font-size:12px; font-weight:800; color:#51628a; }
html[data-theme="dark"] #tab-admin-notify .ad-fgrid > .form-group > label, html[data-theme="dark"] #tab-admin-community .ad-fgrid > .form-group > label { color:#b9c6e6; }
#tab-admin-notify .ad-fgrid > .form-group > input, #tab-admin-notify .ad-fgrid > .form-group > select,
#tab-admin-community .ad-fgrid > .form-group > input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:46px; padding:0 14px; border-radius:13px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; font-family:var(--font); }
#tab-admin-notify .ad-fgrid > .form-group > select { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8aa6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
#tab-admin-notify .ad-fgrid > .form-group > textarea { width:100%; max-width:100%; box-sizing:border-box; padding:12px 14px; border-radius:13px; font-size:14px; font-weight:500; line-height:1.55; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; resize:vertical; font-family:var(--font); }
#tab-admin-notify .ad-fgrid > .form-group > input::placeholder, #tab-admin-notify .ad-fgrid > .form-group > textarea::placeholder,
#tab-admin-community .ad-fgrid > .form-group > input::placeholder { color:#9aa8c4; font-weight:500; }
#tab-admin-notify .ad-fgrid > .form-group > input:focus, #tab-admin-notify .ad-fgrid > .form-group > select:focus, #tab-admin-notify .ad-fgrid > .form-group > textarea:focus,
#tab-admin-community .ad-fgrid > .form-group > input:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
html[data-theme="dark"] #tab-admin-notify .ad-fgrid > .form-group > input, html[data-theme="dark"] #tab-admin-notify .ad-fgrid > .form-group > select,
html[data-theme="dark"] #tab-admin-notify .ad-fgrid > .form-group > textarea, html[data-theme="dark"] #tab-admin-community .ad-fgrid > .form-group > input { background:#1f2a4a; border-color:#52659a; color:#fff; }
html[data-theme="dark"] #tab-admin-notify .ad-fgrid > .form-group > input::placeholder, html[data-theme="dark"] #tab-admin-notify .ad-fgrid > .form-group > textarea::placeholder,
html[data-theme="dark"] #tab-admin-community .ad-fgrid > .form-group > input::placeholder { color:#7f90b8; }

#tab-admin-notify .btn.ad-submit-btn, #tab-admin-community .btn.ad-submit-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; margin-top:4px; padding:9px 16px; border-radius:15px; font-size:15px; font-weight:800; letter-spacing:.02em; color:#fff; border:1px solid transparent; background:linear-gradient(135deg,#0ea371,#10b981); box-shadow:0 8px 18px rgba(16,185,129,.28); cursor:pointer; }
#tab-admin-notify .btn.ad-submit-btn:active, #tab-admin-community .btn.ad-submit-btn:active { transform:scale(.98); }
#tab-admin-notify .btn.ad-submit-btn:disabled { opacity:.6; box-shadow:none; }

/* ---- Notify: subscriber banner + status ---- */
#phPushAdminStats { display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:13px 15px; border-radius:16px; font-size:13px; font-weight:700; line-height:1.45; color:#2c4aa8; background:#eaf0ff; border:1px solid #cfdcff; overflow-wrap:anywhere; }
html[data-theme="dark"] #phPushAdminStats { color:#cfdcff; background:rgba(47,107,255,.18); border-color:#52659a; }
#phPushAdminStatus { margin-top:12px; font-size:13px; font-weight:700; color:#7a8aa6; }
#phPushAdminStatus:empty { display:none; }
#phPushAdminStatus[data-kind="success"] { padding:11px 14px; border-radius:14px; color:#0f9d58; background:#e7f8ef; border:1px solid #bfead2; }
#phPushAdminStatus[data-kind="error"] { padding:11px 14px; border-radius:14px; color:#c2332b; background:#fde7e6; border:1px solid #f6c1be; }
html[data-theme="dark"] #phPushAdminStatus[data-kind="success"] { color:#4ade80; background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.4); }
html[data-theme="dark"] #phPushAdminStatus[data-kind="error"] { color:#fca5a5; background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.4); }

/* ---- Community: existing polls ---- */
.ad-pollrow { align-items:flex-start; box-shadow:inset 3px 0 0 #0ea5e9, 0 2px 8px rgba(30,60,120,.04); }
.ad-pollrow .ad-pname small { text-transform:none; letter-spacing:.02em; font-size:11px; }
.ad-pollopts { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.ad-pollopt { display:grid; grid-template-columns:minmax(0,38%) 1fr 26px; align-items:center; gap:9px; font-size:12px; font-weight:700; color:#51628a; }
.ad-pollopt .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-pollopt .b { height:8px; border-radius:99px; background:#e4eaf6; overflow:hidden; }
.ad-pollopt .b i { display:block; height:100%; border-radius:99px; background:#9db9ff; }
.ad-pollopt.lead .b i { background:linear-gradient(90deg,#2f6bff,#5b5bf0); }
.ad-pollopt.lead { color:var(--text-primary); }
.ad-pollopt .c { text-align:right; font-weight:900; color:var(--text-primary); }
html[data-theme="dark"] .ad-pollopt { color:#b9c6e6; }
html[data-theme="dark"] .ad-pollopt .b { background:#46568a; }
html[data-theme="dark"] .ad-pollopt .b i { background:#6f8fe0; }
html[data-theme="dark"] .ad-pollopt.lead { color:#fff; }

/* ---- Feedback dashboard (JS markup unchanged, restyled) ---- */
#adminFeedbackBox .phx-fb-a-stats { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:0 0 16px; }
#adminFeedbackBox .phx-fb-a-stats .s { --kc:#2f6bff; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:14px 14px 13px; text-align:left; border-radius:18px; background:#fff; border:1px solid #e1e8f6; box-shadow:0 4px 14px rgba(30,60,120,.05); }
#adminFeedbackBox .phx-fb-a-stats .s::after { content:""; position:absolute; right:-16px; top:-16px; width:64px; height:64px; border-radius:50%; background:color-mix(in srgb, var(--kc) 11%, transparent); }
#adminFeedbackBox .phx-fb-a-stats .s:nth-child(2) { --kc:#f59e0b; }
#adminFeedbackBox .phx-fb-a-stats .s:nth-child(3) { --kc:#10b981; }
#adminFeedbackBox .phx-fb-a-stats .s:nth-child(4) { --kc:#6c5ce7; }
#adminFeedbackBox .phx-fb-a-stats .s:nth-child(5) { --kc:#ef4444; }
#adminFeedbackBox .phx-fb-a-stats .s:nth-child(6) { --kc:#0ea5e9; }
#adminFeedbackBox .phx-fb-a-stats .s b { position:relative; z-index:1; font-size:26px; font-weight:900; letter-spacing:-.02em; line-height:1.1; color:var(--kc); }
#adminFeedbackBox .phx-fb-a-stats .s span { position:relative; z-index:1; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#7a8aa6; }

#adminFeedbackBox .phx-fb-a-grid { display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
@media (min-width:760px) { #adminFeedbackBox .phx-fb-a-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); } }
#adminFeedbackBox .phx-fb-a-panel { padding:14px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; }
#adminFeedbackBox .phx-fb-a-panel h5 { margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7a8aa6; display:flex; align-items:center; gap:8px; }
#adminFeedbackBox .phx-fb-a-panel h5::after { content:""; flex:1; height:1px; background:rgba(122,138,166,.28); }
#adminFeedbackBox .phx-fb-bar { grid-template-columns:104px 1fr 28px; gap:10px; margin:8px 0; font-size:12.5px; font-weight:700; color:var(--text-primary); }
#adminFeedbackBox .phx-fb-bar .b { height:10px; background:#e4eaf6; }
#adminFeedbackBox .phx-fb-bar .b i { background:linear-gradient(90deg,#2f6bff,#5b5bf0); }
#adminFeedbackBox .phx-fb-bar .b i.g { background:linear-gradient(90deg,#10b981,#34d399); }
#adminFeedbackBox .phx-fb-bar .b i.y { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
#adminFeedbackBox .phx-fb-bar .b i.r { background:linear-gradient(90deg,#ef4444,#f87171); }
#adminFeedbackBox .phx-fb-bar .c { font-weight:900; }
#adminFeedbackBox .phx-fb-a-muted { font-size:12.5px; font-weight:600; color:#7a8aa6; }

#adminFeedbackBox .phx-fb-a-filters { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:10px; }
#adminFeedbackBox .phx-fb-a-filters .phx-fb-a-search { grid-column:1 / -1; margin-bottom:2px; }
#adminFeedbackBox .phx-fb-a-filters .phx-fb-a-search input { margin:0; }
#adminFeedbackBox .phx-fb-a-sel { width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:44px; padding:0 12px; border-radius:13px; font-size:13px; font-weight:700; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; font-family:var(--font); }
#adminFeedbackBox select.phx-fb-a-sel { appearance:none; -webkit-appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8aa6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:15px; }
#adminFeedbackBox .phx-fb-a-search input.phx-fb-a-sel { height:46px; padding:0 14px 0 42px; font-size:14px; font-weight:600; border-radius:14px; }
#adminFeedbackBox .phx-fb-a-sel:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
#adminFeedbackBox .phx-fb-a-btn { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 10px; border-radius:13px; font-size:13px; font-weight:800; color:#51628a; background:#fff; border:1.5px solid #e1e8f6; cursor:pointer; font-family:var(--font); }
#adminFeedbackBox .phx-fb-a-btn:hover { border-color:#2f6bff; }
#adminFeedbackBox .phx-fb-a-btn:active { transform:scale(.97); }
#adminFeedbackBox .phx-fb-a-count { margin:6px 2px 12px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a8aa6; }

#adminFeedbackBox .phx-fb-a-card { position:relative; padding:14px; margin-bottom:12px; border-radius:18px; background:#fff; border:1px solid #e1e8f6; box-shadow:inset 3px 0 0 #10b981, 0 2px 8px rgba(30,60,120,.04); }
#adminFeedbackBox .phx-fb-a-card.is-new { border-left:1px solid #e1e8f6; box-shadow:inset 3px 0 0 #ef4444, 0 2px 8px rgba(30,60,120,.04); }
#adminFeedbackBox .phx-fb-a-top { gap:6px; }
#adminFeedbackBox .phx-fb-a-top .face { font-size:26px; line-height:1; margin-right:4px; }
#adminFeedbackBox .phx-fb-a-top .pill { padding:3px 10px; font-size:11px; font-weight:800; border-radius:999px; color:#51628a; background:#eef2fb; border:0; }
#adminFeedbackBox .phx-fb-a-top .pill.u-yes { color:#0f9d58; background:#e7f8ef; }
#adminFeedbackBox .phx-fb-a-top .pill.u-no { color:#c2332b; background:#fde7e6; }
#adminFeedbackBox .phx-fb-a-top .pill.u-somewhat { color:#b45309; background:#fff3dc; }
#adminFeedbackBox .phx-fb-a-top .pill.newp { color:#fff; background:linear-gradient(135deg,#ef4444,#f26a6e); }
#adminFeedbackBox .phx-fb-a-top .pill.done { color:#0f9d58; background:#e7f8ef; }
#adminFeedbackBox .phx-fb-a-top .when { font-size:11.5px; font-weight:700; color:#8b9ab6; }
#adminFeedbackBox .phx-fb-a-text { margin:12px 0 8px; padding:11px 13px; border-radius:13px; font-size:14px; font-weight:500; line-height:1.6; background:#f6f9ff; }
#adminFeedbackBox .phx-fb-a-tags span { padding:3px 10px; font-size:11px; font-weight:700; border-radius:999px; background:#eaf0ff; border:0; color:#3558c7; }
#adminFeedbackBox .phx-fb-a-meta { gap:5px 14px; margin-top:10px; font-size:12px; font-weight:600; color:#7a8aa6; }
#adminFeedbackBox .phx-fb-a-meta a { color:#2f6bff; font-weight:700; }
#adminFeedbackBox .phx-fb-a-acts { gap:8px; margin-top:12px; }
#adminFeedbackBox .phx-fb-a-acts button { flex:1; min-height:40px; padding:0 12px; border-radius:12px; font-size:12.5px; font-weight:800; color:#0f9d58; background:#e7f8ef; border:1px solid #bfead2; }
#adminFeedbackBox .phx-fb-a-acts button.danger { flex:0 0 auto; color:#e5484d; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.28); }
#adminFeedbackBox .phx-fb-a-acts button:hover { border-color:inherit; }
#adminFeedbackBox .phx-fb-a-acts button:active { transform:scale(.97); }
#adminFeedbackBox .phx-fb-a-empty { padding:26px 14px; font-size:13px; font-weight:600; color:#7a8aa6; border-radius:16px; border:1.5px dashed #dbe4f5; }

/* dark theme — feedback */
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-stats .s { background:#33426a; border-color:#52659a; box-shadow:none; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-stats .s b { color:color-mix(in srgb, var(--kc) 55%, #fff); }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-stats .s span, html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-panel h5,
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-muted, html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-count,
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-meta, html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-top .when { color:#aab7d8; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-panel { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-bar .b { background:#46568a; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-sel { background:#1f2a4a; border-color:#52659a; color:#fff; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-btn { color:#e1e8fa; background:#33426a; border-color:#52659a; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-card { background:#33426a; border-color:#52659a; box-shadow:inset 3px 0 0 #10b981; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-card.is-new { border-left-color:#52659a; box-shadow:inset 3px 0 0 #ef4444; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-top .pill { color:#e1e8fa; background:#2a3759; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-top .pill.u-yes, html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-top .pill.done { color:#4ade80; background:rgba(16,185,129,.16); }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-top .pill.u-no { color:#fca5a5; background:rgba(239,68,68,.2); }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-top .pill.u-somewhat { color:#fcd34d; background:rgba(245,158,11,.18); }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-text { background:#2a3759; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-tags span { color:#9db9ff; background:rgba(47,107,255,.2); }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-meta a { color:#9db9ff; }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-acts button { color:#4ade80; background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.4); }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-acts button.danger { color:#fca5a5; background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.4); }
html[data-theme="dark"] #adminFeedbackBox .phx-fb-a-empty { color:#aab7d8; border-color:#52659a; }


/* =====================================================================
   Admin · Bulk — same visual language as the other admin tabs
   (all ids / JS hooks unchanged; long help text removed)
   ===================================================================== */
#tab-admin-bulk .ad-sec-title { margin:6px 2px 10px; }
#tab-admin-bulk .ad-bk-sec { margin-top:22px; }
#tab-admin-bulk .ad-addcard { margin-bottom:14px; min-width:0; }
#tab-admin-bulk .ad-card-ico { color:var(--kc, #2f6bff); background:color-mix(in srgb, var(--kc, #2f6bff) 14%, transparent); }
html[data-theme="dark"] #tab-admin-bulk .ad-card-ico { color:color-mix(in srgb, var(--kc, #2f6bff) 55%, #fff); }
#tab-admin-bulk .ad-card-head h3 { font-size:15px; font-weight:800; letter-spacing:0; }

/* buttons */
#tab-admin-bulk .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 12px; border-radius:13px; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.2; color:#fff; background:linear-gradient(135deg,#2f6bff,#5b5bf0); border:1px solid transparent; box-shadow:0 6px 14px rgba(47,107,255,.26); cursor:pointer; font-family:var(--font); margin:0; }
#tab-admin-bulk .btn:active { transform:scale(.97); }
#tab-admin-bulk .btn.btn-outline { color:#3d4f72; background:#fff; border-color:#dbe4f5; box-shadow:none; }
html[data-theme="dark"] #tab-admin-bulk .btn.btn-outline { color:#e1e8fa; background:#33426a; border-color:#52659a; }
#tab-admin-bulk .btn svg { width:17px; height:17px; flex:0 0 17px; }
#tab-admin-bulk .btn.ad-submit-btn { display:flex; width:100%; min-height:50px; margin-top:12px; padding:9px 16px; border-radius:15px; font-size:15px; background:linear-gradient(135deg,#0ea371,#10b981); box-shadow:0 8px 18px rgba(16,185,129,.28); }
.ad-bk-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.ad-bk-row2 { margin-top:10px; }
#tab-admin-bulk .ad-bk-btn { min-width:0; white-space:nowrap; }
#tab-admin-bulk .ad-bk-btn span { overflow:hidden; text-overflow:ellipsis; }
#tab-admin-bulk .ad-bk-full { width:100%; margin-bottom:10px; }
@media (max-width:340px) { .ad-bk-grid { grid-template-columns:1fr; } }

/* drop zones */
#tab-admin-bulk .ad-bk-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:22px 14px; border-radius:18px; border:2px dashed #cdd8ee; background:#fff; color:#51628a; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
#tab-admin-bulk .ad-bk-drop svg { width:26px; height:26px; padding:10px; box-sizing:content-box; border-radius:50%; color:#2f6bff; background:#eaf0ff; }
#tab-admin-bulk .ad-bk-drop p { margin:0; font-size:13px; font-weight:800; }
#tab-admin-bulk .ad-bk-drop:hover, #tab-admin-bulk .ad-bk-drop:active { border-color:#2f6bff; background:#f4f7ff; }
#tab-admin-bulk .ad-bk-drop-sm { flex-direction:row; justify-content:center; padding:14px; margin-bottom:10px; }
#tab-admin-bulk .ad-bk-drop-sm svg { width:20px; height:20px; padding:8px; }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-drop { background:#1f2a4a; border-color:#52659a; color:#e1e8fa; }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-drop svg { color:#9db9ff; background:rgba(47,107,255,.2); }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-drop:hover { background:#2a3759; border-color:#6f8fe0; }

/* paste boxes */
#tab-admin-bulk .ad-bk-text { display:block; width:100%; max-width:100%; box-sizing:border-box; min-height:120px; padding:12px 14px; border-radius:15px; border:1px solid #dbe4f5; background:#fff; color:var(--text-primary); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; line-height:1.55; resize:vertical; margin:0 0 10px; }
#tab-admin-bulk .ad-bk-text::placeholder { color:#9aa8c4; }
#tab-admin-bulk .ad-bk-text:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-text { background:#1f2a4a; border-color:#52659a; color:#fff; }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-text::placeholder { color:#7f90b8; }

/* image picker */
#tab-admin-bulk .ad-bk-file { position:relative; display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border-radius:14px; border:1.5px dashed #cdd8ee; background:#f6f9ff; color:#51628a; font-size:13px; font-weight:800; cursor:pointer; overflow:hidden; }
#tab-admin-bulk .ad-bk-file input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:0; }
#tab-admin-bulk .ad-bk-file svg { width:20px; height:20px; flex:0 0 20px; color:#ec4899; }
#tab-admin-bulk .ad-bk-file small { display:block; margin-top:1px; font-size:11px; font-weight:600; color:#8b9ab6; }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-file { background:#2a3759; border-color:#52659a; color:#e1e8fa; }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-file small { color:#aab7d8; }
#tab-admin-bulk .ad-bk-prev { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
#tab-admin-bulk .ad-bk-prev:empty { display:none; }
#tab-admin-bulk .ad-bk-prev img { border-radius:12px !important; border:1px solid #dbe4f5; }

/* danger toggle */
#tab-admin-bulk .ad-bk-danger { display:flex; align-items:center; gap:10px; margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.28); font-size:13px; font-weight:700; color:#c2332b; cursor:pointer; }
#tab-admin-bulk .ad-bk-danger input { width:20px; height:20px; margin:0; accent-color:#ef4444; flex:0 0 20px; }
html[data-theme="dark"] #tab-admin-bulk .ad-bk-danger { background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.4); color:#fca5a5; }

/* status line */
#tab-admin-bulk .ad-bk-status { margin-top:10px; font-size:12.5px; font-weight:700; line-height:1.5; color:#7a8aa6; overflow-wrap:anywhere; }
#tab-admin-bulk .ad-bk-status:empty { display:none; }

/* =====================================================================
   Admin · Guides / Logs / Security — same visual language as the other
   admin tabs (all ids / JS hooks unchanged)
   ===================================================================== */
#tab-admin-guides .ad-sec-title, #tab-admin-security .ad-sec-title { margin:6px 2px 10px; }
#tab-admin-guides .ad-gd-sec, #tab-admin-security .ad-sc-sec { margin-top:22px; }
#tab-admin-guides .ad-addcard, #tab-admin-security .ad-addcard { margin-bottom:14px; min-width:0; }
#tab-admin-guides .ad-card-ico, #tab-admin-security .ad-card-ico { color:var(--kc, #2f6bff); background:color-mix(in srgb, var(--kc, #2f6bff) 14%, transparent); }
html[data-theme="dark"] #tab-admin-guides .ad-card-ico, html[data-theme="dark"] #tab-admin-security .ad-card-ico { color:color-mix(in srgb, var(--kc, #2f6bff) 55%, #fff); }
#tab-admin-guides .ad-card-head h3, #tab-admin-security .ad-card-head h3 { font-size:15px; font-weight:800; letter-spacing:0; }

/* hint + small notes */
.ad-gd-hint { margin:-4px 0 14px; font-size:12.5px; font-weight:600; line-height:1.55; color:#7a8aa6; }
html[data-theme="dark"] .ad-gd-hint { color:#aab7d8; }
.ad-gd-note { font-size:12px; font-weight:700; color:#7a8aa6; }
.ad-gd-note:empty { display:none; }
.ad-gd-count { font-weight:700; color:#7a8aa6; }

/* form fields */
#tab-admin-guides .ad-fgrid > .form-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
#tab-admin-guides .ad-fgrid > .form-group > label { font-size:12px; font-weight:800; color:#51628a; }
#tab-admin-guides .ad-fgrid > .form-group > label small { display:block; margin-top:2px; font-size:11px; font-weight:600; color:#8b9ab6; }
html[data-theme="dark"] #tab-admin-guides .ad-fgrid > .form-group > label { color:#b9c6e6; }
html[data-theme="dark"] #tab-admin-guides .ad-fgrid > .form-group > label small { color:#9aa9cc; }
#tab-admin-guides .ad-fgrid > .form-group > input,
#tab-admin-guides .ad-fgrid > .form-group > select { width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:46px; padding:0 14px; border-radius:13px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; font-family:var(--font); }
#tab-admin-guides .ad-fgrid > .form-group > select { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8aa6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
#tab-admin-guides .ad-fgrid > .form-group > textarea { width:100%; max-width:100%; box-sizing:border-box; padding:12px 14px; border-radius:13px; font-size:14px; font-weight:500; line-height:1.55; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; font-family:var(--font); resize:vertical; }
#tab-admin-guides .ad-fgrid > .form-group > textarea.ad-gd-body { min-height:280px; line-height:1.65; }
#tab-admin-guides .ad-fgrid > .form-group > input::placeholder,
#tab-admin-guides .ad-fgrid > .form-group > textarea::placeholder { color:#9aa8c4; font-weight:500; }
#tab-admin-guides .ad-fgrid > .form-group > input:focus,
#tab-admin-guides .ad-fgrid > .form-group > select:focus,
#tab-admin-guides .ad-fgrid > .form-group > textarea:focus { outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16); }
#tab-admin-guides .ad-fgrid > .form-group > input:disabled { opacity:.65; }
html[data-theme="dark"] #tab-admin-guides .ad-fgrid > .form-group > input,
html[data-theme="dark"] #tab-admin-guides .ad-fgrid > .form-group > select,
html[data-theme="dark"] #tab-admin-guides .ad-fgrid > .form-group > textarea { background:#1f2a4a; border-color:#52659a; color:#fff; }
html[data-theme="dark"] #tab-admin-guides .ad-fgrid > .form-group > input::placeholder,
html[data-theme="dark"] #tab-admin-guides .ad-fgrid > .form-group > textarea::placeholder { color:#7f90b8; }

/* formatting help (collapsed) */
.ad-gd-help { margin-top:12px; border-radius:14px; border:1px solid #dbe4f5; background:#fff; overflow:hidden; }
.ad-gd-help > summary { list-style:none; cursor:pointer; padding:12px 14px; font-size:13px; font-weight:800; color:#3d4f72; }
.ad-gd-help > summary::-webkit-details-marker { display:none; }
.ad-gd-help > summary::after { content:"+"; float:right; font-size:18px; line-height:1; color:#7a8aa6; }
.ad-gd-help[open] > summary::after { content:"–"; }
.ad-gd-help > div { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px; }
.ad-gd-help code { padding:4px 8px; border-radius:8px; font-size:12px; font-weight:700; color:#2f6bff; background:#eaf0ff; }
.ad-gd-help > p { margin:8px 14px 12px; font-size:12px; font-weight:600; color:#7a8aa6; }
html[data-theme="dark"] .ad-gd-help { background:#1f2a4a; border-color:#52659a; }
html[data-theme="dark"] .ad-gd-help > summary { color:#e1e8fa; }
html[data-theme="dark"] .ad-gd-help code { color:#9db9ff; background:rgba(47,107,255,.2); }

/* buttons */
#tab-admin-guides .btn, #tab-admin-security .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 12px; border-radius:13px; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.2; color:#fff; background:linear-gradient(135deg,#2f6bff,#5b5bf0); border:1px solid transparent; box-shadow:0 6px 14px rgba(47,107,255,.26); cursor:pointer; font-family:var(--font); margin:0; text-decoration:none; }
#tab-admin-guides .btn:active, #tab-admin-security .btn:active { transform:scale(.97); }
#tab-admin-guides .btn svg, #tab-admin-security .btn svg { width:17px; height:17px; flex:0 0 17px; }
#tab-admin-guides .btn.btn-outline { color:#3d4f72; background:#fff; border-color:#dbe4f5; box-shadow:none; }
html[data-theme="dark"] #tab-admin-guides .btn.btn-outline { color:#e1e8fa; background:#33426a; border-color:#52659a; }
#tab-admin-guides .btn.btn-danger { color:#c2332b; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.3); box-shadow:none; }
html[data-theme="dark"] #tab-admin-guides .btn.btn-danger { color:#fca5a5; background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.4); }
#tab-admin-guides .btn.btn-sm { min-height:38px; padding:7px 12px; font-size:12.5px; }
#tab-admin-guides .btn.ad-submit-btn, #tab-admin-security .btn.ad-submit-btn { display:flex; width:100%; min-height:50px; margin-top:4px; padding:9px 16px; border-radius:15px; font-size:15px; background:linear-gradient(135deg,#0ea371,#10b981); box-shadow:0 8px 18px rgba(16,185,129,.28); }
#tab-admin-security .btn.ad-sc-btn { background:linear-gradient(135deg,#2f6bff,#5b5bf0); box-shadow:0 8px 18px rgba(47,107,255,.28); margin-top:0; }
.ad-gd-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:10px; }
.ad-gd-msg { margin-top:10px; font-size:12.5px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.ad-gd-msg:empty { display:none; }
.ad-gd-preview { margin-top:14px; padding:18px; border-radius:18px; overflow-wrap:anywhere; }

/* your guides list */
.ad-gd-list > p { margin:0; padding:22px 14px; border-radius:16px; border:2px dashed #cdd8ee; text-align:center; font-size:13px; font-weight:700; color:#7a8aa6; }
.ad-gd-item { display:flex; flex-direction:column; gap:12px; padding:14px; margin-bottom:10px; border-radius:18px; background:#f6f9ff; border:1px solid #e1e8f6; min-width:0; }
.ad-gd-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ad-gd-main b { font-size:14.5px; font-weight:800; line-height:1.35; color:var(--text-primary); overflow-wrap:anywhere; }
.ad-gd-meta { font-size:12px; font-weight:600; color:#7a8aa6; overflow-wrap:anywhere; }
.ad-gd-pill { display:inline-block; margin-left:4px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; vertical-align:middle; }
.ad-gd-pill.is-live { color:#0b8a5f; background:rgba(16,185,129,.14); }
.ad-gd-pill.is-draft { color:#b45309; background:rgba(245,158,11,.16); }
.ad-gd-acts { display:flex; flex-wrap:wrap; gap:8px; }
.ad-gd-acts .btn { flex:1 1 auto; }
html[data-theme="dark"] .ad-gd-item { background:#2a3759; border-color:#485a8a; }
html[data-theme="dark"] .ad-gd-main b { color:#fff; }
html[data-theme="dark"] .ad-gd-meta { color:#aab7d8; }
html[data-theme="dark"] .ad-gd-pill.is-live { color:#4ade80; background:rgba(16,185,129,.18); }
html[data-theme="dark"] .ad-gd-pill.is-draft { color:#fcd34d; background:rgba(245,158,11,.2); }
html[data-theme="dark"] .ad-gd-list > p { border-color:#52659a; color:#aab7d8; }

/* ---------- Logs ---------- */
.ad-lg .ad-lg-day { margin:18px 2px 10px; }
.ad-lg .ad-lg-day:first-child { margin-top:6px; }
.ad-lg .ad-lg-card { padding:6px 14px; }
.ad-lg-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #e1e8f6; min-width:0; font-size:13.5px; }
.ad-lg-row:last-child { border-bottom:0; }
.ad-lg-ico { --kc:#7a8aa6; width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:var(--kc); background:color-mix(in srgb, var(--kc) 14%, transparent); }
.ad-lg-row .ad-lg-ico { --kc:inherit; }
.ad-lg-ico svg { width:17px; height:17px; }
.ad-lg-txt { flex:1; min-width:0; font-weight:700; line-height:1.4; color:var(--text-primary); overflow-wrap:anywhere; }
.ad-lg-row .ad-lg-time { flex:0 0 auto; font-size:11.5px; font-weight:700; color:#7a8aa6; white-space:nowrap; }
.ad-lg-empty { padding:26px 14px; border-radius:18px; border:2px dashed #cdd8ee; text-align:center; font-size:13px; font-weight:700; color:#7a8aa6; }
html[data-theme="dark"] .ad-lg-row { border-bottom-color:#485a8a; }
html[data-theme="dark"] .ad-lg-ico { color:color-mix(in srgb, var(--kc) 55%, #fff); background:color-mix(in srgb, var(--kc) 22%, transparent); }
html[data-theme="dark"] .ad-lg-txt { color:#fff; }
html[data-theme="dark"] .ad-lg-row .ad-lg-time { color:#aab7d8; }
html[data-theme="dark"] .ad-lg-empty { border-color:#52659a; color:#aab7d8; }

/* ---------- Security ---------- */
.ad-sc-banner { display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:18px; border-radius:18px; background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(47,107,255,.1)); border:1px solid rgba(16,185,129,.3); }
.ad-sc-big { width:48px; height:48px; flex:0 0 48px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#0ea371,#10b981); box-shadow:0 8px 18px rgba(16,185,129,.3); }
.ad-sc-big svg { width:26px; height:26px; }
.ad-sc-banner > div { display:flex; flex-direction:column; min-width:0; }
.ad-sc-banner b { font-size:16px; font-weight:900; color:var(--text-primary); }
.ad-sc-banner small { margin-top:2px; font-size:12px; font-weight:700; color:#0b8a5f; }
html[data-theme="dark"] .ad-sc-banner { background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(47,107,255,.14)); border-color:rgba(16,185,129,.4); }
html[data-theme="dark"] .ad-sc-banner b { color:#fff; }
html[data-theme="dark"] .ad-sc-banner small { color:#4ade80; }
.ad-sc-list { list-style:none; margin:0; padding:0; font-size:inherit; line-height:inherit; }
.ad-sc-list li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #e1e8f6; min-width:0; line-height:1.3; }
.ad-sc-list li:last-child { border-bottom:0; padding-bottom:0; }
.ad-sc-list li:first-child { padding-top:0; }
.ad-sc-ico { width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:var(--kc); background:color-mix(in srgb, var(--kc) 14%, transparent); }
.ad-sc-ico svg { width:17px; height:17px; }
.ad-sc-list li > div { flex:1; display:flex; flex-direction:column; min-width:0; }
.ad-sc-list b { font-size:13.5px; font-weight:800; color:var(--text-primary); }
.ad-sc-list small { margin-top:1px; font-size:11.5px; font-weight:600; color:#7a8aa6; }
.ad-sc-ok { width:24px; height:24px; flex:0 0 24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:#10b981; }
.ad-sc-ok svg { width:14px; height:14px; stroke-width:3; }
html[data-theme="dark"] .ad-sc-list li { border-bottom-color:#485a8a; }
html[data-theme="dark"] .ad-sc-ico { color:color-mix(in srgb, var(--kc) 55%, #fff); background:color-mix(in srgb, var(--kc) 22%, transparent); }
html[data-theme="dark"] .ad-sc-list b { color:#fff; }
html[data-theme="dark"] .ad-sc-list small { color:#aab7d8; }

/* =====================================================================
   DASHBOARD v2 — Get PhoneHub Updates, stat tiles, Recent Phones, Latest
   News, Best Phones by Year, Trending Phones, Recently Viewed.
   Same visual grammar as the admin tabs / Why PhoneHub (CSS-first;
   all ids, classes and JS hooks unchanged).
   ===================================================================== */

/* ---- shared card shell ---- */
#page-dashboard > .card, #page-dashboard > .grid-2 > .card, #page-dashboard > .ph-x-section {
    position:relative; padding:16px !important; border-radius:22px !important; background:var(--bg-card) !important;
    border:1px solid #e1e8f6 !important; box-shadow:0 8px 28px rgba(30,60,120,.07) !important; overflow:hidden; min-width:0;
}
#page-dashboard > .card::before, #page-dashboard > .card::after,
#page-dashboard > .grid-2 > .card::before, #page-dashboard > .grid-2 > .card::after { display:none !important; }
#page-dashboard > .card:hover, #page-dashboard > .grid-2 > .card:hover { transform:none; box-shadow:0 8px 28px rgba(30,60,120,.07) !important; }
html[data-theme="dark"] #page-dashboard > .card, html[data-theme="dark"] #page-dashboard > .grid-2 > .card, html[data-theme="dark"] #page-dashboard > .ph-x-section {
    background:#1f2a4a !important; border-color:#485a8a !important; box-shadow:none !important;
}
#page-dashboard .grid-2 { gap:14px; }
#page-dashboard > .card.mt-16, #page-dashboard > .ph-x-section { margin-top:14px; margin-bottom:0; }

/* ---- card headers ---- */
#page-dashboard .card-header { display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; margin:0 0 14px !important; padding:0 !important; border:0 !important; }
#page-dashboard .card-title { display:inline-flex; align-items:center; gap:10px; margin:0; font-size:17px !important; font-weight:900 !important; letter-spacing:-.02em !important; line-height:1.25; color:var(--text-primary) !important; filter:none !important; }
#page-dashboard .card-subtitle { padding:5px 11px; border-radius:999px; font-size:10.5px !important; font-weight:800 !important; letter-spacing:.06em; text-transform:uppercase; color:#51628a !important; background:#eaf0ff; white-space:nowrap; }
html[data-theme="dark"] #page-dashboard .card-subtitle { color:#b9c9f5 !important; background:rgba(47,107,255,.2); }

/* ---- Get PhoneHub Updates ---- */
.ph-push-card[data-ph-push="dashboard"] {
    display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:16px !important; border-radius:22px !important;
    background:linear-gradient(135deg,#f3f7ff 0%,#ffffff 85%) !important; border:1px solid #d6e2fb !important; border-left:1px solid #d6e2fb !important;
    box-shadow:0 8px 28px rgba(30,60,120,.07) !important; position:relative; overflow:hidden;
}
.ph-push-card[data-ph-push="dashboard"][hidden] { display:none !important; }
.ph-push-card[data-ph-push="dashboard"]::before, .ph-push-card[data-ph-push="dashboard"]::after { display:none !important; }
.ph-push-card[data-ph-push="dashboard"] .ph-push-icon {
    width:48px; height:48px; flex:0 0 48px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; font-size:24px;
    background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(245,158,11,.1)); box-shadow:inset 0 0 0 1px rgba(245,158,11,.28); filter:none !important;
}
.ph-push-card[data-ph-push="dashboard"] .ph-push-copy { flex:1 1 200px; min-width:0; }
.ph-push-card[data-ph-push="dashboard"] .ph-push-copy strong { font-size:16px; font-weight:900; letter-spacing:-.01em; }
.ph-push-card[data-ph-push="dashboard"] .ph-push-copy p { margin:3px 0 0; font-size:13px; font-weight:600; line-height:1.5; color:#647da6; }
.ph-push-card[data-ph-push="dashboard"] .ph-push-actions { flex:1 1 100%; display:grid; grid-template-columns:1.5fr 1fr; gap:8px; }
.ph-push-card[data-ph-push="dashboard"] .ph-push-actions [hidden] { display:none !important; }
.ph-push-card[data-ph-push="dashboard"] .ph-push-actions .btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; margin:0; padding:9px 12px; border-radius:14px; font-size:13.5px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.2; color:#fff; background:linear-gradient(135deg,#2f6bff,#5b5bf0); border:1px solid transparent; box-shadow:0 8px 18px rgba(47,107,255,.28); }
.ph-push-card[data-ph-push="dashboard"] .ph-push-actions .btn.btn-outline { color:#3d4f72; background:#fff; border-color:#dbe4f5; box-shadow:none; }
.ph-push-card[data-ph-push="dashboard"] .ph-push-actions .btn:active { transform:scale(.97); }
html[data-theme="dark"] .ph-push-card[data-ph-push="dashboard"] { background:linear-gradient(135deg,#2c3a64 0%,#26325a 90%) !important; border-color:#485a8a !important; box-shadow:none !important; }
html[data-theme="dark"] .ph-push-card[data-ph-push="dashboard"] .ph-push-copy p { color:#b9c6e6; }
html[data-theme="dark"] .ph-push-card[data-ph-push="dashboard"] .ph-push-actions .btn.btn-outline { color:#e1e8fa; background:#33426a; border-color:#52659a; }
@media (min-width:640px) { .ph-push-card[data-ph-push="dashboard"] .ph-push-actions { flex:0 0 auto; grid-template-columns:auto auto; } .ph-push-card[data-ph-push="dashboard"] .ph-push-actions .btn { padding:9px 20px; } }

/* ---- stat tiles ---- */
#page-dashboard .dash-stat-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; margin-bottom:14px; }
#page-dashboard .stat-card.stat-card--featured {
    --kc:#10b981; position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; min-height:0; padding:14px !important; border-radius:20px !important;
    background:var(--bg-card) !important; border:1px solid #e1e8f6 !important; border-left:1px solid #e1e8f6 !important; box-shadow:0 6px 20px rgba(30,60,120,.06) !important; min-width:0;
}
#page-dashboard .stat-card.stat-card--orange { --kc:#f59e0b; }
#page-dashboard .stat-card.stat-card--featured::before { display:none !important; }
#page-dashboard .stat-card.stat-card--featured::after { content:"" !important; display:block !important; position:absolute; right:-20px; top:-20px; left:auto; bottom:auto; width:80px; height:80px; border-radius:50%; border:0 !important; background:color-mix(in srgb, var(--kc) 11%, transparent) !important; }
#page-dashboard .stat-card.stat-card--featured .stat-icon {
    position:relative; z-index:1; width:46px !important; height:46px !important; flex:0 0 46px; border-radius:15px !important; display:inline-flex; align-items:center; justify-content:center; font-size:22px !important;
    background:color-mix(in srgb, var(--kc) 16%, transparent) !important; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kc) 28%, transparent); filter:none !important;
}
#page-dashboard .stat-card.stat-card--featured .stat-icon::before, #page-dashboard .stat-card.stat-card--featured .stat-icon::after { display:none !important; }
#page-dashboard .stat-card.stat-card--featured .stat-info { position:relative; z-index:1; min-width:0; }
#page-dashboard .stat-card.stat-card--featured .stat-info h3 { margin:0; font-size:26px !important; font-weight:900; letter-spacing:-.02em; line-height:1.1; color:var(--text-primary); }
#page-dashboard .stat-card.stat-card--featured .stat-info p { margin:3px 0 0; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#7a8aa6; }
html[data-theme="dark"] #page-dashboard .stat-card.stat-card--featured { background:#2a3759 !important; border-color:#485a8a !important; box-shadow:none !important; }
html[data-theme="dark"] #page-dashboard .stat-card.stat-card--featured .stat-info h3 { color:#fff; }
html[data-theme="dark"] #page-dashboard .stat-card.stat-card--featured .stat-info p { color:#aab7d8; }

/* ---- Recent Phones ---- */
#page-dashboard #recentPhonesList { display:flex; flex-direction:column; gap:8px; }
#page-dashboard #recentPhonesList > .dash-recent-item {
    display:flex !important; align-items:center; gap:12px; padding:10px !important; margin:0; border-radius:16px !important; background:#f6f9ff !important; border:1px solid #e1e8f6 !important;
    transition:transform .15s, border-color .15s; cursor:pointer;
}
#page-dashboard #recentPhonesList > .dash-recent-item:hover { transform:translateY(-1px); border-color:#2f6bff !important; background:#f6f9ff !important; }
#page-dashboard #recentPhonesList > .dash-recent-item:active { transform:scale(.99); }
#page-dashboard .dash-recent-item .thumb { width:52px !important; height:52px !important; flex:0 0 52px; border-radius:13px !important; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; border:1px solid #e1e8f6; padding:3px; box-sizing:border-box; }
#page-dashboard .dash-recent-item .thumb img { width:100%; height:100%; object-fit:contain !important; }
#page-dashboard .dash-recent-item .info { flex:1; min-width:0; }
#page-dashboard .dash-recent-item .info .name { font-size:14px; font-weight:800; line-height:1.3; color:var(--text-primary) !important; overflow-wrap:anywhere; }
#page-dashboard .dash-recent-item .info .sub { margin-top:3px; font-size:11.5px; font-weight:600; color:#7a8aa6 !important; }
#page-dashboard .dash-recent-item .price { flex:0 0 auto; font-size:13.5px; font-weight:900; color:#2f6bff !important; white-space:nowrap; }
html[data-theme="dark"] #page-dashboard #recentPhonesList > .dash-recent-item { background:#2a3759 !important; border-color:#485a8a !important; }
html[data-theme="dark"] #page-dashboard .dash-recent-item .thumb { background:#1f2a4a; border-color:#485a8a; }
html[data-theme="dark"] #page-dashboard .dash-recent-item .info .name { color:#fff !important; }
html[data-theme="dark"] #page-dashboard .dash-recent-item .info .sub { color:#aab7d8 !important; }
html[data-theme="dark"] #page-dashboard .dash-recent-item .price { color:#9db9ff !important; }

/* ---- Latest News ---- */
#page-dashboard #latestNewsList { display:flex; flex-direction:column; gap:8px; }
#page-dashboard #latestNewsList > .dash-news-item { display:flex !important; align-items:center; gap:12px; padding:10px 12px !important; margin:0 !important; border-radius:16px !important; border:1px solid #e1e8f6 !important; cursor:pointer; }
#page-dashboard .dash-news-icon { width:42px !important; height:42px !important; flex:0 0 42px; border-radius:13px !important; display:inline-flex; align-items:center; justify-content:center; font-size:20px; filter:none !important; }
#page-dashboard #latestNewsList > .dash-news-item > span:first-child { filter:none !important; }
#page-dashboard .dash-news-body { flex:1; min-width:0; }
#page-dashboard .dash-news-body h4 { margin:0; font-size:13.5px; font-weight:800; line-height:1.35; color:var(--text-primary); overflow-wrap:anywhere; }
#page-dashboard .dash-news-date { display:block; margin-top:3px; font-size:11.5px; font-weight:700; color:#7a8aa6; }
#page-dashboard .dash-news-arrow { flex:0 0 auto; font-size:22px; line-height:1; color:#7a8aa6; }
html[data-theme="dark"] #page-dashboard #latestNewsList > .dash-news-item { border-color:#485a8a !important; }
html[data-theme="dark"] #page-dashboard .dash-news-body h4 { color:#fff; }
html[data-theme="dark"] #page-dashboard .dash-news-date, html[data-theme="dark"] #page-dashboard .dash-news-arrow { color:#aab7d8; }

/* ---- Best Phones by Year ---- */
#page-dashboard #phx5DashBest .phx5-dash-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#page-dashboard .phx5-dash-yearcard {
    position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px !important; border-radius:18px !important;
    background:#f6f9ff !important; border:1px solid #e1e8f6 !important; box-shadow:none !important; cursor:pointer; transition:transform .15s, border-color .15s;
}
#page-dashboard .phx5-dash-yearcard:hover { transform:translateY(-2px); border-color:#2f6bff !important; box-shadow:0 10px 22px -12px rgba(47,107,255,.45) !important; }
#page-dashboard .phx5-dash-yearcard::before { display:none !important; }
#page-dashboard .phx5-dash-yearcard::after { top:9px !important; right:-30px !important; padding:2px 28px !important; font-size:8.5px !important; font-weight:800; letter-spacing:.04em; background:linear-gradient(135deg,#2f6bff,#5b5bf0) !important; color:#fff !important; }
#page-dashboard .phx5-dash-year { font-size:20px; font-weight:900; letter-spacing:-.02em; color:var(--text-primary); }
#page-dashboard .phx5-dash-count { align-self:flex-start; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:800; color:#51628a; background:#eaf0ff; border:0; }
#page-dashboard .phx5-dash-best { display:flex; align-items:center; gap:10px; margin-top:2px; padding:8px; border-radius:14px; background:#fff; border:1px solid #e1e8f6; min-width:0; }
#page-dashboard .phx5-dash-thumb { width:42px !important; height:42px !important; flex:0 0 42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#f6f9ff; overflow:hidden; }
#page-dashboard .phx5-dash-thumb img { width:34px !important; height:34px !important; object-fit:contain; }
#page-dashboard .phx5-dash-info { min-width:0; flex:1; }
#page-dashboard .phx5-dash-name { font-size:12.5px; font-weight:800; line-height:1.3; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal !important; text-overflow:clip !important; }
#page-dashboard .phx5-dash-price { margin-top:2px; font-size:13px; font-weight:900; color:#2f6bff; }
html[data-theme="dark"] #page-dashboard .phx5-dash-yearcard { background:#2a3759 !important; border-color:#485a8a !important; }
html[data-theme="dark"] #page-dashboard .phx5-dash-year, html[data-theme="dark"] #page-dashboard .phx5-dash-name { color:#fff; }
html[data-theme="dark"] #page-dashboard .phx5-dash-count { color:#b9c9f5; background:rgba(47,107,255,.22); }
html[data-theme="dark"] #page-dashboard .phx5-dash-best { background:#1f2a4a; border-color:#485a8a; }
html[data-theme="dark"] #page-dashboard .phx5-dash-thumb { background:#2a3759; }
html[data-theme="dark"] #page-dashboard .phx5-dash-price { color:#9db9ff; }

/* ---- Trending Phones ---- */
#page-dashboard #trendingPhonesList { display:flex; flex-direction:column; gap:8px; }
#page-dashboard .trending-item { display:flex; align-items:center; gap:10px; padding:10px 12px !important; border-radius:16px !important; background:#f6f9ff !important; border:1px solid #e1e8f6 !important; box-shadow:none !important; min-width:0; transition:transform .15s, border-color .15s; }
#page-dashboard .trending-item:hover { transform:translateY(-1px); border-color:#2f6bff !important; }
#page-dashboard .trending-item .rank { flex:0 0 30px; font-size:14px; font-weight:900; text-align:center; color:#7a8aa6; }
#page-dashboard .trending-item .rank.gold { color:#f59e0b; }
#page-dashboard .trending-item .rank.silver { color:#94a3b8; }
#page-dashboard .trending-item .rank.bronze { color:#d97706; }
#page-dashboard .trending-item .tr-thumb { width:48px; height:48px; flex:0 0 48px; border-radius:13px; display:flex; align-items:center; justify-content:center; padding:3px; box-sizing:border-box; background:#fff; border:1px solid #e1e8f6; overflow:hidden; font-size:22px; }
#page-dashboard .trending-item .tr-thumb img { width:100%; height:100%; object-fit:contain; }
#page-dashboard .trending-item .info { flex:1; min-width:0; }
#page-dashboard .trending-item .info .name { font-size:13.5px; font-weight:800; line-height:1.3; color:var(--text-primary); overflow-wrap:anywhere; }
#page-dashboard .trending-item .info .detail { margin-top:2px; font-size:11.5px; font-weight:600; color:#7a8aa6; }
#page-dashboard .trending-item .tr-rate { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800; color:#b45309; background:rgba(245,158,11,.16); }
#page-dashboard .trending-item .tr-rate.is-new { color:#51628a; background:#eaf0ff; }
#page-dashboard .trending-item .views { flex:0 0 74px; text-align:right; font-size:11px; font-weight:700; color:#7a8aa6; }
#page-dashboard .trending-item .views strong { font-size:16px; font-weight:900; color:#2f6bff; }
html[data-theme="dark"] #page-dashboard .trending-item { background:#2a3759 !important; border-color:#485a8a !important; }
html[data-theme="dark"] #page-dashboard .trending-item .tr-thumb { background:#1f2a4a; border-color:#485a8a; }
html[data-theme="dark"] #page-dashboard .trending-item .info .name { color:#fff; }
html[data-theme="dark"] #page-dashboard .trending-item .info .detail, html[data-theme="dark"] #page-dashboard .trending-item .views { color:#aab7d8; }
html[data-theme="dark"] #page-dashboard .trending-item .views strong { color:#9db9ff; }
html[data-theme="dark"] #page-dashboard .trending-item .tr-rate { color:#fcd34d; background:rgba(245,158,11,.2); }
html[data-theme="dark"] #page-dashboard .trending-item .tr-rate.is-new { color:#b9c9f5; background:rgba(47,107,255,.22); }

/* ---- Recently Viewed ---- */
#page-dashboard #phxRecentDash h3 { margin:0 0 12px; font-size:17px; font-weight:900; letter-spacing:-.02em; }
#page-dashboard #phxRecentDash h3 button { margin-left:auto; min-height:34px; padding:0 14px; border-radius:11px; font-size:12px; font-weight:800; color:#51628a; background:#fff; border:1px solid #dbe4f5; cursor:pointer; }
#page-dashboard #phxRecentDash .ph-x-rv { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scroll-snap-type:x proximity; }
#page-dashboard #phxRecentDash .ph-x-rv-item { flex:0 0 124px; padding:8px !important; border-radius:18px !important; background:#f6f9ff !important; border:1px solid #e1e8f6 !important; scroll-snap-align:start; }
#page-dashboard #phxRecentDash .ph-x-rv-imgbox { height:96px; border-radius:13px; }
#page-dashboard #phxRecentDash .ph-x-rv-name { margin-top:6px; font-size:12px; font-weight:800; }
#page-dashboard #phxRecentDash .ph-x-rv-price { margin-top:3px; font-size:12.5px; font-weight:900; color:#2f6bff; }
html[data-theme="dark"] #page-dashboard #phxRecentDash h3 button { color:#e1e8fa; background:#33426a; border-color:#52659a; }
html[data-theme="dark"] #page-dashboard #phxRecentDash .ph-x-rv-item { background:#2a3759 !important; border-color:#485a8a !important; }
html[data-theme="dark"] #page-dashboard #phxRecentDash .ph-x-rv-price { color:#9db9ff; }

@media (min-width:760px) {
    #page-dashboard .dash-stat-2 { gap:14px; }
    #page-dashboard #phx5DashBest .phx5-dash-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}


#modalBody .ad-editform .ad-sec-title {margin:18px 2px 10px;}
#modalBody .ad-editform .ad-sec-title:first-child {margin-top:6px;}
#modalBody .ad-editform .ad-addform {display:block; max-width:none; width:100%;}
#modalBody .ad-editform .ad-addcard {margin-bottom:14px; min-width:0;}
#modalBody .ad-editform .ad-card-ico {color:var(--kc, #2f6bff); background:color-mix(in srgb, var(--kc, #2f6bff) 14%, transparent);}
html[data-theme="dark"] #modalBody .ad-editform .ad-card-ico {color:color-mix(in srgb, var(--kc, #2f6bff) 55%, #fff);}
#modalBody .ad-editform .ad-card-head h3 {font-size:15px; font-weight:800; letter-spacing:0;}
#modalBody .ad-editform .ad-fgrid > .form-group > label {font-size:12px; font-weight:800; color:#51628a;}
html[data-theme="dark"] #modalBody .ad-editform .ad-fgrid > .form-group > label {color:#b9c6e6;}
#modalBody .ad-editform .ad-fgrid > .form-group > input, #modalBody .ad-editform .ad-fgrid > .form-group > select {width:100%; max-width:100%; min-width:0; box-sizing:border-box; height:46px; padding:0 14px; border-radius:13px; font-size:14px; font-weight:600; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none;}
#modalBody .ad-editform .ad-fgrid > .form-group > select {appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8aa6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px;}
#modalBody .ad-editform .ad-fgrid > .form-group > textarea {width:100%; max-width:100%; box-sizing:border-box; padding:12px 14px; border-radius:13px; font-size:14px; font-weight:500; line-height:1.55; color:var(--text-primary); background:#fff; border:1px solid #dbe4f5; box-shadow:none; resize:vertical; font-family:var(--font);}
#modalBody .ad-editform .ad-fgrid > .form-group > input::placeholder, #modalBody .ad-editform .ad-fgrid > .form-group > textarea::placeholder {color:#9aa8c4; font-weight:500;}
#modalBody .ad-editform .ad-fgrid > .form-group > input:focus, #modalBody .ad-editform .ad-fgrid > .form-group > select:focus, #modalBody .ad-editform .ad-fgrid > .form-group > textarea:focus {outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16);}
html[data-theme="dark"] #modalBody .ad-editform .ad-fgrid > .form-group > input, html[data-theme="dark"] #modalBody .ad-editform .ad-fgrid > .form-group > select, html[data-theme="dark"] #modalBody .ad-editform .ad-fgrid > .form-group > textarea {background:#1f2a4a; border-color:#52659a; color:#fff;}
html[data-theme="dark"] #modalBody .ad-editform .ad-fgrid > .form-group > input::placeholder, html[data-theme="dark"] #modalBody .ad-editform .ad-fgrid > .form-group > textarea::placeholder {color:#7f90b8;}
#modalBody .ad-editform .btn {display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 16px; border-radius:13px; font-size:13px; font-weight:800; letter-spacing:0; text-transform:none; line-height:1.2; color:#fff; background:linear-gradient(135deg, #2f6bff, #5b5bf0); border:1px solid transparent; box-shadow:0 6px 14px rgba(47,107,255,.26); cursor:pointer;}
#modalBody .ad-editform .btn svg {width:16px; height:16px; flex:0 0 16px;}
#modalBody .ad-editform .btn:active {transform:scale(.97);}
#modalBody .ad-editform .btn.btn-sm {min-height:38px; padding:7px 13px; font-size:12.5px;}
#modalBody .ad-editform .btn.btn-outline {color:#3d4f72; background:#fff; border-color:#dbe4f5; box-shadow:none;}
html[data-theme="dark"] #modalBody .ad-editform .btn.btn-outline {color:#e1e8fa; background:#33426a; border-color:#52659a;}
#modalBody .ad-editform .btn.ad-submit-btn {width:100%; min-height:50px; font-size:15px; border-radius:15px; background:linear-gradient(135deg, #0ea371, #10b981); box-shadow:0 8px 18px rgba(16,185,129,.28);}
#modalBody .ad-editform .btn.ad-submit-btn svg {width:18px; height:18px; flex-basis:18px;}
#modalBody .ad-editform .btn.btn-danger {color:#fff; background:linear-gradient(135deg, #e5484d, #f26a6e); box-shadow:0 6px 14px rgba(239,68,68,.24);}
#modalBody .ad-editform .phx4-video-row {border-radius:14px !important; border-color:#dbe4f5 !important; background:#fff !important;}
html[data-theme="dark"] #modalBody .ad-editform .phx4-video-row {background:#33426a !important; border-color:#52659a !important;}
#editVariantsBox {display:flex; flex-direction:column; gap:12px;}
#editVariantsBox .phx4-variant-row {position:relative; display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; background:#fff; border:1px solid #dbe4f5; box-shadow:0 2px 8px rgba(30,60,120,.04);}
html[data-theme="dark"] #editVariantsBox .phx4-variant-row {background:#33426a; border-color:#52659a; box-shadow:none;}
#editVariantsBox .phx4-variant-row-top {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px; grid-template-areas:"label label rm" "color price price"; gap:8px; align-items:center;}
#editVariantsBox .phx4-var-label {grid-area:label;}
#editVariantsBox .phx4-var-color {grid-area:color;}
#editVariantsBox .phx4-var-price {grid-area:price;}
#editVariantsBox .phx4-var-remove {grid-area:rm; width:42px; height:42px; border-radius:12px; font-size:15px; color:#e5484d; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.28);}
#editVariantsBox .phx4-variant-row input {width:100%; max-width:100%; min-width:0; box-sizing:border-box; flex:none; height:42px; padding:0 12px; border-radius:12px; font-size:13.5px; font-weight:600; color:var(--text-primary); background:#f6f9ff; border:1px solid #dbe4f5;}
html[data-theme="dark"] #editVariantsBox .phx4-variant-row input {background:#1f2a4a; border-color:#52659a; color:#fff;}
#editVariantsBox .phx4-variant-row input::placeholder {color:#9aa8c4; font-weight:500;}
#editVariantsBox .phx4-variant-row input:focus {outline:none; border-color:#2f6bff; box-shadow:0 0 0 3px rgba(47,107,255,.16);}
#editVariantsBox .phx4-var-flipkart {border-left:3px solid #2f6bff !important;}
#editVariantsBox .phx4-var-amazon {border-left:3px solid #f59e0b !important;}

/* =====================================================================
   Admin · Edit phone modal — same card design as Add phone
   ===================================================================== */
.modal:has(.ad-editform) { max-width:760px; padding:0; position:relative; }
.modal:has(.ad-editform) .modal-close { position:absolute; top:14px; right:14px; float:none; z-index:6; }
.ad-edit-head { display:flex; align-items:center; gap:12px; padding:18px 64px 6px 16px; }
.ad-edit-ico { flex:0 0 44px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; border-radius:14px; background:linear-gradient(135deg, #2f6bff, #5b5bf0); box-shadow:0 6px 14px rgba(47,107,255,.28); }
.ad-edit-ttl { min-width:0; }
.ad-edit-ttl h2 { margin:0; font-size:18px; font-weight:800; line-height:1.2; color:var(--text-primary); }
.ad-edit-ttl p { margin:3px 0 0; font-size:13px; font-weight:700; color:#7a8aa6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#modalBody .ad-editform { display:block; max-width:none; width:100%; box-sizing:border-box; margin:0; padding:6px 16px 0; }
#modalBody .ad-editform .ad-card-ico { font-size:15px; }
#modalBody .ad-editform .ad-card-head em { font-style:normal; }
.ad-legacy { margin:0 0 12px; padding:10px 12px; border-radius:13px; font-size:12.5px; line-height:1.55; font-weight:600; color:#8a5a00; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.38); }
html[data-theme="dark"] .ad-legacy { color:#fcd9a0; }
.ad-trrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ad-trstat { font-size:12px; font-weight:600; color:#7a8aa6; }
.ad-edit-actions { position:sticky; bottom:0; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin:8px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-card) 28%); border-top:1px solid rgba(122,138,166,.18); }
#modalBody .ad-editform .ad-edit-actions .btn { width:auto; min-height:50px; }
#modalBody .ad-editform .ad-edit-actions .btn.ad-submit-btn { width:100%; }

/* ===== PHONEHUB PHONE BATTLE ===== */
.pb-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:900px;width:100%;box-sizing:border-box;margin:0 auto}
.pb-wrap>*{min-width:0;box-sizing:border-box}
#battleRoot,#advCompareRoot{max-width:100%;min-width:0;overflow-x:hidden}
.pb-hero,.pb-picker,.pb-head,.pb-verdict,.pb-round{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow)}
.pb-hero{display:flex;gap:14px;align-items:center;padding:18px;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(249,115,22,.12)),var(--bg-card)}
.pb-hero-ico{font-style:normal;font-size:2.2rem;line-height:1}
.pb-hero h2{margin:0 0 4px;font-size:1.25rem}.pb-hero p{margin:0;color:var(--text-secondary);font-size:.88rem;line-height:1.5}
.pb-picker{padding:16px;display:grid;gap:14px}
.pb-slots{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.pb-vs{align-self:center;font-weight:800;font-size:.8rem;color:var(--text-muted);background:var(--bg-input);border:1px solid var(--border-color);border-radius:999px;padding:8px 10px}
.pb-slot{position:relative;border:1.5px dashed var(--border-color);border-radius:var(--radius-sm);padding:12px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:var(--bg-input)}
.pb-slot.a{--c:#4f46e5}.pb-slot.b{--c:#f97316}.pb-fighter.a{--c:#4f46e5}.pb-fighter.b{--c:#f97316}
.pb-slot.has{border-style:solid;border-color:var(--c);background:var(--bg-card)}
.pb-slot-tag{position:absolute;top:8px;left:10px;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--c)}
.pb-slot-img{width:64px;height:84px;display:flex;align-items:center;justify-content:center}
.pb-slot-img img,.pb-hit-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.pb-noimg{width:34px;height:34px;color:var(--text-muted);display:inline-flex}.pb-noimg svg{width:100%;height:100%}
.pb-slot-name{font-weight:700;font-size:.9rem;line-height:1.25}.pb-slot-price{font-size:.8rem;color:var(--text-secondary)}
.pb-x{position:absolute;top:6px;right:6px;border:0;background:var(--bg-input);color:var(--text-secondary);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.8rem}
.pb-search{position:relative;width:100%;margin-top:14px}
.pb-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);font:inherit;font-size:.9rem}
.pb-input:focus{outline:2px solid var(--c);outline-offset:1px}
.pb-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-hover);overflow:hidden;text-align:left}
.pb-hit{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-bottom:1px solid var(--border-color);background:transparent;color:var(--text-primary);cursor:pointer;font:inherit;font-size:.84rem;text-align:left}
.pb-hit:last-child{border-bottom:0}.pb-hit:hover{background:var(--bg-input)}.pb-hit em{margin-left:auto;font-style:normal;color:var(--text-muted);font-size:.78rem;white-space:nowrap}
.pb-hit-img{width:26px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.pb-none{padding:10px;color:var(--text-muted);font-size:.84rem}
.pb-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.78rem;color:var(--text-muted)}
.pb-quick button{border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:999px;padding:5px 10px;font:inherit;font-size:.78rem;cursor:pointer}
.pb-go{border:0;border-radius:var(--radius-sm);padding:13px 16px;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;color:#fff;background:linear-gradient(135deg,#4f46e5,#f97316)}
.pb-go:disabled{opacity:.45;cursor:not-allowed}
.pb-note{margin:0;font-size:.76rem;color:var(--text-muted);line-height:1.5}
.pb-head{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:14px;text-align:center}
.pb-fighter{display:flex;flex-direction:column;align-items:center;gap:6px;border-bottom:3px solid var(--c);padding-bottom:8px}
.pb-score{font-size:2rem;font-weight:900;display:flex;gap:6px;align-items:center}.pb-score .a{color:#4f46e5}.pb-score .b{color:#f97316}.pb-score .dash{color:var(--text-muted)}
.pb-rounds{display:grid;gap:10px}
.pb-round{padding:12px 14px;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.pb-round.in{opacity:1;transform:none}
.pb-round.skip{opacity:.7}
.pb-rh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;margin-bottom:8px}
.pb-rh i{display:inline-flex;width:20px;height:20px;color:var(--accent)}.pb-rh i svg{width:100%;height:100%}
.pb-tag{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--bg-input);color:var(--text-secondary)}
.pb-tag.a{background:rgba(79,70,229,.14);color:#4f46e5}.pb-tag.b{background:rgba(249,115,22,.16);color:#c2570c}
.pb-rc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pb-side{display:grid;gap:4px;padding:8px 10px;border-radius:var(--radius-xs);border:1px solid transparent}
.pb-side b{font-size:1.25rem}.pb-side.a b{color:#4f46e5}.pb-side.b b{color:#f97316}
.pb-side.win{border-color:currentColor;background:var(--bg-input)}.pb-side.a.win{border-color:#4f46e5}.pb-side.b.win{border-color:#f97316}
.pb-side small{color:var(--text-secondary);font-size:.75rem;line-height:1.35;word-break:break-word}
.pb-bar{display:block;height:7px;border-radius:99px;background:var(--border-color);overflow:hidden}
.pb-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pb-side.a .pb-bar i{background:#4f46e5}.pb-side.b .pb-bar i{background:#f97316}
.pb-round.in .pb-bar i{width:var(--w)}
.pb-verdict{padding:18px;text-align:center;border-width:2px}
.pb-verdict.a{border-color:#4f46e5}.pb-verdict.b{border-color:#f97316}
.pb-verdict h3{margin:0 0 6px;font-size:1.25rem}.pb-verdict p{margin:0 0 12px;color:var(--text-secondary);font-size:.9rem;line-height:1.5}
.pb-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:14px}
.pb-chip{font-size:.76rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--bg-input);color:var(--text-secondary)}
.pb-chip.a{background:rgba(79,70,229,.14);color:#4f46e5}.pb-chip.b{background:rgba(249,115,22,.16);color:#c2570c}
.pb-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pb-btn{border:0;border-radius:var(--radius-sm);padding:9px 14px;font:inherit;font-weight:700;font-size:.84rem;cursor:pointer;background:var(--accent);color:#fff}
.pb-btn.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border-color)}
.pb-skip{justify-self:center;border:0;background:transparent;color:var(--text-muted);text-decoration:underline;font:inherit;font-size:.8rem;cursor:pointer}
@media (max-width:560px){.pb-slots{grid-template-columns:1fr}.pb-vs{justify-self:center}.pb-rc{grid-template-columns:1fr}.pb-score{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){.pb-round,.pb-bar i{transition:none}}

.pb-back,.pc-back{justify-self:start;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;padding:2px 0}

/* ===== PHONEHUB ADVANCED COMPARE ===== */
.pc-wrap{max-width:980px}
.pc-card{min-width:0;max-width:100%}
.pc-table th,.pc-table td{min-width:92px}.pc-table tbody th{min-width:110px}
.pc-bf b{overflow-wrap:anywhere}.pc-verdict p,.pc-per{overflow-wrap:anywhere}
.pc-picked{display:flex;flex-wrap:wrap;gap:8px}
.pc-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--border-color);background:var(--bg-input);border-radius:999px;padding:5px 6px 5px 6px;max-width:100%}
.pc-pill-img{width:24px;height:30px;display:flex;align-items:center;justify-content:center;flex:none}.pc-pill-img img{max-width:100%;max-height:100%;object-fit:contain}
.pc-pill-name{font-weight:700;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-pill button{border:0;background:var(--bg-card);color:var(--text-secondary);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:.72rem;flex:none}
.pc-rank{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pc-rcard{position:relative;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pc-rcard.top{border:2px solid var(--accent)}
.pc-medal{position:absolute;top:8px;left:10px;font-size:1.2rem}
.pc-overall{display:flex;flex-direction:column;align-items:center}.pc-overall b{font-size:1.7rem;color:var(--accent);line-height:1}.pc-overall small{color:var(--text-muted);font-size:.7rem}
.pc-card{display:block}.pc-card h3{margin:0 0 10px;font-size:1.02rem}
.pc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pc-table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:420px}
.pc-table th,.pc-table td{padding:9px 10px;border-bottom:1px solid var(--border-color);text-align:center;vertical-align:middle}
.pc-table thead th{font-size:.8rem;color:var(--text-primary);position:sticky;top:0}
.pc-table tbody th{text-align:left;font-weight:700;color:var(--text-secondary);position:sticky;left:0;background:var(--bg-card);white-space:nowrap}
.pc-ri{display:inline-flex;width:16px;height:16px;margin-right:6px;vertical-align:-3px;color:var(--accent)}.pc-ri svg{width:100%;height:100%}
.pc-table td b{display:block;font-size:1rem}
.pc-table td .pb-bar{margin-top:4px}.pc-table td .pb-bar i{width:var(--w);background:var(--accent)}
.pc-best{background:rgba(22,163,74,.12);color:var(--success);font-weight:800}.pc-best .pb-bar i{background:var(--success)!important}
.pc-na{color:var(--text-muted)}
.pc-total td,.pc-total th{border-bottom:0;font-size:.95rem}
.pc-spec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.pc-spec-head h3{margin:0}
.pc-toggle{font-size:.8rem;color:var(--text-secondary);display:flex;gap:6px;align-items:center;cursor:pointer}
.pc-specs.pc-diff-only .pc-same{display:none}
.pc-bfs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pc-bf{display:flex;align-items:center;gap:10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:10px;background:var(--bg-input)}
.pc-bf i{display:inline-flex;width:24px;height:24px;color:var(--accent);flex:none}.pc-bf i svg{width:100%;height:100%}
.pc-bf div{display:flex;flex-direction:column;min-width:0}.pc-bf small{color:var(--text-muted);font-size:.72rem;}.pc-bf b{font-size:.88rem}
.pc-bf em{margin-left:auto;font-style:normal;font-weight:800;color:var(--accent)}
.pc-verdict{border-color:var(--accent)}
.pc-pers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px;text-align:left}
.pc-per{border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:10px;background:var(--bg-input);display:flex;flex-direction:column;gap:3px;font-size:.8rem}
.pc-per .good{color:var(--success)}.pc-per .warn{color:var(--warning)}

/* ===== PHONEHUB DETAILED PHONE REPORT ===== */
#phoneReportRoot{max-width:100%;min-width:0;overflow-x:hidden}
.pr-wrap{max-width:900px}
.pr-hero{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.pr-img{width:76px;height:100px}
.pr-hero-m h3{margin:0 0 4px;font-size:1.1rem}
.pr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pr-chip{font-size:.74rem;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border-color)}
.pr-chip.good{background:rgba(22,163,74,.12);color:var(--success);border-color:transparent}.pr-chip.warn{background:rgba(217,119,6,.14);color:var(--warning);border-color:transparent}
.pr-ring{--p:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--border-color) 0);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.pr-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg-card)}
.pr-ring b,.pr-ring small{position:relative}.pr-ring b{font-size:1.6rem;line-height:1;color:var(--accent)}.pr-ring small{font-size:.62rem;color:var(--text-muted)}
.pr-bars{display:grid;gap:12px}
.pr-bar-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.88rem;margin-bottom:4px}
.pr-bar-h b{color:var(--accent)}
.pr-bar small{display:block;margin-top:4px;color:var(--text-muted);font-size:.73rem;line-height:1.4;overflow-wrap:anywhere}
.pr-bar .pb-bar i{width:var(--w);background:var(--accent)}
.pr-sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pr-sw h4,.pr-h4{margin:0 0 6px;font-size:.9rem}.pr-h4{margin-top:10px}
.pr-sw p{margin:0 0 8px;font-size:.86rem;line-height:1.4;overflow-wrap:anywhere}.pr-sw small{color:var(--text-secondary)}
.good{color:var(--success)}.warn{color:var(--warning)}
.pr-fit{margin-bottom:10px}.pr-fit b{font-size:.86rem}
.pr-op{margin:0 0 10px;font-size:.88rem;line-height:1.55;color:var(--text-secondary);overflow-wrap:anywhere}
.pr-line{margin:0 0 8px;font-size:.88rem;line-height:1.5}
.pr-vars{display:flex;flex-wrap:wrap;gap:6px}
.pr-alts{display:grid;gap:8px}
.pr-alt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--border-color);background:var(--bg-input);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;color:var(--text-primary);font:inherit}
.pr-alt-m{display:flex;flex-direction:column;min-width:0}.pr-alt-m b{font-size:.88rem;overflow-wrap:anywhere}.pr-alt-m small{color:var(--text-secondary);font-size:.76rem}
.pr-grp{margin-bottom:12px}.pr-grp h4{margin:0 0 4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.pr-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--border-color);font-size:.85rem}
.pr-row span{color:var(--text-secondary);flex:none}.pr-row b{text-align:right;font-weight:600;overflow-wrap:anywhere;min-width:0}
@media (max-width:520px){.pr-hero{grid-template-columns:auto 1fr}.pr-ring{grid-column:1/-1;justify-self:center}}

/* =====================================================================
   SMART SCORE FULL MODAL v84 — matches the Smart Scores page cards
   ===================================================================== */
.ss2-modal { position:relative; max-width:560px; padding:0 !important; overflow-x:hidden; }
#smartScoreModalBody { padding:16px 16px 22px; }
.ss2-modal .modal-close { position:absolute !important; top:14px; right:14px; float:none !important; z-index:5; background:rgba(255,255,255,.85) !important; color:#3d4f72 !important; }
html[data-theme="dark"] .ss2-modal .modal-close { background:rgba(31,42,74,.9) !important; color:#d3dcf1 !important; }

/* hero */
.ssm-hero { padding:14px; padding-top:16px; border-radius:20px; background:linear-gradient(160deg, #eef3ff 0%, #ffffff 70%); border:1px solid #d6e2fb; margin-bottom:14px; }
.ssm-hero-top { display:flex; align-items:center; gap:12px; padding-right:34px; }
.ssm-img { flex:0 0 64px; height:80px; border-radius:14px; background:#f4f7fd; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#9aa8c4; }
.ssm-img img { max-width:100%; max-height:100%; object-fit:contain; }
.ssm-img svg { width:28px; height:28px; }
.ssm-info { flex:1; min-width:0; }
.ssm-info .ss2-modal-brand { font-size:10.5px; font-weight:800; letter-spacing:.09em; color:#7a8aa6; }
.ssm-info .ss2-modal-model { font-size:17px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.ssm-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; margin-top:4px; }
.ssm-price b { font-size:16px; font-weight:900; color:#2f6bff; }
.ssm-price s { font-size:12px; color:#8b9ab6; }
.ssm-price em { font-style:normal; font-size:11px; font-weight:800; color:#0f9d58; background:#e7f8ef; padding:2px 8px; border-radius:999px; }
.ssm-ring { --p:0; --c:#3b82f6; flex:0 0 72px; width:72px; height:72px; border-radius:50%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; background:conic-gradient(var(--c) calc(var(--p) * 1%), #e6ecf7 0); }
.ssm-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:#fff; }
.ssm-ring b, .ssm-ring small { position:relative; line-height:1; }
.ssm-ring b { font-size:24px; font-weight:900; color:var(--text-primary); }
.ssm-ring small { font-size:9px; font-weight:800; color:#8b9ab6; margin-top:2px; }
.ssm-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ssm-tags .ss2-status { margin:0; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; }
.ssm-tag { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; color:#5b6c8c; background:#eef2fa; }

/* section cards */
.ss2-modal .ss2-section { margin-top:12px; padding:14px; border:1px solid #e1e8f6; border-radius:18px; background:var(--bg-card); box-shadow:0 4px 14px rgba(30,60,120,.04); }
.ss2-modal .ss2-section h4 { display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:900; margin:0 0 10px; }
.ss2-modal .ss2-section h4 svg { width:18px; height:18px; color:#2f6bff; flex:0 0 auto; }
.ss2-modal .ss2-explainer { background:#f6f9ff; border:1px solid #e6edf8; border-radius:16px; }

/* breakdown rows */
.ssm-rows { display:flex; flex-direction:column; gap:8px; }
.ssm-row { display:flex; gap:11px; padding:10px; border-radius:14px; background:#f6f9ff; border:1px solid #e6edf8; }
.ssm-row-ico { flex:0 0 36px; width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; }
.ssm-row-ico svg { width:18px; height:18px; }
.ssm-row-ico.ss2-excellent { background:rgba(34,197,94,.14); color:#16a34a; }
.ssm-row-ico.ss2-good { background:rgba(59,130,246,.14); color:#2563eb; }
.ssm-row-ico.ss2-average { background:rgba(245,158,11,.16); color:#d97706; }
.ssm-row-ico.ss2-poor { background:rgba(239,68,68,.14); color:#dc2626; }
.ssm-row-body { flex:1; min-width:0; }
.ssm-row-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:13.5px; font-weight:800; color:var(--text-primary); }
.ssm-row-top b { font-size:15px; font-weight:900; }
.ssm-row-top b small { font-size:10.5px; font-weight:700; color:#8b9ab6; }
.ssm-row-top b.ss2-excellent { color:#16a34a; } .ssm-row-top b.ss2-good { color:#2563eb; }
.ssm-row-top b.ss2-average { color:#d97706; } .ssm-row-top b.ss2-poor { color:#dc2626; }
.ssm-bar { height:6px; border-radius:6px; background:#e1e8f6; margin-top:6px; overflow:hidden; }
.ssm-bar i { display:block; height:100%; border-radius:6px; transition:width .4s ease; }
.ssm-bar i.ss2-excellent { background:#22c55e; } .ssm-bar i.ss2-good { background:#3b82f6; }
.ssm-bar i.ss2-average { background:#f59e0b; } .ssm-bar i.ss2-poor { background:#ef4444; }
.ssm-row-note { font-size:11.5px; color:var(--text-muted); margin-top:6px; line-height:1.4; }

/* strength / weakest */
.ssm-sw { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.ssm-sw > div { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:16px; min-width:0; }
.ssm-sw i { flex:0 0 34px; width:34px; height:34px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.7); }
.ssm-sw i svg { width:17px; height:17px; }
.ssm-sw span { display:flex; flex-direction:column; min-width:0; }
.ssm-sw small { font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; opacity:.85; }
.ssm-sw b { font-size:13.5px; font-weight:800; }
.ssm-sw .good { color:#0f9d58; background:#e7f8ef; border:1px solid #c6ecd5; }
.ssm-sw .bad { color:#c2410c; background:#fff1e6; border:1px solid #fbd9bd; }

/* personalised slider card */
.ss2-modal .ss2-personal-result { background:#f6f9ff; border:1px solid #e6edf8; border-radius:14px; }
.ss2-modal .ss2-reset-weights { border-radius:999px !important; background:#eef3ff !important; color:#1d4ed8 !important; border:1px solid #cddbff !important; box-shadow:none !important; font-weight:700; padding:10px 14px; }
.ss2-modal .ss2-insights li, .ss2-modal .ss2-hidden-details li { background:#f6f9ff; border:1px solid #e6edf8; border-radius:12px; }

/* dark */
html[data-theme="dark"] .ssm-hero { background:linear-gradient(160deg, #2c3a64 0%, #26325a 75%); border-color:#485a8a; }
html[data-theme="dark"] .ssm-img { background:#1f2a4a; }
html[data-theme="dark"] .ssm-ring { background:conic-gradient(var(--c) calc(var(--p) * 1%), #3a4a78 0); }
html[data-theme="dark"] .ssm-ring::before { background:#2a3759; }
html[data-theme="dark"] .ssm-price b { color:#9db9ff; }
html[data-theme="dark"] .ssm-price em { background:rgba(16,185,129,.16); color:#4ade80; }
html[data-theme="dark"] .ssm-tag { background:#35446d; color:#c5d0ea; }
html[data-theme="dark"] .ss2-modal .ss2-section { border-color:#485a8a; box-shadow:none; }
html[data-theme="dark"] .ssm-row, html[data-theme="dark"] .ss2-modal .ss2-explainer, html[data-theme="dark"] .ss2-modal .ss2-personal-result,
html[data-theme="dark"] .ss2-modal .ss2-insights li, html[data-theme="dark"] .ss2-modal .ss2-hidden-details li { background:#1f2a4a; border-color:#3a4a78; }
html[data-theme="dark"] .ssm-bar { background:#3a4a78; }
html[data-theme="dark"] .ssm-sw i { background:rgba(255,255,255,.08); }
html[data-theme="dark"] .ssm-sw .good { background:rgba(16,185,129,.16); color:#4ade80; border-color:rgba(74,222,128,.3); }
html[data-theme="dark"] .ssm-sw .bad { background:rgba(249,115,22,.16); color:#fdba74; border-color:rgba(253,186,116,.3); }
html[data-theme="dark"] .ss2-modal .ss2-reset-weights { background:rgba(79,124,255,.16) !important; color:#bcd0ff !important; border-color:rgba(122,165,255,.4) !important; }

@media (max-width:480px) {
    #smartScoreModalBody { padding:14px 12px 20px; }
    .ssm-ring { flex-basis:62px; width:62px; height:62px; } .ssm-ring b { font-size:20px; }
    .ssm-sw { grid-template-columns:1fr; }
    .ss2-modal .ss2-section { padding:12px; }
}