/* ===== ConfaHub Files design overlay =====
   OVERRIDES ONLY: background, border, shadow, color, opacity, blur.
   NEVER touches: display, position, width, height, padding, margin,
   grid/flex, font-family, font-size, visibility, hidden, z-index.
   ========================================= */

/* ---- Variables: swap entire palette to Files monochrome ---- */
:root {
    --bg: linear-gradient(to top right, #000000 0%, #444444 100%);
    --bg-elevated: rgba(10, 10, 10, .72);
    --bg-soft: rgba(9, 9, 9, .62);
    --surface: rgba(20, 20, 20, .5);
    --surface-soft: rgba(12, 12, 12, .45);
    --border: rgba(255, 255, 255, .17);
    --border-strong: rgba(255, 255, 255, .24);
    --text: #ffffff;
    --muted: #c8c8c8;
    --muted-soft: #969696;
    --chip: rgba(255, 255, 255, .06);
    --shadow: 0 26px 70px rgba(0, 0, 0, .28);
    --shadow-soft: 0 16px 44px rgba(0, 0, 0, .18);
    --glow: 0 0 0 1px rgba(255, 255, 255, .04), 0 18px 40px rgba(255, 255, 255, .04);
}

/* ---- Site ambience: monochrome glow (screen blend like Files) ---- */
.site-ambience {
    mix-blend-mode: screen;
    background:
        radial-gradient(ellipse 68% 54% at 0% 4%, rgba(255, 255, 255, .28), rgba(205, 205, 205, .10) 35%, transparent 73%),
        radial-gradient(ellipse 54% 64% at 60% 37%, rgba(255, 255, 255, .34), rgba(190, 190, 190, .14) 32%, transparent 71%),
        radial-gradient(ellipse 64% 52% at 103% 92%, rgba(238, 238, 238, .20), rgba(150, 150, 150, .08) 39%, transparent 74%);
}

.site-ambience__glow {
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 58%);
    filter: blur(80px);
    opacity: .16;
}

.site-ambience__mesh {
    opacity: .05;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 84px 84px;
}

/* ---- Glass: stronger blur everywhere ---- */
.surface-card,
.site-header__inner,
.bottom-nav-mobile__inner,
.email-verify-modal__card {
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border-color: var(--border);
    box-shadow: inset 0 1px rgba(255, 255, 255, .18), inset 0 -1px rgba(0, 0, 0, .12), var(--shadow);
}

/* ---- Hero visual: monochrome, no colored gradients ---- */
.hero-card__visual {
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 255, 255, .09), transparent 70%),
        linear-gradient(160deg, rgba(20, 20, 20, .55), rgba(5, 5, 5, .25));
}

.hero-card__ambient {
    background: radial-gradient(ellipse, rgba(255, 255, 255, .14), transparent 62%);
    filter: blur(55px);
}

.hero-card__ambient--cool {
    background: radial-gradient(ellipse, rgba(255, 255, 255, .18), transparent 60%);
}

/* ---- Cards: deeper glass, stronger borders ---- */
.stats-card {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
    box-shadow: inset 0 1px rgba(255, 255, 255, .13);
}

.service-card {
    background: rgba(8, 8, 8, .34);
    border-color: var(--border);
    box-shadow: inset 0 1px rgba(255, 255, 255, .10), 0 12px 28px rgba(0, 0, 0, .11);
}

.sidebar-service-card {
    background: rgba(255, 255, 255, .04);
    border-color: var(--border);
}

/* ---- Icon buttons: glass pill ---- */
.icon-button {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
    box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 8px 24px rgba(0, 0, 0, .15);
}

.icon-button--accent {
    background: rgba(255, 255, 255, .09);
    color: var(--text);
}

/* ---- Header user pill ---- */
.header-user-profile {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
}

.header-link-pill {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
}

/* ---- Primary buttons ---- */
.domain-migration-banner__button,
.auth-spotlight__button,
.auth-form-card__button-link {
    background: #eeeeee;
    color: #181818;
    border-color: rgba(255, 255, 255, .33);
    box-shadow: inset 0 1px rgba(255, 255, 255, .75), 0 12px 30px rgba(0, 0, 0, .18);
}

/* ---- Service card button: cleaner glass ---- */
.service-card__button {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}

/* ---- Sidebar premium card ---- */
.sidebar-premium-card {
    background: linear-gradient(145deg, rgba(231, 241, 250, .06), rgba(255, 245, 226, .02));
    border-color: var(--border);
}

/* ---- Auth service preview items ---- */
.auth-service-preview__item {
    background: rgba(255, 255, 255, .04);
    border-color: var(--border);
}

/* ---- Auth form fields ---- */
.auth-form-card__field input,
.email-verify-modal__row input {
    background: rgba(9, 9, 9, .42);
    border-color: var(--border);
    box-shadow: inset 0 1px rgba(255, 255, 255, .09);
    color: var(--text);
}

/* ---- Hero devices: cleaner gradients ---- */
.hero-device,
.hero-device--front {
    background: linear-gradient(135deg, rgba(30, 30, 30, .92), rgba(10, 10, 10, .82));
    border-color: var(--border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .10);
}

.hero-device__glow {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%);
}

.hero-device__line {
    background: rgba(255, 255, 255, .12);
}

/* ---- Hero badge: glass pill ---- */
.hero-badge {
    background: rgba(255, 255, 255, .06);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

/* ---- Hero orbits: monochrome ---- */
.hero-card__orbit {
    border-color: rgba(255, 255, 255, .15);
    background: radial-gradient(ellipse, rgba(255, 255, 255, .05), transparent 70%);
}

/* ---- Chips ---- */
.service-chip {
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
}

/* ---- Sidebar socials ---- */
.sidebar__socials a {
    border-color: var(--border);
}

/* ---- Domain migration banner ---- */
.domain-migration-banner {
    border-color: var(--border);
}

/* ---- Mobile drawer backdrop: deeper blur ---- */
.mobile-drawer__backdrop {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ---- Stats card link hover ---- */
@media (hover: hover) {
    .stats-card--link:hover {
        border-color: rgba(255, 255, 255, .48);
        background: rgba(255, 255, 255, .09);
    }
    .service-card:hover {
        border-color: rgba(255, 255, 255, .38);
        box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 18px 38px rgba(0, 0, 0, .22), 0 0 24px rgba(255, 255, 255, .06);
    }
    .service-card__button:hover {
        border-color: var(--border-strong);
        background: rgba(255, 255, 255, .09);
    }
    .icon-button:hover:not(.icon-button--menu):not(.icon-button--ghost) {
        border-color: rgba(255, 255, 255, .42);
        background: rgba(255, 255, 255, .10);
    }
    .sidebar-service-card:hover {
        border-color: rgba(255, 255, 255, .38);
        background: rgba(255, 255, 255, .08);
    }
}