@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100dvh; background: radial-gradient(circle at 18% 22%, rgb(37 99 235 / 35%), transparent 32%), radial-gradient(circle at 82% 12%, rgb(45 212 191 / 24%), transparent 28%), linear-gradient(150deg, #0b1222, #0f172a 52%, #111827); color: #0f172a; font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }
button, input { font: inherit; }
button:not(:disabled) { cursor: pointer; }
button, input, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #0d9488; outline-offset: 4px; }
h1, h2, p { margin: 0; }
.app-frame { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.login-card { display: grid; width: 100%; max-width: 980px; overflow: hidden; border-radius: 1.3rem; border: 1px solid rgb(148 163 184 / 30%); background: rgb(2 6 23 / 30%); box-shadow: 0 35px 65px rgb(2 6 23 / 45%); backdrop-filter: blur(12px); }
.brand-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2rem 1.5rem; background: linear-gradient(to bottom right, rgb(21 93 252 / 45%), rgb(21 93 252 / 10%)); color: #dbeafe; }
.brand-badge { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.75rem; padding: .375rem .75rem; border: 1px solid rgb(191 219 254 / 20%); border-radius: 999px; background: rgb(219 234 254 / 5%); font-size: .75rem; font-weight: 600; letter-spacing: .025em; }
.brand-badge span { width: 6px; height: 6px; border-radius: 50%; background: #5eead4; }
h2 { max-width: 24rem; color: white; font-size: 1.75rem; line-height: 1.375; font-weight: 800; letter-spacing: -.025em; }
.brand-help { display: none; max-width: 20rem; font-size: .875rem; line-height: 1.75rem; color: rgb(219 234 254 / 80%); }
.desktop-break { display: none; }
.content-panel { min-width: 0; background: white; padding: 2.25rem 1.5rem; }
.logo { display: block; width: 12rem; height: auto; margin: 0 auto 2.25rem; }
h1 { font-size: 1.5rem; line-height: 1.33; font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.login-heading { text-align: center; margin-bottom: 2rem; }
.login-heading p { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: #64748b; }
form { display: flex; flex-direction: column; gap: 1.25rem; }
label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; color: #334155; }
.input-wrapper { position: relative; }
input { width: 100%; min-height: 52px; border: 1px solid #cbd5e1; border-radius: .75rem; background: white; padding: .75rem 1rem .75rem 2.75rem; font-size: 1rem; color: #0f172a; }
input::placeholder { color: #94a3b8; }
input:focus { border-color: #155dfc; outline: 3px solid rgb(21 93 252 / 10%); outline-offset: 0; }
input:disabled { background: #f1f5f9; }
.password-input { padding-right: 3.5rem; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.input-icon { position: absolute; top: 1rem; left: 1rem; color: #94a3b8; pointer-events: none; }
.visibility-button { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: 0; border-radius: .5rem; background: transparent; color: #64748b; }
.primary-button, .secondary-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; padding: .75rem 1.25rem; font-size: .875rem; font-weight: 700; }
.primary-button { border: 0; background: #155dfc; color: white; box-shadow: 0 10px 15px rgb(21 93 252 / 15%); }
.primary-button:hover { background: #1447e6; }
.primary-button:disabled { background: #94a3b8; box-shadow: none; cursor: not-allowed; }
.secondary-button { border: 1px solid #e2e8f0; background: white; color: #334155; }
.secondary-button:disabled { opacity: .6; cursor: not-allowed; }
.submit-button { width: 100%; margin-top: .5rem; }
.logout-button { width: 100%; margin-top: 2rem; }
.error { border: 1px solid #fecaca; border-radius: .75rem; background: #fef2f2; padding: .75rem 1rem; color: #991b1b; font-size: .875rem; line-height: 1.5rem; }
.content-panel > .error { margin-top: 1rem; }
.status-panel { display: flex; min-height: 24rem; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.status-panel p { color: #475569; font-size: .875rem; line-height: 1.5rem; }
.spinner { width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.update-notice { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 20; max-width: 32rem; margin: auto; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; background: white; box-shadow: 0 25px 50px rgb(0 0 0 / 25%); }
.update-notice p { margin-top: .5rem; font-size: .875rem; color: #475569; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.startup { display: grid; min-height: 100dvh; place-items: center; color: white; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem; background: #fff3cd; color: #0f172a; z-index: 100; }
@media (min-width: 640px) { .brand-panel { padding: 2.75rem 2.25rem; } .content-panel { padding: 2.75rem 2.5rem; } h2 { font-size: 2rem; } .app-frame { padding-top: max(3rem, env(safe-area-inset-top)); padding-bottom: max(3rem, env(safe-area-inset-bottom)); } }
@media (min-width: 768px) { .login-card { grid-template-columns: .95fr 1fr; } .brand-panel { gap: 4rem; } .brand-help, .desktop-break { display: block; } }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 1s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }

[hidden] { display: none !important; }
.offline-card { width: 100%; max-width: 32rem; border-radius: 1.3rem; }
a.primary-button { text-decoration: none; }

.dashboard { min-height: 100dvh; background: #f8fafc; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.dashboard-menu { display: flex; justify-content: flex-end; padding: 1rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: white; }
.dashboard-error { max-width: 32rem; margin: 1rem auto; }

.dashboard-menu { flex-wrap: wrap; align-items: center; gap: .75rem; }
.tablet-identification { margin-right: auto; overflow-wrap: anywhere; }
.tablet-settings { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.tablet-settings input { min-width: 0; max-width: 100%; padding: .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.tablet-settings .error { flex-basis: 100%; }