/* First-frame loading is external CSS to retain the server CSP. */
html[data-flow-startup] body > :not(#flowStartup),html[data-flow-startup] body > :not(#flowStartup) *{visibility:hidden!important;pointer-events:none!important}
#flowStartup{position:fixed;inset:0;z-index:9999;display:grid;place-content:center;justify-items:center;gap:14px;padding:28px;background:var(--bg,#f3f6ef);color:var(--text,#263e2d);text-align:center}
#flowStartup .startup-mark{width:44px;height:44px;margin-bottom:6px}
#flowStartup h1{margin:0;font-size:clamp(22px,5vw,28px);font-weight:650;line-height:1.25;letter-spacing:-.5px;overflow-wrap:anywhere}
#flowStartup p{max-width:32em;margin:0;color:var(--muted,#596b50);font-size:14px;line-height:1.6}
#flowStartupRetry{min-height:44px;padding:0 18px;margin-top:6px;color:#233c21;background:var(--green,#b4d96b);border:1px solid #a3c858;border-radius:10px;font:inherit;font-size:14px;cursor:pointer}
#flowStartupRetry[hidden]{display:none!important}
#flowStartupRetry:focus-visible{outline:3px solid #648c35;outline-offset:3px}

/* Flow V2 — one theme over the unchanged functional frontend.
   1. Tokens  2. Workspace  3. Devices  4. Sections  5. Dialogs  6. Responsive */

/* 1. Tokens and shared controls */
:root {
  --bg:#f3f6ef; --surface:#fff; --text:#263e2d; --brand-ink:#263e2d;
  --green:#b4d96b; --darkgreen:#32572b; --deep:#32572b; --muted:#596b50;
  --line:#dce4d4; --white:#fff; --accent-border:#6f943f; --tint:#edf4e2;
  --workspace-top-offset:0px; --sidebar-width:224px; --radius:15px;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;
}
body {padding-top:var(--workspace-top-offset); background:var(--bg); color:var(--text)}
body h1,body h2,body h3 {color:var(--text); font-weight:650}
body h1 {font-size:30px; letter-spacing:-1px; line-height:1.15}
button {border-color:var(--line); border-radius:10px; transition:background 160ms,border-color 160ms,color 160ms,box-shadow 160ms}
button:hover:not(:disabled) {background:#edf4e5; border-color:#b2c59d}
button.primary,body .sh-primary,body .account-primary {background:var(--green)!important; border-color:#a3c858!important; color:#233c21!important; box-shadow:0 1px 1px #273d2010}
button.primary:hover:not(:disabled),body .sh-primary:hover,body .account-primary:hover {background:#a6d054!important; border-color:#91b94a!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid #648c35; outline-offset:3px}
body :is(input,select,textarea) {border-color:#cfdcc3; color:var(--text)}
body :is(input,textarea)::placeholder {color:#66765b}
body :is(.breadcrumb,.workspace-label,.page-heading p,.gallery-note,.overview-note,.local,.proxy-pool-summary,.proxy-pool-summary small,.form-note,.check-label,.feedback,.metadata-dialog form>small,.metadata-dialog form>p) {color:var(--muted)}
body .eyebrow {color:#617c45; font-size:9px; font-weight:700; letter-spacing:1.8px}
body .neutral-tag {background:var(--tint); color:#506d36; border-radius:6px}
body .feedback.error,body .account-feedback.error,body .flow-routing .is-error,body .sh-feedback.error {color:#a04d30}

/* 2. Workspace shell for the authenticated live panel. */
body .sidebar {top:var(--workspace-top-offset); width:var(--sidebar-width); padding:28px 14px 17px; background:#fff; border-right:1px solid var(--line)}
body .sidebar .brand {padding-left:8px; gap:8px; color:var(--brand-ink)}
body .workspace-label {margin:36px 12px 15px; font-size:8px; line-height:1.4; letter-spacing:1.05px; white-space:nowrap}
body #navigation {display:flex; flex-direction:column; flex:1; min-height:0; gap:7px; padding:0 1px 14px; overflow-y:auto}
body #navigation>button {width:100%; min-height:47px; flex:0 0 47px; padding:0 13px; margin:0; gap:12px; border:1px solid transparent; border-radius:11px; color:#59694e; background:transparent; font-size:13px; font-weight:570; text-align:left}
body #navigation>button:hover {background:#f3f6ee; color:#2c4c2a}
body #navigation>button.active {color:#2e4c23; background:#e8f1d7; border-color:#d7e5bf; box-shadow:inset 3px 0 #6f943f; font-weight:700}
body #navigation>button>span {min-width:0; flex:1; text-align:left; white-space:nowrap}
body #navigation>button svg {width:20px; height:20px; color:currentColor; stroke-width:1.7}
body #navigation>button:focus-visible {outline:2px solid #648c35; outline-offset:-3px}
body #navigation>#authenticatorsNav {margin-top:auto}
body .side-bottom {margin-top:0; border-color:var(--line); padding:16px 7px 0}
body .side-bottom b {font-size:11px; color:#34482d}
body .side-bottom small {font-size:10px; color:#657457}
body .sms-unread-badge {flex:0 0 auto!important; min-width:22px; width:auto; height:21px; margin-left:auto; padding:0 5px; font-size:10px; line-height:21px; text-align:center!important; background:#d5e9b1; color:#345223; border-radius:6px}
body .app {margin-left:var(--sidebar-width)}
body .topbar {height:72px; padding:0 28px; gap:16px; background:#fff; border-color:var(--line)}
body .breadcrumb {font-size:11px}
body .breadcrumb b {color:#38502e; font-weight:650}
body .topbar .ai-top-button {color:#3b5b2e; background:#f0f6e6; border:1px solid #d9e7c7; min-height:38px; border-radius:10px; font-size:12px; padding:0 14px}
body .topbar .profile {background:#e6eedb; color:#38512e; border-color:#d9e4cc; min-height:34px; height:34px; min-width:34px}
body .topbar .local {font-size:10px; color:#6b7b5c}
body main {max-width:1760px; padding:30px 28px 30px}
body .page-heading {margin-bottom:24px}
body .page-heading p {margin-top:9px; font-size:12px; line-height:1.6}
body h1 span {color:#5d7546; font-size:21px; font-weight:500; margin-left:9px}

/* 3. Gallery and the open phone. The original mode controller remains intact. */
body .list-toolbar {gap:8px; margin-bottom:18px}
body .tabs {padding:3px; background:#fff; border:1px solid var(--line); border-radius:11px}
body .tabs button {color:#657559; min-height:36px; border-radius:8px; font-size:12px}
body .tabs button.active {background:#e5efd5; color:#325324; box-shadow:none}
body .gallery-view-controls {background:#e9efdf; border:1px solid #dce5ce; padding:3px; border-radius:11px}
body .gallery-view-controls button {min-width:34px; min-height:34px; color:#61754e; border-radius:7px; font-size:11px}
body .gallery-view-controls button.active {background:#fff; color:#2c4e27; box-shadow:0 1px 4px #20331d12}
body #searchButton,body #refresh {color:#657d4c}
body .search-popover {background:#fbfdf8f5; border-color:#c9d8b9; box-shadow:0 12px 35px #25371916}
body #devices[data-gallery-mode="4"] {grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 14px}
body #devices[data-gallery-mode="5"] {grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px 12px}
body #devices .device-card:not(.device-list-row) {display:grid; grid-template-columns:minmax(0,1fr); align-content:start; min-width:0; padding:9px 9px 11px; background:#fff; border:1px solid #d3dfc8; border-radius:18px; box-shadow:0 2px 3px #2a402407; transition:border-color 180ms,box-shadow 180ms,background 180ms}
body #devices .device-card:not(.device-list-row):hover {border-color:#9bb67f; box-shadow:0 5px 17px #3e592010}
body #devices .device-card.selected {background:#f0f7e5; border-color:#6f943f; box-shadow:0 0 0 1px #8db35c}
body #devices .card-preview {aspect-ratio:720/1600; min-height:0; padding:0; border-radius:11px; background:#e4eddd; overflow:hidden}
body #devices .preview-frame {height:100%; width:100%; display:block; position:relative; overflow:hidden}
body #devices .preview-frame img {position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:0}
body #devices .device-card.is-open:not(.selection-mode) .card-preview {outline:2px solid #91b85c; outline-offset:2px}
body #devices .device-card.selected .card-preview {outline:2px solid #6f943f; outline-offset:2px}
body #devices .card-bottom {display:contents}
body #devices .card-info {grid-column:1; grid-row:2; margin:10px 2px 0; min-width:0}
body #devices .card-info strong {color:#29402c; font-size:12px; line-height:1.45; font-weight:650; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere}
body #devices .card-number {grid-column:1; grid-row:3; display:flex; align-items:center; width:100%; height:auto; min-height:28px; padding:3px 2px; color:#566e44; font-size:11px; line-height:1.45; font-weight:500; text-align:left; white-space:normal; overflow:visible; overflow-wrap:anywhere}
body #devices .card-number:hover {color:#2c5526; background:#eaf2df}
body #devices .card-profile {grid-column:1; grid-row:4; color:#5c6d50; margin:1px 2px 0; font-size:10px; line-height:1.6; white-space:normal; overflow:visible; overflow-wrap:anywhere}
body #devices .card-actions {grid-column:1; grid-row:5; gap:7px; width:100%; margin:0; padding-top:1px; justify-content:flex-end}
body #devices .card-bottom .card-gear {width:31px; min-width:31px; min-height:32px; flex-basis:31px; color:#5b7840; border-radius:8px}
body #devices .card-bottom .card-gear:hover {background:#eaf2df}
body #devices .card-bottom .card-gear svg {width:18px; height:18px}
body .card-battery {color:#5e724a; font-size:10px; font-variant-numeric:tabular-nums}
body .card-battery.charging {color:#527b2e}
body .card-battery.low {color:#9c5223}
body .card-internet[data-state="online"] {color:#517633}
body .card-internet[data-state="offline"] {color:#a26940}
body .card-internet[data-state="unknown"] {color:#7f8c72; opacity:.7}
body #devices .ip-badge {font-size:9px; padding:6px 7px; line-height:1.35; left:5px; right:5px; bottom:6px; color:#436132; background:#f3f8edf5; border-color:#ffffffa3; white-space:normal; overflow-wrap:anywhere; border-radius:7px; backdrop-filter:blur(12px)}
body #devices .ip-badge.is-error {color:#954c2c!important; background:#fff2e6f5!important}
body .card-selection {width:23px; height:23px; border:1.5px solid #fff; background:#ffffffa6; border-radius:7px}
body .card-selection.checked {color:#274623; background:#c6e58f; border-color:#fff}
body .bulk-selection-bar {margin-top:0; padding:11px 12px; gap:9px; background:#edf5e1; border:1px solid #c8dcae; border-radius:12px; color:#365229}
body #bulkSelectionCount {font-size:12px; font-weight:700; color:#365229}
body #clearDeviceSelection {min-height:40px; padding:0 13px; color:#2f4f28; font-size:12px; font-weight:700; background:#fff; border:1px solid #6f943f; box-shadow:0 1px 2px #253c2010}
body .bulk-selection-bar button {font-size:11px; min-height:40px}
body #devices.gallery-list {display:block; background:#fff; border-color:var(--line); border-radius:15px; overflow:hidden}
body #devices .device-list-row {display:grid; grid-template-columns:minmax(160px,1.15fr) minmax(100px,1fr) 128px; grid-template-rows:auto auto; gap:4px 14px; align-items:center; padding:14px 16px; min-height:88px; border:0; border-bottom:1px solid #e4ebdd; border-radius:0; box-shadow:none}
body #devices .device-list-row:last-child {border-bottom:0}
body #devices .device-list-row .card-bottom {display:contents}
body #devices .device-list-row .card-info {grid-column:1; grid-row:1; margin:0}
body #devices .device-list-row .card-number {grid-column:1; grid-row:2; margin:0; padding:0; min-height:26px}
body #devices .device-list-row .card-profile {grid-column:2; grid-row:1; margin:0}
body #devices .device-list-row .card-actions {grid-column:3; grid-row:1/3; padding:0; width:auto; margin:0}
body #devices .device-list-row .card-preview {grid-column:2; grid-row:2; display:flex; justify-content:flex-start; align-items:center; aspect-ratio:auto; min-height:24px; height:auto; background:none; border:0; outline:0; overflow:visible; padding:0}
body #devices .device-list-row .ip-badge {position:static; padding:0; background:none; border:0; color:#627b4f; box-shadow:none; backdrop-filter:none; font-size:10px; line-height:1.4}
body #devices .device-list-row.selected {background:#edf5e2; box-shadow:inset 3px 0 #7ba346}
body .viewer-caption>span {font-size:13px; font-weight:650; color:#526c3f; letter-spacing:0; text-transform:none}
body .phone-window {border:1px solid #cad9bb; background:#fff; border-radius:19px; box-shadow:0 8px 28px #3c522512}
/* Switching targets only composites the two viewer surfaces; gallery geometry stays fixed. */
body #windows {position:relative}
body #windows .switching-session-in {animation:flow-device-in 200ms cubic-bezier(.22,.75,.24,1) both}
body #windows .closing-session.switching-session-out {position:absolute; inset:0; z-index:2; width:100%; pointer-events:none; animation:flow-device-out 150ms ease-out both}
@keyframes flow-device-in {from {opacity:.25; transform:translateX(7px)} to {opacity:1; transform:translateX(0)}}
@keyframes flow-device-out {from {opacity:1; transform:translateX(0)} to {opacity:0; transform:translateX(-7px)}}
body .phone-window .session-head h2 {font-size:13px; color:#29442d; line-height:1.35; white-space:normal; overflow-wrap:anywhere}
body .phone-window .session-head p {color:#63764f; font-size:9px}
body .phone-window .session-head>span {background:#e9f1de; color:#4b6c34}
body .device-session .side-controls button {color:#6c8356}
body .device-session .side-controls button:hover,body .device-session .side-controls button.active {background:#e7f0d9; color:#3c652c}
body .device-session .screen-display,body .device-session .screen-display canvas {object-fit:contain}
body .device-session .control-menu {background:#f7fbf2ee; border:1px solid #cbdcbc; border-radius:17px; box-shadow:0 12px 36px #1d341e25; backdrop-filter:blur(22px) saturate(125%); -webkit-backdrop-filter:blur(22px) saturate(125%)}
body .device-session .control-sheet {padding:13px}
body .device-session .popup-heading h3 {font-size:20px; color:#304f2d}
body .device-session .popup-heading .menu-eyebrow,body .device-session .menu-status,body .device-session .screen-footer {font-size:10px; line-height:1.5; color:#657854}
body .device-session .quality-label label,body .device-session .clipboard-switch b {font-size:12px; color:#35542b}
body .device-session .quality-label span,body .device-session .clipboard-switch small {font-size:10px; color:#637754}
body .device-session .quality-segments button {min-height:39px; font-size:12px; color:#5d7649}
body .device-session .quality-segments button.active {color:#2e4f23; background:#e3edcf}
body .device-session .clipboard-switch {min-height:56px}
body .device-session .main-commands {gap:6px}
body .device-session .main-commands button {min-height:52px; font-size:10px; color:#446437; border:1px solid #dce7d0; background:#ffffffa0}
body .device-session .main-commands svg {width:19px; height:19px}
body .device-session .extra-commands {grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:11px; padding-top:11px}
body .device-session .extra-commands button {flex-direction:row; justify-content:flex-start; text-align:left; min-height:44px; font-size:10px; padding:7px; gap:7px; color:#4e6c3f; background:#ffffff90}
body .device-session .extra-commands svg {width:17px; height:17px}
body .device-session .extra-commands .danger {color:#a45a3c}
body .card-context {background:#f8fcf3ed; border-color:#c8d7b8; box-shadow:0 12px 30px #26401f22; border-radius:13px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px)}
body .card-context button {min-height:40px; font-size:12px; color:#425d33}

/* 4. Dense sections: proxies, files, messages, accounts and secrets. */
body #proxyList {display:grid; grid-template-columns:1fr; gap:9px}
body #proxyList .proxy-row {min-height:76px; padding:12px 15px; gap:9px 12px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:none; grid-template-columns:minmax(160px,1.2fr) minmax(110px,.8fr) 72px minmax(340px,auto)}
body #proxyList :is(.proxy-identity,.proxy-state,.proxy-assigned,.proxy-actions) {grid-column:auto; grid-row:auto}
body #proxyList h4 {color:#29432c; font-size:13px; font-weight:650}
body #proxyList .proxy-identity p {color:#5b714c; font-size:11px}
body #proxyList .proxy-state {color:#5e724f; font-size:11px; line-height:1.6}
body #proxyList .proxy-assigned {color:#62784f; font-size:10px}
body #proxyList .proxy-actions {max-width:none; gap:4px; flex-wrap:nowrap}
body #proxyList .proxy-actions button {font-size:10px; min-height:36px; padding:0 9px; white-space:nowrap; color:#496a35; background:#f6f9f1; border-color:#d6e3c7}
body #proxyList .proxy-actions button:first-child {background:#e3efce; border-color:#c9ddaa; color:#355627}
body #proxyList .proxy-actions button:last-child {color:#976445}
body .proxy-pool-summary {font-size:12px; margin-bottom:2px; padding:4px 0 17px}
body .flow-routing {padding:20px; margin-top:23px; color:var(--text); border-color:var(--line); border-radius:15px; overflow:visible}
body .flow-routing h3 {font-size:18px; color:#304d2d}
body .flow-routing-heading {margin-bottom:13px}
body .flow-routing-heading p {color:#647955; font-size:12px}
body .flow-routing-toolbar {position:sticky; top:var(--workspace-top-offset); z-index:8; padding:12px 0; margin-bottom:9px; background:#fff; border-bottom:1px solid #dbe6ce; box-shadow:0 8px 10px -10px #2d452538}
body .flow-routing-toolbar-fields {display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:12px}
body .flow-routing-field {font-size:11px; color:#61794c; min-width:0}
body .flow-routing select,body .flow-routing-search-field input {display:block; width:100%; min-width:0; height:42px; min-height:42px; margin:7px 0 0; padding:9px 11px; background:#fbfdf7; border:1px solid #cfdebf; border-radius:9px; color:#3e5e2d; font:inherit; font-size:12px}
body .flow-routing-batch-row {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; margin-top:10px}
body .flow-routing-selection {display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-start; gap:7px 13px; margin:0; font-size:11px; color:#566f42}
body .flow-routing-selection label {white-space:nowrap}
body .flow-routing-selection [data-role=count] {font-variant-numeric:tabular-nums; color:#466333}
body .flow-routing .flow-routing-clear {font-size:10px; min-height:32px; padding:5px 9px; background:#fff; border:1px solid #9bb67f; color:#44682f}
body .flow-routing-actions {display:flex; gap:7px; margin:0}
body .flow-routing-actions button {min-height:37px; padding:8px 12px; font-size:11px; flex:none}
body .flow-routing-probe-note {font-size:10px; line-height:1.5; color:#61754c; margin:9px 0 0}
body .flow-routing-feedback {font-size:11px; line-height:1.5; color:#4b6e34; margin:7px 0 0; min-height:0}
body .flow-routing-feedback:empty {display:none}
body .flow-routing-list-label {display:flex; justify-content:space-between; gap:12px; margin:14px 0 8px; color:#61754c; font-size:10px; line-height:1.5}
body .flow-routing-devices {display:flex; flex-direction:column; gap:0; max-height:none; height:auto; overflow:visible; border:1px solid #e0e8d6; border-radius:11px}
body .flow-routing-devices:empty {border:0}
body .flow-routing-device {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 15px; min-height:76px; padding:11px 13px; background:#fff; border:0; border-bottom:1px solid #e6ecdf; border-radius:0}
body .flow-routing-device:last-child {border-bottom:0}
body .flow-routing-device:first-child {border-radius:11px 11px 0 0}
body .flow-routing-device:last-child {border-radius:0 0 11px 11px}
body .flow-routing-device:has(input:checked) {background:#f0f7e4; box-shadow:inset 3px 0 #87ad52}
body .flow-routing-device>label {grid-column:1; grid-row:1; min-width:0; align-items:center; gap:10px}
body .flow-routing-device-copy {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; width:100%}
body .flow-routing-device-copy strong {grid-column:1; font-size:12px; line-height:1.4; color:#34522b; font-weight:650}
body .flow-routing-device .flow-routing-number {grid-column:2; grid-row:1; white-space:nowrap; color:#61794c; font-size:10px; font-variant-numeric:tabular-nums}
body .flow-routing-state {grid-column:1/-1; font-size:11px; line-height:1.5; color:#59764a}
body .flow-routing-device-copy>small:not(.flow-routing-number) {grid-column:1/-1; color:#61754c; font-size:10px; line-height:1.5}
body .flow-routing .flow-routing-ip-action {grid-column:2; grid-row:1; margin:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:240px}
body .flow-routing-device .flow-routing-ip-check {min-height:36px; padding:7px 11px; margin:0; font-size:10px; color:#55773c; border-color:#d4e0c6; white-space:nowrap}
body .flow-routing .flow-routing-ip-detail {color:#617c4c!important; font-size:9px; line-height:1.5; text-align:right}
body .flow-routing-device .flow-routing-step {grid-column:2; grid-row:1; justify-self:end; margin:0; font-size:10px; min-height:36px; padding:7px 10px}
body .flow-routing-device:has(.flow-routing-step) .flow-routing-ip-action {grid-row:2}
body .flow-routing-note {font-size:11px; color:#647b52; line-height:1.6}
body .flow-routing button {color:#496a34; border-color:#cfdebe}
body #libraryView .fl-heading h1,body .sh-heading h1 {color:var(--text); font-size:30px; font-weight:650}
body #libraryView .fl-description,body .sh-description,body .account-description,body .sv-description {color:var(--muted); font-size:12px}
body #libraryView .fl-storage {color:#5b7249; background:#fff; border-color:var(--line); border-radius:12px; font-size:11px}
body #libraryView .fl-heading-actions button,body #libraryView .fl-tabs button {font-size:12px; color:#56773e}
body #libraryView .fl-tabs button.active {background:#e6f0d6; color:#335324}
body #libraryView .fl-file-grid {grid-template-columns:1fr; gap:9px}
body #libraryView .fl-file {padding:16px 18px; border-color:var(--line); border-radius:13px; box-shadow:none}
body #libraryView .fl-file h3 {font-size:13px; color:#304d2d; font-weight:650}
body #libraryView .fl-file p {color:#687b57; font-size:11px}
body #libraryView .fl-file-actions button,body #libraryView .fl-download {font-size:11px; min-height:40px; color:#536f3c; border-color:#d3dfc7}
body #libraryView .fl-file-icon {background:#edf4e3; color:#5a7e3a; border-radius:10px}
body #libraryView .fl-note,body .sh-note,body .sh-help {color:#637755; font-size:11px}
body .sh-summary {border-color:var(--line); border-radius:12px; color:#5a7545; font-size:12px; padding:13px 16px}
body .sh-live.connected {color:#47702e}
body .sh-live.connected:before {background:#73a33e; box-shadow:0 0 0 4px #edf5df}
body .sh-unread-count {color:#4f7530; font-weight:650}
body .sh-timezone {font-size:10px; color:#596f4b}
body .sh-toolbar {margin-bottom:16px}
body .sh-search,body .sh-select {font-size:12px; color:#4a6737; border-color:#d2dfc5; border-radius:10px}
body .sh-primary,body .sh-secondary,body .sh-reload,body .sh-danger {font-size:11px!important; min-height:40px; border-color:#d1dfc4; color:#4e7037}
body .sh-danger {color:#a25f3c}
body .sh-columns {padding-bottom:9px; font-size:9px; letter-spacing:.07em; color:#596f4b}
body .sh-list {gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
body .sh-message {padding:15px 17px; border:0; border-bottom:1px solid #e4ebdc; border-radius:0; background:#fff; box-shadow:none}
body .sh-message:last-child {border-bottom:0}
body .sh-message-new {padding-left:17px; background:#f8fbf3; box-shadow:inset 3px 0 #8eb753}
body .sh-device strong,body .sh-sender strong {color:#33502b; font-size:12px; line-height:1.45; font-weight:650}
body .sh-phone {color:#5b7547; font-size:11px}
body .sh-number-source,body .sh-package {color:#596f4b; font-size:9px}
body .sh-date time {color:#617852; font-size:10px}
body .sh-kind {color:#496d31; background:#e6f0d5; border-radius:5px; font-size:9px; padding:4px 7px}
body .sh-kind-push {color:#667b54; background:#edf1e6}
body .sh-new-label {color:#527b2c; font-size:9px; font-weight:650}
body .sh-message-title {color:#395730; font-size:12px}
body .sh-message-text {color:#475d3d; font-size:12px; line-height:1.65}
body .sh-mark-read {font-size:10px!important; color:#527b2c; min-height:30px!important}
body .sh-pagination>span {font-size:11px; color:#596f4b}
body .account-profile,body .account-member,body .account-panel,body .sv-item {background:#fff; border-color:var(--line); border-radius:13px}
body .account-profile-details h2,body .account-member-identity strong {color:#304d2c}
body .account-member-login,body .account-caption,body .account-member-role,body .account-meta {color:#61774f}
body .sv-code {color:#2d4928; font-variant-numeric:tabular-nums}
body .sv-heading h1,body .sv-dialog h2 {color:#304c2b}
body .scenarios-empty {border:1px solid var(--line); background:#fff; border-radius:17px; max-width:650px; margin:36px auto; box-shadow:none}
body .scenarios-empty h2 {color:#3a582e}
body .scenarios-empty p,body .scenarios-empty small {color:#61754c}

/* 5. Overlays retain every input and provide room for long labels. */
body dialog {max-width:calc(100vw - 24px); max-height:calc(100dvh - 66px); border:1px solid #cbdcbb; background:#fbfdf7; border-radius:18px; color:#35502c; box-shadow:0 22px 70px #1c321d2b; overflow:auto}
body dialog::backdrop {background:#20351f54; backdrop-filter:blur(4px)}
body dialog :is(h2,h3) {color:#304c2b}
body .proxy-intro label:not(.check-label),body .metadata-dialog label,body .login-box label {font-size:12px; color:#5e764b}
body .proxy-intro input:not([type=checkbox]),body .proxy-intro select,body .metadata-dialog input:not([type=checkbox]) {font-size:13px; color:#34512b; border-color:#ceddbf}
body .chat-heading h2 {color:#35532d}
body .chat-compose {border-color:#d0dfc1; background:#fff}
body .chat-compose button {color:#345424; background:#c6e496}
body .chat-welcome p,body #chatHelp {color:#6a7c59}
body .sh-dialog-head h2,body .sh-scanner-head strong {color:#3b5c2d}
body .sh-dialog-intro,body .sh-scanner-state,body .sh-dialog-status {color:#647d50}
body .sh-pair-qr {border-color:#d2dfc6}

/* 6. Responsive composition, separate from density preferences. */
@media(min-width:701px) {
  body .device-layout {--viewer-width:min(480px,calc((100dvh - 302px)*.45 + 63px),calc((100vw - 120px)*.44)); --viewer-gap:22px; grid-template-columns:var(--viewer-width) minmax(0,1fr); column-gap:var(--viewer-gap)}
  body .device-layout.viewer-collapsed {grid-template-columns:0px minmax(0,1fr); column-gap:0}
  body .viewer-column {width:var(--viewer-width); top:calc(var(--workspace-top-offset) + 12px); --phone-height:calc((var(--viewer-width) - 63px)/.45 + 102px)}
  body .device-session.phone-window {height:var(--phone-height)}
  body.has-device main {padding-top:15px}
  body.has-device #deviceView>.page-heading {min-height:30px; margin-bottom:14px}
  body .viewer-caption {height:36px; padding-left:10px; margin-bottom:8px}
}
@media(min-width:1600px) {
  body main {padding-inline:36px}
  body #devices .card-info strong {font-size:13px}
  body #devices .card-number {font-size:12px}
  body #devices .card-profile {font-size:11px}
  body .device-layout {--viewer-gap:28px}
}
@media(min-width:701px) and (max-width:1200px) {
  :root {--sidebar-width:184px}
  body .sidebar {padding-inline:10px}
  body #navigation>button {padding-inline:9px; font-size:12px; gap:9px}
  body .workspace-label {font-size:7px; letter-spacing:.65px; margin-left:9px}
  body main {padding-inline:22px}
  body .topbar {padding-inline:22px}
  body .device-layout {--viewer-gap:18px}
  body #devices[data-gallery-mode="4"] {gap:15px 10px}
  body #devices[data-gallery-mode="5"] {gap:15px 9px}
  body #devices .device-card:not(.device-list-row) {padding:7px; border-radius:14px}
  body #devices .card-info strong {font-size:11px}
  body #devices .card-number {font-size:10px}
  body #devices .ip-badge {font-size:8px; padding:5px}
  body #proxyList .proxy-row {grid-template-columns:minmax(145px,1fr) minmax(150px,1fr) 80px; gap:10px 14px}
  body #proxyList .proxy-identity {grid-column:1; grid-row:1/3}
  body #proxyList .proxy-state {grid-column:2; grid-row:1}
  body #proxyList .proxy-assigned {grid-column:3; grid-row:1}
  body #proxyList .proxy-actions {grid-column:2/4; grid-row:2; max-width:none; justify-content:flex-start; flex-wrap:wrap}
  body #devices .device-list-row {grid-template-columns:minmax(120px,1fr) minmax(80px,1fr) 110px; gap:4px 10px; padding-inline:12px}
  body #devices .device-list-row .card-actions {gap:4px}
}
@media(min-width:701px) and (max-width:1020px) {
  :root {--sidebar-width:90px}
  body .sidebar {padding:22px 9px 12px}
  body .sidebar .brand {padding:0; justify-content:center}
  body .sidebar .brand b,body .workspace-label,body .side-bottom {display:none}
  body #navigation {margin-top:28px; gap:8px; padding:0 0 9px}
  body #navigation>button {height:auto; min-height:62px; flex:0 0 62px; padding:7px 2px; flex-direction:column; justify-content:center; gap:5px; font-size:8px}
  body #navigation>button>span {display:block; flex:0 0 auto; white-space:normal; text-align:center; line-height:1.2}
  body #navigation>button .sms-unread-badge {position:absolute; margin:0 0 28px 35px; font-size:9px; min-width:17px; height:17px; line-height:17px; border-radius:5px}
  body .topbar .profile {display:flex}
  body .breadcrumb {font-size:10px}
  body .breadcrumb span {margin:0 8px}
  body .device-layout {--viewer-width:min(315px,calc((100dvh - 302px)*.45 + 63px),calc((100vw - 140px)*.45)); --viewer-gap:16px}
  body.has-device #devices:not(.gallery-list) {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body #devices .card-actions {gap:5px}
  body #devices .card-info strong {font-size:11px}
  body #devices .card-profile {font-size:10px}
  body .list-toolbar {flex-wrap:wrap}
  body #galleryViewControls {margin-left:auto}
}
@media(max-width:700px) {
  :root {--workspace-top-offset:0px; --sidebar-width:0px}
  body .sidebar {display:none}
  body .app {margin-left:0}
  body .topbar {height:66px; padding:0 16px; gap:10px}
  body .topbar .ai-top-button {min-height:36px; padding:0 10px; font-size:11px}
  body .topbar .profile {display:flex; width:32px; min-width:32px; min-height:32px; padding:0; font-size:9px}
  body .topbar .local,body .breadcrumb {display:none}
  body .mobile-brand {flex:1; color:#29412e; gap:7px}
  body .mobile-brand img {width:31px; height:31px}
  body main {padding:23px 15px 100px}
  body .page-heading {margin-bottom:20px; gap:12px}
  body h1,body #libraryView .fl-heading h1,body .sh-heading h1 {font-size:27px}
  body .page-heading p {font-size:12px; max-width:none; line-height:1.5}
  body h1 span {font-size:19px}
  body .list-toolbar {display:grid; grid-template-columns:1fr 44px; gap:8px 12px; align-items:center; margin-bottom:17px}
  body #deviceFilters {grid-column:1; grid-row:1; justify-self:start}
  body .search-control {grid-column:2; grid-row:1}
  body #galleryViewControls {grid-column:1; grid-row:2; justify-self:start; margin:0}
  body #refresh {grid-column:2; grid-row:2}
  body #galleryViewControls button,body #refresh,body #searchButton {min-width:44px; min-height:44px}
  body .tabs button {min-height:39px; font-size:12px}
  body #devices[data-gallery-mode="4"],body #devices[data-gallery-mode="5"]{grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:15px 11px}
  body #devices .device-card:not(.device-list-row) {padding:7px 7px 9px; border-radius:14px}
  body #devices .card-preview {aspect-ratio:720/1600; border-radius:9px; min-height:0; height:auto}
  body #devices .card-info strong {font-size:12px; line-height:1.4}
  body #devices .card-number {font-size:11px; min-height:32px; padding:3px 1px}
  body #devices .card-profile {font-size:10px; line-height:1.5}
  body #devices .card-bottom {margin:9px 1px 0; gap:4px}
  body #devices .card-actions {gap:4px; padding:0}
  body #devices .card-bottom .card-gear {width:36px; min-width:36px; min-height:44px; flex-basis:36px}
  body #devices .ip-badge {font-size:8px; line-height:1.4; padding:5px; left:4px; right:4px; bottom:5px}
  body .card-battery {font-size:10px}
  body .card-battery svg {width:19px}
  body .card-internet,body .card-bottom .card-internet svg {width:17px; flex-basis:17px}
  body .bulk-selection-bar {padding:10px; gap:8px}
  body .bulk-selection-bar button {min-height:44px; font-size:11px}
  body #clearDeviceSelection {min-height:44px}
  body #devices .device-list-row {grid-template-columns:minmax(0,1fr) 113px; grid-template-rows:auto auto auto; padding:13px; gap:5px 8px; min-height:110px}
  body #devices .device-list-row .card-info {grid-column:1/-1; grid-row:1}
  body #devices .device-list-row .card-number {grid-column:1; grid-row:2; min-height:32px}
  body #devices .device-list-row .card-profile {grid-column:1; grid-row:3; font-size:10px}
  body #devices .device-list-row .card-actions {grid-column:2; grid-row:2/4; gap:4px}
  body #devices .device-list-row .card-preview {grid-column:1/-1; grid-row:4; min-height:21px; height:auto}
  body #devices .device-list-row .ip-badge {font-size:10px; background:none}
  body .gallery-note {font-size:10px; line-height:1.6; color:#62784f}
  body .mobile-navigation {background:#ffffffed; border-color:#d6e2c9; padding-inline:7px; backdrop-filter:blur(20px)}
  body .mobile-navigation button {font-size:9px; color:#62754f; border-radius:10px}
  body .mobile-navigation button.active {background:#e8f2d8; color:#3c612b}
  body #mobileNavigation .sms-unread-badge {position:absolute; right:6px; top:1px; min-width:16px; height:16px; line-height:16px; font-size:9px; border-radius:5px}
  body.has-device .device-session.focused {top:var(--workspace-top-offset); height:calc(100dvh - var(--workspace-top-offset)); border:0; border-radius:0}
  body.has-device .device-session .session-head {min-height:52px; flex:0 0 52px; padding:0 10px 0 3px}
  body.has-device .device-session .screen-display {width:min(100%,calc((100dvh - var(--workspace-top-offset) - 98px - env(safe-area-inset-bottom))*.45)); height:100%; margin-inline:auto; border-radius:0}
  body.has-device .device-session .stage {background:#183322}
  body .device-session .control-menu {max-height:calc(100% - 20px); top:10px; left:10px; right:10px; overflow:auto}
  body .device-session .control-sheet {padding:13px}
  body .device-session .main-commands button {font-size:10px; min-height:52px}
  body .device-session .extra-commands button {font-size:10px; min-height:44px; flex-direction:row; text-align:left; padding:7px}
  body #proxyList .proxy-row {grid-template-columns:minmax(0,1fr) auto; padding:15px; gap:10px}
  body #proxyList .proxy-identity {grid-column:1; grid-row:1}
  body #proxyList .proxy-assigned {grid-column:2; grid-row:1; font-size:10px}
  body #proxyList .proxy-state {grid-column:1/-1; grid-row:2; font-size:11px}
  body #proxyList .proxy-actions {grid-column:1/-1; grid-row:3; justify-content:flex-start; max-width:none; gap:6px; flex-wrap:wrap}
  body #proxyList .proxy-actions button {min-height:42px; font-size:10px; padding:0 10px}
  body .proxy-pool-summary {flex-wrap:wrap; gap:7px; padding-bottom:15px}
  body .proxy-pool-summary small {max-width:none; text-align:left; font-size:10px}
  body .heading-actions.proxy-actions {max-width:48%; gap:7px}
  body .heading-actions.proxy-actions button {min-height:40px; font-size:10px}
  body .flow-routing {padding:16px}
  body .flow-routing-devices {max-height:none; overflow:visible}
  body .flow-routing-device {padding:12px 10px; gap:8px; grid-template-columns:minmax(0,1fr) auto}
  body .flow-routing-toolbar {padding-block:10px}
  body .flow-routing-toolbar-fields {grid-template-columns:minmax(0,1fr); gap:8px}
  body .flow-routing-field {font-size:10px}
  body .flow-routing select,body .flow-routing-search-field input {height:42px; font-size:16px; margin-top:5px}
  body .flow-routing-batch-row {gap:9px; margin-top:10px}
  body .flow-routing-selection {width:100%; justify-content:space-between; gap:6px 9px; font-size:10px}
  body .flow-routing .flow-routing-clear {min-height:36px; font-size:10px}
  body .flow-routing-actions {width:100%; gap:8px}
  body .flow-routing-actions button {flex:1; min-height:40px}
  body .flow-routing-probe-note {font-size:9px; line-height:1.45; margin-top:8px}
  body .flow-routing-list-label {font-size:9px; gap:8px}
  body .flow-routing-device-copy {grid-template-columns:minmax(0,1fr)}
  body .flow-routing-device-copy strong {font-size:11px}
  body .flow-routing-device .flow-routing-number {grid-column:1; grid-row:auto; font-size:10px}
  body .flow-routing .flow-routing-ip-action {max-width:100px}
  body .flow-routing-device .flow-routing-ip-check {min-height:40px; padding:7px 8px; font-size:9px}
  body .flow-routing-device .flow-routing-step {white-space:normal; max-width:100px; font-size:9px}
  body .flow-routing-feedback {font-size:10px}
  body .flow-routing-state {font-size:10px}
  body .flow-routing-device>label {min-width:0}
  body .flow-routing-device-copy {overflow-wrap:anywhere}
  body .flow-routing-ip-note {min-width:0}
  body #libraryView .fl-tabs {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; width:100%; min-width:0; max-width:100%; flex:1 1 100%; padding:4px}
  body #libraryView .fl-tabs button {min-width:0; min-height:44px; width:100%; font-size:11px; padding:8px 5px; white-space:normal; overflow-wrap:anywhere}
  body #libraryView .fl-file {padding:14px}
  body #libraryView .fl-file-actions {margin-left:0; flex:1 1 100%; min-width:0; max-width:100%; gap:7px; flex-wrap:wrap}
  body #libraryView .fl-file-actions button,body #libraryView .fl-download {min-height:44px; font-size:11px}
  body #libraryView .fl-heading-actions {gap:7px}
  body #libraryView .fl-heading-actions button {min-height:40px; font-size:10px; padding:0 9px}
  body #libraryView .fl-file h3 {font-size:12px}
  body #libraryView .fl-file p {font-size:10px}
  body .sh-message,body .sh-message-new {padding:15px}
  body .sh-device strong {font-size:12px}
  body .sh-message-text {font-size:12px}
  body .sh-primary,body .sh-secondary,body .sh-reload,body .sh-danger {min-height:44px}
  body .sh-pagination {flex-wrap:wrap}
  body .sh-pagination>span {font-size:10px}
  body :is(input:not([type=checkbox]):not([type=radio]),select,textarea),body .proxy-intro input:not([type=checkbox]),body .proxy-intro select,body .metadata-dialog input:not([type=checkbox]) {font-size:16px}
  body dialog {max-height:calc(100dvh - 62px); padding:20px; border-radius:17px}
}
@media(max-width:350px) {
  body main {padding-inline:12px}
  body #devices[data-gallery-mode="4"],body #devices[data-gallery-mode="5"]{grid-template-columns:1fr!important}
  body #devices .device-card:not(.device-list-row) {padding:10px 12px}
  body #devices .card-preview {width:140px; margin-inline:auto; aspect-ratio:720/1600}
  body #devices .card-info strong {font-size:13px}
  body #devices .ip-badge {font-size:8px}
  body #devices .device-list-row .card-preview {width:100%; margin:0}
  body .mobile-brand b .flow-wordmark {max-width:78px}
  body .topbar {padding-inline:12px; gap:8px}
  body .topbar .ai-top-button {padding-inline:8px; font-size:10px}
  body .device-session .main-commands button {font-size:9px}
  body .device-session .extra-commands button {font-size:9px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  body .device-session .control-menu,body .card-context {background:#f8fcf3; backdrop-filter:none; -webkit-backdrop-filter:none}
}