:root {
    --gold: #c9a84c;
    --gold-light: #e2c571;
    --gold-bright: #ffd700;
    --dark: #0a0a0a;
    --dark-100: #111111;
    --dark-200: #1a1a1a;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Space Grotesk", sans-serif;
    background-color: var(--dark);
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Grid background ── */
.grid-bg {
    background-image: linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
    background-size: 52px 52px;
}

/* ── Gold text gradient ── */
.gold-text {
    background: linear-gradient(135deg, #c9a84c 0%, #ffd700 50%, #c9a84c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Card glow ── */
.card-glow {
    border: 1px solid rgba(201, 168, 76, 0.25);
    box-shadow:
        0 0 30px rgba(201, 168, 76, 0.08),
        inset 0 0 30px rgba(201, 168, 76, 0.04);
}

/* ── Blinking cursor ── */
@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
.blink {
    animation: blink 1.1s step-end infinite;
}

/* ── Status dot pulse ── */
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}
.pulse-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Message fade swap ── */
@keyframes msg-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.msg-in {
    animation: msg-in 0.45s ease both;
}

/* ── Ambient glow ── */
.ambient-top {
    background: radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.12) 0%, transparent 65%);
}
.ambient-bottom {
    background: radial-gradient(ellipse at 50% 100%, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
}

/* ── Corner brackets ── */
.bracket {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(201, 168, 76, 0.45);
    border-style: solid;
}
.bracket-tl {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}
.bracket-tr {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
}
.bracket-bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
}
.bracket-br {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0;
}

/* ── Decorative hex ring ── */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.spin-slow {
    animation: spin-slow 18s linear infinite;
}
@keyframes spin-rev {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
.spin-rev {
    animation: spin-rev 24s linear infinite;
}

[x-cloak] {
    display: none !important;
}