/**
 * Satoshi's House — Futuristic Theme v2
 * ======================================
 * Tema futurista/tecnologico INTENSO com as cores do Satoshi's House.
 * Importar em todas as paginas da area de membros e CIS.
 *
 * <link rel="stylesheet" href="/assets/css/futuristic.css">
 */

/* ═══════════════════════════════════════════════════
   THEME VARIABLES OVERRIDE
   ═══════════════════════════════════════════════════ */
:root {
    --bg: #030712;
    --surface: rgba(17, 17, 19, 0.85);
    --surface-2: rgba(24, 24, 27, 0.7);
    --surface-3: rgba(31, 31, 35, 0.5);
    --border: rgba(247, 147, 26, 0.15);
    --border-hover: rgba(247, 147, 26, 0.35);
    --text: #f5f5f7;
    --text-muted: #a1a1aa;
    --text-dim: #71717a;

    /* Satoshi's House original colors */
    --orange: #f7931a;
    --orange-hover: #e8820f;
    --orange-glow: rgba(247, 147, 26, 0.2);

    --green: #22c55e;
    --green-glow: rgba(34, 197, 94, 0.2);
    --red: #ef4444;
    --red-glow: rgba(239, 68, 68, 0.2);
    --purple: #a855f7;
    --purple-glow: rgba(168, 85, 247, 0.2);
    --blue: #3b82f6;
    --blue-glow: rgba(59, 130, 246, 0.2);
    --yellow: #eab308;
    --cyan: #06b6d4;

    /* Neon glow effects (orange-based) — INTENSIFIED */
    --neon-glow-sm: 0 0 10px rgba(247, 147, 26, 0.4), 0 0 20px rgba(247, 147, 26, 0.15);
    --neon-glow-md: 0 0 15px rgba(247, 147, 26, 0.35), 0 0 40px rgba(247, 147, 26, 0.15), 0 0 60px rgba(247, 147, 26, 0.05);
    --neon-glow-lg: 0 0 20px rgba(247, 147, 26, 0.4), 0 0 60px rgba(247, 147, 26, 0.2), 0 0 100px rgba(247, 147, 26, 0.1);

    --radius: 12px;
    --radius-lg: 20px;

    /* Glassmorphism — stronger */
    --glass-bg: rgba(17, 17, 19, 0.6);
    --glass-border: rgba(247, 147, 26, 0.12);
    --glass-blur: blur(20px);
}

/* ═══════════════════════════════════════════════════
   BODY FUTURISTIC BACKGROUND — HIGH INTENSITY
   ═══════════════════════════════════════════════════ */
body {
    background: var(--bg) !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(247, 147, 26, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(168, 85, 247, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(34, 197, 94, 0.05), transparent) !important;
    color: var(--text) !important;
}

/* body::before reserved — no grid background */
body::before {
    display: none !important;
}

/* Floating orbs — VISIBLE */
body::after {
    content: '';
    position: fixed;
    top: 5%;
    right: -5%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(247, 147, 26, 0.05) 40%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: floatOrb 12s ease-in-out infinite alternate;
}

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50% { transform: translate(-80px, 40px) scale(1.15); opacity: 1; }
    100% { transform: translate(30px, -30px) scale(0.9); opacity: 0.8; }
}

/* Second orb via .tool-page pseudo or a secondary container */
@keyframes floatOrb2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(60px, -50px) scale(1.2); opacity: 0.9; }
    100% { transform: translate(-40px, 30px) scale(0.85); opacity: 0.7; }
}

/* Scan line animation (kept for .scan-effect utility only) */
@keyframes scanLine {
    0% { top: -5%; }
    100% { top: 105%; }
}

/* ═══════════════════════════════════════════════════
   GLASSMORPHISM CARDS — STRONG
   ═══════════════════════════════════════════════════ */
