/* ============================================================
   DevBoost — site-wide visual polish pass
   Purely decorative/additive overrides so the rest of the site
   feels like the main landing (glow, glass, soft motion).
   No layout, markup or functional properties are touched —
   safe to load last, after every page's own stylesheet.
   ============================================================ */

/* ---------- Ambient background glow (same trick as the landing) ---------- */
body {
    position: relative;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
}

body::before {
    width: 620px;
    height: 620px;
    top: -220px;
    left: -180px;
    background: radial-gradient(circle at 40% 40%, rgba(156, 77, 255, 0.30), transparent 62%);
}

body::after {
    width: 560px;
    height: 560px;
    bottom: -240px;
    right: -200px;
    background: radial-gradient(circle at 60% 50%, rgba(255, 153, 0, 0.18), transparent 60%);
}

/* ---------- Scrollbar & selection ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: rgba(156, 77, 255, 0.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(156, 77, 255, 0.55); }
* { scrollbar-color: rgba(156, 77, 255, 0.4) transparent; scrollbar-width: thin; }

::selection {
    background: rgba(156, 77, 255, 0.45);
    color: #fff;
}

/* ---------- Header — soft glow line instead of a flat rule ---------- */
.header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    position: relative;
}
.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(156, 77, 255, 0.55), transparent);
    pointer-events: none;
}

/* ---------- Avatar / balance chip — a bit more glassy & alive ---------- */
.avatar:hover {
    box-shadow: 0 0 0 3px rgba(156, 77, 255, 0.45), 0 6px 18px rgba(156, 77, 255, 0.25);
}

.balance {
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.balance:hover {
    box-shadow: 0 6px 20px rgba(156, 77, 255, 0.35);
}

/* ---------- Dropdown panels — landing-style elevation ---------- */
.notifications-menu,
.profile-menu,
.db-select-panel,
.db-time-panel,
.db-datetime-panel {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- Buttons — smoother motion & press feedback everywhere ---------- */
button,
[class*="btn-"],
.tab,
.filter-tab,
.auth-tab {
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
                background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

button:active:not(:disabled),
[class*="btn-"]:active:not(:disabled) {
    transform: translateY(1px);
}

/* ---------- Card-like tiles — gentle hover lift, landing-style ---------- */
.card,
.campaign-card,
.streamer-card-v3,
.offer-card,
.deal-card,
.dispute-card,
.channel-mod-card,
.history-card,
.payment-card,
.integration-item-card,
.mode-card,
.period-card,
.timeline-card,
.checkout-card,
.cpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover,
.campaign-card:hover,
.streamer-card-v3:hover,
.offer-card:hover,
.deal-card:hover,
.dispute-card:hover,
.channel-mod-card:hover,
.history-card:hover,
.payment-card:hover,
.integration-item-card:hover,
.mode-card:hover,
.period-card:hover,
.timeline-card:hover,
.checkout-card:hover,
.cpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* ---------- Inputs — one consistent purple focus ring site-wide ---------- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(156, 77, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(156, 77, 255, 0.18);
}