:root {
    --blue: #1769d1;
    --teal: #0f9f9a;
    --green: #69b37b;
    --ink: #172033;
    --muted: #657083;
    --bg: #f5f8fb;
    --line: #dfeaf3;
    --panel: #ffffff;
    --dark: #101827;
    --cyber-bg: #07111f;
    --cyber-panel: #0b1d34;
    --cyan: #1ee7ff;
    --magenta: #ec2fa6;
    --violet: #4f46e5;
}

* { box-sizing: border-box; }
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-user-select: text; user-select: text; touch-action: auto; }
body, .content, .panel, .toolbar-card, .metric, .login-card, .chat-thread, .chat-conversation { -webkit-touch-callout: default; }
body { margin: 0; background: linear-gradient(180deg, rgba(7,17,31,.94), rgba(9,31,50,.92)), repeating-linear-gradient(90deg, rgba(30,231,255,.07) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(236,47,166,.045) 0 1px, transparent 1px 48px), var(--cyber-bg); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 220px; padding: 16px 12px; border-right: 1px solid rgba(30,231,255,.14); background: linear-gradient(180deg, rgba(8,18,33,.98), rgba(12,33,59,.97) 58%, rgba(10,62,66,.95)), repeating-linear-gradient(90deg, rgba(30,231,255,.05) 0 1px, transparent 1px 34px); position: sticky; top: 0; height: 100vh; box-shadow: 10px 0 34px rgba(0,0,0,.18); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand strong { color: #fff; letter-spacing: .02em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--magenta), var(--violet) 56%, var(--cyan)); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 24px rgba(30, 231, 255, .18), 0 0 28px rgba(236, 47, 166, .22); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.brand-mark.small { width: 34px; height: 34px; font-size: 13px; flex: 0 0 auto; }
.brand small { display: block; color: #a9bacd; line-height: 1.1; }
.sidebar .nav { margin-top: 26px; gap: 4px; }
.sidebar .nav-link { display: flex; align-items: center; gap: 9px; color: #c9d6e5; border-radius: 8px; padding: 9px 10px; font-size: 13px; font-weight: 700; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { background: linear-gradient(135deg, rgba(30,231,255,.14), rgba(236,47,166,.1)); color: #fff; border-color: rgba(30,231,255,.16); }
.nav-icon { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.07); flex: 0 0 auto; }
.nav-icon svg { width: 17px; height: 17px; stroke-width: 2.2; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-link.active .nav-icon { background: rgba(255,255,255,.16); color: #fff; }
.content { flex: 1; min-width: 0; padding: 26px; background: linear-gradient(135deg, rgba(245,248,251,.96), rgba(233,251,248,.94)); min-height: 100vh; box-shadow: inset 1px 0 0 rgba(255,255,255,.18); }
.topbar { margin-bottom: 14px; }
.topbar-row { min-width: 0; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; width: 100%; }
.topbar-action-controls { flex: 1 1 auto; min-width: min(100%, 320px); display: flex; align-items: center; justify-content: flex-end; }
.header-device-form { display: flex; align-items: center; gap: 7px; min-width: min(560px, 48vw); max-width: 720px; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 10px 25px rgba(23, 32, 51, .045); }
.header-device-label { color: var(--muted); font-size: 12px; font-weight: 800; padding-left: 4px; white-space: nowrap; }
.header-device-form .form-select { min-width: 210px; flex: 1 1 260px; border-radius: 7px; }
.header-device-form .btn { white-space: nowrap; }
.header-sync-link { display: inline-flex; align-items: center; gap: 5px; }
.header-sync-link svg { width: 15px; height: 15px; stroke-width: 2.4; }
.header-status { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.header-status.ok { background: #e7f8ed; color: #167341; border: 1px solid #bde9cb; }
.header-status.down { background: #fff1f0; color: #b42318; border: 1px solid #ffd1cc; }
.alert { border-radius: 8px; padding: 8px 11px; font-size: 13px; line-height: 1.35; margin-bottom: 10px; }
.alert code { font-size: 12px; word-break: break-all; }
.back-toolbar { margin: -6px 0 12px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: #506070; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.86); padding: 7px 11px; font-size: 13px; font-weight: 800; }
.back-link:hover { color: var(--blue); border-color: #cde6fb; background: #f3f9ff; }
.back-link svg { width: 16px; height: 16px; stroke-width: 2.4; }
.metric, .panel, .toolbar-card { background: rgba(255,255,255,.94); border: 1px solid rgba(160, 206, 235, .72); border-radius: 8px; box-shadow: 0 14px 30px rgba(7, 17, 31, .075), 0 0 0 1px rgba(30,231,255,.05); }
.metric { min-height: 92px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { font-size: 22px; word-break: break-word; }
.panel { padding: 20px; }
.toolbar-card { padding: 14px; }
.panel h2 { font-size: 18px; margin-bottom: 16px; }
.compact-panel h2, .tech-panel h2 { font-size: 17px; margin-bottom: 8px; }
.narrow { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.btn-primary { background: linear-gradient(135deg, #1769d1, #0f9f9a); border-color: #1769d1; box-shadow: 0 10px 20px rgba(23,105,209,.14); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #0f5fc2, #0b8f8b); border-color: #0f5fc2; }
.form-control, .form-select { border-color: #c7dae8; border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: #1ee7ff; box-shadow: 0 0 0 .2rem rgba(30,231,255,.16); }
.qr-box { background: #f8fbfd; border: 1px solid #dce8f2; border-radius: 8px; padding: 16px; overflow: auto; }
.qr-box pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 12px; }
.qr-img { width: min(320px, 100%); height: auto; border: 1px solid #dce8f2; border-radius: 8px; padding: 12px; background: #fff; }
.qr-timer { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; color: #415067; background: #f8fbfd; font-size: 13px; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.status-pill.ok { background: #e7f8ed; color: #167341; border: 1px solid #bde9cb; }
.status-pill.down { background: #fff1f0; color: #b42318; border: 1px solid #ffd1cc; }
.status-pill.wait { background: #fff8e6; color: #956300; border: 1px solid #ffe0a3; }
.device-meta { color: var(--muted); font-size: 13px; }
.device-identity { display: grid; gap: 10px; }
.device-identity div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.device-identity div:last-child { border-bottom: 0; padding-bottom: 0; }
.device-identity span { color: var(--muted); font-size: 13px; }
.device-identity strong, .device-identity code { text-align: right; word-break: break-word; }
.device-add-form .form-control { min-width: 0; }
.device-create-panel, .device-list-panel { overflow: hidden; padding: 14px; }
.device-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.device-section-head h2 { margin: 0 0 3px; font-size: 17px; }
.device-section-head p { font-size: 12px; line-height: 1.35; }
.device-add-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 0.9fr) auto; gap: 10px; }
.device-scan-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.device-scan-grid { display: grid; grid-template-columns: minmax(220px, .95fr) minmax(260px, 1.05fr); gap: 18px; align-items: start; }
.qr-scan-box { min-height: 250px; display: grid; place-items: center; text-align: center; border: 1px dashed #bcd7ea; border-radius: 8px; background: linear-gradient(145deg, #f7fbff, #f4fbf8); padding: 18px; }
.connected-state, .empty-state { border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; color: var(--muted); padding: 14px; }
.device-list { display: grid; gap: 8px; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; }
.device-row-main { min-width: 0; display: grid; gap: 2px; }
.device-row-main strong { word-break: break-word; }
.device-row-main small { color: var(--muted); font-size: 12px; }
.device-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.device-row-actions .status-pill { min-width: auto; padding: 6px 9px; font-size: 12px; }
.device-rename-form { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 6px; margin-top: 5px; max-width: 280px; }
.dashboard-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid rgba(30,231,255,.18); border-radius: 10px; background: linear-gradient(135deg, rgba(8,18,33,.96), rgba(12,84,91,.88)); color: #eefbff; box-shadow: 0 18px 42px rgba(7,17,31,.14), inset 0 1px 0 rgba(255,255,255,.08); }
.dashboard-title h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.1; font-weight: 900; letter-spacing: 0; }
.dashboard-title p { margin: 0; color: rgba(230,248,255,.78); font-size: 13px; }
.dashboard-live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgba(30,231,255,.32); border-radius: 999px; background: rgba(30,231,255,.1); color: #bdf8ff; font-size: 12px; font-weight: 900; white-space: nowrap; }
.dashboard-live-pill svg { width: 15px; height: 15px; stroke-width: 2.4; }
.dashboard-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.device-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.device-summary div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; }
.device-summary span { display: block; color: var(--muted); font-size: 12px; }
.device-summary strong { display: block; margin-top: 2px; font-size: 22px; }
.dashboard-log-panel { padding: 0; overflow: hidden; }
.dashboard-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #dce8f3; background: linear-gradient(135deg, #f8fbff, #f1fffb); }
.dashboard-log-head h2 { margin: 0 0 3px; font-size: 18px; }
.dashboard-log-head p { margin: 0; color: var(--muted); font-size: 12px; }
.dashboard-log-meta { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.dashboard-log-meta .btn { display: inline-flex; align-items: center; gap: 6px; }
.dashboard-log-meta svg { width: 14px; height: 14px; stroke-width: 2.4; }
.dashboard-log-table-wrap { max-height: calc(100dvh - 360px); min-height: 360px; overflow: auto; }
.dashboard-log-table { min-width: 980px; font-size: 12px; }
.dashboard-log-table thead th { position: sticky; top: 0; z-index: 1; background: #eef6fb; color: #31465f; border-bottom: 1px solid #dce8f3; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.dashboard-log-table td { vertical-align: top; border-color: #e6eef5; }
.dashboard-log-time { white-space: nowrap; color: #526278; font-weight: 700; }
.dashboard-log-party { max-width: 180px; font-weight: 800; word-break: break-word; }
.dashboard-log-message { min-width: 320px; max-width: 520px; color: #23344a; word-break: break-word; white-space: pre-wrap; }
.dashboard-log-empty { padding: 28px !important; text-align: center; color: var(--muted) !important; }
.dashboard-log-source { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px; min-width: 72px; padding: 5px 8px; border-radius: 999px; border: 1px solid #d6e7f3; background: #f8fbfd; color: #31465f; font-size: 11px; font-weight: 900; line-height: 1.05; }
.dashboard-log-source small { color: inherit; opacity: .74; font-size: 10px; font-weight: 800; }
.dashboard-log-source.in { background: #edf7ff; color: #1769d1; border-color: #beddf6; }
.dashboard-log-source.out { background: #eafbf0; color: #14783a; border-color: #b9ebc9; }
.dashboard-log-source.failed { background: #fff1f1; color: #b42318; border-color: #ffc7c2; }
.dashboard-log-status { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 5px 8px; border-radius: 999px; background: #f8fbfd; border: 1px solid #d6e7f3; color: #31465f; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.dashboard-log-status.sent, .dashboard-log-status.received, .dashboard-log-status.success { background: #eafbf0; color: #14783a; border-color: #b9ebc9; }
.dashboard-log-status.failed { background: #fff1f1; color: #b42318; border-color: #ffc7c2; }
.dashboard-log-status.pending, .dashboard-log-status.processing { background: #fff8e6; color: #956300; border-color: #ffe0a3; }
.send-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px; gap: 4px; }
.send-tabs a { color: var(--ink); text-decoration: none; border-radius: 7px; padding: 8px 16px; font-weight: 700; font-size: 14px; }
.send-tabs a.active { background: var(--blue); color: #fff; }
.compose-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.92); padding: 4px; gap: 4px; }
.compose-tabs a { color: var(--muted); text-decoration: none; border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 13px; }
.compose-tabs a.active { color: #fff; background: #0f9f9a; }
.history-filter { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 10px; align-items: end; }
.history-filter.has-reset { grid-template-columns: minmax(0, 1fr) 150px auto auto; }
.history-filter-submit, .history-filter-reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.history-filter-submit svg, .history-filter-reset svg { width: 16px; height: 16px; stroke-width: 2.4; }
.chat-panel { padding: 14px; }
#chatLivePanel { height: calc(100dvh - 178px); min-height: 520px; display: flex; flex-direction: column; }
#chatLivePanel .history-filter { flex: 0 0 auto; }
.chat-history-layout { display: grid; grid-template-columns: minmax(220px, .28fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.chat-history-layout, #chatLivePanel .chat-history-layout { flex: 1 1 auto; min-height: 0; }
.chat-conversation-list { display: grid; gap: 8px; align-content: start; grid-auto-rows: max-content; max-height: none; overflow: auto; padding-right: 4px; min-height: 0; }
.chat-conversation { position: relative; display: block; padding: 10px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; color: var(--ink); text-decoration: none; overflow: hidden; }
.chat-conversation:hover { border-color: #b8d8f6; background: #eef7ff; color: var(--ink); }
.chat-conversation.active { border-color: rgba(20, 184, 166, .52); background: linear-gradient(135deg, #e0f2fe 0%, #ecfeff 48%, #dcfce7 100%); color: var(--ink); box-shadow: inset 4px 0 0 #0ea5e9, 0 10px 24px rgba(14, 165, 233, .12); }
.chat-conversation-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-conversation-title { min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-loading { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; color: var(--muted); font-size: 13px; }
.chat-list-loading span { width: 14px; height: 14px; border-radius: 999px; border: 2px solid #bfdbfe; border-top-color: var(--blue); animation: sfq-spin .75s linear infinite; flex: 0 0 auto; }
.chat-list-loading strong { font-size: 13px; }
.chat-list-more-wrap { display: grid; padding: 2px 0 4px; }
.chat-list-more { width: 100%; border: 1px solid #cde6fb; background: #f3f9ff; color: var(--blue); border-radius: 8px; padding: 9px 10px; font-size: 12px; font-weight: 900; }
.chat-list-more:hover { background: #eaf5ff; }
.chat-type-chip { flex: 0 0 auto; border-radius: 999px; border: 1px solid #d3e3f0; padding: 3px 7px; font-size: 10px; font-weight: 900; color: #52677b; background: #fff; }
.chat-type-chip.group { color: #0f766e; border-color: #bee7dc; background: #ebfbf6; }
.chat-type-chip.personal { color: #145da8; border-color: #cde6fb; background: #edf7ff; }
.chat-conversation-preview { color: #39475c; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-meta { color: var(--muted); font-size: 11px; }
.chat-thread-panel { min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #f8fbfd, #eef7f6); overflow: hidden; display: flex; flex-direction: column; }
.chat-thread-panel.is-empty .chat-thread-head, .chat-thread-panel.is-empty .chat-reply-form { display: none; }
.chat-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); }
.chat-thread-head strong { display: block; }
.chat-thread-head small { color: var(--muted); word-break: break-word; }
.chat-thread-identity { min-width: 0; display: grid; gap: 2px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.chat-thread-identity:hover strong { color: var(--blue); }
.chat-head-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.chat-delete-form { margin: 0; }
.chat-delete-form .btn { display: inline-flex; align-items: center; gap: 5px; }
.chat-delete-form svg { width: 15px; height: 15px; stroke-width: 2.4; }
.mobile-thread-back { display: none; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; color: #405166; border-radius: 999px; padding: 6px 9px; font-size: 12px; font-weight: 800; }
.mobile-thread-back svg { width: 15px; height: 15px; stroke-width: 2.5; }
.chat-thread { min-height: 0; max-height: none; overflow: auto; padding: 16px; display: flex; flex: 1 1 auto; flex-direction: column; gap: 9px; }
.chat-load-older { align-self: center; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cde6fb; border-radius: 999px; background: #fff; color: #145da8; padding: 7px 12px; font-size: 12px; font-weight: 900; box-shadow: 0 8px 18px rgba(23, 32, 51, .055); }
.chat-load-older:hover { background: #eaf5ff; }
.chat-load-older svg { width: 14px; height: 14px; stroke-width: 2.5; }
.chat-bubble { max-width: min(680px, 78%); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px 7px; box-shadow: 0 8px 18px rgba(23, 32, 51, .045); }
.chat-bubble.in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.chat-bubble.out { align-self: flex-end; background: #dff7ed; border-color: #bde9cb; border-top-right-radius: 3px; }
.chat-bubble p { margin: 0; line-height: 1.42; white-space: normal; word-break: break-word; }
.chat-sender { display: block; margin-bottom: 3px; color: #0f766e; font-weight: 800; font-size: 12px; }
.chat-attachment { margin-top: 8px; display: flex; align-items: center; gap: 9px; min-width: min(300px, 100%); padding: 9px; border: 1px solid rgba(17, 94, 89, .16); border-radius: 8px; background: rgba(255,255,255,.72); }
.chat-attachment-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 32px; background: #e0f2fe; color: #075985; font-size: 13px; font-weight: 900; }
.chat-attachment-body { min-width: 0; display: grid; gap: 2px; flex: 1 1 auto; }
.chat-attachment-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-attachment-body small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-preview, .chat-attachment-download { flex: 0 0 auto; border: 1px solid #93c5fd; border-radius: 7px; padding: 6px 9px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 900; text-decoration: none; cursor: pointer; }
.chat-attachment-preview:hover, .chat-attachment-download:hover { background: #dbeafe; color: #1e40af; }
.chat-attachment-muted { flex: 0 0 auto; color: #64748b; font-size: 11px; font-weight: 800; }
.chat-time { display: block; margin-top: 5px; color: #6b7688; font-size: 11px; text-align: right; }
.chat-media-modal { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; padding: 18px; }
.chat-media-modal.open { display: flex; }
.chat-media-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 19, 33, .58); backdrop-filter: blur(5px); }
.chat-media-modal-dialog { position: relative; z-index: 1; width: min(980px, 100%); max-height: min(820px, 92vh); display: flex; flex-direction: column; border: 1px solid rgba(203, 213, 225, .85); border-radius: 10px; overflow: hidden; background: #f8fbfd; box-shadow: 0 28px 80px rgba(15, 23, 42, .28); }
.chat-media-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-media-modal-head strong { display: block; max-width: 74vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-media-modal-head small { display: block; color: var(--muted); font-size: 12px; }
.chat-media-modal-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; font-size: 22px; line-height: 1; color: #334155; }
.chat-media-modal-body { min-height: 280px; max-height: 70vh; display: grid; place-items: center; overflow: auto; background: linear-gradient(135deg, #f8fafc, #eef7f6); }
.chat-media-image-wrap { width: 100%; min-height: 220px; display: grid; place-items: center; padding: 10px; }
.chat-media-preview-img, .chat-media-preview-video { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; }
.chat-media-preview-frame { width: 100%; height: 70vh; border: 0; background: #fff; }
.chat-media-preview-audio, .chat-media-preview-empty { min-width: min(420px, 92%); display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; }
.chat-media-preview-audio audio { width: 100%; }
.chat-media-preview-empty span { color: var(--muted); }
.chat-media-modal-foot { display: flex; justify-content: flex-end; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.chat-media-modal-open { overflow: hidden; }
.chat-reply-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 10px; border-top: 1px solid var(--line); background: rgba(255,255,255,.92); }
.chat-reply-form textarea { resize: vertical; min-height: 42px; max-height: 140px; }
.chat-inline-notice { margin: 8px 10px 0; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 700; }
.chat-inline-notice.success { background: #e7f8ed; color: #167341; border: 1px solid #bde9cb; }
.chat-inline-notice.danger { background: #fff1f0; color: #b42318; border: 1px solid #ffd1cc; }
.chat-inline-notice.info { background: #eaf5ff; color: #145da8; border: 1px solid #cde6fb; }
.chat-loading { margin: auto; display: grid; place-items: center; gap: 10px; color: #506070; font-size: 13px; font-weight: 800; }
.chat-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #dbeafe; border-top-color: var(--blue); animation: sfq-spin .75s linear infinite; }
@keyframes sfq-spin { to { transform: rotate(360deg); } }
.chat-info-modal { border-radius: 8px; }
.chat-info-list { display: grid; gap: 10px; margin: 0; }
.chat-info-list div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chat-info-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.chat-info-list dt { color: var(--muted); font-size: 12px; font-weight: 800; }
.chat-info-list dd { margin: 0; word-break: break-word; }
.group-list { display: grid; gap: 10px; }
.group-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; }
.group-item strong { display: block; word-break: break-word; }
.group-item small { color: var(--muted); word-break: break-word; }
.group-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.group-edit { display: grid; grid-template-columns: 120px minmax(160px, 1fr) auto auto auto; gap: 8px; align-items: center; min-width: min(620px, 100%); }
.system-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.system-summary { background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 8px; padding: 14px; box-shadow: 0 10px 25px rgba(23, 32, 51, .045); }
.system-summary span { display: block; color: var(--muted); font-size: 12px; }
.system-summary strong { display: block; margin-top: 3px; font-size: 24px; }
.section-title h2 { margin: 0 0 14px; font-size: 17px; }
.system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.system-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; color: var(--ink); text-decoration: none; }
.system-card:hover { border-color: #b8d8f6; background: #eef7ff; color: var(--ink); }
.system-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #1769d1; background: #eaf5ff; }
.system-icon svg { width: 19px; height: 19px; stroke-width: 2.35; }
.system-card-body { min-width: 0; display: grid; gap: 2px; }
.system-card-body strong { font-size: 14px; }
.system-card-body small { color: var(--muted); line-height: 1.35; }
.system-card em { border-radius: 999px; background: #fff; border: 1px solid #cde6fb; color: #145da8; padding: 6px 10px; font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; }

.queue-alert { margin-bottom: 12px; }
.queue-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.queue-kpi-card { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.94); color: var(--ink); text-decoration: none; box-shadow: 0 10px 24px rgba(23,32,51,.045); }
.queue-kpi-card:hover, .queue-kpi-card.active { border-color: #7ec8e8; background: linear-gradient(135deg, #eef9ff, #f2fffb); color: var(--ink); }
.queue-kpi-card span { color: var(--muted); font-size: 12px; font-weight: 700; }
.queue-kpi-card strong { font-size: 22px; line-height: 1; }
.queue-worker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.queue-worker-card { padding: 11px 12px; border: 1px solid #d9e7f3; border-radius: 8px; background: #f8fbfd; }
.queue-worker-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.queue-worker-card strong { display: block; margin-top: 3px; font-size: 13px; word-break: break-word; }
.queue-panel { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 10px 25px rgba(23,32,51,.045); }
.queue-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.queue-panel-head h2 { margin: 0 0 3px; font-size: 18px; }
.queue-panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.queue-search { display: grid; grid-template-columns: minmax(220px, 1fr) 86px auto; gap: 8px; min-width: min(620px, 100%); }
.queue-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.queue-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #d7e5f1; border-radius: 8px; background: #f8fbfd; color: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.queue-tabs a.active, .queue-tabs a:hover { background: #1769d1; border-color: #1769d1; color: #fff; }
.queue-tabs a b { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.72); color: #145da8; text-align: center; font-size: 11px; }
.queue-tabs a.active b, .queue-tabs a:hover b { background: rgba(255,255,255,.2); color: #fff; }
.queue-actions-panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px solid #dceaf5; border-radius: 8px; background: linear-gradient(135deg, #f7fbff, #f5fffb); margin-bottom: 12px; }
.queue-inline-form { display: inline-grid; grid-template-columns: 76px auto; gap: 6px; align-items: center; }
.queue-table-wrap { overflow: auto; border: 1px solid #dce8f3; border-radius: 8px; }
.queue-table { margin: 0; min-width: 1120px; font-size: 13px; }
.queue-table thead th { background: #f2f7fb; color: #334963; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid #dce8f3; }
.queue-table td { border-color: #e6eef5; vertical-align: top; }
.queue-table strong { display: block; font-size: 13px; line-height: 1.25; }
.queue-table small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; word-break: break-word; }
.queue-id { font-weight: 900; color: #1769d1; text-decoration: none; }
.queue-error { max-width: 220px; color: #8a4b10; font-size: 12px; }
.queue-status { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.queue-status.pending { background: #fff8e6; color: #a45c00; border: 1px solid #ffd78a; }
.queue-status.processing { background: #eaf5ff; color: #1769d1; border: 1px solid #b8d8f6; }
.queue-status.sent { background: #eafbf0; color: #14783a; border: 1px solid #a9edc0; }
.queue-status.failed { background: #fff1f1; color: #b42318; border: 1px solid #ffc7c2; }
.queue-status.trash { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.queue-row-trash { opacity: .78; }
.queue-row-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 230px; }
.queue-row-actions form { display: inline; }
.queue-detail-modal .modal-content { border: 0; border-radius: 10px; overflow: hidden; }
.queue-detail-modal .modal-header { background: linear-gradient(135deg, #10213a, #0f766e); color: #fff; }
.queue-detail-modal .modal-header small { color: rgba(255,255,255,.78); }
.queue-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.queue-detail-grid div { padding: 9px 10px; border: 1px solid #dce8f3; border-radius: 8px; background: #f8fbfd; }
.queue-detail-grid span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.queue-detail-grid strong { display: block; margin-top: 3px; font-size: 13px; word-break: break-word; }
.queue-detail-block { margin-top: 10px; }
.queue-detail-block h6 { margin: 0 0 6px; font-size: 12px; font-weight: 900; color: #334963; text-transform: uppercase; }
.queue-detail-block pre { max-height: 280px; overflow: auto; padding: 11px; border: 1px solid #dce8f3; border-radius: 8px; background: #0f172a; color: #e8f2ff; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.queue-detail-note { padding: 9px 10px; border-radius: 8px; font-size: 12px; }
.queue-detail-note.trash { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }
.queue-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 12px; }

.tuning-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(135deg, rgba(10, 33, 63, .98), rgba(0, 136, 154, .92)); color: #fff; border: 0; }
.tuning-hero .eyebrow { display: inline-flex; margin-bottom: 7px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.tuning-hero h1 { margin: 0 0 5px; font-size: 23px; line-height: 1.1; }
.tuning-hero p { margin: 0; max-width: 680px; color: rgba(255,255,255,.78); }
.tuning-active { min-width: 170px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.tuning-active span { display: block; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; }
.tuning-active strong { display: block; margin-top: 2px; font-size: 20px; }
.tuning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tuning-card { position: relative; display: grid; gap: 9px; min-height: 156px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #fff, #f7fbff); cursor: pointer; box-shadow: 0 12px 26px rgba(15, 42, 72, .06); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.tuning-card:hover { transform: translateY(-2px); border-color: #8ed1ff; box-shadow: 0 16px 32px rgba(15, 42, 72, .1); }
.tuning-card.active { border-color: #16b6c8; background: linear-gradient(180deg, #ebfbff, #f8fffd); box-shadow: 0 18px 36px rgba(20, 184, 166, .16); }
.tuning-card input { position: absolute; opacity: 0; pointer-events: none; }
.tuning-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tuning-card-head strong { font-size: 16px; }
.tuning-card-head em { border-radius: 999px; background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; padding: 4px 8px; font-size: 11px; font-style: normal; font-weight: 900; }
.tuning-card small { color: var(--muted); line-height: 1.35; }
.tuning-metrics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.tuning-metrics b { border-radius: 999px; border: 1px solid #d4ebff; background: #fff; color: #145da8; padding: 4px 7px; font-size: 11px; }
.tuning-section-title { align-items: center; gap: 12px; }
.tuning-actions { margin-left: auto; display: flex; gap: 8px; }
.tuning-rule-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.tuning-rule-grid > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #f8fbfd; }
.tuning-rule-grid span, .tuning-rule-grid small { display: block; color: var(--muted); font-size: 12px; }
.tuning-rule-grid strong { display: block; margin: 3px 0; font-size: 20px; color: var(--ink); }
.tuning-cron { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #071522; color: #d8f7ff; white-space: pre-wrap; font-size: 12px; }
.tuning-custom-panel { background: linear-gradient(180deg, #ffffff, #f6fbff); }
.tuning-custom-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.tuning-custom-grid label { display: grid; gap: 6px; margin: 0; font-weight: 800; color: var(--ink); }
.tuning-custom-grid span { font-size: 12px; color: var(--muted); }
.tuning-custom-grid .form-control,
.tuning-custom-grid .form-select { min-height: 40px; border-radius: 11px; border-color: var(--line); font-weight: 700; }
.advance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.advance-card { display: grid; gap: 8px; min-height: 120px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 25px rgba(23, 32, 51, .045); color: var(--ink); text-decoration: none; }
.advance-card strong { font-size: 18px; }
.advance-card span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.advance-card:hover { border-color: #b8d8f6; color: var(--ink); transform: translateY(-1px); }
.advance-list { display: grid; gap: 10px; }
.advance-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfd; color: var(--ink); text-decoration: none; }
.advance-row strong { display: block; margin-bottom: 2px; }
.advance-row span { display: block; color: var(--muted); font-size: 13px; }
.advance-row em { flex: 0 0 auto; min-width: 92px; text-align: center; border-radius: 999px; background: #eaf5ff; color: #145da8; border: 1px solid #cde6fb; padding: 6px 10px; font-style: normal; font-size: 12px; font-weight: 800; }
.advance-row:hover { border-color: #b8d8f6; color: var(--ink); }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr); gap: 14px; align-items: start; }
.account-main { min-width: 0; }
.account-card { position: sticky; top: 18px; }
.branding-preview { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #f8fbfd, #eef7ff); }
.branding-preview-head { display: flex; align-items: center; gap: 10px; }
.branding-preview strong, .branding-preview small { display: block; }
.branding-preview small { color: var(--muted); font-size: 12px; }
.branding-banner-preview { border: 1px solid #d7e8f4; border-radius: 8px; background: #fff; padding: 10px; overflow: hidden; }
.branding-banner-preview img { display: block; width: 100%; max-height: 82px; object-fit: contain; }
.login-body { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, rgba(7,17,31,.96), rgba(10,29,52,.96)), repeating-linear-gradient(90deg, rgba(30,231,255,.08) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(236,47,166,.055) 0 1px, transparent 1px 46px); padding: 20px; color: #eaf6ff; }
.login-card { position: relative; width: min(500px, 100%); background: linear-gradient(180deg, rgba(12, 31, 55, .94), rgba(7, 17, 31, .94)); border: 1px solid rgba(30,231,255,.22); border-radius: 12px; padding: 28px; box-shadow: 0 28px 80px rgba(0,0,0,.38), 0 0 0 1px rgba(236,47,166,.1), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; }
.cyber-card-line { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--magenta), var(--cyan)); box-shadow: 0 0 18px rgba(30,231,255,.55); }
.cyber-login-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 42%), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px); opacity: .7; }
.cyber-login-card > * { position: relative; z-index: 1; }
.login-banner { display: flex; align-items: center; justify-content: center; min-height: 90px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(30,231,255,.18); border-radius: 10px; background: rgba(255,255,255,.96); overflow: hidden; box-shadow: 0 16px 32px rgba(0,0,0,.16); }
.login-banner img { display: block; width: 100%; max-height: 92px; object-fit: contain; }
.login-brand strong { color: #fff; }
.login-brand small { color: #a8c4dc; }
.cyber-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #a8c4dc; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cyber-status-row span { border: 1px solid rgba(30,231,255,.22); border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.055); }
.login-card .form-label { color: #d9edff; font-weight: 800; }
.login-card .form-control { color: #f8fbff; background: rgba(255,255,255,.075); border-color: rgba(151, 206, 236, .35); }
.login-card .form-control::placeholder { color: #91a9be; }
.login-card .form-control:focus { color: #fff; background: rgba(255,255,255,.11); border-color: var(--cyan); box-shadow: 0 0 0 .18rem rgba(30,231,255,.16); }
.login-card .btn-outline-primary { color: #c8f7ff; border-color: rgba(30,231,255,.45); background: rgba(30,231,255,.06); }
.login-card .btn-outline-primary:hover { color: #06111f; background: #1ee7ff; border-color: #1ee7ff; }
.captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 8px; align-items: center; }
.captcha-row img { width: 150px; height: 44px; border: 1px solid #cde6fb; border-radius: 8px; background: #eef7ff; object-fit: cover; }
.captcha-row .btn { height: 44px; padding-inline: 11px; font-weight: 800; }
code { color: #0f766e; }
@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar { width: 100%; height: 76px; position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 30; padding: 7px 10px calc(8px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid #dfeaf3; background: rgba(255,255,255,.96); box-shadow: 0 -12px 28px rgba(16, 24, 39, .12); backdrop-filter: blur(14px); }
    .brand { display: none; }
    .sidebar .nav, .sidebar .nav.flex-column { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; gap: 4px; }
    .sidebar .nav-link { min-width: 0; height: 58px; display: grid; grid-template-rows: 30px 16px; place-items: center; gap: 2px; text-align: center; white-space: nowrap; padding: 6px 3px 5px; font-size: 10px; border-radius: 14px; color: #506070; background: transparent; border: 1px solid transparent; }
    .sidebar .nav-link.active { color: var(--blue); background: #eaf5ff; border-color: #cde6fb; box-shadow: inset 0 0 0 1px rgba(23,105,209,.04); }
    .sidebar .nav-link:hover { color: var(--blue); background: #f3f9ff; }
    .nav-icon { width: 30px; height: 30px; border-radius: 11px; background: #eef4f8; }
    .nav-icon svg { width: 19px; height: 19px; stroke-width: 2.35; }
    .nav-label { width: 100%; line-height: 1; }
    .nav-link.active .nav-icon { background: #1769d1; color: #fff; box-shadow: 0 8px 18px rgba(23,105,209,.2); }
    .content { padding: 14px 14px 98px; }
    .alert { font-size: 12px; padding: 7px 10px; }
    .back-toolbar { margin: -2px 0 10px; }
    .topbar { margin-bottom: 10px; }
    .topbar-actions { align-items: stretch; gap: 8px; }
    .topbar-action-controls { flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; justify-content: stretch; }
    .header-device-form { min-width: 0; width: 100%; display: grid; grid-template-columns: minmax(112px, 1fr) auto auto; gap: 5px; padding: 5px; }
    .header-device-label, .header-status { display: none; }
    .header-device-form .form-select { min-width: 0; width: 100%; }
    .header-device-form .btn { min-height: 34px; padding: .35rem .55rem; font-size: 12px; }
    .header-sync-link span { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .metric { min-height: 84px; padding: 12px; }
    .metric strong { font-size: 20px; }
    .panel { padding: 14px; }
    .dashboard-title { align-items: flex-start; padding: 13px; }
    .dashboard-title h1 { font-size: 20px; }
    .dashboard-title p { font-size: 12px; }
    .dashboard-live-pill { padding: 6px 9px; font-size: 11px; }
    .dashboard-head { grid-template-columns: 1fr; }
    .device-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-log-panel { padding: 0; }
    .dashboard-log-head { align-items: flex-start; flex-direction: column; padding: 12px; }
    .dashboard-log-meta { width: 100%; justify-content: space-between; }
    .dashboard-log-table-wrap { min-height: 420px; max-height: calc(100dvh - 340px); }
    .dashboard-log-table { min-width: 860px; font-size: 11px; }
    .dashboard-log-message { min-width: 260px; max-width: 360px; }
    .device-section-head { display: grid; gap: 8px; }
    .device-section-head p { display: none; }
    .device-add-row, .device-scan-grid, .chat-history-layout, .chat-reply-form { grid-template-columns: 1fr; }
    .device-scan-actions { justify-content: flex-start; }
    .qr-scan-box { min-height: 220px; }
    .device-row { align-items: stretch; flex-direction: column; gap: 8px; padding: 9px; }
    .device-row-main { gap: 1px; }
    .device-row-actions { justify-content: flex-start; width: 100%; gap: 6px; }
    .device-row-actions .btn { padding: .32rem .52rem; font-size: 12px; }
    .device-rename-form { max-width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
    .send-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px !important; }
    .send-tabs a { text-align: center; padding: 7px 6px; font-size: 12px; }
    .history-filter { grid-template-columns: minmax(0, 1fr) 78px 36px; gap: 6px; align-items: end; }
    .history-filter.has-reset { grid-template-columns: minmax(0, 1fr) 76px 36px 36px; }
    .history-filter label { display: none; }
    .history-filter .form-control, .history-filter .form-select { min-height: 36px; padding: .35rem .5rem; font-size: 12px; }
    .history-filter-submit, .history-filter-reset { width: 36px; height: 36px; padding: 0; }
    .history-filter-submit span, .history-filter-reset span { display: none; }
    .history-filter-submit svg, .history-filter-reset svg { width: 16px; height: 16px; }
    #chatLivePanel { height: calc(100dvh - 190px); min-height: 0; padding: 10px; }
    #chatLivePanel .history-filter { flex: 0 0 auto; }
    .chat-history-layout { display: block; overflow: hidden; }
    .chat-conversation-list { height: 100%; max-height: none; padding-right: 0; }
    .chat-thread-panel { display: none; height: 100%; min-height: 0; }
    .chat-panel.mobile-thread-open .history-filter { display: none; }
    .chat-panel.mobile-thread-open .chat-conversation-list { display: none; }
    .chat-panel.mobile-thread-open .chat-thread-panel { display: flex; }
    .chat-thread { min-height: 0; max-height: none; padding: 12px; }
    .chat-thread-head { align-items: center; flex-direction: row; gap: 8px; padding: 10px; }
    .mobile-thread-back { display: inline-flex; flex: 0 0 auto; }
    .chat-thread-identity { flex: 1 1 auto; min-width: 0; }
    .chat-head-actions { gap: 6px; }
    .chat-thread-head .status-pill { display: none; }
    .chat-delete-form .btn { width: 34px; height: 34px; padding: 0; justify-content: center; }
    .chat-delete-form .btn span { display: none; }
    .chat-bubble { max-width: 88%; }
    .group-item { align-items: flex-start; flex-direction: column; }
    .group-meta { justify-content: flex-start; }
    .group-edit { width: 100%; grid-template-columns: 1fr; }
    .system-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .system-grid, .advance-grid, .account-grid { grid-template-columns: 1fr; }
    .system-card { grid-template-columns: 34px minmax(0, 1fr); }
    .system-card em { grid-column: 2; justify-self: start; }
    .queue-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .queue-kpi-card:first-child { grid-column: 1 / -1; }
    .queue-worker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .queue-panel { padding: 11px; }
    .queue-panel-head { align-items: stretch; flex-direction: column; gap: 10px; }
    .queue-search { min-width: 0; grid-template-columns: minmax(0, 1fr) 72px 62px; gap: 6px; }
    .queue-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .queue-tabs a { flex: 0 0 auto; padding: 7px 9px; font-size: 12px; }
    .queue-actions-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .queue-actions-panel .btn { width: 100%; }
    .queue-inline-form { grid-column: 1 / -1; grid-template-columns: 74px minmax(0, 1fr); }
    .queue-detail-grid { grid-template-columns: 1fr; }
    .queue-pagination { align-items: flex-start; flex-direction: column; }
    .tuning-hero { display: grid; }
    .tuning-grid { grid-template-columns: 1fr; }
    .tuning-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tuning-custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tuning-section-title { display: grid; }
    .tuning-actions { margin-left: 0; width: 100%; }
    .tuning-actions .btn { flex: 1; }
    .advance-row { align-items: flex-start; flex-direction: column; }
    .advance-row em { min-width: 0; text-align: left; }
    .account-card { position: static; }
    .login-card { padding: 22px; }
    .login-banner { min-height: 62px; margin-bottom: 14px; }
    .chat-media-modal { padding: 10px; align-items: center; }
    .chat-media-modal-dialog { width: 100%; max-height: calc(100dvh - 24px); border-radius: 12px; }
    .chat-media-modal-body { min-height: 260px; max-height: calc(100dvh - 168px); }
    .chat-media-image-wrap { min-height: 250px; padding: 8px; }
    .chat-media-preview-img, .chat-media-preview-video { max-height: calc(100dvh - 188px); }
    .chat-media-preview-frame { height: calc(100dvh - 188px); }
    .captcha-row { grid-template-columns: minmax(0, 1fr) 116px auto; gap: 6px; }
    .captcha-row img { width: 116px; height: 42px; }
    .captcha-row .btn { height: 42px; padding-inline: 8px; font-size: 12px; }
    .table { font-size: 13px; }
    .btn { --bs-btn-padding-y: .42rem; --bs-btn-padding-x: .7rem; }
}