/* =========================================================================
   Zero Tools — flat layer
   Loaded after style.css + theme.css. Keeps the violet/noir identity but
   removes gloss: solid surfaces, 1px borders, no glows, no blur, no gradients.
   ========================================================================= */

:root {
    --radius: 12px;
    --glow: none;
}

/* ---------------------------------------------------------------- base */
body {
    background: var(--bg);
    background-attachment: scroll;
}

body::before,
body::after {
    display: none !important;
}

.ambient,
.ambient-orb {
    display: none !important;
}

.gradient-text {
    background: none !important;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--accent-2);
    color: var(--accent-2);
    animation: none !important;
}

::selection {
    background: var(--red);
    color: #fff;
}

/* ---------------------------------------------------------------- nav */
.nav {
    background: #08040f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
}

.nav::after {
    display: none;
}

.landing-nav {
    background: transparent;
}

.nav-link {
    border: 1px solid transparent;
}

.nav-link:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

.nav-link.active {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.nav-link-wl {
    color: var(--accent-2);
    border-color: rgba(139, 92, 246, .35);
    background: rgba(139, 92, 246, .10);
}

.nav-link-wl:hover,
.nav-link-wl.active {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

/* ---------------------------------------------------------------- buttons */
.btn {
    border-radius: 10px;
    box-shadow: none !important;
    background-image: none !important;
    transform: none !important;
}

.btn-primary {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn-primary:hover {
    background: #7c3aed;
    border-color: #7c3aed;
}

.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
}

.btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--accent-2);
}

.btn-danger {
    background: transparent;
    border-color: rgba(244, 63, 94, .45);
    color: #fda4af;
}

.btn-danger:hover {
    background: rgba(244, 63, 94, .12);
    border-color: rgba(244, 63, 94, .8);
    color: #fff;
}

/* ---------------------------------------------------------------- surfaces */
.card,
.plan,
.bento-card,
.why-card,
.dash-side,
.service-switch,
.announce,
.busy-banner,
.tool-flag,
.premium-lock,
.poll-box,
.ad-timer,
.wl-result,
.wl-stat,
.toast,
.mission-card,
.reward-card,
.gate-card,
.reward-modal-card,
.reward-celebrate-card,
.face-off-card,
.stat-card,
.admin-card {
    background: var(--surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card {
    border: 1px solid var(--border);
}

.card-head {
    border-bottom: 1px solid var(--border);
}

.pill,
.price-tag,
.check-row,
.chip,
.input,
.textarea,
.select {
    background-image: none !important;
    box-shadow: none !important;
}

.pill {
    background: var(--surface);
    border: 1px solid var(--border);
}

.price-tag {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: var(--red);
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .14);
}

.check-row {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.chip.active {
    background: rgba(139, 92, 246, .16);
    border-color: rgba(139, 92, 246, .55);
}

/* ---------------------------------------------------------------- badges / tags */
.badge {
    border-radius: 6px;
}

.plan-badge,
.plan-featured .plan-badge {
    background: var(--red);
    color: #fff;
    box-shadow: none;
}

.plan-featured {
    border-color: var(--border-strong);
    box-shadow: none;
}

.plan-featured::before,
.plan-featured::after {
    display: none !important;
}

.premium-tag {
    background: rgba(139, 92, 246, .18);
    border: 1px solid rgba(139, 92, 246, .4);
    color: var(--accent-2);
    text-shadow: none;
}

.balance-pill.is-premium {
    background: rgba(139, 92, 246, .14);
    border-color: rgba(139, 92, 246, .5);
    box-shadow: none;
}

.balance-infinity {
    text-shadow: none;
}

/* ---------------------------------------------------------------- dashboard rail */
.dash-side {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface) !important;
}

.dash-nav-item {
    border: 1px solid transparent;
    border-radius: 9px;
}

.dash-nav-item.active,
.dash-nav-item:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    box-shadow: none;
    transform: none;
}

.dash-nav-item.active {
    background: rgba(139, 92, 246, .14);
    border-color: rgba(139, 92, 246, .45);
    color: #fff;
}

.dash-nav-item.has-rewards {
    animation: none;
}

.dash-nav-item.has-rewards .heart-icon {
    filter: none;
    animation: none;
}

.dash-nav-external {
    margin-left: auto;
    color: var(--muted-2);
    font-size: 12px;
}

.reward-badge {
    background: #e11d48;
    box-shadow: none;
    animation: none;
}

/* ---------------------------------------------------------------- service switch */
.service-switch {
    border: 1px solid var(--border);
    background: var(--surface);
}

.service-btn {
    border-radius: 8px;
}

.service-btn.active {
    background: rgba(139, 92, 246, .16);
    border-color: rgba(139, 92, 246, .45);
    color: #fff;
}

.service-btn.active svg {
    color: var(--accent-2);
}

