@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
    --bg-deep: #020617;
    --line-subtle: rgba(148, 163, 184, 0.16);
    --accent-cyan: #22d3ee;
}

body {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 10% 8%, rgba(34, 211, 238, 0.12), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.1), transparent 32%),
        linear-gradient(120deg, #020617 0%, #081126 45%, #030712 100%);
}

.mono-face {
    font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
    letter-spacing: 0.02em;
}

.tools-panel {
    background: linear-gradient(180deg, rgba(8, 18, 37, 0.9), rgba(2, 6, 23, 0.88));
    border: 1px solid var(--line-subtle);
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.42);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tools-panel:hover {
    border-color: rgba(34, 211, 238, 0.35);
    box-shadow: 0 20px 38px rgba(2, 6, 23, 0.5);
    transform: translateY(-2px);
}

.tools-kicker {
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 700;
}

::selection {
    background-color: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
}