h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

:root { --bg: #f0fdfa; --surface: #fff; --surface-muted: #ccfbf1; --text: #0b4f6c; --muted: #5f7d8a; --border: #b2dfdb; --primary: #0f766e; --danger: #c23b48; --sidebar: #0b4f6c; --sidebar-text: #ecfeff; --radius: 1rem; --shadow: 0 10px 30px rgb(11 79 108 / .08); }
[data-theme="dark"] { --bg: #0a1628; --surface: #112236; --surface-muted: #1a3344; --text: #ecfeff; --muted: #94b8c4; --border: #1e4d5c; --primary: #2dd4bf; --danger: #ff91a0; --sidebar: #071018; --sidebar-text: #ccfbf1; --shadow: 0 10px 30px rgb(0 0 0 / .35); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Cairo, "Segoe UI", sans-serif; }
h1, h2, h3, .brand, .page-header h1 { font-family: "IBM Plex Sans Arabic", Cairo, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.app-shell { display: flex; min-block-size: 100vh; position: relative; }
.sidebar { background: linear-gradient(180deg, var(--sidebar) 0%, color-mix(in srgb, var(--sidebar) 88%, #000) 100%); color: var(--sidebar-text); inline-size: 17rem; padding: 1.25rem 1rem 1.5rem; flex: 0 0 auto; display: flex; flex-direction: column; gap: 1rem; z-index: 40; }
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.05rem; font-weight: 800; padding-inline: .5rem; margin: 0; }
.brand-mark { inline-size: .85rem; block-size: 1.35rem; border-radius: .3rem; background: linear-gradient(180deg, #5eead4, #0f766e); box-shadow: 0 0 0 3px rgb(94 234 212 / .2); }
.sidebar-close, .nav-toggle { display: none; color: inherit; }
.topbar .nav-toggle { display: none; color: var(--text); }
.topbar-spacer { flex: 1; }
.sidebar-backdrop { display: none; }
.nav-menu { display: grid; gap: .85rem; overflow-y: auto; padding-block-end: 1rem; }
.nav-group { display: grid; gap: .15rem; }
.nav-group-label { margin: 0; padding: .35rem .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .65; }
.nav-menu a { border-radius: .65rem; padding: .6rem .75rem; color: var(--sidebar-text); transition: background .15s ease; }
.nav-menu a.active, .nav-menu a:hover { background: rgb(255 255 255 / .14); }
.nav-soon { margin-block-start: .25rem; border-radius: .65rem; background: rgb(255 255 255 / .06); padding: .35rem; }
.nav-soon summary { cursor: pointer; list-style: none; padding: .55rem .75rem; font-size: .85rem; opacity: .8; font-weight: 600; }
.nav-soon summary::-webkit-details-marker { display: none; }
.nav-soon[open] summary { opacity: 1; }
.nav-soon a { display: block; font-size: .9rem; opacity: .9; }
.main-content { flex: 1; min-inline-size: 0; background: radial-gradient(ellipse 80% 50% at 100% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 55%), var(--bg); }
.topbar { min-block-size: 4.25rem; padding-inline: 1.5rem 2rem; display: flex; align-items: center; justify-content: flex-end; gap: .75rem; border-block-end: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); position: sticky; inset-block-start: 0; z-index: 20; }
.page-content { max-inline-size: 80rem; margin-inline: auto; padding: 2rem; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; }
.page-header h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; }
.page-header p { color: var(--muted); margin-block: .35rem 0; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block-end: 1rem; }
.metric-card, .empty-state, .settings-card, .auth-card, .shortcut-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric-card { padding: 1.25rem; display: grid; gap: .5rem; transition: transform .18s ease, border-color .18s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.metric-card span { color: var(--muted); }
.metric-card strong { font-size: 1.75rem; }
.empty-state { padding: 3rem 1.5rem; text-align: center; display: grid; gap: .75rem; justify-items: center; }
.empty-state h2 { margin: 0; }
.empty-state p { color: var(--muted); margin: 0; max-inline-size: 36rem; }
.app-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.app-pricing-tier { padding: 1.25rem; display: grid; gap: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease; }
.app-pricing-tier.featured { border-color: var(--primary); box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 22%, transparent); }
.app-pricing-tier:hover { transform: translateY(-3px); }
.app-pricing-tier h3 { margin: 0; font-size: 1.15rem; }
.app-pricing-tier p { margin: 0; color: var(--muted); font-size: .92rem; }
.onboarding-panel { display: grid; gap: 1rem; margin-block-end: 1.25rem; padding: 1.25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.onboarding-panel ol { margin: 0; }
.status-badge { display: inline-flex; border-radius: 99rem; background: var(--surface-muted); color: var(--primary); padding: .25rem .6rem; font-size: .8rem; font-weight: 700; }
.status-badge.success { color: #16834f; }
.status-badge.warning { color: #a16207; }
.status-badge.danger { color: var(--danger); }
.onboarding-steps { display: grid; gap: .75rem; padding-inline-start: 1.5rem; }
.auth-card { inline-size: min(100%, 30rem); margin: 4rem auto; padding: 2rem; display: grid; gap: 1rem; }
.auth-card h1 { margin: 0; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; font-weight: 600; }
input, select { border: 1px solid var(--border); border-radius: .55rem; background: var(--surface); color: var(--text); padding: .65rem .75rem; }
.primary-button, .btn-primary, .btn-secondary, .text-button, .icon-button { border: 0; border-radius: .55rem; cursor: pointer; padding: .6rem .9rem; }
.primary-button, .btn-primary { background: var(--primary); color: white; font-weight: 700; }
.btn-secondary { background: var(--surface-muted); color: var(--text); font-weight: 600; border: 1px solid var(--border); }
.text-button, .icon-button { background: transparent; color: var(--text); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.button-row input { flex: 1 1 12rem; min-inline-size: 0; }
.form-success { color: #16834f; font-weight: 600; }
.form-error { color: var(--danger); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; word-break: break-all; }
pre.mono {
  display: block;
  padding: .85rem 1rem;
  margin: .5rem 0 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  background: color-mix(in srgb, var(--surface, #111) 92%, #888);
  border-radius: .5rem;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.status-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .25rem 1rem; }
.checklist { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .4rem; }
.checklist .check-ok { color: #16834f; font-weight: 600; }
.checklist .check-ok::marker { content: "✓ "; }
.checklist .check-fail { color: var(--danger); font-weight: 600; }
.checklist .check-fail::marker { content: "✗ "; }
.endpoint-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.endpoint-card { border: 1px solid var(--border); border-radius: .75rem; padding: .85rem 1rem; background: var(--surface-muted); }
.endpoint-card strong { display: block; margin-block-end: .35rem; }
.endpoint-card pre.mono { margin: 0; background: transparent; border: 0; padding: 0; }
.integration-portal h3 { margin-block: 1rem 0.35rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: start; padding: .75rem .5rem; border-block-end: 1px solid var(--border); vertical-align: middle; }
.data-table th { color: var(--muted); font-size: .85rem; font-weight: 700; }
.settings-card { max-inline-size: 48rem; padding: 1.5rem; display: grid; gap: 1rem; }
.settings-card.wide { max-inline-size: none; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.messages-inbox { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 2fr); gap: 1rem; min-block-size: 28rem; }
.conversation-list { display: grid; align-content: start; gap: .5rem; border-inline-end: 1px solid var(--border); padding-inline-end: 1rem; overflow-y: auto; }
.conversation-item { display: grid; gap: .25rem; inline-size: 100%; border: 1px solid var(--border); border-radius: .65rem; padding: .7rem; text-align: start; background: var(--surface); color: var(--text); cursor: pointer; }
.conversation-item.active { border-color: var(--primary); background: var(--surface-muted); }
.conversation-item small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-thread { display: grid; align-content: start; gap: .65rem; overflow-y: auto; }
.conversation-thread h2 { margin: 0 0 .5rem; }
.message-bubble { max-inline-size: min(80%, 36rem); padding: .7rem .85rem; border-radius: .8rem; background: var(--surface-muted); }
.message-bubble.outbound { justify-self: end; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.message-bubble small { color: var(--muted); display: block; margin-block-end: .2rem; }
.form-grid label { display: grid; gap: .35rem; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; }
.shortcut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-block-start: 1.5rem; }
.shortcut-card { padding: 1.25rem; display: grid; gap: .5rem; transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease; }
.shortcut-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.shortcut-card strong { font-size: 1rem; }
.shortcut-card span { color: var(--muted); font-size: .9rem; }
.helper-text { color: var(--muted); margin: 0; font-size: .9rem; }
.qr-preview { max-inline-size: 16rem; border-radius: .75rem; border: 1px solid var(--border); background: #fff; padding: .5rem; }
.culture-selector form { display: block; }
.culture-selector select { padding: .4rem .5rem; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#blazor-error-ui { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; background: #fff3cd; color: #332701; padding: .8rem 1rem; z-index: 100; }
@media (max-width: 960px) {
    .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar .nav-toggle { display: inline-flex; }
    .sidebar-close { display: inline-flex; color: var(--sidebar-text); }
    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: var(--shadow);
    }
    [dir="rtl"] .sidebar { transform: translateX(105%); }
    .app-shell.nav-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(0 0 0 / .4);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 30;
    }
    .app-shell.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 760px) {
    .topbar { padding-inline: 1rem; }
    .page-content { padding: 1.25rem; }
    .metrics-grid, .shortcut-grid { grid-template-columns: 1fr; }
    .data-table { display: block; overflow-x: auto; }
    .messages-inbox { grid-template-columns: 1fr; }
    .conversation-list { border-inline-end: 0; border-block-end: 1px solid var(--border); padding-inline-end: 0; padding-block-end: 1rem; max-block-size: 16rem; }
}