html { font-size: 15px; }

:root {
    --kh-bg: #f3f8f7;
    --kh-surface: #ffffff;
    --kh-surface-soft: #f7fbfa;
    --kh-border: rgba(43, 123, 109, 0.2);
    --kh-primary: #2b7b6d;
    --kh-primary-strong: #1f6458;
    --kh-secondary: #d08a2f;
    --kh-text: #13322e;
    --kh-text-soft: #4e6e69;
}

body {
    margin: 0;
    color: var(--kh-text);
    font-size: 0.96rem;
    line-height: 1.55;
    background: radial-gradient(circle at 0% 0%, rgba(43, 123, 109, 0.12), transparent 30%),
                radial-gradient(circle at 100% 0%, rgba(208, 138, 47, 0.12), transparent 28%),
                var(--kh-bg);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.mud-main-content img,
.mud-dialog img,
.mud-table img {
    width: auto;
    max-width: 100%;
    max-height: min(40vh, 320px);
    object-fit: contain;
}

a {
    color: var(--kh-primary-strong);
}

a:hover {
    color: var(--kh-secondary);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiPjxwYXRoIGQ9Ik0yNy45OTk4IDcuNjI1MThMMi4wNTQ5NyA0NkgwLjM3NjNMMS42MjEzNiA0My43MzM2TDI3LjEwMjMgMi4wNDM5TDI3Ljk5OTggMC41Mjk2OUwyOC44OTczIDIuMDQzOUw1NC4zNzgzIDQzLjczMzZMNTUuNjIzNCA0Nkg1My45NDQ3TDI3Ljk5OTggNy42MjUxOFoiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred." }

.cursor-pointer { cursor: pointer; }

.mud-paper {
    border: 1px solid var(--kh-border);
    border-radius: 14px;
}

.mud-table-root .mud-table-container {
    border-radius: 12px;
}

.mud-input-control .mud-input-slot {
    border-radius: 10px;
}

.mud-input-control,
.mud-select,
.mud-button-root,
.mud-chip {
    font-size: 0.95rem;
}

.mud-input-control {
    margin-bottom: 0.25rem;
}

.mud-dialog .mud-dialog-content {
    font-size: 0.95rem;
    line-height: 1.55;
}

.mud-dialog .mud-dialog-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.mud-button-root {
    border-radius: 10px;
    text-transform: none;
    font-weight: 700;
}

.quick-actions {
    gap: 0.75rem;
}

.quick-actions .mud-typography {
    font-weight: 700;
    color: var(--kh-text-soft);
}

.session-role-card {
    padding-top: 0.95rem;
    padding-bottom: 1rem;
}

.session-role-tabs .mud-tabs-toolbar {
    margin-bottom: 0.75rem;
}

.session-role-fields {
    margin-top: 0.75rem;
    padding-bottom: 0.5rem;
}

.session-role-grid {
    padding-top: 0.4rem;
}

.session-role-grid .mud-input-control {
    margin-bottom: 1rem;
}

.session-login-btn {
    margin-top: 0.2rem;
}

@media (max-width: 700px) {
    .quick-actions .mud-button-root {
        width: 100%;
    }

    .session-role-card {
        padding: 0.8rem;
    }

    .session-role-tabs .mud-tabs-toolbar {
        margin-bottom: 0.55rem;
    }

    .session-login-btn {
        margin-top: 0.35rem;
    }
}

pre.response-json {
    background: #13232a;
    color: #ddfff7;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.8rem;
    max-height: 320px;
    overflow-y: auto;
    line-height: 1.5;
    border: 1px solid rgba(136, 186, 181, 0.36);
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
}