/* ---------------------------------------------------------------- banners */
.busy-banner {
    border: 1px solid rgba(251, 191, 36, .4) !important;
    background: rgba(251, 191, 36, .08) !important;
}

.tool-flag {
    border: 1px solid var(--border-strong) !important;
}

.tool-flag.update {
    border-color: rgba(251, 191, 36, .4) !important;
    background: rgba(251, 191, 36, .08) !important;
}

.tool-flag.off {
    border-color: rgba(244, 63, 94, .4) !important;
    background: rgba(244, 63, 94, .08) !important;
}

.premium-lock {
    border: 1px solid rgba(139, 92, 246, .4) !important;
    background: rgba(139, 92, 246, .08) !important;
}

.announce {
    border: 1px solid var(--border-strong);
    background: var(--surface) !important;
}

.announce.success {
    border-color: rgba(52, 211, 153, .45);
    background: rgba(52, 211, 153, .08) !important;
}

.announce.warning {
    border-color: rgba(251, 191, 36, .45);
    background: rgba(251, 191, 36, .08) !important;
}

.announce.danger {
    border-color: rgba(244, 63, 94, .45);
    background: rgba(244, 63, 94, .08) !important;
}

.banner {
    background: var(--surface);
    border: 1px solid var(--border);
}

.banner-success {
    border-color: rgba(52, 211, 153, .45);
    background: rgba(52, 211, 153, .08);
}

.banner-warn {
    border-color: rgba(251, 191, 36, .45);
    background: rgba(251, 191, 36, .08);
}

/* ---------------------------------------------------------------- premium cooldown */
.cooldown-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(139, 92, 246, .45);
    border-radius: 12px;
    background: rgba(139, 92, 246, .10);
}

.cooldown-banner.hidden {
    display: none !important;
}

.cooldown-banner strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.cooldown-banner span:not(.cooldown-icon) {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cooldown-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(139, 92, 246, .16);
    color: var(--accent-2);
}

.cooldown-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------------- mission / modals */
.mission-card {
    border: 1px solid var(--border-strong);
    background: var(--surface) !important;
}

.mission-bar {
    background: var(--surface-3);
}

.mission-bar-fill {
    background: var(--red);
    background-image: none !important;
}

.mission-foot-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mission-row {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.gate-card,
.reward-modal-card {
    border: 1px solid var(--border-strong);
    background: var(--surface) !important;
}

.gate-backdrop,
.mission-backdrop,
.reward-modal-backdrop {
    background: rgba(3, 1, 8, .78);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ---------------------------------------------------------------- rewards */
.reward-card {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
}

.reward-card.pending {
    border-color: rgba(139, 92, 246, .5) !important;
}

.reward-card::before,
.reward-card::after,
.reward-card-head::before {
    display: none !important;
}

.rewards-summary {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.reward-status {
    border-radius: 6px;
}

/* ---------------------------------------------------------------- landing chrome */
.hero-badge {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}

.hero-orbit .ring {
    border-color: rgba(139, 92, 246, .32);
    box-shadow: none;
    animation-duration: 40s;
}

.hero-orbit .core {
    box-shadow: none;
    border: 1px solid var(--border-strong);
}

.hero-orbit .satellite {
    box-shadow: none;
    background: var(--accent-2);
}

/* Three plans read as one row on tablets too; the theme's 2-column step
   otherwise leaves the featured monthly plan alone on a second row. */
@media (min-width: 721px) and (max-width: 980px) {
    .plan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bento-card,
.why-card,
.plan {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
}

.bento-card:hover,
.why-card:hover,
.plan:hover {
    border-color: var(--border-strong) !important;
    transform: none !important;
    box-shadow: none !important;
}

.bento-icon {
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .3);
    border-radius: 10px;
}

.metric-strip {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.footer {
    border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- tables */
.table th {
    background: var(--surface-2);
}

.table tr:hover td {
    background: var(--surface-2);
}

/* ---------------------------------------------------------------- buy me a coffee */
.bmc-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 221, 0, .35);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.bmc-banner:hover {
    border-color: rgba(255, 221, 0, .7);
    background: var(--surface-2);
}

.bmc-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #ffdd00;
    color: #1a1200;
}

.bmc-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bmc-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.bmc-copy strong {
    font-size: 13.5px;
    font-weight: 700;
}

.bmc-copy span {
    font-size: 12.5px;
    color: var(--muted);
}

.bmc-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 13px;
    border-radius: 8px;
    background: #ffdd00;
    color: #1a1200;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bmc-cta svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bmc-cta-short {
    display: none;
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 720px) {
    .bmc-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bmc-cta {
        width: 100%;
        justify-content: center;
    }

    .bmc-cta-full {
        display: none;
    }

    .bmc-cta-short {
        display: inline;
    }
}