:root {
    --kto-primary: #226497;
    --kto-primary-dark: #204577;
    --kto-accent: #bb1717;
    --kto-gold: #f8dc01;
    --kto-sidebar: #163456;
    --kto-sidebar-hover: rgba(255, 255, 255, 0.08);
    --kto-surface: #f4f7fb;
    --kto-radius: 14px;
    --kto-shadow: 0 8px 32px rgba(22, 52, 86, 0.12);
}

body.admin,
body.jumbo-page {
    font-family: 'Inter', 'Roboto', system-ui, sans-serif;
    background: var(--kto-surface);
}

.admin-main {
    min-height: 100vh;
}

.jumbo-page .col-lg-4.bg-white {
    border-radius: 0 var(--kto-radius) var(--kto-radius) 0;
    box-shadow: var(--kto-shadow);
}

.jumbo-page .card-block,
.jumbo-page .form-layout {
    padding: 2rem 1rem;
}

.jumbo-page h3 {
    color: var(--kto-primary-dark);
    font-weight: 700;
}

.jumbo-page .btn-primary {
    background: linear-gradient(135deg, var(--kto-primary), var(--kto-primary-dark));
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(34, 100, 151, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jumbo-page .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(34, 100, 151, 0.35);
    background: linear-gradient(135deg, var(--kto-primary-dark), var(--kto-primary));
}

.jumbo-page .form-control {
    border-radius: 12px;
    border: 1px solid rgba(32, 69, 119, 0.15);
    padding: 0.85rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jumbo-page .form-control:focus {
    border-color: var(--kto-primary);
    box-shadow: 0 0 0 3px rgba(34, 100, 151, 0.15);
}

.jumbo-page .col-lg-8.bg-cover {
    position: relative;
}

.jumbo-page .col-lg-8.bg-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(22, 52, 86, 0.92), rgba(34, 100, 151, 0.75));
}

.jumbo-page .kto-login-badge {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 2;
    color: #fff;
    max-width: 420px;
}

.jumbo-page .kto-login-badge h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.jumbo-page .kto-login-badge p {
    opacity: 0.88;
    line-height: 1.6;
}

.jumbo-page .kto-tricolor {
    display: flex;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.jumbo-page .kto-tricolor span:nth-child(1) { flex: 1; background: var(--kto-primary); }
.jumbo-page .kto-tricolor span:nth-child(2) { flex: 1; background: var(--kto-accent); }
.jumbo-page .kto-tricolor span:nth-child(3) { flex: 1; background: var(--kto-gold); }

.admin-sidebar {
    background: linear-gradient(180deg, var(--kto-sidebar) 0%, #0f2744 100%) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
}

.admin-sidebar .menu-link {
    border-radius: 10px;
    margin: 0.15rem 0.75rem;
    transition: background 0.2s ease;
}

.admin-sidebar .menu-link:hover,
.admin-sidebar .menu-item.active .menu-link {
    background: var(--kto-sidebar-hover);
}

.admin-header {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(32, 69, 119, 0.08);
}

.card,
.admin-card {
    border: 1px solid rgba(32, 69, 119, 0.08);
    border-radius: var(--kto-radius);
    box-shadow: var(--kto-shadow);
}

.btn-primary {
    background: var(--kto-primary);
    border-color: var(--kto-primary);
}

.btn-primary:hover {
    background: var(--kto-primary-dark);
    border-color: var(--kto-primary-dark);
}

.admin-brand-content {
    color: var(--text-secondary, #5a6b7d);
    font-weight: 500;
}

.kto-panel-footer {
    padding: 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kto-panel-footer a {
    color: var(--kto-gold);
}

.secure-app .app-footer,
.secure-app footer {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    padding: 1rem;
}

.secure-app .app-footer a {
    color: var(--kto-gold);
}