/* Compiled Tailwind lives in output.css — this file only holds brand component styles. */

:root {
    --uraan-bg: #01261e;
    --uraan-bg-deep: #001510;
    --uraan-bg-card: #063529;
    --uraan-gold: #d4af37;
    --uraan-gold-light: #f0d78c;
    --uraan-emerald: #00a86b;
    --uraan-white: #ffffff;
}

body {
    font-family: "Space Grotesk", sans-serif;
    background-color: var(--uraan-bg) !important;
    color: var(--uraan-white);
}

.gradient-btn {
    position: relative;
    background: var(--uraan-bg-deep);
    border: 2px solid transparent;
    border-radius: 0.75rem;
    padding: 0.5rem 3rem;
    background-image: linear-gradient(var(--uraan-bg-deep), var(--uraan-bg-deep)),
        linear-gradient(to top, var(--uraan-emerald), var(--uraan-gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gradient-border-text {
    position: relative;
    background: var(--uraan-bg-deep);
    border: 2px solid transparent;
    border-radius: 1rem;
    padding: 0.5rem 3rem;
    background-image: linear-gradient(var(--uraan-bg-deep), var(--uraan-bg-deep)),
        linear-gradient(to top, var(--uraan-emerald), var(--uraan-gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s ease;
    z-index: -50;
}

.gradient-border-text-dash {
    background: #fff;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff),
        linear-gradient(to right, var(--uraan-emerald), var(--uraan-gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s ease;
    z-index: -50;
    color: #000;
}

.gradient-btn:hover {
    position: relative;
    background: var(--uraan-bg-deep);
    border: 2px solid transparent;
    border-radius: 0.75rem;
    padding: 0.5rem 3rem;
    background-image: linear-gradient(var(--uraan-bg-deep), var(--uraan-bg-deep)),
        linear-gradient(to bottom, var(--uraan-emerald), var(--uraan-gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s ease;
}

.gradient-btn-filled {
    background: linear-gradient(to top, var(--uraan-gold), var(--uraan-gold-light), #fff8dc);
    border-radius: 0.75rem;
    padding: 0.5rem 3rem;
    color: #01261e;
    font-weight: 700;
    transition: all 0.3s ease;
}

.gradient-btn-filled-edit {
    background: linear-gradient(to top, var(--uraan-gold), var(--uraan-gold-light), #fff8dc);
    padding: 0.5rem 3rem;
    transition: all 0.3s ease;
}

.gradient-btn-filled2 {
    background: linear-gradient(to top, var(--uraan-emerald), #0b6e4f, var(--uraan-gold));
    border-radius: 0.75rem;
    padding: 0.5rem 3rem;
    transition: all 0.3s ease;
}

.gradient-btn-filled2a {
    background: linear-gradient(to top, var(--uraan-emerald), #0b6e4f, var(--uraan-gold));
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.gradient-btn-filled:hover {
    background: linear-gradient(to bottom, var(--uraan-gold), var(--uraan-gold-light), #fff8dc);
}

.gradient-btn-filled2:hover {
    background: linear-gradient(to bottom, var(--uraan-emerald), #0b6e4f, var(--uraan-gold));
}

.gradient-btn-filled2a:hover {
    background: linear-gradient(to bottom, var(--uraan-emerald), #0b6e4f, var(--uraan-gold));
}

.gradient-btn-filled-submit {
    background: linear-gradient(to top, var(--uraan-gold), var(--uraan-gold-light), #fff8dc);
    padding: 0.5rem 3rem;
    transition: all 0.3s ease;
}

.gradient-btn-filled-submit:hover {
    background: linear-gradient(to bottom, var(--uraan-gold), var(--uraan-gold-light), #fff8dc);
}

.bg-livecoin-widget {
    background-color: rgba(212, 175, 55, 0.08);
}

.min-h-half {
    min-height: 50vh;
}

.card-gradient {
    background: linear-gradient(45deg, rgba(1, 38, 30, 0.95), rgba(0, 21, 16, 0.8));
    border-radius: 24px;
    clip-path: polygon(0% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%);
}

.card-border {
    background: linear-gradient(45deg, var(--uraan-gold), var(--uraan-emerald));
    border-radius: 24px;
    clip-path: polygon(0% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%);
}

.card-container:hover .card-border {
    opacity: 1;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--uraan-emerald), var(--uraan-gold));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to top, var(--uraan-emerald), var(--uraan-gold));
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--uraan-gold) transparent;
}