:root { --app-visible-height:100dvh; }
.app-dialog { box-sizing:border-box; width:min(460px,calc(100% - 28px)); max-height:calc(var(--app-visible-height) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:auto; padding:24px; border:1px solid #dce2d2; border-radius:26px; background:#f5f7f2; color:#10110e; overflow:auto; overscroll-behavior:contain; font-family:var(--font-sans,'Space Grotesk',sans-serif); box-shadow:0 16px 70px #10110e26; }
.app-dialog::backdrop { background:#10110e66; }
.app-dialog[open] { animation:app-sheet-enter .2s ease-out; }
.app-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.app-dialog-heading h2 { font-size:22px; letter-spacing:-.6px; line-height:1.25; margin:6px 0; }
.app-dialog-close { flex-shrink:0; border:1px solid #dce2d2; border-radius:50%; width:44px; height:44px; font-size:24px; color:#10110e; background:#fff; cursor:pointer; }
.app-dialog-message { font-size:14px; line-height:1.6; color:#59634b; white-space:pre-line; margin:0 0 20px; overflow-wrap:anywhere; }
.app-dialog-field { display:grid; gap:8px; margin:18px 0; }
.app-dialog-field label { color:#414b35; font-size:13px; font-weight:600; }
.app-dialog-field input,.app-dialog-field textarea,.app-dialog-field select { box-sizing:border-box; width:100%; min-height:48px; border:1px solid #dce2d2; border-radius:14px; background:#fff; color:#10110e; padding:12px 14px; font:400 16px var(--font-sans,sans-serif); box-shadow:none; outline:none; }
.app-dialog-field input:focus,.app-dialog-field textarea:focus { border-color:#91a275; background:#fff; box-shadow:none; }
.app-dialog-field input[readonly] { background:#edf1e5; font-family:var(--font-sans,sans-serif); }
.app-dialog-field small { font-size:11px; color:#69725e; line-height:1.5; }
.app-dialog-error { font-size:13px; color:#9a352b; padding:12px; border-radius:12px; background:#fcf1ee; line-height:1.5; }
.app-dialog-error[hidden] { display:none; }
.app-dialog-actions { display:flex; gap:10px; justify-content:flex-end; padding-top:12px; }
.app-dialog-actions .btn { min-height:48px; flex:1; }
.app-toasts { position:fixed; z-index:10000; bottom:calc(22px + env(safe-area-inset-bottom)); right:max(18px,env(safe-area-inset-right)); width:min(400px,calc(100% - 32px)); display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.app-toast { display:flex; align-items:center; gap:12px; border:1px solid #303529; border-radius:18px; background:#10110e; color:#f5f7f2; box-shadow:0 8px 30px #10110e26; padding:12px; font:500 13px var(--font-sans,sans-serif); pointer-events:auto; animation:app-toast-enter .18s ease-out; }
.app-toast-mark { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border-radius:50%; background:#d8ff36; color:#10110e; font-size:15px; font-weight:700; }
.app-toast-error .app-toast-mark { background:#f5f7f2; color:#9a352b; }
.app-toast-text { flex:1; line-height:1.5; overflow-wrap:anywhere; }
.app-toast-close { width:44px; height:44px; flex-shrink:0; border:0; border-radius:12px; background:none; color:#f5f7f2; font-size:22px; cursor:pointer; }
.app-toast-close:hover { background:#ffffff12; }
.app-modal-open,.app-dialog-open { overflow:hidden; }
.modal-overlay { background:#10110e66; backdrop-filter:none; overscroll-behavior:contain; }
.modal-overlay .modal { background:#fff; color:#10110e; border:1px solid #dce2d2; border-radius:26px; max-height:calc(var(--app-visible-height) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain; box-shadow:0 16px 70px #10110e26; animation:app-sheet-enter .2s ease-out; }
.modal-overlay .modal-header { padding:20px 24px; border-color:#e1e6d8; }
.modal-overlay .modal-header .card-title { font-size:21px; letter-spacing:-.5px; }
.modal-overlay .modal-body { padding:22px 24px; }
.modal-overlay .modal-footer { padding:16px 24px; border-color:#e1e6d8; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.modal-overlay input,.modal-overlay textarea { font-size:16px; }
.modal-overlay button { min-height:44px; }
.auth-help { font-size:13px; color:#69725e; line-height:1.6; margin:0 0 20px; }
.staff-login-link { border:0; border-bottom:1px solid #c7d3b2; background:none; color:#414b35; padding:12px 0; margin-top:18px; font:600 13px var(--font-sans,sans-serif); cursor:pointer; min-height:44px; }
.staff-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.staff-section-heading h3 { font-size:18px; margin:0 0 8px; }
.staff-section-heading p,.staff-temporary p { color:#69725e; font-size:13px; line-height:1.6; margin:0; }
.staff-temporary { border-top:1px solid #dce2d2; padding-top:20px; margin-top:10px; }
.staff-temporary summary { cursor:pointer; font-size:13px; font-weight:600; }
.staff-temporary p { margin:14px 0; }
.staff-temporary .system-card-list { margin-top:16px; }
.door-staff-mode .nav-tab:not(#tabBtn_scanner),.door-staff-mode .sidebar-note { display:none !important; }
.door-staff-mode .mobile-sheet>button:not([onclick="showAccountSettings()"]):not([onclick="logout()"]) { display:none; }
.door-staff-mode .mobile-dock button:not([data-mobile-tab=scanner]):not([data-mobile-tab=more]) { display:none; }
.door-staff-mode .mobile-dock { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:320px; }
@keyframes app-sheet-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes app-toast-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:800px) {
 .workspace-page .app-toasts { bottom:calc(94px + env(safe-area-inset-bottom)); left:12px; right:12px; width:auto; }
 .workspace-page:has(#appContent.hidden) .app-toasts { bottom:calc(18px + env(safe-area-inset-bottom)) !important; }
 dialog .app-toasts { bottom:12px !important; }
 .app-dialog { width:calc(100% - 16px); margin:auto auto calc(8px + env(safe-area-inset-bottom)); padding:22px 20px; border-radius:26px; }
 .modal-overlay { align-items:flex-end; padding:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
 .modal-overlay .modal { width:100%; max-width:100% !important; border-radius:26px; }
 .modal-overlay .modal-header { padding:18px 20px; }
 .modal-overlay .modal-body { padding:20px; }
 .modal-overlay .modal-footer { padding:16px 20px; }
 .modal-overlay .modal-footer>.btn { flex:1; min-height:48px; }
 .staff-section-heading { align-items:stretch; flex-direction:column; }
 .staff-section-heading button { width:100%; }
 .header-actions { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .app-dialog[open],.app-toast,.modal-overlay .modal { animation:none; } }