:root {
    --bg-app: #0f1218;
    --bg-surface: #171b22;
    --bg-card: #1d2330;
    --bg-elevated: #242c3b;
    --text-main: #e8edf5;
    --text-muted: #aab4c3;
    --border: #2d3646;
    --primary: #4f8cff;
    --primary-strong: #3f7ae8;
    --danger: #ff6b6b;
}

html,
body {
    background: var(--bg-app);
    color: var(--text-main);
}

body {
    min-height: 100vh;
}

.hero {
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(79, 140, 255, 0.16), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(109, 232, 255, 0.1), transparent 55%),
        var(--bg-app);
}

.hero-head .navbar {
    background: rgba(13, 17, 24, 0.82);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
}

.navbar-burger {
    color: var(--text-main);
}

.navbar-burger span {
    background-color: var(--text-main);
}

@media screen and (max-width: 1023px) {
    .navbar-menu.is-active {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        box-shadow: 0 10px 24px rgba(6, 8, 12, 0.4);
    }
}

.navbar-item,
.navbar-item strong,
.navbar-link,
.title,
.label,
.subtitle,
.content,
p,
.help,
.modal-card-title {
    color: var(--text-main);
}

.subtitle,
.help,
.has-text-grey,
.has-text-grey-light {
    color: var(--text-muted) !important;
}

a {
    color: #86b3ff;
}

a:hover {
    color: #a4c5ff;
}

.hero-body .container {
    width: 100%;
}

.box,
.card,
.modal-card,
.notification.is-light,
.notification {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(6, 8, 12, 0.36);
}

.card-header,
.card-footer,
.modal-card-head,
.modal-card-foot {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.input,
.textarea,
.select select {
    background: #111722;
    border-color: var(--border);
    color: var(--text-main);
}

.input::placeholder,
.textarea::placeholder {
    color: #7d8ca4;
}

.input:focus,
.textarea:focus,
.select select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.125em rgba(79, 140, 255, 0.25);
}

.checkbox,
.radio {
    color: var(--text-main);
}

.button.is-primary,
.button.is-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.button.is-primary:hover,
.button.is-link:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
}

.button.is-light,
.button.is-static {
    background: #232c3d;
    border-color: #324059;
    color: var(--text-main);
}

.button.is-danger,
.button.is-danger.is-light {
    background: rgba(255, 107, 107, 0.18);
    border-color: rgba(255, 107, 107, 0.4);
    color: #ffd8d8;
}

.tag.is-light {
    background: #293042;
    color: var(--text-main);
}

.pagination-link,
.pagination-next,
.pagination-previous {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-main);
}

.pagination-link:hover,
.pagination-next:hover,
.pagination-previous:hover {
    border-color: var(--primary);
    color: var(--text-main);
}

.pagination-link.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination-ellipsis {
    color: var(--text-muted);
}

.pagination-next.is-disabled,
.pagination-previous.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.flash-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    width: min(28rem, calc(100vw - 2rem));
}

.flash-toast-stack .notification {
    box-shadow: 0 10px 24px rgba(10, 10, 10, 0.32);
    padding-right: 2.5rem;
}
.flash-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    width: min(28rem, calc(100vw - 2rem));
}

.flash-toast-stack .notification {
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.12);
    padding-right: 2.5rem;
}

/* Footer Styles */
.footer {
    background: rgba(13, 17, 24, 0.6);
    border-top: 1px solid var(--border);
    padding: 2rem 1.5rem;
    margin-top: auto;
}

.footer .content {
    color: var(--text-muted);
}

.footer .content small {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.footer .content small:hover {
    color: var(--text-main);
}