:root {
    --primary: #3b82f6; --primary-dark: #2563eb; --success: #10b981; --danger: #ef4444;
    --warning: #fbbf24; --bg-light: #f5f7fb; --text-main: #13294e; --text-muted: #5a7290;
    --border-light: #e2edff; --shadow-sm: 0 2px 6px rgba(0,0,0,0.02);
    --shadow-md: 0 8px 20px rgba(0,20,50,0.08); --shadow-lg: 0 12px 30px rgba(0,20,50,0.12);
    --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --transition: all 0.2s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background:linear-gradient(145deg, #f0f5fe 0%, #e9f0fa 100%); min-height:100vh; padding:24px 20px 80px; color:var(--text-main); display:flex; justify-content:center; font-size:14px; position:relative; }
.watermark-container { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:hidden; }
.watermark-canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
.promo-wrapper { max-width:1200px; width:100%; margin:0 auto; position:relative; z-index:10; }
.promo-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.title-section h1 { font-size:2rem; font-weight:800; background:linear-gradient(135deg, #0b1e3a, #1e3a6f); -webkit-background-clip:text; background-clip:text; color:transparent; display:flex; align-items:center; gap:10px; }
.flash-badge { background:#ff5722; color:white; padding:5px 14px; border-radius:60px; font-weight:700; font-size:0.9rem; box-shadow:0 6px 14px rgba(255,87,34,0.3); }
.stats-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:16px; }
.stats-mini { display:flex; gap:12px; flex-wrap:wrap; }
.stat-bubble { background:white; padding:10px 24px; border-radius:48px; border:1px solid var(--border-light); font-weight:500; font-size:0.95rem; transition:var(--transition); box-shadow:var(--shadow-sm); min-width:150px; justify-content:center; }
.stat-bubble strong { color:var(--primary); margin-right:6px; }
.stat-bubble:hover { background:#f8fbff; border-color:var(--primary); box-shadow:0 4px 8px rgba(59,130,246,0.1); transform:translateY(-1px); }
.custom-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.custom-btn { display:flex; align-items:center; justify-content:center; gap:6px; background:white; padding:10px 20px; border-radius:48px; text-decoration:none; color:#1e3a6f; font-weight:600; font-size:0.9rem; border:1px solid #d9e2f0; transition:var(--transition); }
.custom-btn:hover { background:#e5eeff; border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.social-links { display:flex; gap:10px; }
.social-link { display:flex; align-items:center; gap:6px; background:white; padding:8px 16px; border-radius:48px; text-decoration:none; color:#1e3a6f; font-weight:600; font-size:0.9rem; border:1px solid #d9e2f0; transition:var(--transition); }
.social-link:hover { background:#e5eeff; border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.top-banner { margin-bottom:20px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); display:none; }
.top-banner.active { display:block; } .top-banner a { display:block; } .top-banner img { width:100%; height:auto; display:block; }
.couplet-container { position:fixed; top:50%; transform:translateY(-50%); z-index:100; display:none; }
.couplet-left { left:10px; } .couplet-right { right:10px; }
.couplet-ad { position:relative; background:white; border-radius:var(--radius-md); box-shadow:0 8px 20px rgba(0,0,0,0.1); overflow:hidden; border:1px solid #edf2f7; }
.couplet-ad a { display:block; } .couplet-ad img { display:block; }
.couplet-close { position:absolute; top:4px; right:4px; width:22px; height:22px; background:rgba(0,0,0,0.5); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; z-index:2; }
.filter-bar { background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); border-radius:var(--radius-lg); padding:14px 20px; margin-bottom:24px; border:1px solid rgba(255,255,255,0.7); transition:box-shadow 0.2s; position:relative; }
.filter-bar.sticky { position:fixed; top:0; left:50%; transform:translateX(-50%); width:calc(100% - 40px); max-width:1160px; z-index:999; box-shadow:var(--shadow-lg); border-radius:0 0 24px 24px; }
.filter-bar-placeholder { display:none; height:0; }
.filter-bar.sticky + .filter-bar-placeholder { display:block; }
.filter-group { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; }
.filter-label { font-weight:700; color:#1e3a6f; min-width:45px; font-size:0.9rem; }
.filter-chips { display:flex; flex-wrap:wrap; gap:6px; }
.filter-chip { background:white; border:1.5px solid #d9e2f0; padding:6px 14px; border-radius:40px; font-size:0.8rem; font-weight:500; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.filter-chip:hover { background:#e5eeff; border-color:var(--primary); transform:scale(0.98); box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.filter-chip.active { background:var(--primary); border-color:var(--primary); color:white; }
.sticky-custom { position:absolute; right:20px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:600; color:#c62828; }
.sticky-custom img { height:30px; width:auto; border-radius:8px; }
.table-wrapper { background:white; border-radius:var(--radius-lg); padding:8px 4px 8px 12px; box-shadow:var(--shadow-md); overflow-x:auto; -webkit-overflow-scrolling:touch; min-height:600px; }
.promo-table { width:100%; border-collapse:separate; border-spacing:0 4px; font-size:0.9rem; table-layout:fixed; }
.promo-table th { text-align:left; padding:12px 6px 8px; background:transparent; font-weight:700; color:#0f2b4f; border-bottom:2px solid #cbddf5; white-space:nowrap; font-size:0.8rem; }
.promo-table td { padding:10px 6px; background:#fbfdff; border-radius:var(--radius-sm); vertical-align:middle; white-space:nowrap; border-bottom:1px solid #edf2f9; }
.promo-table tbody tr:nth-child(even) td { background:#f8fafc; }
.promo-table td:first-child { white-space:normal; word-break:break-word; }
.promo-table tbody tr:hover td { background:#f1f7ff; box-shadow:0 4px 10px rgba(0,0,0,0.03); transform:translateY(-2px); }
.promo-table tbody tr.pinned-row td:first-child { border-left:4px solid var(--warning); }
.promo-table tbody tr.pinned-row td { background:#fffbeb; }
.server-name { font-weight:700; color:#0b1e3a; font-size:0.95rem; }
.dc-tag { background:#e2eafc; padding:3px 10px; border-radius:30px; font-weight:600; color:var(--primary); font-size:0.8rem; display:inline-block; }
.type-badge { background:#d2e0ff; padding:3px 10px; border-radius:30px; font-weight:600; font-size:0.8rem; }
.price-block { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.original-price { font-size:0.75rem; color:#8b9ab5; text-decoration:line-through; }
.promo-price { font-size:1.1rem; font-weight:800; color:#c62828; }
.discount-badge { background:linear-gradient(145deg, #ff7043, #f4511e); color:white; font-weight:800; padding:2px 8px; border-radius:20px; font-size:0.7rem; transition:transform 0.2s; }
.discount-badge:hover { transform:scale(1.05); }
.promo-deadline { font-size:0.7rem; background:#e3f2fd; padding:2px 8px; border-radius:30px; color:#1565c0; display:inline-block; margin-top:4px; }
.coupon-code { background:#fef9c3; padding:3px 8px; border-radius:20px; font-family:monospace; font-weight:600; font-size:0.8rem; border:1px dashed #eab308; cursor:pointer; }
.buy-btn { background:linear-gradient(145deg, #ff5722, #e64a19); padding:6px 14px; border-radius:40px; color:white; font-weight:700; font-size:0.8rem; text-decoration:none; display:inline-block; transition:var(--transition); box-shadow:0 4px 10px rgba(230,74,25,0.2); }
.buy-btn:hover { transform:scale(1.02); box-shadow:0 6px 14px rgba(230,74,25,0.3); }
.inline-ad-row td { background:#fef9e7 !important; padding:8px; }
.inline-ad-container { position:relative; display:flex; justify-content:center; align-items:center; width:100%; }
.inline-ad-link { display:inline-block; }
.inline-ad-img { border-radius:var(--radius-sm); box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.inline-ad-close { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:24px; height:24px; background:rgba(0,0,0,0.4); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; }
.footer-note { text-align:center; color:var(--text-muted); margin-top:24px; font-size:0.8rem; }
.footer-note a { color:var(--primary); text-decoration:none; }
.back-to-top { position:fixed; bottom:30px; right:30px; width:44px; height:44px; background:var(--primary); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; box-shadow:0 6px 16px rgba(59,130,246,0.3); opacity:0; visibility:hidden; transition:var(--transition); z-index:1000; }
.back-to-top.show { opacity:1; visibility:visible; }
.back-to-top:hover { transform:scale(1.1); background:var(--primary-dark); }
.toast-msg { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:#1e293b; color:white; padding:12px 28px; border-radius:60px; font-size:14px; z-index:9999; opacity:0; transition:opacity 0.2s; pointer-events:none; box-shadow:var(--shadow-lg); }
.toast-msg.show { opacity:1; }
.pagination-container { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.page-btn { background:white; border:1px solid var(--border-light); padding:8px 16px; border-radius:40px; cursor:pointer; transition:var(--transition); font-weight:500; }
.page-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }
.page-btn.active { background:var(--primary); color:white; }
@media (max-width:1400px) { .couplet-container { display:none !important; } }