/* Calm panel surfaces; the shared theme tokens define both color schemes. */
.app { position: relative; min-height: 100vh; background: var(--bg); }
.app-bg-grid, .app-bg-orb1, .app-bg-orb2 { display: none; }
.brand-accent { color: var(--brand); }
.sidebar, .topbar, .bottom-nav { background: var(--surface); border-color: var(--border); box-shadow: none; }
.nav a.active { background: var(--brand-soft); color: var(--brand); }
.nav .sep { color: var(--muted); letter-spacing: .04em; }
.btn { box-shadow: none; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}
[data-theme="dark"] .btn:not(.secondary):not(.ghost):not(.danger):not(.success),
[data-theme="dark"] .chip.active, [data-theme="dark"] .bottom-nav-fab span:first-child {
  background: var(--brand); color: var(--brand-on); box-shadow: none;
}
.card, .ticket, .stat, .profile-card { border-color: var(--border); }
.ticket:hover { transform: none; border-color: var(--brand); box-shadow: var(--shadow-sm); }
.home-hero { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.home-hero::before { display: none; }
.home-hero-title { background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
.home-hero-title-chip, .home-profile-chip, .home-stat { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: none; }
.home-hero-tag, .home-hero-role-badge-customer { color: var(--brand); }
[data-theme="dark"] .msg.mine .msg-body { background: var(--brand-soft); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .msg.theirs .msg-body, [data-theme="dark"] .chat-header, [data-theme="dark"] .chat-action-bar { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .chat-msgs { background: var(--bg); }
[data-theme="dark"] .modal, [data-theme="dark"] .toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
[data-theme="dark"] .elevator-emergency { background: #432a30; border-color: #b86c77; }
[data-theme="dark"] .elevator-emergency-label { color: #f1c1c8; }
.management-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.management-toolbar .field { margin: 0; flex: 1 1 160px; min-width: 0; }
.management-toolbar .management-search { flex: 2 1 240px; }
.management-toolbar .input { width: 100%; }
.management-count { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.role-user-card { padding: 20px; margin-bottom: 12px; }
.role-user-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.role-user-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-system { margin-top: 16px; max-width: 320px; }
.role-memberships { padding: 0; border: 0; margin: 16px 0; min-width: 0; }
.role-memberships legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.role-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.role-check { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; }
.role-check:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.role-check input { accent-color: var(--brand); width: 18px; height: 18px; flex-shrink: 0; }
.role-user-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.role-user-actions .role-delete { margin-left: auto; }
@media (max-width: 560px) { .role-check-grid { grid-template-columns: 1fr; } .role-user-actions .btn { width: 100%; } }

.auth-wrap { --auth-bg: var(--bg); --auth-s1: var(--surface); --auth-s2: var(--surface-2); --auth-s3: var(--surface-2); --auth-border: var(--border); --auth-accent: var(--brand); --auth-text: var(--text); --auth-muted: var(--muted); }
.auth-wrap::before, .auth-wrap::after, .auth-brand-panel::before { display: none; }
.auth-brand-panel h1 span { background: none; color: var(--brand); -webkit-text-fill-color: currentColor; }
.auth-brand-logo { background: var(--brand-soft); border-color: var(--border); }
.auth-card { box-shadow: var(--shadow); }
.auth-wrap .btn, .auth-wrap .btn:hover { box-shadow: none; transform: none; color: var(--brand-on); }
.auth-wrap .btn.secondary { color: var(--text); }
.auth-wrap .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }