:root {
    --tg-bg: #0b1220;
    --tg-bg-accent: #0f172a;
    --tg-card: #111a2b;
    --tg-primary: #619dfb;
    --tg-primary-hover: #4d8ef5;
    --tg-accent: #22d3ee;
    --tg-muted: #93a0b2;
    --tg-success: #15cc90;
    --tg-success-dark: #084742;
    --tg-warning: #f59e0b;
    --tg-danger: #ef4444;
    --tg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(34, 211, 238, .25), transparent 60%),
    radial-gradient(1000px 500px at 110% -20%, rgba(108, 156, 255, .20), transparent 60%);
    --tg-subbg: #0f172a;
    --tg-text: #c5d4ea;
    --tg-medium: #8d9ea5;
}

html, body {
    height: 100%;
    color: var(--tg-text) !important;
}

a {
    text-decoration: none !important;
}

.bg-app {
    background: var(--tg-bg) !important;
}

main, .page, .content, .container, .row {
    background: transparent !important;
}

section {
    padding: 4rem 0;
    color: var(--tg-text);
}

.tg-hero {
    background: var(--tg-bg);
    background-image: var(--tg-gradient);
    color: var(--tg-text);
}

.tg-brand {
    font-weight: 800;
    letter-spacing: 1px;
}

.tg-badge {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12)
}

.tg-card {
    background: var(--tg-card);
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 16px;
    border-left: 4px solid var(--tg-text);
}

.tg-card h6 {
    letter-spacing: 1px;
    font-weight: 700;
}

.tg-chip {
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .825rem;
}

.blur-spot {
    position: absolute;
    inset: -60px -60px auto auto;
    width: 180px;
    height: 180px;
    background: linear-gradient(45deg, var(--tg-primary), var(--tg-accent));
    filter: blur(60px);
    opacity: .25;
    pointer-events: none;
    border-radius: 50%;
}

.legal small, .legal p {
    color: var(--tg-muted);
}

.link-muted {
    color: var(--tg-muted);
    text-decoration: none;
}

.link-muted:hover {
    color: var(--tg-text);
    text-decoration: underline;
}

.chip {
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: .8rem;
    background: rgb(255 255 255 / 18%);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--tg-text);
}

.title {
    letter-spacing: .06em;
    color: #a6e3c7;
    font-size: 1rem;
    font-weight: 700;
}

.meter {
    height: 8px;
    background: var(--tg-bg);
    border-radius: 8px;
    overflow: hidden
}

.meter > div {
    height: 100%;
    background: linear-gradient(90deg, var(--tg-accent), var(--tg-primary))
}

.badge-soft {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--tg-text);
}

.home header {
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.list-group-flush .list-group-item {
    background: transparent;
    border-color: rgba(255, 255, 255, .08)
}

.list-group-item:hover {
    background: rgba(108, 156, 255, .06)
}

.btn-primary {
    --bs-btn-hover-bg: var(--tg-primary-hover) !important;
    --bs-btn-border-color: var(--tg-primary) !important;
}

button.btn.opacity-75 {
    transition: background-color .25s ease, opacity .25s ease;
}

.tg-bg-success {
    background: var(--tg-success) !important;
    color: #fff !important;
}

.tg-bg-success:hover {
    background: #13a877 !important;
    color: #fff !important;
}

.tg-bg-success-dark {
    background: var(--tg-success-dark) !important;
    color: #fff !important;
}

.tg-bg-success-dark:hover {
    background: #0c4a58 !important;
    color: #fff !important;
}

.is-locked {
    opacity: 1;
    filter: grayscale(2%)
}

progress {
    height: 8px;
    background: var(--tg-bg);
}

.progress-bar {
    background: linear-gradient(90deg, var(--tg-accent), var(--tg-primary))
}

.nav-pills .nav-link {
    color: var(--tg-text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12)
}

.active {
    color: var(--tg-accent) !important;
    background: transparent !important;
    font-weight: bold !important;
}

.tg-spinner {
    display: none;
    transition: opacity .2s ease;
}

.tg-spinner.active {
    display: block;
    opacity: 1;
}

footer {
    position: static;
    background: var(--tg-bg-accent);
}