/* Shared product design. Loaded last on application pages; campaign templates
   retain their own customer-selected visual identity. */
:root {
  --suite-bg: #10171f;
  --suite-panel: #17212c;
  --suite-raised: #1c2936;
  --suite-input: #111b25;
  --suite-border: #2c3c4c;
  --suite-border-strong: #405467;
  --suite-text: #edf3f7;
  --suite-muted: #a0b0bf;
  --suite-accent: #62dbb5;
  --suite-accent-hover: #89e9cb;
  --suite-selection: #243e37;
  --suite-danger: #ffa4b4;
  --suite-warning: #f4d68c;
  --bg-primary: var(--suite-bg);
  --bg-secondary: var(--suite-panel);
  --bg-tertiary: var(--suite-raised);
  --bg-card: var(--suite-panel);
  --bg-input: var(--suite-input);
  --bg-hover: #20303c;
  --bg-active: var(--suite-selection);
  --border-primary: var(--suite-border);
  --border-secondary: var(--suite-border-strong);
  --border-accent: var(--suite-accent);
  --text-primary: var(--suite-text);
  --text-secondary: #c3d0dc;
  --text-muted: var(--suite-muted);
  --accent: var(--suite-accent);
  --accent-hover: var(--suite-accent-hover);
  --accent-light: #b6f5df;
  --bg: var(--suite-bg);
  --card: var(--suite-panel);
  --border: var(--suite-border);
  --text: var(--suite-text);
  --muted: var(--suite-muted);
  --accent2: #438e79;
  --tg-bg: var(--suite-bg);
  --tg-panel: var(--suite-panel);
  --tg-hover: var(--suite-raised);
  --tg-border: var(--suite-border);
  --tg-text: var(--suite-text);
  --tg-muted: var(--suite-muted);
  --radius-md: 9px;
  --radius-lg: 12px;
}
body[data-suite] {
  font-family: Inter, 'Segoe UI', system-ui, sans-serif;
  background: var(--suite-bg); color: var(--suite-text); color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
body[data-suite] :is(button, input, select, textarea) { font-family: inherit; }
body[data-suite] ::selection { background: #386f5e; color: #fff; }
body[data-suite] :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--suite-accent); outline-offset: 3px;
}
body[data-suite] :is(input, select, textarea) { accent-color: var(--suite-accent); }
body[data-suite] :is(button, a) { -webkit-tap-highlight-color: transparent; }
body[data-suite] button:disabled { opacity: .5; cursor: not-allowed; }
body[data-suite] { scrollbar-color: #617989 #17212c; }
body[data-suite] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-suite] ::-webkit-scrollbar-thumb { background: #617989; border: 2px solid #17212c; border-radius: 8px; }
body[data-suite] ::-webkit-scrollbar-track { background: #17212c; }
.suite-skip-link { position: fixed; left: 12px; top: -80px; z-index: 20000; padding: 12px 18px;
  background: var(--suite-accent); color: #10251e; border-radius: 8px; text-decoration: none; }
.suite-skip-link:focus { top: 12px; }
.suite-eyebrow { color: var(--suite-accent); letter-spacing: .14em; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.suite-description { font-size: 13px; line-height: 1.65; color: var(--suite-muted); margin: 7px 0 20px; max-width: 680px; }
.suite-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Messaging workspace */
body[data-suite="workspace"] #app { background: var(--suite-bg); }
.col-accounts { width: 248px; background: #141e28; border-color: var(--suite-border); }
.col-accounts::after { display: none; }
.col-accounts-header { min-height: 70px; padding: 18px; color: var(--suite-text); font-size: 11px; letter-spacing: .1em; }
.col-accounts-header::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--suite-accent); margin-right: 10px; flex-shrink: 0; }
.suite-account-brand { flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; }
.suite-account-brand strong { display: block; color: #edf3f7; font-size: 14px; font-weight: 650; }
.suite-account-brand span { display: block; color: #a0b0bf; font-size: 10px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; }
.suite-sign-out { background: transparent; color: #a0b0bf; border: 1px solid #344455; border-radius: 7px; height: 28px; width: 28px; cursor: pointer; }
.col-accounts-body { padding: 10px; gap: 4px; }
.acc-item { border-radius: 8px; min-height: 62px; padding: 10px !important; }
.acc-item:hover { background: #20303c !important; }
.acc-item.active { background: #243e37 !important; box-shadow: inset 3px 0 var(--suite-accent); }
.acc-item .acc-name { color: #c3d0dc; font-size: 13px; }
.acc-item.active .acc-name { color: #c9f6e7; }
.acc-item:hover > div:last-child { background: linear-gradient(90deg, transparent, #20303c 30%); }
.acc-item.active > div:last-child { background: linear-gradient(90deg, transparent, #243e37 30%); }
.acc-item > div:last-child { top: auto; bottom: 2px; right: 6px; transform: none; padding: 2px; background: #17212c !important; }
.col-accounts-footer { background: #141e28; border-color: var(--suite-border); padding: 10px; }
.col-chats { width: 360px; min-width: 0; background: var(--suite-bg); border-color: var(--suite-border); }
.suite-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px 12px; order: 0; }
.suite-inbox-head h1 { color: var(--suite-text); font-size: 23px; letter-spacing: -.6px; font-weight: 650; margin: 0; }
.suite-inbox-head p { color: var(--suite-muted); font-size: 11px; margin: 5px 0 0; }
#wb-open-btn { background: #1b332e; color: #b6f5df; border-color: #438e79; padding: 8px 10px; border-radius: 7px; }
#wb-open-btn:hover { background: #244b3f; color: #fff; border-color: #62dbb5; }
.chats-search { order: 1; padding: 10px 12px; }
.chats-search form { border: 1px solid var(--suite-border); background: #17212c; padding: 0 8px; min-width: 0; }
.chats-search input { color: var(--suite-text); min-width: 0; font-size: 13px; }
.chats-search input::placeholder { color: #91a4b5; }
.chats-nav { order: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; background: var(--suite-bg); border: 0; border-bottom: 1px solid var(--suite-border); padding: 4px 12px 12px; gap: 5px; }
.chats-nav button, .chats-nav button[style*="linear-gradient"] { background: #17212c !important; border: 1px solid #2c3c4c !important;
  color: #a0b0bf !important; border-radius: 7px; padding: 8px 11px; font-size: 11px; font-weight: 500 !important; }
.chats-nav button.active, .chats-nav button.active[style] { color: #c9f6e7 !important; background: #243e37 !important; border-color: #438e79 !important; }
.chats-nav button:hover { color: #edf3f7 !important; background: #20303c !important; }
.col-chats > .att-strip { order: 3; background: #17212c; border-color: var(--suite-border); }
.col-chats > #open-link-bar { order: 4; }
.col-chats > #bulk-bar { order: 5; }
.chats-list { order: 6; padding: 6px; }
.chat-item-2 { margin: 2px 0; border-radius: 9px; padding: 12px 10px; border-bottom: 0; }
.chat-item-2:hover { background: #1c2936; }
.chat-item-2.active { background: #243e37; box-shadow: inset 3px 0 #62dbb5; }
.chat-item-2 .name { font-size: 14px; color: #edf3f7; }
.chat-item-2 .preview, .chat-item-2 .time { color: #a0b0bf; }
.chat-item-2 .unread-badge { background: #62dbb5; color: #10251e; }
.chat-checkbox:checked { background: #62dbb5; border-color: #62dbb5; }
.chat-checkbox:checked::after { color: #10251e; }
.chat-item-2.bulk-selected { background: #243e37; }
.col-chat { min-width: 0; background: #10171f; background-image: none; }
.col-chat:not(.custom-wallpaper)::before { background: none; }
.chat-header { background: #17212c; border-color: #2c3c4c; min-height: 70px; padding: 12px 20px; }
.chat-header-name { color: #edf3f7; font-size: 15px; }
.chat-header-status { color: #a0b0bf; }
.chat-header-avatar { background: #2d6655; }
.chat-header > button:not(#mobile-back-btn) { border: 1px solid #344455 !important; border-radius: 8px !important; }
.chat-messages { padding: 24px clamp(16px, 3vw, 52px); gap: 5px; }
.chat-messages .msg { font-size: 14px; line-height: 1.6; padding: 10px 13px; border-radius: 12px; }
.chat-messages .msg.incoming { background: #1c2936; color: #edf3f7; }
.chat-messages .msg.outgoing { background: #244b3f; color: #edfff8; }
.chat-messages .msg .time { color: #a8c9ba; }
.chat-messages .date-separator span { background: #1c2936; color: #b2c2ce; }
.chat-input { background: #17212c; border-color: #2c3c4c; padding: 12px 18px; }
.chat-input textarea { background: #10171f; border: 1px solid #344455; border-radius: 10px; color: #edf3f7; }
.chat-input textarea:focus { border-color: #62dbb5; box-shadow: 0 0 0 2px #62dbb51a; }
.chat-input .action-btn { border-radius: 8px; color: #a0b0bf; }
.chat-input .send-btn { background: #62dbb5; color: #10251e; border-radius: 8px; font-weight: 700; }
.chat-input .send-btn:hover { background: #89e9cb; }
.suite-welcome { display: grid; place-items: center; align-content: center; gap: 14px; height: 100%; padding: 32px; text-align: center; }
.suite-welcome .suite-welcome-mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #438e79; border-radius: 18px;
  background: #1b332e; color: #62dbb5; font-size: 29px; }
.suite-welcome h2 { color: #edf3f7; font-size: 27px; font-weight: 600; letter-spacing: -.6px; }
.suite-welcome p { color: #a0b0bf; font-size: 13px; line-height: 1.8; max-width: 340px; }
.suite-welcome small { color: #bfd0dd; font-size: 11px; border: 1px solid #344455; border-radius: 7px; padding: 8px 12px; }
.col-chat .empty-state > .suite-welcome { display: flex; flex-direction: column; justify-content: center; width: 100%; background: transparent; border-radius: 0; }
body[data-suite="workspace"] :is(#bulk-view, #filter-view, #groups-view, #target-groups-view, #landing-pages-view, #agent-view) { background: #10171f; min-height: 0; }
body[data-suite="workspace"] :is(#bulk-view, #filter-view) { padding: 28px; overflow-y: auto; height: 100%; }
body[data-suite="workspace"] .col-chat h2 { color: #edf3f7; font-size: 24px; letter-spacing: -.6px; font-weight: 650; }
.bulk-form { max-width: 820px; background: #17212c; border: 1px solid #2c3c4c; border-radius: 12px; padding: 24px; box-shadow: none; }
.bulk-form :is(input, textarea, select) { background: #10171f; border-color: #344455; color: #edf3f7; border-radius: 7px; }
.bulk-form :is(button:not([style]), button[style*="background:#2AABEE"]) { background: #62dbb5 !important; color: #10251e !important; box-shadow: none; border-radius: 7px; }
.bulk-form button:hover { transform: none; box-shadow: none; }
.setting-hint { color: #a0b0bf; line-height: 1.7; }

/* Dialogs, search, saved replies, settings and dynamically created panels */
body[data-suite="workspace"] :is(.modal-content, .wallpaper-picker, .pw-palette, .pw-modal-card, .writing-menu) {
  background: #17212c; border: 1px solid #405467; border-radius: 12px; box-shadow: 0 24px 80px #0007; color: #edf3f7;
}
.modal-content { max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-content h2 { color: #edf3f7 !important; margin-bottom: 14px; letter-spacing: -.4px; }
.modal-content :is(input, textarea, select), .settings-section-body :is(input, textarea, select) { background: #10171f !important; color: #edf3f7 !important; border-color: #405467 !important; border-radius: 7px; }
.modal-content button:not([style]), .modal-content button[style*="background:#2AABEE"] { background: #62dbb5 !important; color: #10251e !important; box-shadow: none; transform: none; }
.modal-content .close { color: #a0b0bf; }
.modal-content .close:hover { color: #ffa4b4; }
#settings-panel { background: #17212c; border-color: #405467; box-shadow: -20px 0 60px #0004; }
.settings-panel-header { background: #141e28; border-color: #2c3c4c; padding: 20px; }
.settings-section-header { color: #d6e2eb; padding: 16px 20px; }
.settings-section-header:hover { background: #20303c; }
.settings-section { border-color: #2c3c4c; }
.settings-section-body { padding: 0 20px 20px; }
#power-palette .pp-panel, #power-slash-picker, .pw-modal .pw-panel { background: #17212c; border-color: #405467; }
#power-palette .pp-head, #power-palette .pp-foot, .pw-modal .pw-head { background: #141e28; border-color: #2c3c4c; }
#power-palette .pp-item.sel, #power-palette .pp-item:hover, #power-slash-picker .sp-item.sel { background: #243e37; }
#power-palette :is(.pp-sub, .pp-sec, .pp-time, .pp-empty, .pp-foot), #power-slash-picker :is(.sp-prev, .sp-foot), .pw-modal :is(.pw-prev, .pw-sub, .pw-hint, .pw-empty, .pw-sec) { color: #a0b0bf; }
.pw-modal .pw-row, .pw-modal .pw-chip { background: #1c2936; border-color: #344455; }
.pw-modal .pw-frow :is(input, textarea), #sl-text { background: #10171f; border-color: #405467; color: #edf3f7; }
.pw-modal .pw-primary { background: #62dbb5; color: #10251e; }
.pw-modal .pw-ghost { color: #c3d0dc; border-color: #405467; }
.suite-tool-back { display: none; }
/* Normalize old inline surface colors while leaving channel/status colors intact. */
body[data-suite="workspace"] :is(.modal-content, .col-chat, #settings-panel) :is([style*="background:#16213e"], [style*="background:#1a1a2e"], [style*="background:#15152a"], [style*="background:#111;"]) { background: #17212c !important; border-color: #344455 !important; }
body[data-suite="workspace"] :is(.modal-content, .col-chat, #settings-panel) :is([style*="color:#888"], [style*="color:#666"], [style*="color:#555"]) { color: #a0b0bf !important; }
body[data-suite="workspace"] :is(#landing-pages-view, #agent-view) > div:first-child { padding: 24px !important; background: #141e28; border-color: #2c3c4c !important; }
body[data-suite="workspace"] :is(#landing-pages-view, #agent-view) > div:first-child button { background: #62dbb5 !important; color: #10251e !important; border-radius: 7px !important; }
body[data-suite="workspace"] :is(#groups-view, #target-groups-view) button[style*="background:#2AABEE"] { background: #62dbb5 !important; color: #10251e !important; }
body[data-suite="workspace"] .tmpl-card { background: #17212c; border-color: #344455; }
body[data-suite="workspace"] .tmpl-card:hover { border-color: #62dbb5; transform: none; box-shadow: none; }
body[data-suite="workspace"] #brand-name-input { background: #10171f !important; border-color: #405467 !important; color: #edf3f7 !important; }
body[data-suite="workspace"] #chat-list > div[style*="color:#555"] { color: #a0b0bf !important; }
body[data-suite="workspace"] .bulk-form > div[style*="background:"] { background: #1c2936 !important; border-color: #344455 !important; }

/* Administration */
body[data-suite="admin"] .sidebar { width: 228px; background: #141e28; border-color: #2c3c4c; overflow-y: auto; }
body[data-suite="admin"] .sidebar h2 { color: #edf3f7; min-height: 78px; padding: 28px 20px; font-size: 15px; border-color: #2c3c4c; letter-spacing: -.3px; }
.suite-admin-label { display: block; margin-top: 7px; color: #a0b0bf; font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
body[data-suite="admin"] .sidebar a { color: #a0b0bf; padding: 12px 16px; margin: 3px 10px; border: 0; border-radius: 7px; font-size: 12px; }
body[data-suite="admin"] .sidebar a:hover { background: #20303c; color: #edf3f7; }
body[data-suite="admin"] .sidebar a.active { background: #243e37; color: #b6f5df; box-shadow: inset 3px 0 #62dbb5; }
body[data-suite="admin"] .sidebar-footer { border-color: #2c3c4c; }
body[data-suite="admin"] .main { min-width: 0; padding: 32px; background: #10171f; }
body[data-suite="admin"] h1 { color: #edf3f7; font-size: 27px; letter-spacing: -.7px; font-weight: 650; margin: 0 0 8px; }
body[data-suite="admin"] .card { background: #17212c; border: 1px solid #2c3c4c; border-radius: 11px; padding: 22px; box-shadow: none; margin-bottom: 20px; min-width: 0; }
body[data-suite="admin"] .card h3 { color: #c3d0dc; font-size: 11px; letter-spacing: .08em; margin-bottom: 18px; }
body[data-suite="admin"] :is(.controls, .form-row, .form-grid) :is(input, select), body[data-suite="admin"] .role-sel {
  min-height: 36px; border: 1px solid #405467; border-radius: 7px; background: #10171f; color: #edf3f7; padding: 8px 10px; }
body[data-suite="admin"] :is(.controls, .form-row, .form-grid) label { color: #a0b0bf; font-size: 11px; margin-bottom: 4px; }
body[data-suite="admin"] .btn { border-radius: 7px; min-height: 36px; padding: 9px 14px; }
body[data-suite="admin"] .btn-blue { color: #10251e; background: #62dbb5; }
body[data-suite="admin"] .btn-blue:hover { background: #89e9cb; }
body[data-suite="admin"] .btn-red { background: #60303c; color: #ffd0da; border: 1px solid #a25165; }
body[data-suite="admin"] .btn-ghost { background: #17212c; color: #c3d0dc; border-color: #405467; padding: 7px 10px; border-radius: 6px; }
body[data-suite="admin"] pre { background: #10171f; border-color: #344455; color: #d6e2eb; }
body[data-suite="admin"] code { color: #8ce8c6; overflow-wrap: anywhere; }
body[data-suite="admin"] :is([style*="color:#555"], [style*="color:#666"], [style*="color:#888"]) { color: #a0b0bf !important; }
.suite-table-scroll { max-width: 100%; overflow: auto; border: 1px solid #344455; border-radius: 9px; scrollbar-gutter: stable; }
.suite-table-scroll table { min-width: 720px; width: 100%; border-collapse: separate; border-spacing: 0; }
.suite-table-scroll th { background: #22313f; color: #c9d7e3; border-color: #3b4e60; padding: 12px; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.suite-table-scroll td { color: #d6e2eb; border-color: #293a49; padding: 12px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.suite-table-scroll tr:nth-child(even) td { background: #192633; }
.suite-table-scroll tbody tr:hover td { background: #20303c; }
.suite-table-scroll .action-group { min-width: 140px; }

/* Sign in, registration, recovery, activation and initial setup */
body[data-suite="auth"] { min-height: 100dvh; height: auto; overflow-y: auto; padding: 40px 20px; background: radial-gradient(ellipse at 50% 0%, #1c3b33, transparent 65%), #10171f;
  display: flex; align-items: center; justify-content: center; }
body[data-suite="auth"] :is(.auth-box, .box) { width: 440px; max-width: 100%; padding: 36px; margin: auto; border: 1px solid #344455; border-radius: 14px; background: #17212c; box-shadow: 0 24px 80px #0004; }
.suite-auth-brand { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #d6e2eb; margin-bottom: 28px; }
.suite-auth-brand::before { content: ''; height: 10px; width: 10px; border-radius: 3px; background: #62dbb5; }
body[data-suite="auth"] :is(h1, .logo h1) { color: #edf3f7; font-size: 26px; font-weight: 650; letter-spacing: -.7px; text-align: left; margin-bottom: 10px; }
body[data-suite="auth"] .logo { text-align: left; margin-bottom: 24px; }
body[data-suite="auth"] :is(.logo p, .sub, .hint, .link, .back) { color: #a0b0bf; line-height: 1.7; font-size: 12px; }
body[data-suite="auth"] label { color: #c3d0dc; font-size: 12px; text-transform: none; letter-spacing: 0; margin-bottom: 7px; }
body[data-suite="auth"] input { background: #10171f; color: #edf3f7; border: 1px solid #405467; border-radius: 7px; padding: 12px; min-height: 44px; font-size: 14px; }
body[data-suite="auth"] input:focus { border-color: #62dbb5; }
body[data-suite="auth"] button:not([style*="#1877f2"]):not(.suite-password-toggle) { background: #62dbb5; color: #10251e; min-height: 44px; font-size: 13px; font-weight: 700; border: 0; border-radius: 7px; }
body[data-suite="auth"] button:not([style*="#1877f2"]):hover { background: #89e9cb; }
body[data-suite="auth"] a { color: #8ce8c6 !important; }
body[data-suite="auth"] .error { color: #ffa4b4; }
body[data-suite="auth"] .suite-description { margin-bottom: 24px; font-size: 13px; }
body[data-suite="auth"] .suite-password-toggle { position: absolute; right: 8px; top: 5px; width: auto; height: 34px; min-height: 34px; padding: 6px 8px;
  background: transparent; border: 0; border-radius: 5px; color: #a0b0bf; font-size: 11px; cursor: pointer; }
body[data-suite="auth"] input[id$="password"], body[data-suite="auth"] #reg-confirm { padding-right: 56px !important; }

/* Product website and checkout */
body[data-suite="public"] { background: #10171f; color: #edf3f7; }
body[data-suite="public"] nav, body[data-suite="payment"] nav { background: #141e28; border-color: #2c3c4c; min-height: 68px; }
body[data-suite="public"] .nav-logo, body[data-suite="payment"] .nav-logo { color: #62dbb5; letter-spacing: -.5px; font-size: 20px; }
body[data-suite="public"] :is(.nav-btn, .nav-dl, .btn-primary, .dl-btn) { background: #62dbb5 !important; color: #10251e !important; border-radius: 8px; box-shadow: none; }
body[data-suite="public"] :is(.btn-ghost, .plan-btn) { border-color: #405467; border-radius: 8px; }
body[data-suite="public"] .hero { padding: 90px 24px 76px; }
body[data-suite="public"] .hero h1 { letter-spacing: -2px; font-weight: 650; }
body[data-suite="public"] .hero h1 span { background: none; color: #8ce8c6; -webkit-text-fill-color: #8ce8c6; }
body[data-suite="public"] .hero-badge { background: #1b332e; color: #b6f5df; border-color: #438e79; }
body[data-suite="public"] :is(.feature-card, .plan-card, .step-card) { background: #17212c; border: 1px solid #2c3c4c; border-radius: 12px; box-shadow: none; }
body[data-suite="public"] :is(.feature-card, .plan-card):hover { border-color: #438e79; transform: none; }
body[data-suite="public"] :is(.plan-card.popular, .plan-card.featured) { border-color: #62dbb5; background: #1b332e; }
body[data-suite="public"] .price-card { background: #17212c; border-color: #344455; border-radius: 12px; }
body[data-suite="public"] .price-card.popular { background: #1b332e; border-color: #438e79; }
body[data-suite="public"] :is(.popular-badge, .price-btn-filled, .step-num) { background: #62dbb5; color: #10251e; }
body[data-suite="public"] .price-btn { border-radius: 7px; }
body[data-suite="public"] .price-btn-outline { border-color: #405467; color: #d6e2eb; }
body[data-suite="public"] .cta-box { background: #172c26; border-color: #438e79; border-radius: 14px; }
body[data-suite="public"] .download-section { background: #141e28; border-color: #2c3c4c; }
body[data-suite="public"] .stat-num { color: #8ce8c6; }
body[data-suite="payment"] :is(.plan-summary, .wallet-card, .coin-btn) { background: #17212c; border-color: #344455; border-radius: 12px; }
body[data-suite="payment"] .plan-price { color: #8ce8c6; }
body[data-suite="payment"] .step-dot.active { background: #62dbb5; color: #10251e; }
body[data-suite="payment"] .coin-btn:hover, body[data-suite="payment"] .coin-btn.selected { border-color: #62dbb5; background: #1b332e; transform: none; }
body[data-suite="payment"] .copy-btn { background: #1b332e; color: #b6f5df; border-color: #438e79; }
body[data-suite="payment"] .amount-due { background: #1b332e; border-color: #438e79; }
body[data-suite="payment"] .container { max-width: 640px; }
body[data-suite="hire"] { background: #10171f; color: #edf3f7; }
body[data-suite="hire"] .poster { background: #17212c; border: 1px solid #344455; border-radius: 16px; box-shadow: 0 24px 80px #0004; }
body[data-suite="hire"] .header h1 { color: #edf3f7; }
body[data-suite="hire"] .header h2 { color: #8ce8c6; }
body[data-suite="hire"] .card-body { background: #1c2936; color: #d6e2eb; }
body[data-suite="hire"] :is(.card-header.purple, .card-header.pink) { background: #244b3f; color: #b6f5df; }
body[data-suite="hire"] :is(.shifts h3, .shift-item) { color: #d6e2eb; }
body[data-suite="hire"] .footer-text { color: #8ce8c6; }
body[data-suite="hire"] .shift-item::before { background: #62dbb5; }
body[data-suite="hire"] .cta a { background: #62dbb5; color: #10251e; border-radius: 8px; box-shadow: none; }
body[data-suite="hire"] .divider { background: #344455; }

@media (min-width: 769px) and (max-width: 1200px) {
  .col-accounts { width: 206px; }
  .col-chats { width: 310px; }
  .suite-inbox-head { padding: 16px 12px 10px; }
  .suite-inbox-head h1 { font-size: 21px; }
  .chat-header { padding: 10px 12px; }
}
@media (max-width: 768px) {
  .suite-account-brand strong { font-size: 8px; }
  .suite-account-brand span, .suite-sign-out { display: none; }
  .col-chat.suite-tools-open > .suite-tool-back { display: block; align-self: flex-start; width: 100%; flex-shrink: 0; text-align: left;
    padding: 14px 16px; border: 0; border-bottom: 1px solid #344455; background: #17212c; color: #b6f5df; font-size: 13px; }
  .col-accounts { width: 56px; }
  .col-accounts-header { min-height: 58px; padding: 12px 2px; font-size: 8px; letter-spacing: 0; }
  .col-accounts-header::before { display: none; }
  .col-accounts-body { padding: 8px 4px; }
  .acc-item { width: 46px; min-height: 46px; padding: 3px !important; }
  .col-chats { width: 0; flex: 1; }
  .suite-inbox-head { padding: 16px 12px 8px; }
  .suite-inbox-head h1 { font-size: 22px; }
  .suite-inbox-head p { font-size: 10px; }
  .chats-search { padding: 8px 10px; }
  .chats-nav { padding: 4px 10px 10px; }
  .chats-nav button { padding: 8px 9px; }
  .chats-nav button { min-width: 0; font-size: 10.5px; padding-left: 3px; padding-right: 3px; }
  body[data-suite="workspace"] #stats-bar { display: none !important; }
  .chat-header { padding: 10px 12px; min-height: 62px; }
  .chat-messages { padding: 14px 12px; }
  .chat-input textarea { font-size: 16px; }
  body[data-suite="workspace"] :is(#bulk-view, #filter-view) { padding: 18px 12px; }
  .bulk-form { padding: 18px 14px; }
  body[data-suite="workspace"] .col-chat h2 { font-size: 22px; }
  body[data-suite="admin"] { flex-direction: column; }
  body[data-suite="admin"] .sidebar { flex-direction: row; width: 100%; height: auto; flex-shrink: 0; overflow-x: auto; padding: 8px; }
  body[data-suite="admin"] .sidebar h2, body[data-suite="admin"] .sidebar-footer { display: none; }
  body[data-suite="admin"] .sidebar a { padding: 10px 12px; margin: 0 3px; white-space: nowrap; flex-shrink: 0; }
  body[data-suite="admin"] .sidebar a.active { box-shadow: inset 0 -2px #62dbb5; }
  body[data-suite="admin"] .main { padding: 20px 12px; }
  body[data-suite="admin"] h1 { font-size: 23px; }
  body[data-suite="admin"] .card { padding: 18px 14px; }
  body[data-suite="admin"] .form-row .field { flex: 1 1 140px; min-width: 0; }
  body[data-suite="admin"] .form-row .field :is(input, select) { width: 100% !important; }
  body[data-suite="auth"] { padding: 24px 14px; }
  body[data-suite="auth"] :is(.auth-box, .box) { padding: 28px 24px; }
  body[data-suite="public"] nav { height: auto; padding: 16px; gap: 14px; flex-wrap: wrap; }
  body[data-suite="public"] .nav-links { gap: 12px; flex-wrap: wrap; }
  body[data-suite="public"] .nav-links a { font-size: 12px; }
  body[data-suite="public"] .hero { padding: 56px 20px; }
  body[data-suite="public"] .hero h1 { letter-spacing: -1.2px; }
  body[data-suite="public"] .hero-btns > a { flex: 1 1 200px; }
  body[data-suite="public"] .hero-btns button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-suite] *, body[data-suite] *::before, body[data-suite] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}