:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { min-height: 100vh; background: radial-gradient(circle at top right, #e9f0ff, #f4f7fb 35%); }
a { color: #2f65d5; text-decoration: none; }
button, input { font: inherit; }
.app-shell { min-height: 100vh; }
.topbar { min-height: 74px; padding: 12px clamp(18px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.94); border-bottom: 1px solid #e1e7f0; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 12px; color: #172033; }
.brand span:last-child { display:flex; flex-direction:column; }
.brand small, .user-copy small { color: #6d7789; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:13px; background:#14213d; color:white; font-weight:800; letter-spacing:-.03em; }
.brand-mark.large { width:56px; height:56px; font-size:1.15rem; border-radius:18px; }
.user-area { display:flex; align-items:center; gap:14px; }
.user-copy { display:flex; flex-direction:column; text-align:right; }
.content { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:36px 0 64px; }
.page-header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(2rem, 4vw, 3rem); line-height:1.05; margin-bottom:8px; letter-spacing:-.035em; }
h2 { font-size:1.12rem; margin-bottom:5px; }
.subtitle { color:#69758a; margin-bottom:0; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; color:#5270ac; margin-bottom:8px; }
.page-card, .login-card { background:white; border:1px solid #e1e7f0; border-radius:20px; box-shadow:0 18px 48px rgba(25,41,72,.07); }
.page-card { padding:22px; }
.center-card { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#667085; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.search, .form-control { width:100%; border:1px solid #cdd6e3; border-radius:11px; padding:11px 13px; background:#fff; color:#172033; outline:none; }
.search { max-width:420px; }
.search:focus,.form-control:focus { border-color:#547fe6; box-shadow:0 0 0 3px rgba(84,127,230,.13); }
.count { color:#7a8496; font-size:.9rem; }
.customer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.customer-card { border:1px solid #e3e8f0; border-radius:16px; padding:16px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; background:#fff; }
.customer-avatar { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#edf3ff; color:#315da8; font-weight:800; }
.customer-main { min-width:0; display:flex; flex-direction:column; gap:4px; }
.customer-main a,.customer-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#667085; font-size:.91rem; }
.customer-main a { color:#2f65d5; }
.card-actions { grid-column:2; display:flex; gap:8px; margin-top:6px; }
.btn { border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700; transition:transform .12s ease, background .12s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled { opacity:.6; cursor:wait; transform:none; }
.btn-primary { background:#315ec8; color:white; }
.btn-primary:hover { background:#274fae; }
.btn-quiet { background:#eef2f7; color:#334155; }
.btn-danger { background:#fff0f0; color:#b42318; }
.btn.full { width:100%; padding:12px; }
.alert { border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:.93rem; }
.alert.error { color:#9f1c16; background:#fff0ef; border:1px solid #ffd5d1; }
.alert.success { color:#166534; background:#effbf3; border:1px solid #cdeed7; }
.login-shell { min-height:calc(100vh - 150px); display:grid; place-items:center; }
.login-card { width:min(460px,100%); padding:30px; }
.login-heading { display:flex; gap:15px; align-items:center; margin-bottom:24px; }
.login-heading h1 { font-size:2rem; margin-bottom:4px; }
.login-heading p { color:#6d7789; margin-bottom:0; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; }
.field label { font-weight:700; font-size:.9rem; }
.validation-message { color:#b42318; font-size:.82rem; }
.demo-note { margin-top:22px; padding:14px; border-radius:12px; background:#f6f8fc; color:#5e6879; display:flex; flex-direction:column; gap:4px; font-size:.84rem; }
.modal-backdrop { position:fixed; inset:0; background:rgba(13,25,46,.46); display:grid; place-items:center; padding:20px; z-index:50; }
.modal { width:min(520px,100%); max-height:calc(100vh - 40px); overflow:auto; background:white; border-radius:20px; padding:24px; box-shadow:0 28px 80px rgba(12,25,50,.28); }
.modal-header { display:flex; justify-content:space-between; gap:16px; margin-bottom:20px; }
.icon-button { border:0; background:#eef2f7; width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:1.4rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:10px; }
.empty-state { min-height:220px; display:grid; place-items:center; text-align:center; color:#6d7789; }
.empty-state h2 { color:#344054; margin-bottom:-60px; }
.spinner { width:30px; height:30px; border:3px solid #d8e1ef; border-top-color:#315ec8; border-radius:50%; animation:spin .75s linear infinite; margin-bottom:12px; }
.boot-screen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#667085; }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; padding:12px 18px; background:#fff4ce; z-index:100; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:700px) { .content { width:min(100% - 20px,1180px); padding-top:22px; } .topbar { padding:10px 12px; } .brand small,.user-copy { display:none; } .page-header { align-items:stretch; flex-direction:column; } .page-header .btn { width:100%; } .customer-grid { grid-template-columns:1fr; } .toolbar { align-items:stretch; flex-direction:column; } .search { max-width:none; } .count { padding-left:2px; } .login-card { padding:22px; } }