.area-card,
.tool-panel,
.wa-card,
.cis-card,
.stat-card,
.demo-banner {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid rgba(247, 147, 26, 0.12) !important;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(247, 147, 26, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.area-card:hover,
.tool-panel:hover,
.cis-card:hover {
    border-color: rgba(247, 147, 26, 0.35) !important;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(247, 147, 26, 0.12),
        0 0 40px rgba(247, 147, 26, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-4px) !important;
}

/* Gradient top border on cards */
.area-card::before {
    height: 2px !important;
    opacity: 0.9;
}

.area-card:hover::before {
    opacity: 1;
    height: 3px !important;
}

/* ═══════════════════════════════════════════════════
   BROAD GLASSMORPHISM — ALL TOOL-SPECIFIC CARDS
   ═══════════════════════════════════════════════════ */
.gas-card,
.conv-result,
.sim-result,
.ls-card,
.as-card,
.oi-card,
.fr-card,
.eb-card,
.lm-card,
.ss-card,
.ct-card,
.mp-card,
.mb-card,
.oa-card,
.ef-card,
.rd-card,
.sm-card,
.pa-card,
.vh-card,
.cs-card,
.cm-card,
.pc-card,
.sb-card,
.am-card,
.wp-card,
.bd-card,
.lf-card,
.si-card,
.ati-card,
.dca-card,
.stk-card,
.pt-card,
.rp-card,
.ai-card,
[class*="-summary"] > div,
[class*="-stats"] > div {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(247, 147, 26, 0.12) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35), 0 0 1px rgba(247, 147, 26, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ═══════════════════════════════════════════════════
   TOOL-PAGE PANEL — ANIMATED BORDER GLOW (TOP LINE)
   ═══════════════════════════════════════════════════ */
.tool-panel {
    position: relative;
    overflow: hidden;
}

.tool-panel::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent 10%, var(--orange) 50%, transparent 90%) !important;
    opacity: 0.6 !important;
    transition: opacity 0.4s !important;
}

.tool-panel:hover::before {
    opacity: 1 !important;
    box-shadow: 0 0 15px rgba(247, 147, 26, 0.4) !important;
}

/* ═══════════════════════════════════════════════════
   GRADIENT HEADER TEXT — PROMINENT
   ═══════════════════════════════════════════════════ */
.tool-header h1 {
    background: linear-gradient(135deg, #f5f5f7 30%, var(--orange) 80%, #e8820f 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 25px rgba(247, 147, 26, 0.3));
}

/* ═══════════════════════════════════════════════════
   NEON GLOW ON BIG VALUES
   ═══════════════════════════════════════════════════ */
.tool-result__value--big,
[class*="__value--big"],
[class*="__value--orange"],
[class*="gauge-value"],
[class*="score-value"] {
    text-shadow: 0 0 15px rgba(247, 147, 26, 0.5), 0 0 30px rgba(247, 147, 26, 0.2) !important;
}

.tool-result__value--green {
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.5), 0 0 30px rgba(34, 197, 94, 0.2) !important;
}

.tool-result__value--purple {
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.5), 0 0 30px rgba(168, 85, 247, 0.2) !important;
}

/* ═══════════════════════════════════════════════════
   FUTURISTIC BUTTONS
   ═══════════════════════════════════════════════════ */
.tool-btn--primary,
.btn--primary {
    background: linear-gradient(135deg, #f7931a, #e8820f) !important;
    color: #000 !important;
    font-weight: 700 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.4), 0 0 25px rgba(247, 147, 26, 0.15) !important;
    transition: all 0.3s ease !important;
}

.tool-btn--primary:hover,
.btn--primary:hover {
    box-shadow: 0 0 20px rgba(247, 147, 26, 0.5), 0 0 45px rgba(247, 147, 26, 0.2), 0 0 70px rgba(247, 147, 26, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Shine sweep on hover */
.tool-btn--primary::after,
.btn--primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg) translateY(-100%);
    transition: transform 0.6s;
}

.tool-btn--primary:hover::after,
.btn--primary:hover::after {
    transform: rotate(45deg) translateY(100%);
}

/* Outer glow layer */
.tool-btn {
    position: relative !important;
    overflow: hidden !important;
}

.tool-btn--primary::before {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.5), rgba(232, 130, 15, 0.3)) !important;
    filter: blur(10px) !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}

.tool-btn--primary:hover::before {
    opacity: 1 !important;
}

