:root {
    --gitai-signal-300: #78d8f8;
    --gitai-signal-500: #139dd8;
    --gitai-signal-600: #0f7fb3;
    --gitai-navy-700: #003b71;
    --gitai-navy-900: #001e3b;
    --gitai-paper: #f8fafb;
    --gitai-card: #ffffff;
    --gitai-ink-50: #f1f4f6;
    --gitai-ink-100: #e7ebef;
    --gitai-ink-200: #d5dbe1;
    --gitai-ink-500: #6b7785;
    --gitai-ink-700: #38424d;
    --gitai-ink-900: #141a20;
    --gitai-success: #1f9d6b;
    --gitai-warning: #e0902a;
    --gitai-danger: #d6453d;
    --gitai-radius: 8px;
    --gitai-shadow: 0 16px 40px rgba(20, 26, 32, 0.12);
    --gitai-dot: rgba(19, 157, 216, 0.12);
    --gitai-graph: linear-gradient(var(--gitai-dot) 1px, transparent 1px), linear-gradient(90deg, var(--gitai-dot) 1px, transparent 1px);
}

html,
body {
    background:
        radial-gradient(circle at 18px 18px, rgba(19, 157, 216, 0.045) 1.5px, transparent 1.5px) 0 0 / 24px 24px,
        var(--gitai-paper);
    color: var(--gitai-ink-900);
    letter-spacing: 0;
}

a,
.ui.breadcrumb a,
.repository.file.list #repo-files-table a {
    color: var(--gitai-signal-600);
}

a:hover {
    color: var(--gitai-navy-700);
}

.ui.primary.button,
.ui.primary.buttons .button,
.ui.green.button,
.ui.basic.primary.button:hover {
    background: var(--gitai-signal-500);
    border-color: var(--gitai-signal-500);
    color: #fff;
}

.ui.primary.button:hover,
.ui.green.button:hover {
    background: var(--gitai-signal-600);
}

.ui.button,
.ui.menu,
.ui.segment,
.ui.attached.header,
.repository .ui.segment,
.repository .ui.header,
.ui.card,
.ui.cards > .card {
    border-radius: var(--gitai-radius);
}

.ui.segment,
.repository .ui.segment,
.ui.attached.segment,
.ui.card,
.ui.cards > .card {
    border-color: var(--gitai-ink-100);
    box-shadow: 0 1px 3px rgba(16, 32, 48, 0.06);
}

.ui.attached.header,
.repository .header-wrapper,
.page-content > .ui.container > .ui.header {
    border-color: var(--gitai-ink-100);
}

.following.bar.light {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--gitai-ink-100);
    backdrop-filter: blur(16px);
}

.following.bar .brand::after {
    color: var(--gitai-signal-500);
    content: 'AI Engineering Git';
    display: inline-block;
    font-weight: 650;
    margin-left: 0.5rem;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.following.bar .brand img {
    content: url('/assets/img/gitai-mark.svg');
    height: 28px;
    width: 28px;
}

.following.bar .brand svg,
#navbar-logo img,
#navbar-logo svg {
    border-radius: 8px;
}

.gitai-login-body a[href*='/user/oauth2/']::before {
    background: url('/assets/img/gitai-mark.svg') center / contain no-repeat;
    border-radius: 5px;
    content: '';
    flex: 0 0 auto;
    height: 1.35rem;
    margin-right: 0.65rem;
    width: 1.35rem;
}

.ui.label,
.ui.labels .label {
    border-radius: 999px;
}

input:focus,
textarea:focus,
.ui.input.focus input,
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
    border-color: var(--gitai-signal-500) !important;
    box-shadow: 0 0 0 3px rgba(19, 157, 216, 0.18) !important;
}

.repository .repo-title .repo-icon,
.repository .repo-title .icon {
    color: var(--gitai-navy-700);
}

.gitai-login-shell {
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 59, 113, 0.96), rgba(0, 30, 59, 0.94)), var(--gitai-graph);
    background-size:
        auto,
        28px 28px;
    display: flex;
    justify-content: center;
    margin: -1rem auto 0;
    min-height: calc(100vh - 150px);
    padding: clamp(2rem, 7vw, 5rem) 1rem;
}

.gitai-login-panel {
    background: rgba(248, 250, 251, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    box-shadow: var(--gitai-shadow);
    color: var(--gitai-ink-900);
    max-width: 480px;
    overflow: hidden;
    width: min(100%, 480px);
}

.gitai-login-header {
    background: radial-gradient(circle at 20% 10%, rgba(19, 157, 216, 0.18), transparent 28%), linear-gradient(180deg, #fff, var(--gitai-ink-50));
    border-bottom: 1px solid var(--gitai-ink-100);
    padding: 2rem 2rem 1.5rem;
}

.gitai-login-mark {
    align-items: center;
    display: flex;
    gap: 0.85rem;
}

.gitai-login-mark img {
    height: 44px;
    width: 44px;
}

.gitai-login-title {
    color: var(--gitai-navy-700);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 720;
    line-height: 1.1;
}

.gitai-login-subtitle {
    color: var(--gitai-ink-500);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 1.25rem 0 0;
}

.gitai-login-body {
    padding: 1.5rem 2rem 2rem;
}

.gitai-login-body .ui.segment {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.gitai-login-body .oauth2 div,
.gitai-login-body .oauth2 .ui.button,
.gitai-login-body a[href*='/user/oauth2/'] {
    width: 100%;
}

.gitai-login-body a[href*='/user/oauth2/'] {
    align-items: center;
    background: var(--gitai-navy-700) !important;
    border: 1px solid var(--gitai-navy-700) !important;
    border-radius: var(--gitai-radius) !important;
    box-shadow: 0 10px 24px rgba(0, 59, 113, 0.2);
    color: #fff !important;
    display: inline-flex !important;
    font-weight: 650;
    justify-content: center;
    min-height: 44px;
}

.gitai-login-body a[href*='/user/oauth2/']:hover {
    background: var(--gitai-signal-600) !important;
    border-color: var(--gitai-signal-600) !important;
}

.gitai-login-footnote {
    align-items: center;
    color: var(--gitai-ink-500);
    display: flex;
    font-size: 0.82rem;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gitai-login-footnote::before {
    background: var(--gitai-success);
    border-radius: 999px;
    content: '';
    height: 0.55rem;
    width: 0.55rem;
}

@media (max-width: 680px) {
    .following.bar .brand::after {
        max-width: 9rem;
    }

    .gitai-login-shell {
        min-height: calc(100vh - 110px);
        padding: 1rem;
    }

    .gitai-login-header,
    .gitai-login-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        background:
            radial-gradient(circle at 18px 18px, rgba(120, 216, 248, 0.05) 1.5px, transparent 1.5px) 0 0 / 24px 24px,
            #0e141a;
        color: #eaf1f7;
    }

    .following.bar.light,
    .ui.segment,
    .ui.attached.segment,
    .ui.card,
    .ui.cards > .card {
        background-color: #19222c;
        border-color: #242f3a;
        color: #eaf1f7;
    }

    .gitai-login-panel {
        background: #19222c;
        border-color: #283543;
        color: #eaf1f7;
    }

    .gitai-login-header {
        background: radial-gradient(circle at 20% 10%, rgba(120, 216, 248, 0.14), transparent 30%), linear-gradient(180deg, #232e39, #19222c);
        border-color: #283543;
    }

    .gitai-login-title {
        color: #eaf1f7;
    }

    .gitai-login-subtitle,
    .gitai-login-footnote {
        color: #b7c2cd;
    }
}