:root {
    --tx-blue: #061a40;
    --tx-blue-2: #0b2c6b;
    --tx-magenta: #d1008f;
    --tx-magenta-2: #ff2db2;
    --tx-ivory: #f8f3e7;
    --tx-white: #ffffff;
    --tx-black: #080808;
    --tx-gray: #6c757d;
    --tx-border: rgba(255, 255, 255, 0.16);
    --tx-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--tx-black);
    background: #f4f6fb;
}

.tx-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background:
        radial-gradient(circle at top left, rgba(209, 0, 143, 0.20), transparent 32%),
        radial-gradient(circle at bottom right, rgba(11, 44, 107, 0.35), transparent 35%),
        linear-gradient(135deg, #061a40 0%, #071226 45%, #080808 100%);
}

.tx-login-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 28px;
    box-shadow: var(--tx-shadow);
    overflow: hidden;
}

.tx-login-header {
    padding: 34px 34px 24px;
    color: var(--tx-white);
    background: linear-gradient(135deg, rgba(6, 26, 64, 0.96), rgba(209, 0, 143, 0.88));
}

.tx-brand-badge {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-ivory);
    color: var(--tx-magenta);
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.tx-login-header h1 { font-size: 28px; line-height: 1.15; font-weight: 800; margin: 0; }
.tx-login-header p { margin: 10px 0 0; opacity: 0.88; }
.tx-login-body { padding: 32px 34px 34px; background: var(--tx-white); }
.form-label { font-weight: 700; color: var(--tx-blue); }

.form-control, .form-select {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid #d9dce3;
    padding-left: 16px;
    font-weight: 600;
}

.form-control:focus, .form-select:focus {
    border-color: var(--tx-magenta);
    box-shadow: 0 0 0 0.25rem rgba(209, 0, 143, 0.16);
}

.tx-btn-primary, .btn.tx-btn-primary {
    min-height: 48px;
    border: none;
    border-radius: 16px;
    font-weight: 800;
    color: var(--tx-white);
    background: linear-gradient(135deg, var(--tx-blue-2), var(--tx-magenta));
    box-shadow: 0 14px 30px rgba(209, 0, 143, 0.25);
}

.tx-btn-primary:hover { color: var(--tx-white); transform: translateY(-1px); }
.tx-alert { border-radius: 16px; font-weight: 700; }

.tx-app-shell { min-height: 100vh; background: #f4f6fb; }

.tx-sidebar {
    width: 280px;
    min-height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(6, 26, 64, 0.98), rgba(8, 8, 8, 0.98));
    color: var(--tx-white);
    padding: 24px 18px;
}

.tx-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 28px;
    border-bottom: 1px solid var(--tx-border);
}

.tx-sidebar-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-magenta);
    color: var(--tx-white);
    font-weight: 900;
}

.tx-sidebar-brand strong { display: block; font-size: 17px; }
.tx-sidebar-brand span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.68); }
.tx-menu { padding: 22px 0; }

.tx-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.76);
    text-decoration: none;
    padding: 13px 14px;
    border-radius: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.tx-menu a:hover, .tx-menu a.active {
    color: var(--tx-white);
    background: rgba(209, 0, 143, 0.22);
}

.tx-main { margin-left: 280px; padding: 28px; }

.tx-topbar {
    background: var(--tx-white);
    border-radius: 24px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px rgba(6, 26, 64, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.tx-topbar h2 { font-size: 24px; font-weight: 900; color: var(--tx-blue); margin: 0; }
.tx-topbar p { margin: 4px 0 0; color: var(--tx-gray); font-weight: 600; }
.tx-user-pill { background: var(--tx-ivory); border-radius: 999px; padding: 10px 16px; font-weight: 800; color: var(--tx-blue); }

.tx-card {
    border: none;
    border-radius: 24px;
    background: var(--tx-white);
    box-shadow: 0 10px 30px rgba(6, 26, 64, 0.08);
}

.tx-stat-card {
    padding: 24px;
    border-radius: 24px;
    background: var(--tx-white);
    box-shadow: 0 10px 30px rgba(6, 26, 64, 0.08);
    height: 100%;
}

.tx-stat-card .icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tx-blue-2), var(--tx-magenta));
    color: var(--tx-white);
    font-size: 22px;
    margin-bottom: 16px;
    font-weight: 900;
}

.tx-stat-card h3 { font-size: 34px; font-weight: 900; color: var(--tx-blue); margin: 0; }
.tx-stat-card p { color: var(--tx-gray); font-weight: 700; margin: 4px 0 0; }
.tx-badge-role { border-radius: 999px; background: rgba(209, 0, 143, 0.12); color: var(--tx-magenta); padding: 6px 12px; font-weight: 900; font-size: 12px; }

.table > :not(caption) > * > * { padding: 1rem .75rem; }

.tx-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f8f3e7;
    padding: 4px 8px;
    border-radius: 8px;
}

@media (max-width: 991px) {
    .tx-sidebar { position: relative; width: 100%; min-height: auto; }
    .tx-main { margin-left: 0; padding: 18px; }
    .tx-topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
}