.tool-btn--premium {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), 0 0 30px rgba(168, 85, 247, 0.15) !important;
}

.tool-btn--premium:hover {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), 0 0 50px rgba(168, 85, 247, 0.2) !important;
}

.tool-btn--secondary {
    background: var(--glass-bg) !important;
    border: 1px solid rgba(247, 147, 26, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

.tool-btn--secondary:hover {
    border-color: rgba(247, 147, 26, 0.45) !important;
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.2) !important;
}

/* ═══════════════════════════════════════════════════
   NEON INPUTS
   ═══════════════════════════════════════════════════ */
.tool-input,
.tool-select {
    background: rgba(17, 17, 19, 0.8) !important;
    border: 1px solid rgba(247, 147, 26, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

.tool-input:focus,
.tool-select:focus {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.1), 0 0 15px rgba(247, 147, 26, 0.2) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════
   PLAN BADGES — NEON GLOW
   ═══════════════════════════════════════════════════ */
.plan-badge--pro {
    box-shadow: 0 0 10px rgba(247, 147, 26, 0.2), 0 0 20px rgba(247, 147, 26, 0.08);
}

.plan-badge--premium {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2), 0 0 20px rgba(168, 85, 247, 0.08);
}

/* ═══════════════════════════════════════════════════
   TABLES — FUTURISTIC
   ═══════════════════════════════════════════════════ */
.tool-table th {
    background: rgba(17, 17, 19, 0.85) !important;
    border-bottom: 1px solid rgba(247, 147, 26, 0.2) !important;
    color: var(--orange) !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    text-shadow: 0 0 10px rgba(247, 147, 26, 0.3);
}

.tool-table td {
    border-bottom: 1px solid rgba(247, 147, 26, 0.07) !important;
}

.tool-table tr:hover td {
    background: rgba(247, 147, 26, 0.06) !important;
}

/* ═══════════════════════════════════════════════════
   TABS — FUTURISTIC
   ═══════════════════════════════════════════════════ */
.tool-tab {
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.3s ease !important;
}

.tool-tab--active {
    color: var(--orange) !important;
    border-bottom-color: var(--orange) !important;
    text-shadow: 0 0 12px rgba(247, 147, 26, 0.5);
    background: rgba(247, 147, 26, 0.05) !important;
}

.tool-tabs {
    border-bottom: 1px solid rgba(247, 147, 26, 0.12) !important;
}

/* ═══════════════════════════════════════════════════
   TOPBAR — FUTURISTIC OVERRIDE
   ═══════════════════════════════════════════════════ */
.topbar {
    background: rgba(3, 7, 18, 0.9) !important;
    border-bottom: 1px solid rgba(247, 147, 26, 0.1) !important;
    box-shadow: 0 2px 30px rgba(247, 147, 26, 0.06), 0 0 1px rgba(247, 147, 26, 0.15) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.topbar__logo-text span {
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.5);
}

.topbar__nav-link:hover {
    background: rgba(247, 147, 26, 0.08) !important;
}

/* ═══════════════════════════════════════════════════
   LOADING SPINNER — NEON
   ═══════════════════════════════════════════════════ */
.tool-loading__spinner {
    border-color: rgba(247, 147, 26, 0.15) !important;
    border-top-color: var(--orange) !important;
    box-shadow: 0 0 20px rgba(247, 147, 26, 0.25);
}

/* ═══════════════════════════════════════════════════
   RANGE SLIDER — NEON
   ═══════════════════════════════════════════════════ */
.tool-range {
    background: rgba(247, 147, 26, 0.1) !important;
}

.tool-range::-webkit-slider-thumb {
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.6), 0 0 25px rgba(247, 147, 26, 0.2);
}

.tool-range::-moz-range-thumb {
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.6), 0 0 25px rgba(247, 147, 26, 0.2);
}

/* ═══════════════════════════════════════════════════
   RESULTS — FUTURISTIC
   ═══════════════════════════════════════════════════ */
