:root{--bg:#F4F4F4;--fg:#0A3D62;--muted:#6b7280;--primary:#0A3D62;--ok:#25D366;--warn:#f59e0b;--error:#dc2626;--card:#FFFFFF;--border:#E5E7EB}
*{box-sizing:border-box}body{margin:0;font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.container{max-width:980px;margin:0 auto;padding:16px}
.topbar{background:#F4F4F4;border-bottom:1px solid var(--primary)}
.topbar .row{display:flex;align-items:center;justify-content:space-between}
.brand{color:#ffffff;text-decoration:none;font-weight:700;font-family:'Poppins','Inter',system-ui,sans-serif;display:inline-flex;align-items:center}
.brand-img{height:32px;max-height:36px;width:auto;display:block;vertical-align:middle}
.brand-text{color:#ffffff;font-weight:700;font-family:'Poppins','Inter',system-ui,sans-serif;font-size:18px}
nav a{color:var(--primary);margin-left:12px;text-decoration:none}
nav a:hover{color:#06263f}
.flashes{list-style:none;padding:0}
.flash{padding:10px 12px;margin:8px 0;border-radius:6px;background:var(--card);border:1px solid #283040}
.flash.success{border-color:var(--ok)}.flash.error{border-color:var(--error)}
h1{margin:16px 0;font-size:1.6rem;font-family:'Poppins','Inter',system-ui,sans-serif}
h2,h3,h4,h5,h6{font-family:'Poppins','Inter',system-ui,sans-serif}
.form{display:grid;gap:12px;max-width:560px}
/* Reorder send form fields visually without changing markup */
#send-form{display:flex;flex-direction:column;gap:12px}
#send-form>#label-greeting{order:1}
#send-form>#message-group{order:2}
#send-form>#attachments-field{order:3}
#send-form>#order-card{order:0}
#send-form>#contacts-field{order:4}
#send-form>#caption-wrap{order:5}
#send-form>.row{order:6}
label{display:grid;gap:6px;color:var(--muted)}
.inline-label{display:flex !important;align-items:center;gap:6px;color:var(--muted)}
input,textarea,select{padding:10px 12px;border-radius:6px;border:1px solid var(--border);background:#ffffff;color:var(--fg)}
button,.btn{background:var(--primary);color:#ffffff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;font-family:'Poppins','Inter',system-ui,sans-serif}
button.link{background:none;border:none;color:#60a5fa;cursor:pointer}
.btn-circle{border-radius:9999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--ok);color:#fff;font-weight:700}
.btn-circle.sm{width:28px;height:28px;font-weight:700;padding:0 0;line-height:1}
.btn-red{background:#dc2626}
.btn-circle:disabled{opacity:.6;cursor:not-allowed}
.msg-item{margin-top:6px}
.row{display:flex;gap:10px;align-items:center}.between{justify-content:space-between}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{background:var(--card);padding:16px;border-radius:8px;border:1px solid var(--border)}
.table{width:100%;border-collapse:collapse}
.table-spaced{border-collapse:separate;border-spacing:0 15px}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left;vertical-align:middle}
.admin-cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;justify-items:stretch;align-items:stretch;max-width:980px;margin:0 auto}
.metric .label{opacity:.8;font-size:.95rem}
.metric .value{font-size:60px;line-height:1.1;font-weight:700;margin-top:8px;display:block}
.footer{opacity:.6;margin-top:32px;padding-top:16px;border-top:1px solid var(--border);font-size:.9rem}

/* status button + modal */
.status-wrap{margin:8px 0 16px}
.status-pill{border-radius:9999px;padding:8px 14px;border:1px solid var(--border);background:#eef2f7;color:var(--primary)}
.status-disconnected{background:#e5e7eb;color:#6b7280;border-color:var(--border)}
.status-connected{background:var(--ok);color:#ffffff;border-color:#22c55e}
.muted{color:var(--muted)}
.qr-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50}
.qr-modal[hidden]{display:none !important}
.qr-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;min-width:360px;max-width:80vw}
.qr-pre{max-height:60vh;overflow:auto;background:#ffffff;color:#111827;padding:8px;border-radius:6px;border:1px solid var(--border)}
/* password criteria */
.crit{list-style:none;padding-left:16px;margin:8px 0}
.crit li{color:var(--error)}
.crit li.ok{color:var(--ok)}

/* toast */
.toast-container{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:60}
.toast{background:var(--card);border:1px solid var(--border);color:var(--fg);padding:10px 12px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.toast.success{border-color:var(--ok)}
.toast.error{border-color:var(--error)}

/* loading state */
button[disabled]{opacity:.7;cursor:not-allowed}

/* global loading overlay */
.loading-overlay{position:fixed;inset:0;background:rgba(10,61,98,.15);display:flex;align-items:center;justify-content:center;z-index:100}
.loading-overlay[hidden]{display:none!important}
.spinner{width:56px;height:56px;border-radius:9999px;border:6px solid rgba(10,61,98,.15);border-top-color:var(--primary);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* iOS-like switches */
.switch{display:inline-flex;align-items:center;gap:8px}
.switch input{display:none}
.switch .slider{width:44px;height:24px;background:#e5e7eb;border-radius:9999px;position:relative;transition:background .2s ease}
.switch .slider:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:9999px;transition:transform .2s ease}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider:after{transform:translateX(20px)}
.switch .label{color:var(--fg);opacity:.9}

/* licenses list: scroll without expanding modal size */
#mu-lic-area.limited{max-height:260px;overflow-y:auto}
#mu-lic-area.limited thead th{position:sticky;top:0;background:var(--card);z-index:1}
#mu-lic-area.limited tfoot td{position:sticky;bottom:0;background:var(--card);z-index:1}

/* modern file inputs */
.file-field{display:grid;gap:6px}
.file-picker{display:flex;align-items:center;gap:10px}
.file-label{padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--muted)}

/* override brand text color for light header */
.brand-text{color:var(--primary) !important}