.tool-result {
    background: rgba(17, 17, 19, 0.55) !important;
    border: 1px solid rgba(247, 147, 26, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.tool-result__row {
    border-bottom: 1px solid rgba(247, 147, 26, 0.07) !important;
}

.tool-result__value--big {
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.4), 0 0 40px rgba(247, 147, 26, 0.15);
}

/* ═══════════════════════════════════════════════════
   CHART CONTAINER — NEON BORDER
   ═══════════════════════════════════════════════════ */
.tool-chart-wrap {
    border: 1px solid rgba(247, 147, 26, 0.1) !important;
    border-radius: var(--radius) !important;
    padding: 8px !important;
    background: rgba(3, 7, 18, 0.6) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

/* ═══════════════════════════════════════════════════
   BACK LINK — NEON HOVER
   ═══════════════════════════════════════════════════ */
.tool-topbar__back:hover {
    text-shadow: 0 0 12px rgba(247, 147, 26, 0.5) !important;
    color: var(--orange) !important;
}

/* ═══════════════════════════════════════════════════
   SCROLLBAR — FUTURISTIC
   ═══════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(247, 147, 26, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(247, 147, 26, 0.4);
}

/* ═══════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════ */
::selection {
    background: rgba(247, 147, 26, 0.3);
    color: #fff;
}

/* ═══════════════════════════════════════════════════
   FUTURISTIC UTILITY CLASSES
   ═══════════════════════════════════════════════════ */
.neon-text {
    color: var(--orange);
    text-shadow: 0 0 10px rgba(247, 147, 26, 0.6), 0 0 25px rgba(247, 147, 26, 0.3), 0 0 50px rgba(247, 147, 26, 0.1);
}

.gradient-text {
    background: linear-gradient(135deg, var(--orange), #e8820f, var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pulse animation for live indicators */
@keyframes neonPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(247, 147, 26, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 20px rgba(247, 147, 26, 0.6); }
}

.pulse-neon {
    animation: neonPulse 2s ease-in-out infinite;
}

/* Scan line utility */
.scan-effect::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(247, 147, 26, 0.2), transparent);
    animation: scanLine 8s linear infinite;
    pointer-events: none;
    z-index: 10;
}

/* ═══════════════════════════════════════════════════
   CORNER ACCENTS ON PANELS
   ═══════════════════════════════════════════════════ */
.tool-panel::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-right: 2px solid rgba(247, 147, 26, 0.2) !important;
    border-bottom: 2px solid rgba(247, 147, 26, 0.2) !important;
    border-radius: 0 0 var(--radius-lg) 0 !important;
    pointer-events: none !important;
    transition: all 0.4s !important;
}

.tool-panel:hover::after {
    border-color: rgba(247, 147, 26, 0.45) !important;
    box-shadow: 5px 5px 15px rgba(247, 147, 26, 0.1) !important;
}

/* ═══════════════════════════════════════════════════
   ANIMATED BORDER GRADIENT — HOVER EFFECT ON CARDS
   ═══════════════════════════════════════════════════ */
@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════
   AVATAR — FUTURISTIC
   ═══════════════════════════════════════════════════ */
.topbar__avatar:hover {
    box-shadow: 0 0 20px rgba(247, 147, 26, 0.3) !important;
}

.avatar-dd {
    background: rgba(17, 17, 19, 0.95) !important;
    border: 1px solid rgba(247, 147, 26, 0.15) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(247, 147, 26, 0.2) !important;
}

.avatar-dd__item:hover {
    background: rgba(247, 147, 26, 0.08) !important;
}

/* ═══════════════════════════════════════════════════
   DEMO OVERLAY — FUTURISTIC
   ═══════════════════════════════════════════════════ */
.demo-overlay::after {
    background: linear-gradient(to bottom, transparent, var(--bg)) !important;
}

.demo-banner {
    border: 1px solid rgba(247, 147, 26, 0.15) !important;
}

/* ═══════════════════════════════════════════════════
   INLINE STYLE OVERRIDES — BODY & CONTAINERS
   ═══════════════════════════════════════════════════ */
body[style] {
    background: var(--bg) !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(247, 147, 26, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(168, 85, 247, 0.08), transparent),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(34, 197, 94, 0.05), transparent) !important;
}

/* ═══════════════════════════════════════════════════
   GLOW LABELS / STATUS INDICATORS
   ═══════════════════════════════════════════════════ */
[class*="--live"],
[class*="--active"],
[class*="badge--success"] {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3) !important;
}

/* ═══════════════════════════════════════════════════
   FUTURISTIC H2 / H3 INSIDE PANELS
   ═══════════════════════════════════════════════════ */
.tool-panel h2 {
    color: var(--text) !important;
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.15);
    letter-spacing: 0.3px !important;
}

.tool-panel h3 {
    color: var(--text-muted) !important;
    text-shadow: 0 0 15px rgba(247, 147, 26, 0.1);
}

/* ═══════════════════════════════════════════════════
   FUTURISTIC FORM LABELS — UPPERCASE TECH STYLE
   ═══════════════════════════════════════════════════ */
.tool-form-group label {
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 11px !important;
    color: var(--orange) !important;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════
   INPUTS & SELECTS — NEON FOCUS + LEFT ACCENT
   ═══════════════════════════════════════════════════ */
.tool-input,
.tool-select {
    border-left: 3px solid rgba(247, 147, 26, 0.25) !important;
    background: rgba(10, 10, 14, 0.9) !important;
    border-top: 1px solid rgba(247, 147, 26, 0.08) !important;
    border-right: 1px solid rgba(247, 147, 26, 0.08) !important;
    border-bottom: 1px solid rgba(247, 147, 26, 0.08) !important;
    transition: all 0.3s ease !important;
}

.tool-input:focus,
.tool-select:focus {
    border-left-color: var(--orange) !important;
    border-color: rgba(247, 147, 26, 0.3) !important;
    border-left: 3px solid var(--orange) !important;
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.08), 0 0 20px rgba(247, 147, 26, 0.15), inset 0 0 10px rgba(247, 147, 26, 0.03) !important;
    background: rgba(10, 10, 14, 1) !important;
}

/* ═══════════════════════════════════════════════════
   PANELS — LEFT ACCENT BORDER (COLORED)
   ═══════════════════════════════════════════════════ */
.tool-panel {
    border-left: 3px solid rgba(247, 147, 26, 0.3) !important;
}

.tool-panel:hover {
    border-left-color: var(--orange) !important;
}

/* ═══════════════════════════════════════════════════
   RESULT ROWS — FUTURISTIC DATA DISPLAY
   ═══════════════════════════════════════════════════ */
.tool-result__row {
    padding: 12px 0 !important;
    transition: background 0.2s !important;
}

.tool-result__row:hover {
    background: rgba(247, 147, 26, 0.03) !important;
    padding-left: 8px !important;
}

.tool-result__label {
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 12px !important;
}

.tool-result__value {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
    letter-spacing: 0.5px !important;
}

/* ═══════════════════════════════════════════════════
   TOOL DESCRIPTION TEXT — SLIGHTLY BRIGHTER
   ═══════════════════════════════════════════════════ */
.tool-header p {
    color: var(--text-muted) !important;
    border-left: 2px solid rgba(247, 147, 26, 0.3) !important;
    padding-left: 12px !important;
}

/* ═══════════════════════════════════════════════════
   NAV FOOTER — TECH STYLE
   ═══════════════════════════════════════════════════ */
.tool-nav {
    border-top: 1px solid rgba(247, 147, 26, 0.08) !important;
    padding-top: 20px !important;
}

.tool-nav a {
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 11px !important;
}

.tool-nav a:hover {
    text-shadow: 0 0 10px rgba(247, 147, 26, 0.4) !important;
}

/* ═══════════════════════════════════════════════════
   BADGES — ENHANCED GLOW
   ═══════════════════════════════════════════════════ */
.plan-badge {
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════
   TOPBAR BACK ARROW — NEON STYLE
   ═══════════════════════════════════════════════════ */
.tool-topbar__back {
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    body::after {
        width: 350px;
        height: 350px;
    }

    .tool-header h1 {
        font-size: 22px !important;
    }

    .tool-panel::after {
        width: 25px !important;
        height: 25px !important;
    }
}