.cs { display: contents; }
:root{
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);

    --bg: #EEF2EF;
    --surface: #FFFFFF;
    --surface-2: #F5F8F5;
    --line: #DCE4DE;
    --ink: #14231B;
    --ink-2: #3D4F45;
    --ink-3: #5B6C62;
    --danger: #B9291F;   --danger-strong: #96201A; --danger-tint: #FCE9E7;
    --ok: #0E8F6E;       --ok-strong: #0B7259;     --ok-tint: #DFF3EE;
    --warn: #A9740A;     --warn-strong: #8A5E07;   --warn-tint: #F8EDD6;
    --info: #4A5DC7;     --info-strong: #3A49A3;   --info-tint: #E7E9FB;
    --brand-1: #2FA85C; --brand-2: #1596A9; --brand-3: #2C6FD6; --brand-tint: #E6F3EE;

    --wa: #1F9D55;  --wa-strong: #167A40;  --wa-tint: #E1F5E8;
    --sms: #3568D4; --sms-strong: #2851AE; --sms-tint: #E4ECFC;
    --rcs: #7C4FE0; --rcs-strong: #6438C2; --rcs-tint: #EEE7FC;
    --mail: #C1670A; --mail-strong: #9C5306; --mail-tint: #FBEEDA;
  }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
      --bg: #0D1512;
      --surface: #131E19;
      --surface-2: #182520;
      --line: #23342C;
      --ink: #E6EFE9;
      --ink-2: #B3C3BA;
      --ink-3: #91A399;
      --danger: #FF8177;   --danger-strong: #E85E52; --danger-tint: #3A1C1A;
      --ok: #3DBF9B;       --ok-strong: #2EA080;     --ok-tint: #0F2E27;
      --warn: #E0B34A;     --warn-strong: #C79730;   --warn-tint: #362B12;
      --info: #8C99E8;     --info-strong: #6E7DD6;   --info-tint: #1E2340;
      --brand-1: #3DBE79; --brand-2: #29AFC2; --brand-3: #6EA6FF; --brand-tint: #12302A;

      --wa: #35C97A;  --wa-strong: #2AA866;  --wa-tint: #123425;
      --sms: #6EA6FF; --sms-strong: #4F86E8; --sms-tint: #142A4A;
      --rcs: #B08CFF; --rcs-strong: #9670E8; --rcs-tint: #241A42;
      --mail: #E7A94A; --mail-strong: #CE8E2E; --mail-tint: #3A2B12;
    }}
:root[data-theme="dark"]{
    --bg: #0D1512;
    --surface: #131E19;
    --surface-2: #182520;
    --line: #23342C;
    --ink: #E6EFE9;
    --ink-2: #B3C3BA;
    --ink-3: #91A399;
    --danger: #FF8177;   --danger-strong: #E85E52; --danger-tint: #3A1C1A;
    --ok: #3DBF9B;       --ok-strong: #2EA080;     --ok-tint: #0F2E27;
    --warn: #E0B34A;     --warn-strong: #C79730;   --warn-tint: #362B12;
    --info: #8C99E8;     --info-strong: #6E7DD6;   --info-tint: #1E2340;
    --brand-1: #3DBE79; --brand-2: #29AFC2; --brand-3: #6EA6FF; --brand-tint: #12302A;

    --wa: #35C97A;  --wa-strong: #2AA866;  --wa-tint: #123425;
    --sms: #6EA6FF; --sms-strong: #4F86E8; --sms-tint: #142A4A;
    --rcs: #B08CFF; --rcs-strong: #9670E8; --rcs-tint: #241A42;
    --mail: #E7A94A; --mail-strong: #CE8E2E; --mail-tint: #3A2B12;
  }
html{ height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after{ box-sizing: inherit; }
body{
    margin: 0; height: 100%;
    background: var(--bg); color: var(--ink);
    font: 400 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-optical-sizing: auto; text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
#root{ height: 100%; }
.cs button, .cs input, .cs select, .cs textarea{ font: inherit; color: inherit; }
.cs button{ cursor: pointer; }
.cs :focus-visible{ outline: 2px solid var(--brand-3); outline-offset: 2px; }
.cs .sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs .ico{ flex: none; }
.cs [data-ch="WHATSAPP"]{ --c: var(--wa);   --c-strong: var(--wa-strong);   --c-tint: var(--wa-tint); }
.cs [data-ch="SMS"]{ --c: var(--sms);  --c-strong: var(--sms-strong);  --c-tint: var(--sms-tint); }
.cs [data-ch="RCS"]{ --c: var(--rcs);  --c-strong: var(--rcs-strong);  --c-tint: var(--rcs-tint); }
.cs [data-ch="EMAIL"]{ --c: var(--mail); --c-strong: var(--mail-strong); --c-tint: var(--mail-tint); }
.cs .chg{ color: var(--c); display: inline-flex; }
.cs .app{ position: relative; height: 100%; display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; background: var(--surface); overflow: hidden; }
.cs .app.ctx-closed{ grid-template-columns: 340px minmax(0, 1fr); }
.cs .pane{ min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cs .scrim{ display: none; }
.cs .inbox{ border-right: 1px solid var(--line); background: var(--surface); }
.cs .inbox-head{ padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px; }
.cs .org{ display: flex; align-items: center; gap: 10px; }
.cs .org-mark{ width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.cs .org-name{ font-weight: 650; font-size: 15px; line-height: 1.2; }
.cs .org-sub{ color: var(--ink-3); font-size: 12px; }
.cs .search{ position: relative; }
.cs .search .ico{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.cs .search input{ width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.cs .search input::placeholder{ color: var(--ink-3); }
.cs .search input:focus-visible{ background: var(--surface); }
.cs .filters{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .number-filter{ display: flex; align-items: center; gap: 8px; }
.cs .number-filter select{ flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 8px; }
.cs .chip{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.cs .chip[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--surface); }
.cs .chip[data-ch][aria-pressed="true"]{ background: var(--c-tint); border-color: var(--c); color: var(--ink); }
.cs .chip .ico{ color: var(--c); }
.cs .chip-sep{ width: 1px; background: var(--line); margin: 2px 2px; }
.cs .convs{ list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; border-top: 1px solid var(--line); }
.cs .conv{ width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; position: relative; }
.cs .conv:hover{ background: var(--surface-2); }
.cs .conv[aria-current="true"]{ background: var(--bg); box-shadow: inset 3px 0 0 var(--ink); }
.cs .conv-main{ min-width: 0; flex: 1; }
.cs .conv-top{ display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cs .conv-name{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .conv.unread .conv-name{ font-weight: 700; }
.cs .conv-time{ color: var(--ink-3); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
.cs .conv-bot{ display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cs .conv-assign{ margin-top: 3px; }
.cs .assign-tag{ font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.cs .assign-tag.unassigned{ color: var(--warn); background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.cs .conv-prev{ color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cs .conv.unread .conv-prev{ color: var(--ink); }
.cs .badge{ flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.cs .empty{ padding: 28px 18px; color: var(--ink-2); text-align: left; }
.cs .empty strong{ display: block; color: var(--ink); margin-bottom: 4px; }
.cs .link-btn{ border: 0; background: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.cs .avatar{ flex: none; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); display: grid; place-items: center; font-weight: 650; }
.cs .thread{ background: var(--bg); position: relative; }
.cs .thread-head{ background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.cs .assign-bar{ display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.cs .assign-bar.unassigned{ background: var(--warn-tint); color: var(--ink); }
.cs .assign-bar.unassigned .ico{ color: var(--warn); }
.cs .thread-title{ min-width: 0; flex: 1; }
.cs .thread-title h1{ margin: 0; font-size: 15px; font-weight: 650; line-height: 1.25; }
.cs .thread-title p{ margin: 0; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .icon-btn{ width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: 9px; color: var(--ink-2); }
.cs .icon-btn:hover{ background: var(--surface-2); border-color: var(--line); }
.cs .icon-btn[aria-pressed="true"]{ background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.cs .back-btn{ display: none; }
.cs .timeline{ flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 8px; }
.cs .day{ text-align: center; color: var(--ink-3); font-size: 12px; font-weight: 600; margin: 14px 0 10px; }
.cs .switch{ display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--ink-2); font-size: 12.5px; }
.cs .switch::before, .cs .switch::after{ content: ""; height: 1px; flex: 1; background: var(--line); }
.cs .switch span{ display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--c-tint); border: 1px solid var(--c); }
.cs .switch .chg{ color: var(--c); }
.cs .msg{ display: flex; padding: 3px 0; }
.cs .msg.out{ justify-content: flex-end; }
.cs .stack{ display: flex; flex-direction: column; gap: 4px; max-width: min(560px, 88%); min-width: 0; }
.cs .msg.out .stack{ align-items: flex-end; }
.cs .msg.email .stack{ max-width: min(620px, 94%); }
.cs .bubble{ background: var(--surface); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--c); border-radius: 14px 14px 14px 4px; padding: 9px 12px 6px 14px; min-width: 0; }
.cs .msg.out .bubble{ background: var(--c-tint); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: inset -3px 0 0 var(--c); border-radius: 14px 14px 4px 14px; padding: 9px 14px 6px 12px; }
.cs .msg[data-selected="true"] .bubble{ outline: 2px solid var(--ink); outline-offset: 2px; }
.cs .body{ white-space: pre-wrap; overflow-wrap: anywhere; }
.cs .email .body{ font-family: inherit; font-size: 15px; line-height: 1.55; }
.cs .subject{ font-weight: 650; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); }
.cs .tpl{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.cs .rcs-card{ margin-top: 8px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius: 10px; background: var(--surface); overflow: hidden; }
.cs .rcs-card > div{ padding: 8px 10px; }
.cs .rcs-card .rcs-title{ font-weight: 650; border-bottom: 1px solid var(--line); }
.cs .rcs-actions{ display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); }
.cs .rcs-chip{ padding: 3px 10px; border: 1px solid var(--c); color: var(--ink); border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.cs .meta{ display: inline-flex; align-items: center; gap: 6px; margin: 4px -6px 0 0; padding: 2px 6px; border: 0; background: transparent; border-radius: 6px; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.cs .meta:hover{ background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cs .msg:not(.out) .meta{ margin: 4px 0 0 -6px; }
.cs .meta .st{ display: inline-flex; align-items: center; gap: 3px; }
.cs .meta .st.read .ico{ color: var(--c); }
.cs .meta .st.failed{ color: var(--danger); font-weight: 600; }
.cs .fail{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 10px; background: var(--danger-tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: 10px; font-size: 13px; }
.cs .fail .ico{ color: var(--danger); }
.cs .fail button{ border: 1px solid var(--ink); background: var(--ink); color: var(--surface); border-radius: 8px; padding: 3px 10px; font-weight: 600; font-size: 12.5px; }
.cs .composer{ background: var(--surface); border-top: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--c); padding: 12px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.cs .lanes{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .lane{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-weight: 500; }
.cs .lane .ico{ color: var(--c); }
.cs .lane:hover:not([disabled]){ background: var(--surface-2); }
.cs .lane[aria-checked="true"]{ background: var(--c-tint); border-color: var(--c); color: var(--ink); font-weight: 600; }
.cs .lane[disabled]{ cursor: not-allowed; color: var(--ink-3); background: var(--surface-2); }
.cs .lane[disabled] .ico{ color: var(--ink-3); }
.cs .lane small{ font-size: 12px; font-weight: 500; color: var(--ink-3); }
.cs .route{ color: var(--ink-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.cs .from-select{ border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 2px 6px; max-width: 180px; }
.cs .route b{ font-weight: 600; color: var(--ink); }
.cs .note{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.cs .note.ok .ico{ color: var(--ok); }
.cs .note.warn{ background: var(--mail-tint); border-color: color-mix(in srgb, var(--mail) 50%, var(--line)); color: var(--ink); }
.cs .banner{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.cs .banner.warn{ background: var(--mail-tint); border-color: color-mix(in srgb, var(--mail) 50%, var(--line)); }
.cs .banner.block{ background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.cs .banner .ico{ margin-top: 2px; }
.cs .field{ display: flex; flex-direction: column; gap: 8px; }
.cs .field input, .cs .field textarea, .cs .field select{ width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); }
.cs .field textarea{ resize: none; min-height: 44px; max-height: 160px; line-height: 1.45; }
.cs .field input:focus-visible, .cs .field textarea:focus-visible, .cs .field select:focus-visible{ outline: 2px solid var(--c); outline-offset: 0; border-color: var(--c); }
.cs .tpl-preview{ border: 1px dashed var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface-2); color: var(--ink); }
.cs .row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs .hint{ color: var(--ink-3); font-size: 12.5px; }
.cs .send{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--c-strong); color: #fff; font-weight: 650; }
.cs .send:hover:not([disabled]){ filter: brightness(1.08); }
.cs .send[disabled]{ background: var(--line); color: var(--ink-3); cursor: not-allowed; }
.cs .context{ border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
.cs .ctx-sec{ padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.cs .ctx-sec h2{ margin: 0 0 10px; font-size: 13.5px; font-weight: 650; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.cs .person{ display: flex; gap: 12px; align-items: center; }
.cs .person h2{ margin: 0; font-size: 16px; }
.cs .person p{ margin: 0; color: var(--ink-3); font-size: 12.5px; }
.cs .ch-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cs .ch-item{ display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
.cs .ch-item .ch-name{ font-weight: 600; }
.cs .ch-item .ch-handle{ color: var(--ink-2); overflow-wrap: anywhere; }
.cs .ch-item.off .ch-handle, .cs .ch-item.off .ch-name{ color: var(--ink-3); }
.cs .tags{ display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; color: var(--ink-3); font-size: 12.5px; }
.cs .tags span{ display: inline-flex; align-items: center; gap: 4px; }
.cs .tags .bad{ color: var(--danger); font-weight: 600; }
.cs .steps{ list-style: none; margin: 0 0 12px; padding: 0; }
.cs .steps li{ position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 0 0 12px 20px; }
.cs .steps li::before{ content: ""; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cs .steps li::after{ content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 1px; background: var(--line); }
.cs .steps li:last-child{ padding-bottom: 0; }
.cs .steps li:last-child::after{ display: none; }
.cs .steps li.bad::before{ background: var(--danger); }
.cs .steps time{ color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cs dl.kv{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.cs dl.kv dt{ color: var(--ink-3); }
.cs dl.kv dd{ margin: 0; overflow-wrap: anywhere; }
.cs .ctx-close{ display: none; }
@media (max-width: 1180px){.cs .app, .cs .app.ctx-closed{ grid-template-columns: 320px minmax(0, 1fr); }
.cs .context{ position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(360px, 100%); box-shadow: -12px 0 32px rgba(0, 0, 0, .18); transition: transform .2s ease; }
.cs .app.ctx-closed .context{ transform: translateX(105%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
.cs .app.ctx-open .scrim{ display: block; position: absolute; inset: 0; z-index: 4; background: rgba(10, 18, 26, .38); }
.cs .ctx-close{ display: grid; }}
@media (max-width: 820px){.cs .app, .cs .app.ctx-closed{ grid-template-columns: minmax(0, 1fr); }
.cs .app[data-view="list"] .thread{ display: none; }
.cs .app[data-view="thread"] .inbox{ display: none; }
.cs .back-btn{ display: grid; }
.cs .timeline{ padding: 12px 12px 6px; }
.cs .composer{ padding: 10px 12px; }
.cs .stack{ max-width: 92%; }}
@media (prefers-reduced-motion: reduce){*, *::before, *::after{ transition: none !important; animation: none !important; }}
.cs [hidden]{ display: none !important; }
.cs .shell{ height: 100%; display: grid; grid-template-columns: 76px minmax(0, 1fr); background: var(--surface); }
.cs .nav{ display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; background: var(--surface); border-right: 1px solid var(--line); }
.cs .nav-item{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 11px 2px; border: 0; background: transparent; border-radius: 10px; color: var(--ink-2); font-size: 12px; font-weight: 500; }
.cs .nav-item .lbl{ display: none; }
.cs .nav-item .flyout{
    position: absolute; left: calc(100% + 10px); top: 50%; z-index: 40;
    background: var(--ink); color: var(--surface); padding: 7px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-4px);
    transition: opacity .12s ease, transform .12s ease;
  }
.cs .nav-item:hover .flyout, .cs .nav-item:focus-visible .flyout{ opacity: 1; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce){.cs .nav-item .flyout{ transition: none; }}
.cs .nav-item:hover{ background: var(--surface-2); }
.cs .nav-item[aria-current="page"]{ background: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 16%, var(--surface)), color-mix(in srgb, var(--brand-3) 10%, var(--surface))); color: var(--ink); box-shadow: inset 3px 0 0 var(--brand-3); font-weight: 650; }
.cs .main{ min-width: 0; min-height: 0; height: 100%; position: relative; }
.cs .view{ height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.cs .view > .app{ flex: 1; min-height: 0; height: auto; }
.cs .page-head{ background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 24px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cs .page-head h1{ margin: 0; font-size: 19px; font-weight: 650; line-height: 1.25; }
.cs .page-head p{ margin: 2px 0 0; color: var(--ink-2); }
.cs .page-actions{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs .page-body{ flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 32px; }
.cs .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cs .btn:hover:not([disabled]){ background: var(--surface-2); }
.cs .btn.primary{ background: linear-gradient(135deg, var(--brand-2), var(--brand-3)); border-color: transparent; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cs .btn.primary:hover:not([disabled]){ filter: brightness(1.08); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--brand-3) 55%, transparent); }
.cs .btn.sm{ padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.cs .btn[disabled]{ color: var(--ink-3); cursor: not-allowed; background: var(--surface-2); }
.cs .btn.primary[disabled]{ background: var(--line); border-color: var(--line); }
.cs .pill{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.cs .pill.ok{ background: color-mix(in srgb, var(--ok) 13%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ink); }
.cs .pill.ok .ico{ color: var(--ok); }
.cs .pill.warn{ background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); color: var(--ink); }
.cs .pill.warn .ico{ color: var(--warn); }
.cs .pill.bad{ background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--ink); }
.cs .pill.bad .ico{ color: var(--danger); }
.cs .pill.info{ background: var(--info-tint); border-color: color-mix(in srgb, var(--info) 45%, var(--line)); color: var(--ink); }
.cs .pill.info .ico{ color: var(--info); }
.cs .tgl{ flex: none; width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--line); position: relative; padding: 0; }
.cs .tgl::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.cs .tgl[aria-checked="true"]{ background: var(--ink); border-color: var(--ink); }
.cs .tgl[aria-checked="true"]::after{ transform: translateX(16px); }
.cs .tgl[disabled]{ opacity: .5; cursor: not-allowed; }
.cs .fld{ display: flex; flex-direction: column; gap: 6px; }
.cs .fld > label, .cs .lbl{ font-weight: 600; font-size: 13px; }
.cs .inp{ width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: var(--surface); }
.cs textarea.inp{ resize: vertical; min-height: 84px; line-height: 1.45; }
.cs .inp:focus-visible{ outline: 2px solid var(--brand-3); outline-offset: 0; border-color: var(--brand-3); }
.cs .inp[aria-invalid="true"]{ border-color: var(--danger); }
.cs .help{ color: var(--ink-3); font-size: 12.5px; }
.cs .err{ color: var(--danger); font-size: 12.5px; font-weight: 500; }
.cs .stack-v{ display: flex; flex-direction: column; gap: 14px; }
.cs .inline{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs .grow{ flex: 1; min-width: 0; }
.cs .seg{ display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--surface-2); flex-wrap: wrap; }
.cs .seg button{ border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; font-weight: 600; color: var(--ink-2); }
.cs .seg button[aria-checked="true"]{ background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.cs .tabs{ display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cs .tabs button{ border: 0; background: transparent; padding: 8px 12px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.cs .tabs button[aria-selected="true"]{ color: var(--ink); border-bottom-color: var(--c, var(--ink)); }
.cs .tabs .count{ color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.cs .overlay{ position: fixed; inset: 0; z-index: 50; background: rgba(10, 18, 26, .45); display: flex; justify-content: center; align-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.cs .overlay.side{ justify-content: flex-end; align-items: stretch; padding: 0; }
.cs .dlg{ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; width: min(580px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.cs .overlay.side .dlg{ border-radius: 0; width: min(480px, 100%); height: 100%; border-width: 0 0 0 1px; }
.cs .dlg-head{ padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cs .dlg-head h2{ margin: 0; font-size: 16px; font-weight: 650; }
.cs .dlg-body{ padding: 16px 18px; overflow-y: auto; flex: 1; }
.cs .dlg-foot{ padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.cs .psec{ padding: 16px 0; border-bottom: 1px solid var(--line); }
.cs .psec:first-child{ padding-top: 0; }
.cs .psec:last-child{ border-bottom: 0; }
.cs .psec h3{ margin: 0 0 8px; font-size: 13.5px; font-weight: 650; }
.cs .toast{ position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.cs .grp{ margin-bottom: 26px; }
.cs .grp-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cs .grp-head h2{ margin: 0; font-size: 15px; font-weight: 650; }
.cs .acct-list{ list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: inset 3px 0 0 var(--c); }
.cs .acct{ display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 130px 44px 90px; gap: 12px; align-items: center; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--line); }
.cs .acct:last-child{ border-bottom: 0; }
.cs .acct.off{ background: var(--surface-2); }
.cs .acct-id{ font-weight: 650; overflow-wrap: anywhere; }
.cs .acct.off .acct-id{ color: var(--ink-2); }
.cs .acct-empty{ padding: 16px 18px; color: var(--ink-2); }
.cs .kv-list{ display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.cs .kv-list dt{ color: var(--ink-3); }
.cs .kv-list dd{ margin: 0; overflow-wrap: anywhere; }
.cs .cred{ display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 0; flex-wrap: wrap; }
.cs .cred code{ font: inherit; color: var(--ink-2); letter-spacing: .01em; }
.cs .copy-row{ display: flex; gap: 8px; align-items: center; }
.cs .copy-row .inp{ background: var(--surface-2); }
.cs .tpl-layout{ flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.35fr); }
.cs .tpl-list{ border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; min-width: 0; }
.cs .tpl-editor{ overflow-y: auto; padding: 20px 24px 40px; min-width: 0; }
.cs .tbl{ width: 100%; border-collapse: collapse; }
.cs .tbl th{ text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12.5px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.cs .tbl td{ padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cs .tbl tr[aria-selected="true"] td{ background: var(--bg); }
.cs .tbl tr[aria-selected="true"] td:first-child{ box-shadow: inset 3px 0 0 var(--ink); }
.cs .tbl .name-btn{ border: 0; background: none; padding: 0; text-align: left; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.cs .tbl .name-btn:hover{ text-decoration: underline; text-underline-offset: 3px; }
.cs .track{ display: flex; list-style: none; margin: 0; padding: 0; }
.cs .track li{ flex: 1; position: relative; padding-top: 18px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.cs .track li::before{ content: ""; position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--line); z-index: 1; }
.cs .track li::after{ content: ""; position: absolute; top: 8px; left: 10px; right: 0; height: 2px; background: var(--line); }
.cs .track li:last-child::after{ display: none; }
.cs .track li.done{ color: var(--ink-2); }
.cs .track li.done::before, .cs .track li.done::after{ background: var(--ok); }
.cs .track li.cur{ color: var(--ink); font-weight: 650; }
.cs .track li.cur::before{ background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent); }
.cs .track li.bad::before{ background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.cs .track li.bad{ color: var(--ink); font-weight: 650; }
.cs .track time{ display: block; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cs .checks{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs .checks li{ display: flex; gap: 8px; align-items: flex-start; }
.cs .checks .ico{ margin-top: 2px; }
.cs .checks .pass .ico{ color: var(--ok); }
.cs .checks .fail .ico{ color: var(--danger); }
.cs .split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 20px; align-items: start; }
.cs .wa-preview{ background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; position: sticky; top: 0; }
.cs .wa-bubble{ background: var(--surface); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--wa); border-radius: 12px 12px 12px 4px; padding: 10px 12px 8px 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.cs .wa-bubble .hd{ font-weight: 650; margin-bottom: 4px; }
.cs .wa-bubble .ft{ color: var(--ink-3); font-size: 12.5px; margin-top: 6px; }
.cs .wa-btns{ margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.cs .wa-btns span{ text-align: center; padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; }
.cs .btn-row{ display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.cs .notice{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.cs .notice.bad{ background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.cs .notice.warn{ background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.cs .notice .ico{ margin-top: 2px; flex: none; }
.cs .notice.bad .ico{ color: var(--danger); }
.cs .notice.warn .ico{ color: var(--warn); }
.cs .bc-layout{ flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 410px; }
.cs .bc-form{ overflow-y: auto; padding: 20px 24px 40px; min-width: 0; }
.cs .bc-side{ overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); padding: 18px 20px 28px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cs .sec{ padding: 20px 0; border-bottom: 1px solid var(--line); }
.cs .sec:first-child{ padding-top: 0; }
.cs .sec:last-child{ border-bottom: 0; }
.cs .sec h2{ margin: 0 0 2px; font-size: 15px; font-weight: 650; }
.cs .sec > .help{ margin: 0 0 12px; }
.cs .opts{ display: flex; flex-direction: column; gap: 8px; }
.cs .opt{ display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); width: 100%; }
.cs .opt:hover{ background: var(--surface-2); }
.cs .opt[aria-checked="true"]{ border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cs .opt .dot{ flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-3); margin-top: 2px; }
.cs .opt[aria-checked="true"] .dot{ border: 5px solid var(--ink); }
.cs .opt .t{ font-weight: 600; }
.cs .opt .n{ margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.cs .route-row{ display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: inset 3px 0 0 var(--c); margin-bottom: 6px; }
.cs .route-row.off{ background: var(--surface-2); box-shadow: inset 3px 0 0 var(--line); }
.cs .route-row .rank{ color: var(--ink-3); font-size: 12.5px; }
.cs .mini{ display: inline-flex; gap: 2px; }
.cs .mini button{ width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); }
.cs .mini button[disabled]{ opacity: .4; cursor: not-allowed; }
.cs .ready-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.cs .ready-dot.no{ background: var(--warn); }
.cs .reach-bar{ display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); }
.cs .reach-bar i{ display: block; height: 100%; background: var(--c); min-width: 2px; }
.cs .reach-bar i.x{ background: color-mix(in srgb, var(--ink-3) 55%, var(--surface)); }
.cs .reach-row{ display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.cs .reach-row:last-child{ border-bottom: 0; }
.cs .reach-row .num{ margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.cs .reach-row .sub{ color: var(--ink-3); font-size: 12.5px; }
.cs .swatch{ width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--ink-3)); flex: none; }
.cs .who{ list-style: none; margin: 0; padding: 0; }
.cs .who li{ display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cs .who li:last-child{ border-bottom: 0; }
.cs .who .nm{ font-weight: 600; white-space: nowrap; }
.cs .who .why{ color: var(--ink-2); font-size: 13px; }
.cs .side-h{ margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.cs .summary{ list-style: none; margin: 0; padding: 0; }
.cs .summary li{ display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cs .summary li:last-child{ border-bottom: 0; }
.cs .summary span:first-child{ color: var(--ink-3); }
.cs .kpis{ display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,32,.04), 0 8px 24px -16px rgba(16,24,32,.12); }
.cs .kpi{ position: relative; flex: 1 1 170px; padding: 16px 18px 14px; border-right: 1px solid var(--line); }
.cs .kpi::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3)); opacity: .55; }
.cs .kpi:last-child{ border-right: 0; }
.cs .kpi .v{ font-size: 25px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cs .kpi .l{ color: var(--ink-2); font-size: 13px; }
.cs .kpi .s{ color: var(--ink-3); font-size: 12.5px; }
.cs .kpi.rescue{ background: var(--ok-tint); }
.cs .panel{ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; box-shadow: 0 1px 2px rgba(16,24,32,.04), 0 8px 24px -16px rgba(16,24,32,.12); }
.cs .panel h2{ margin: 0 0 2px; font-size: 15px; font-weight: 650; }
.cs .panel > .help{ margin: 0 0 12px; }
.cs .dash-grid{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.cs .dash-stack{ display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cs .legend{ display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; color: var(--ink-2); font-size: 13px; }
.cs .legend span{ display: inline-flex; align-items: center; gap: 6px; }
.cs .readout{ min-height: 22px; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.cs .readout b{ color: var(--ink); }
.cs .chart svg{ display: block; width: 100%; overflow: visible; }
.cs .chart text{ fill: var(--ink-3); font-size: 11px; font-family: inherit; }
.cs .chart .grid{ stroke: var(--line); stroke-width: 1; }
.cs .chart .hit{ fill: transparent; cursor: default; }
.cs .chart .hit:focus-visible{ outline: none; }
.cs .chart .hit:focus-visible + .ring, .cs .chart .ring{ pointer-events: none; }
.cs .reason{ display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; text-align: left; padding: 8px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 8px; }
.cs .reason:hover{ background: var(--surface-2); }
.cs .reason[aria-pressed="true"]{ background: var(--bg); box-shadow: inset 3px 0 0 var(--ink); }
.cs .reason .code{ color: var(--ink-3); font-size: 12.5px; }
.cs .reason .cnt{ font-weight: 650; font-variant-numeric: tabular-nums; }
.cs .reason .hbar{ grid-column: 2 / 4; }
.cs .hbar{ height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cs .hbar i{ display: block; height: 100%; background: var(--c); }
.cs .fb{ padding: 12px 0; border-bottom: 1px solid var(--line); }
.cs .fb:last-child{ border-bottom: 0; padding-bottom: 0; }
.cs .fb:first-of-type{ padding-top: 4px; }
.cs .fb-head{ display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; flex-wrap: wrap; }
.cs .fb-head .arrow{ color: var(--ink-3); }
.cs .fb-bar{ display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); gap: 2px; }
.cs .fb-bar i{ display: block; height: 100%; }
.cs .fb-bar .okp{ background: var(--c); }
.cs .fb-bar .lost{ background: var(--danger); }
.cs .route-chain{ display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.cs .table-wrap{ overflow-x: auto; }
.cs .prog{ display: flex; align-items: center; gap: 8px; min-width: 150px; }
.cs .prog .hbar{ flex: 1; --c: var(--ink); }
.cs .num{ font-variant-numeric: tabular-nums; }
.cs .sr-only-row{ position: absolute; left: -9999px; }
@media (max-width: 1180px){.cs .bc-layout{ grid-template-columns: minmax(0, 1fr); overflow-y: auto; display: block; }
.cs .bc-form, .cs .bc-side{ overflow: visible; }
.cs .bc-side{ border-left: 0; border-top: 1px solid var(--line); }
.cs .dash-grid{ grid-template-columns: minmax(0, 1fr); }
.cs .split{ grid-template-columns: minmax(0, 1fr); }
.cs .wa-preview{ position: static; }}
@media (max-width: 980px){.cs .tpl-layout{ grid-template-columns: minmax(0, 1fr); }
.cs .tpl-layout[data-pane="list"] .tpl-editor{ display: none; }
.cs .tpl-layout[data-pane="editor"] .tpl-list{ display: none; }
.cs .acct{ grid-template-columns: minmax(0, 1fr) auto; }}
@media (max-width: 820px){.cs .shell{ grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.cs .nav{ order: 2; flex-direction: row; border-right: 0; border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
.cs .nav-item{ flex: 1; font-size: 11px; padding: 6px 2px; }
.cs .nav-item .lbl{ display: block; }
.cs .nav-item .flyout{ display: none; }
.cs .page-head{ padding: 12px 14px; }
.cs .page-body, .cs .bc-form, .cs .tpl-editor{ padding-left: 14px; padding-right: 14px; }
.cs .bc-side{ padding-left: 14px; padding-right: 14px; }
.cs .toast{ bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.cs .kpi{ flex-basis: 45%; border-bottom: 1px solid var(--line); }}
.cs .ov-grid{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.cs .agent-list{ list-style: none; margin: 0; padding: 0; }
.cs .agent-row{ display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cs .agent-row:last-child{ border-bottom: 0; }
.cs .dot8{ width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-3); }
.cs .dot8.online{ background: var(--ok); }
.cs .dot8.away{ background: var(--warn); }
.cs .agent-name{ font-weight: 600; }
.cs .agent-role{ color: var(--ink-3); font-size: 12.5px; }
.cs .agent-meta{ margin-left: auto; text-align: right; font-size: 12.5px; color: var(--ink-2); }
.cs .bichart{ display: flex; flex-direction: column; gap: 12px; }
.cs .bi-row{ display: grid; grid-template-columns: 96px minmax(0, 1fr) 116px; gap: 10px; align-items: center; }
.cs .bi-track{ display: flex; height: 16px; border-radius: 5px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.cs .bi-track i.bi{ display: block; height: 100%; background: var(--c); }
.cs .bi-track i.ui{ display: block; height: 100%; background: color-mix(in srgb, var(--c) 42%, var(--surface)); }
.cs .bi-nums{ font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-2); text-align: right; }
.cs .rt-row{ display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 10px; align-items: center; padding: 6px 0; }
.cs .rt-bar{ height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.cs .rt-bar i{ display: block; height: 100%; background: var(--c); }
.cs .meta-table{ width: 100%; border-collapse: collapse; }
.cs .meta-table th{ text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12.5px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.cs .meta-table td{ padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cs .meta-table tr:last-child td{ border-bottom: 0; }
.cs .tier-bar{ width: 90px; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.cs .tier-bar i{ display: block; height: 100%; background: var(--wa); }
.cs .auto-layout{ display: grid; grid-template-columns: 220px minmax(0, 1fr); flex: 1; min-height: 0; }
.cs .auto-nav{ border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 10px; }
.cs .auto-item{ width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; border-radius: 10px; color: var(--ink-2); text-align: left; margin-bottom: 2px; }
.cs .auto-item:hover{ background: var(--surface-2); }
.cs .auto-item[aria-current="true"]{ background: var(--bg); color: var(--ink); font-weight: 650; box-shadow: inset 3px 0 0 var(--ink); }
.cs .auto-item .ico{ flex: none; color: var(--ink-3); }
.cs .auto-item[aria-current="true"] .ico{ color: var(--ink); }
.cs .auto-item .st{ margin-left: auto; }
.cs .auto-body{ overflow-y: auto; padding: 20px 24px 40px; }
.cs .auto-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cs .auto-head h2{ margin: 0 0 4px; font-size: 17px; font-weight: 650; }
.cs .auto-head p{ margin: 0; color: var(--ink-2); max-width: 62ch; }
.cs .rule-row{ display: grid; grid-template-columns: minmax(0, 1fr) 130px 44px 78px; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px; }
.cs .rule-row.off{ background: var(--surface-2); color: var(--ink-2); }
.cs .rule-main b{ font-weight: 650; }
.cs .kw{ display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cs .kwtag{ padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.cs .qr-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cs .qr-card{ border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; }
.cs .qr-card .sc{ font-weight: 650; color: var(--ink); }
.cs .qr-card .tt{ color: var(--ink-2); font-size: 12.5px; margin: 2px 0 6px; }
.cs .qr-card .bd{ color: var(--ink); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cs .qr-actions{ display: flex; gap: 6px; margin-top: 8px; }
.cs .ib-list{ list-style: none; margin: 0; padding: 0; max-width: 420px; }
.cs .ib-row{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 6px; }
.cs .ib-row input{ border: 0; background: transparent; flex: 1; min-width: 0; padding: 2px 0; }
.cs .ib-row input:focus-visible{ outline: none; }
.cs .ib-count{ font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.cs .ib-preview{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs .ib-chip{ padding: 6px 12px; border-radius: 999px; border: 1px solid var(--wa); color: var(--ink); font-size: 13px; background: var(--wa-tint); }
.cs .hours-grid{ display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 6px; }
.cs .hours-grid input[type="time"]{ width: 110px; }
.cs .status-now{ display: inline-flex; align-items: center; gap: 6px; }
.cs .flow-list{ list-style: none; margin: 0; padding: 0; max-width: 640px; }
.cs .flow-step{ position: relative; display: flex; gap: 12px; padding: 0 0 18px 26px; }
.cs .flow-step::before{ content: ""; position: absolute; left: 5px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.cs .flow-step::after{ content: ""; position: absolute; left: 9px; top: 16px; bottom: -4px; width: 1px; background: var(--line); }
.cs .flow-step:last-child::after{ display: none; }
.cs .flow-card{ flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; }
.cs .flow-card .type-row{ display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.cs .flow-card select{ max-width: 170px; }
.cs .flow-card textarea{ min-height: 52px; }
.cs .flow-branch{ margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.cs .branch-row{ display: grid; grid-template-columns: minmax(0, 1fr) 110px 32px; gap: 6px; margin-bottom: 6px; align-items: center; }
.cs .flow-meta-row{ display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px; }
.cs .flow-meta-row.off{ background: var(--surface-2); }
@media (max-width: 900px){.cs .auto-layout{ grid-template-columns: minmax(0, 1fr); }
.cs .auto-layout[data-pane="nav"] .auto-body{ display: none; }
.cs .auto-layout[data-pane="body"] .auto-nav{ display: none; }
.cs .ov-grid{ grid-template-columns: minmax(0, 1fr); }
.cs .rule-row{ grid-template-columns: minmax(0, 1fr); }}
.cs .team-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 4px; }
.cs .team-card{ border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; }
.cs .team-card h3{ margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.cs .team-members{ display: flex; flex-wrap: wrap; gap: -6px; }
.cs .mstack{ display: flex; }
.cs .mstack .avatar{ width: 24px; height: 24px; font-size: 10px; border: 2px solid var(--surface); margin-left: -8px; }
.cs .mstack .avatar:first-child{ margin-left: 0; }
.cs .member-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 12.5px; margin: 2px 4px 2px 0; }
.cs .member-pick{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .member-toggle{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; }
.cs .member-toggle[aria-pressed="true"]{ background: var(--bg); border-color: var(--ink); font-weight: 600; }
.cs .route-list{ list-style: none; margin: 0; padding: 0; }
.cs .route-item{ border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 14px; margin-bottom: 8px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 42px 78px; gap: 10px; align-items: center; }
.cs .route-item.off{ background: var(--surface-2); }
.cs .route-item.default{ box-shadow: inset 3px 0 0 var(--ink-3); }
.cs .route-item .rn{ font-weight: 650; }
.cs .route-item .rd{ color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.cs .route-item .rd .sep{ color: var(--ink-3); margin: 0 5px; }
.cs .rank-badge{ width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.cs .mini-col{ display: inline-flex; flex-direction: column; gap: 2px; }
.cs .mini-col button{ width: 24px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink-2); }
.cs .mini-col button[disabled]{ opacity: .35; cursor: not-allowed; }
.cs .sim-panel{ border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); margin-top: 18px; }
.cs .sim-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.cs .sim-trace{ list-style: none; margin: 10px 0 0; padding: 0; }
.cs .sim-trace li{ display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 13px; color: var(--ink-2); }
.cs .sim-trace li .ico{ margin-top: 2px; }
.cs .sim-trace li.hit{ color: var(--ink); font-weight: 600; }
.cs .sim-result{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-top: 10px; background: var(--surface); border: 1px solid var(--line); }
.cs .sim-result.assigned{ border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.cs .sim-result.queued{ border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: var(--warn-tint); }
@media (max-width: 760px){.cs .sim-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .route-item{ grid-template-columns: minmax(0, 1fr); }}
.cs .lchip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink); margin: 2px 4px 2px 0; }
.cs .lchip-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cs .lchip-x{ border: 0; background: none; padding: 0; margin-left: 2px; color: var(--ink-3); font-size: 14px; line-height: 1; }
.cs .lchip-x:hover{ color: var(--ink); }
.cs .swatch-pick{ display: flex; gap: 8px; margin-top: 10px; }
.cs .swatch-btn{ width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.cs .swatch-btn[aria-pressed="true"]{ border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); }
.cs .dropzone{ border: 1px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; background: var(--surface-2); }
.cs .dropzone input[type="file"]{ display: block; margin: 10px auto 0; font-size: 13px; }
.cs .csv-help{ background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cs .csv-help pre{ margin: 6px 0 0; white-space: pre-wrap; font-size: 12.5px; color: var(--ink-2); overflow-x: auto; }
.cs .upload-summary{ display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; }
.cs .upload-summary div{ min-width: 90px; }
.cs .upload-summary .v{ font-size: 18px; font-weight: 650; }
.cs .upload-summary .l{ color: var(--ink-3); font-size: 12px; }
.cs .csv-preview{ max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.cs .csv-preview table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cs .csv-preview th, .cs .csv-preview td{ padding: 5px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.cs .csv-preview tr:last-child td{ border-bottom: 0; }
.cs .log-toolbar{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cs .log-toolbar .search{ max-width: 260px; }
.cs .mono{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.cs .json-block{ background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; overflow-x: auto; color: var(--ink); }
.cs .json-key{ color: var(--info); }
.cs .json-str{ color: var(--ok); }
.cs .login-shell{ height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); }
.cs .login-brand{ position: relative; overflow: hidden; padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background:
    radial-gradient(120% 140% at 0% 0%, var(--brand-1) 0%, var(--brand-2) 46%, var(--brand-3) 78%, #14335c 100%); }
.cs .login-brand::before{ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px); background-size: 26px 26px; opacity: .5; }
.cs .login-brand > *{ position: relative; }
.cs .login-brand-mark{ display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; }
.cs .login-brand-mark .org-mark{ background: rgba(255,255,255,.18); backdrop-filter: blur(2px); }
.cs .login-pitch h1{ font-size: clamp(26px, 3vw, 34px); line-height: 1.2; font-weight: 650; margin: 0 0 14px; max-width: 15ch; }
.cs .login-pitch p{ font-size: 15px; opacity: .92; max-width: 44ch; margin: 0 0 22px; }
.cs .login-features{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs .login-features li{ display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cs .login-features .fic{ width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.cs .login-quote{ font-size: 13px; opacity: .85; border-top: 1px solid rgba(255,255,255,.25); padding-top: 16px; }
.cs .login-form-side{ display: flex; align-items: center; justify-content: center; padding: 32px 24px; overflow-y: auto; }
.cs .login-card{ width: 100%; max-width: 380px; }
.cs .login-card h2{ margin: 0 0 4px; font-size: 22px; font-weight: 650; }
.cs .login-card > p{ margin: 0 0 24px; color: var(--ink-2); }
.cs .pw-wrap{ position: relative; }
.cs .pw-wrap input{ padding-right: 38px; }
.cs .pw-toggle{ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 6px; color: var(--ink-3); border-radius: 6px; }
.cs .pw-toggle:hover{ color: var(--ink); background: var(--surface-2); }
.cs .remember-row{ display: flex; align-items: center; justify-content: space-between; margin: 2px 0 4px; }
.cs .remember-row label{ display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.cs .login-submit{ width: 100%; padding: 10px 14px; font-size: 14.5px; }
.cs .login-divider{ display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--ink-3); font-size: 12.5px; }
.cs .login-divider::before, .cs .login-divider::after{ content: ""; height: 1px; flex: 1; background: var(--line); }
.cs .sso-btn{ width: 100%; justify-content: flex-start; padding: 9px 12px; margin-bottom: 8px; }
.cs .login-error{ display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--ink); font-size: 13px; margin-bottom: 14px; }
.cs .login-foot{ margin-top: 26px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.cs .login-hint{ margin-top: 18px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 860px){.cs .login-shell{ grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto minmax(0, 1fr); }
.cs .login-brand{ padding: 26px 24px; }
.cs .login-pitch p, .cs .login-features, .cs .login-quote{ display: none; }
.cs .login-pitch h1{ font-size: 20px; margin: 0; max-width: none; }}
.cs .nav-foot{ margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cs .nav-foot .nav-item{ width: 100%; }
.cs .logo-mark-img{ border-radius: 50%; display: block; flex: none; }
.cs .logo-full{ display: inline-flex; align-items: center; }
.cs .logo-full .logo-wide{ display: block; width: auto; max-width: 100%; }
.cs .logo-full .logo-compact{ display: none; border-radius: 50%; }
@media (max-width: 860px){.cs .logo-full .logo-wide{ display: none; }
.cs .logo-full .logo-compact{ display: block; }}
.cs .tc-row{ display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 2px 0 4px; }
.cs .tc-row input{ margin-top: 2px; flex: none; }
.cs .sso-row{ display: flex; gap: 8px; }
.cs .sso-row .sso-btn{ flex: 1; justify-content: center; margin-bottom: 0; }
.cs .login-foot-link{ text-align: center; margin: 14px 0 0; font-size: 13px; }
.cs .notice.ok{ background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.cs .notice.ok .ico{ color: var(--ok); }
.cs .notice.info{ background: var(--info-tint); border-color: color-mix(in srgb, var(--info) 45%, var(--line)); }
.cs .notice.info .ico{ color: var(--info); }
.cs td.r, .cs th.r{ text-align: right; }
.cs .tbl.compact th, .cs .tbl.compact td{ padding: 6px 10px; font-size: 13px; }
.cs .rate-in{ width: 84px; padding: 5px 8px; text-align: right; }
.cs .wa-kpis{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.cs .wa-kpis > div{ border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.cs .wa-kpis .v{ font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cs .wa-kpis .v .of{ font-size: 13px; font-weight: 500; color: var(--ink-3); }
.cs .wa-kpis .l{ color: var(--ink-2); font-size: 12.5px; margin-top: 1px; }
.cs .wa-kpis .s{ color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.cs .wa-kpis .hot{ background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); }
.cs .wa-two{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; }
@media (max-width: 900px){.cs .wa-two{ grid-template-columns: minmax(0, 1fr); }
.cs .wa-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.cs .wa-mix{ display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); margin-top: 10px; }
.cs .wa-mix i{ display: block; height: 100%; min-width: 2px; }
.cs .cat-marketing{ background: var(--brand-3); }
.cs .cat-utility{ background: var(--wa); }
.cs .cat-authentication{ background: var(--rcs); }
.cs .cat-service{ background: var(--warn); }
.cs .swatch.cat-marketing{ background: var(--brand-3); }
.cs .swatch.cat-utility{ background: var(--wa); }
.cs .swatch.cat-authentication{ background: var(--rcs); }
.cs .swatch.cat-service{ background: var(--warn); }
.cs .meter{ margin-bottom: 12px; }
.cs .meter:last-child{ margin-bottom: 0; }
.cs .meter-top{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; font-size: 13px; }
.cs .meter-top .num.over{ color: var(--danger); font-weight: 650; }
.cs .meter-bar{ height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.cs .meter-bar i{ display: block; height: 100%; background: var(--ok); }
.cs .meter-bar i.over{ background: var(--danger); }
.cs .meter.compact .meter-top{ font-size: 12.5px; }
.cs .defs{ margin-top: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.cs .defs ul{ margin: 0; padding-left: 18px; }
.cs .defs li{ color: var(--ink-2); font-size: 12.5px; margin-bottom: 6px; }
.cs .defs li:last-child{ margin-bottom: 0; }
.cs .defs code{ background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 11.5px; }
.cs .int-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cs .int-card{ border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cs .int-card .ihead{ display: flex; align-items: flex-start; gap: 10px; }
.cs .int-card .iicon{ width: 36px; height: 36px; border-radius: 10px; background: var(--brand-tint); color: var(--brand-2); display: grid; place-items: center; flex: none; }
.cs .int-card .ititle{ font-weight: 650; }
.cs .int-card .idesc{ color: var(--ink-2); font-size: 13px; flex: 1; }
.cs .int-card .ifoot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.cs .code-block{ background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; overflow-x: auto; white-space: pre; color: var(--ink); }
.cs .code-block .cmt{ color: var(--ink-3); }
.cs .keys-table{ width: 100%; border-collapse: collapse; }
.cs .keys-table th{ text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12.5px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.cs .keys-table td{ padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cs .keys-table tr:last-child td{ border-bottom: 0; }
.cs .new-key-box{ display: flex; align-items: center; gap: 8px; background: var(--ok-tint); border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.cs .new-key-box code{ flex: 1; font-family: ui-monospace, monospace; font-size: 13px; overflow-x: auto; }
.cs .boot{ min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg); color: var(--ink-2); }
.cs .boot .logo-mark-img{ border-radius: 12px; animation: bootpulse 1.4s ease-in-out infinite; }
@keyframes bootpulse{ 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce){.cs .boot .logo-mark-img{ animation: none; }}
.cs .login-notice{ display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; font-size: 13px;
  background: var(--info-tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); }
.cs .wallet-nav{ position: relative; }
.cs .wallet-nav.low::after{ content: ''; position: absolute; top: 8px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.cs .wallet-hero{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.cs .wallet-hero.low{ background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.cs .wallet-amt{ font-family: inherit; font-size: 30px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15; }
.cs .cost-line{ margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.cs .cost-line b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.cs .cost-line.bad, .cs .cost-line.bad b{ color: var(--danger); }
.cs .imp-bar{ position: fixed; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: 14px; z-index: 55; display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px; border-radius: 999px; font-size: 12.5px; background: var(--ink); color: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); max-width: calc(100% - 24px); }
.cs .imp-bar span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px){.cs .imp-bar{ bottom: calc(78px + env(safe-area-inset-bottom, 0px)); right: 10px; }
.cs .ro-bar{ bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }}
.cs .imp-bar .btn{ background: var(--surface); color: var(--ink); border-color: transparent; }
.cs .ro-bar{ position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 10px; font-size: 12.5px; background: var(--warn-tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); max-width: calc(100% - 32px); }
.cs .locked-list{ display: grid; gap: 8px; margin-top: 12px; }
.cs .locked-ch{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.cs .locked-ch > div{ flex: 1; min-width: 0; }
.cs .media-drop{ border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-2); margin-top: 8px; transition: border-color .12s, background .12s; }
.cs .media-drop.drag{ border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 8%, var(--surface)); }
.cs .media-drop.has{ border-style: solid; background: var(--surface); }
.cs .media-pick{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; background: transparent; border: 0; text-align: left; color: var(--ink); cursor: pointer; border-radius: 12px; font: inherit; }
.cs .media-pick > span{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs .media-pick .ico{ color: var(--brand-2); flex: none; }
.cs .media-pick:focus-visible{ outline: 2px solid var(--brand-2); outline-offset: 2px; }
.cs .media-pick[disabled]{ cursor: not-allowed; opacity: .6; }
.cs .media-file{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; flex-wrap: wrap; }
.cs .media-thumb{ width: 64px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; position: relative; flex: none; color: var(--ink-3); }
.cs .media-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cs .media-thumb .play{ position: absolute; inset: auto 4px 4px auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.cs .media-meta{ flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 1px; }
.cs .media-meta b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wap-wrap{ position: sticky; top: 0; }
.cs .wap-phone{
  --wa-wall: #EFEAE2; --wa-dot: rgba(17, 27, 33, .045); --wa-bub: #FFFFFF; --wa-ink: #111B21; --wa-sub: #667781; --wa-bar: #FFFFFF;
  --wa-link: #027EB5; --wa-green: #008069; --wa-note: #FFEECD; --wa-note-ink: #54656F; --wa-frame: #1C1E21; --wa-media: rgba(17, 27, 33, .07);
  width: 100%; max-width: 300px; margin: 0 auto; border-radius: 40px; padding: 9px; background: var(--wa-frame);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 22px 44px -20px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wap-phone{ --wa-wall: #0B141A; --wa-dot: rgba(233, 237, 239, .035); --wa-bub: #202C33; --wa-ink: #E9EDEF; --wa-sub: #8696A0; --wa-bar: #1F2C34;
    --wa-link: #53BDEB; --wa-green: #00A884; --wa-note: #1F2C34; --wa-note-ink: #FFD279; --wa-frame: #000000; --wa-media: rgba(233, 237, 239, .08); }}
:root[data-theme="dark"] .wap-phone{ --wa-wall: #0B141A; --wa-dot: rgba(233, 237, 239, .035); --wa-bub: #202C33; --wa-ink: #E9EDEF; --wa-sub: #8696A0; --wa-bar: #1F2C34;
  --wa-link: #53BDEB; --wa-green: #00A884; --wa-note: #1F2C34; --wa-note-ink: #FFD279; --wa-frame: #000000; --wa-media: rgba(233, 237, 239, .08); }
.cs .wap-screen{ border-radius: 32px; overflow: hidden; background: var(--wa-wall); display: flex; flex-direction: column; height: 560px; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
.cs .wap-status{ display: flex; justify-content: space-between; align-items: center; padding: 9px 20px 3px; font-size: 11.5px; font-weight: 600; color: var(--wa-ink); background: var(--wa-bar); }
.cs .wap-sys{ display: inline-flex; align-items: flex-end; gap: 2px; }
.cs .wap-sys i{ width: 3px; background: var(--wa-ink); border-radius: 1px; }
.cs .wap-sys i:nth-child(1){ height: 4px; }
.cs .wap-sys i:nth-child(2){ height: 6px; }
.cs .wap-sys i:nth-child(3){ height: 8px; }
.cs .wap-sys b{ width: 18px; height: 9px; margin-left: 5px; border-radius: 2.5px; border: 1.5px solid var(--wa-ink); position: relative; }
.cs .wap-sys b::after{ content: ''; position: absolute; inset: 1px 4px 1px 1px; background: var(--wa-ink); border-radius: 1px; }
.cs .wap-bar{ display: flex; align-items: center; gap: 8px; padding: 7px 10px 9px; background: var(--wa-bar); color: var(--wa-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.cs .wap-avatar{ width: 32px; height: 32px; border-radius: 50%; background: var(--wa-green); color: #FFFFFF; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none; }
.cs .wap-who{ display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.cs .wap-who b{ font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wap-who span{ font-size: 10.5px; color: var(--wa-sub); }
.cs .wap-bar-ic{ display: flex; gap: 12px; color: var(--wa-ink); }
.cs .wap-chat{ flex: 1; overflow-y: auto; padding: 10px 10px 12px; background-color: var(--wa-wall);
  background-image: radial-gradient(var(--wa-dot) 1.2px, transparent 1.3px); background-size: 15px 15px; }
.cs .wap-day{ margin: 2px auto 8px; width: max-content; font-size: 10.5px; padding: 3px 9px; border-radius: 7px; background: var(--wa-bub); color: var(--wa-sub); letter-spacing: .02em; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.cs .wap-note{ font-size: 10.5px; line-height: 1.38; text-align: center; color: var(--wa-note-ink); background: var(--wa-note); border-radius: 7px; padding: 6px 9px; margin: 0 8px 10px; }
.cs .wap-msg{ max-width: 90%; }
.cs .wap-bub{ position: relative; background: var(--wa-bub); color: var(--wa-ink); border-radius: 0 9px 9px 9px; padding: 4px 4px 5px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); font-size: 13px; line-height: 1.4; }
.cs .wap-bub::before{ content: ''; position: absolute; left: -7px; top: 0; border-style: solid; border-width: 0 8px 9px 0; border-color: transparent var(--wa-bub) transparent transparent; }
.cs .wap-media{ border-radius: 7px; overflow: hidden; background: var(--wa-media); aspect-ratio: 1.91 / 1; display: grid; place-items: center; position: relative; margin-bottom: 3px; max-width: 100%; }
.cs .wap-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cs .wap-play{ position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.cs .wap-play::after{ content: ''; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #FFFFFF; }
.cs .wap-dur{ position: absolute; left: 7px; bottom: 5px; font-size: 10.5px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cs .wap-ph{ display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--wa-sub); font-size: 11px; padding: 6px; text-align: center; overflow-wrap: anywhere; }
.cs .wap-doc{ display: flex; align-items: center; gap: 9px; background: var(--wa-media); border-radius: 7px; padding: 9px; margin-bottom: 3px; }
.cs .wap-pdf{ width: 30px; height: 36px; border-radius: 4px; background: #E5252A; color: #FFFFFF; font-size: 9px; font-weight: 800; display: grid; place-items: center; flex: none; letter-spacing: .03em; }
.cs .wap-docmeta{ display: flex; flex-direction: column; min-width: 0; }
.cs .wap-docmeta b{ font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wap-docmeta span{ font-size: 10.5px; color: var(--wa-sub); }
.cs .wap-h{ font-weight: 700; padding: 3px 6px 0; }
.cs .wap-b{ padding: 3px 6px 0; overflow-wrap: anywhere; }
.cs .wap-b code{ font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.cs .wap-empty{ color: var(--wa-sub); font-style: italic; }
.cs .wap-f{ padding: 4px 6px 0; font-size: 11.5px; color: var(--wa-sub); }
.cs .wap-time{ text-align: right; font-size: 10px; color: var(--wa-sub); padding: 1px 6px 0; }
.cs .wap-btns{ margin-top: 3px; display: flex; flex-direction: column; gap: 3px; }
.cs .wap-btn{ background: var(--wa-bub); color: var(--wa-link); font-weight: 600; font-size: 12.5px; padding: 8px; border-radius: 9px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); display: flex; align-items: center; justify-content: center; gap: 6px; }
.cs .wap-input{ display: flex; gap: 6px; align-items: center; padding: 6px 8px 12px; background: var(--wa-wall); }
.cs .wap-field{ flex: 1; background: var(--wa-bub); border-radius: 20px; padding: 8px 12px; font-size: 12px; color: var(--wa-sub); display: flex; justify-content: space-between; align-items: center; }
.cs .wap-mic{ width: 34px; height: 34px; border-radius: 50%; background: var(--wa-green); color: #FFFFFF; display: grid; place-items: center; flex: none; }
@media (max-width: 760px){.cs .wap-wrap{ position: static; }
.cs .wap-screen{ height: 520px; }}
@media (max-width: 820px){.cs .nav{ overflow-x: auto; scrollbar-width: none; }
.cs .nav::-webkit-scrollbar{ display: none; }
.cs .nav-item{ flex: 0 0 auto; min-width: 64px; }
.cs .nav-foot{ flex-direction: row; margin-top: 0; padding: 0 0 0 6px; border-top: 0; border-left: 1px solid var(--line); }
.cs .nav-foot .avatar{ display: none; }
.cs .nav-foot .nav-item{ width: auto; }
.cs .wallet-nav.low::after{ right: 18px; top: 4px; }}
.cs .btn.primary{ transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.cs .btn.primary:hover:not([disabled]){ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; filter: brightness(.93) saturate(1.08); transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-3) 65%, transparent); }
.cs .btn.primary:active:not([disabled]){ transform: translateY(0); filter: brightness(.88); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.cs .btn.primary:focus-visible{ outline: 2px solid var(--brand-3); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){.cs .btn.primary, .cs .btn.primary:hover:not([disabled]){ transition: none; transform: none; }}
.cs .inbox-segs{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.cs .inbox-segs button{ border: 0; background: transparent; border-radius: 8px; padding: 6px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; line-height: 1.2; text-align: center; transition: background .15s ease, color .15s ease; }
.cs .inbox-segs button:hover{ color: var(--ink); }
.cs .inbox-segs button[aria-selected="true"]{ background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.05); }
.cs .inbox-segs .count{ font-size: 11px; font-weight: 700; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cs .inbox-segs button[aria-selected="true"][data-seg="live"] .count{ background: var(--wa-tint); color: var(--wa-strong); }
.cs .inbox-segs button[aria-selected="true"][data-seg="expired"] .count{ background: var(--warn-tint); color: var(--warn-strong); }
.cs .live-pip{ width: 7px; height: 7px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa) 60%, transparent); animation: livepip 2s ease-out infinite; flex: none; }
@keyframes livepip{ 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce){.cs .live-pip{ animation: none; }}
.cs .assign-tag.closed{ color: var(--ink-2); background: var(--surface-2); }
.cs .assign-tag.expired{ color: var(--warn-strong); background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); margin-left: 4px; }
.cs .assign-tag.closed{ margin-left: 4px; }
.cs .conv-label{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; vertical-align: middle; box-shadow: 0 0 0 1.5px var(--surface); }
.cs .chat-actions{ display: flex; gap: 6px; flex: none; align-items: center; }
.cs .chat-actions .btn{ padding: 5px 10px; }
.cs .chat-actions .close-chat:hover:not([disabled]){ background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ok-strong); }
.cs .thread-labels{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cs .thread-labels .lchip{ font-size: 11px; padding: 1px 7px 1px 5px; }
@media (max-width: 1100px){.cs .chat-actions .ca-lbl{ display: none; }
.cs .chat-actions .btn{ padding: 6px 8px; }}
.cs .event-line{ display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0; }
.cs .event-line > span{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
.cs .event-line time{ color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.cs .event-line em{ font-size: 12px; color: var(--ink-3); max-width: 70%; text-align: center; }
.cs .event-line.ev-close > span{ background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.cs .event-line.ev-transfer > span{ background: var(--info-tint); border-color: color-mix(in srgb, var(--info) 35%, var(--line)); }
.cs .stack{ position: relative; }
.cs .quote{ display: flex; flex-direction: column; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; font-size: 12.5px; }
.cs .quote b{ color: var(--c); font-size: 12px; }
.cs .quote span{ color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .reaction{ align-self: flex-start; margin-top: -10px; margin-left: 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; line-height: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.08); position: relative; z-index: 1; }
.cs .msg.out .reaction{ align-self: flex-end; margin-left: 0; margin-right: 10px; }
.cs .msg-actions{ position: absolute; top: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; }
.cs .msg.in .msg-actions{ left: calc(100% + 4px); }
.cs .msg.out .msg-actions{ right: calc(100% + 4px); }
.cs .msg:hover .msg-actions, .cs .msg-actions:focus-within{ opacity: 1; }
.cs .ma-btn{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; }
.cs .ma-btn:hover{ color: var(--ink); background: var(--surface-2); }
.cs .react-pop{ position: absolute; top: 30px; z-index: 5; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 5px; box-shadow: 0 8px 22px -8px rgba(0,0,0,.25); }
.cs .msg.in .react-pop{ left: 0; }
.cs .msg.out .react-pop{ right: 0; }
.cs .react-pop button{ border: 0; background: transparent; font-size: 18px; width: 30px; height: 30px; border-radius: 50%; transition: transform .12s ease, background .12s ease; }
.cs .react-pop button:hover, .cs .react-pop button[aria-pressed="true"]{ background: var(--surface-2); transform: scale(1.15); }
@media (hover: none){.cs .msg-actions{ opacity: 1; }}
.cs .closed-bar{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.cs .closed-bar > span{ flex: 1; min-width: 180px; }
.cs .closed-bar b{ color: var(--ink); }
.cs .wa-tools{ position: relative; display: inline-flex; gap: 2px; }
.cs .attach-menu{ position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 300px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.28); animation: popin .14s ease; }
.cs .attach-menu button{ display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 7px 8px; border-radius: 8px; text-align: left; color: var(--ink); }
.cs .attach-menu button:hover, .cs .attach-menu button:focus-visible{ background: var(--surface-2); }
.cs .attach-menu b{ display: block; font-size: 13px; font-weight: 600; }
.cs .attach-menu small{ display: block; font-size: 11.5px; color: var(--ink-3); }
.cs .am-sep{ height: 1px; background: var(--line); margin: 4px 6px; }
.cs .am-ic{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; background: #7F66FF; }
.cs .am-image{ background: #007BFC; }
.cs .am-video{ background: #E3266C; }
.cs .am-audio{ background: #F18A1D; }
.cs .am-document{ background: #5157AE; }
.cs .am-sticker{ background: #0EA5A3; }
.cs .am-location{ background: #1FA855; }
.cs .am-contacts{ background: #009DE2; }
.cs .am-buttons{ background: #6B7280; }
.cs .am-list{ background: #9D5CF5; }
.cs .emoji-pop{ position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.28); animation: popin .14s ease; }
.cs .emoji-pop button{ border: 0; background: transparent; font-size: 19px; height: 32px; border-radius: 8px; }
.cs .emoji-pop button:hover{ background: var(--surface-2); }
@keyframes popin{ from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){.cs .attach-menu, .cs .emoji-pop{ animation: none; }}
.cs .pending-att{ display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px dashed color-mix(in srgb, var(--wa) 55%, var(--line)); background: var(--wa-tint); border-radius: 10px; }
.cs .pending-att img{ width: 52px; height: 52px; object-fit: cover; border-radius: 7px; flex: none; }
.cs .pa-ic{ width: 40px; height: 40px; border-radius: 8px; background: var(--surface); display: grid; place-items: center; color: var(--wa-strong); flex: none; }
.cs .pa-meta{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .pa-meta b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.cs .reply-bar{ display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-left: 3px solid var(--wa); background: var(--surface-2); border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.cs .reply-bar > span{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .reply-bar > span b{ color: var(--wa-strong); }
.cs .reply-bar > span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .rc-img{ display: block; margin: -3px -6px 6px; border-radius: 10px; overflow: hidden; max-width: 300px; }
.cs .rc-img img{ display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.cs .rc-video{ display: block; width: 300px; max-width: 100%; border-radius: 10px; margin-bottom: 6px; background: #000; }
.cs .rc-audio{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--c); }
.cs .rc-audio audio{ height: 34px; max-width: 240px; }
.cs .rc-sticker{ width: 120px; height: 120px; object-fit: contain; display: block; }
.cs .rc-doc{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); text-decoration: none; margin-bottom: 6px; min-width: 220px; }
.cs .rc-doc > span:nth-child(2){ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .rc-doc b{ font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .rc-doc small{ font-size: 11.5px; color: var(--ink-3); }
.cs .rc-ext{ width: 34px; height: 40px; border-radius: 5px; background: #E5252A; color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; flex: none; }
.cs .rc-loc{ display: block; width: 260px; max-width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; color: var(--ink); margin-bottom: 6px; background: var(--surface); }
.cs .rc-map{ display: grid; place-items: center; height: 110px; background-color: #E8EEDF; background-image: linear-gradient(90deg, rgba(255,255,255,.7) 2px, transparent 2px), linear-gradient(rgba(255,255,255,.7) 2px, transparent 2px), linear-gradient(35deg, transparent 46%, #CFE0F5 46%, #CFE0F5 54%, transparent 54%); background-size: 38px 38px, 38px 38px, 100% 100%; }
.cs .rc-pin{ color: #E5252A; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.cs .rc-loc-txt{ display: flex; flex-direction: column; padding: 7px 10px; }
.cs .rc-loc-txt b{ font-size: 13px; }
.cs .rc-loc-txt small{ font-size: 11.5px; color: var(--ink-3); }
.cs .rc-contact{ display: flex; align-items: center; gap: 10px; padding: 6px 4px 8px; min-width: 200px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.cs .rc-contact > span{ display: flex; flex-direction: column; }
.cs .rc-contact small{ color: var(--ink-3); font-size: 12px; }
.cs .rc-inter .body{ margin-bottom: 4px; }
.cs .rc-foot{ font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.cs .rc-btns{ display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; }
.cs .rc-btns span{ display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); color: var(--wa-strong); font-weight: 600; font-size: 12.5px; background: var(--surface); }
.cs .rc-list{ list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cs .rc-list li{ display: flex; flex-direction: column; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.cs .rc-list li:first-child{ border-top: 0; }
.cs .rc-list small{ color: var(--ink-3); }
.cs .range-pick{ position: relative; display: inline-flex; }
.cs .range-pick .seg button{ display: inline-flex; align-items: center; gap: 5px; transition: background .15s ease; }
.cs .range-pick .seg button:hover{ color: var(--ink); }
.cs .range-pop{ position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 270px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.28); animation: popin .14s ease; }
.cs .tbl.compact th, .cs .tbl.compact td{ padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; }
.cs .compact-panel h2{ font-size: 15px; }
.cs .fb-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.cs .custom-dates .fld{ min-width: 150px; }
.cs .mini-tpl{ display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 4px 8px 4px 4px; max-width: 260px; text-align: left; color: var(--ink-2); transition: border-color .15s ease, background .15s ease; }
.cs .mini-tpl:hover{ border-color: color-mix(in srgb, var(--wa) 55%, var(--line)); background: var(--wa-tint); }
.cs .mt-thumb{ width: 34px; height: 34px; border-radius: 6px; background: var(--wa-tint); color: var(--wa-strong); display: grid; place-items: center; overflow: hidden; flex: none; }
.cs .mt-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.cs .mt-txt{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cs .mt-txt b{ font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .mt-txt small{ font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .tpl-modal .wa-preview{ margin: 0; }
.cs .meta-wrap{ padding: 0 24px; margin-bottom: 12px; }
.cs .meta-conn{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid color-mix(in srgb, #1877F2 35%, var(--line)); background: color-mix(in srgb, #1877F2 6%, var(--surface)); border-radius: 12px; }
.cs .meta-conn.off{ border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-tint); }
.cs .mc-ic{ width: 32px; height: 32px; border-radius: 50%; background: #1877F2; color: #fff; display: grid; place-items: center; flex: none; }
.cs .meta-conn.off .mc-ic{ background: var(--ink-3); }
.cs .mc-txt{ flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.cs .mc-txt b{ font-size: 13.5px; }
.cs .mono{ font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95em; }
.cs .payload{ margin-top: 12px; }
.cs .json-block{ max-height: 280px; overflow: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 11.5px; line-height: 1.45; white-space: pre; margin: 0 0 6px; }
.cs .auth-box{ border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 12px; }
.cs .auth-preview{ background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.cs .check-row{ display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 10px; }
.cs .reason-pick{ display: flex; flex-direction: column; gap: 4px; }
.cs .reason-opt{ display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; transition: border-color .15s ease, background .15s ease; }
.cs .reason-opt.on{ border-color: var(--brand-3); background: var(--brand-tint); }
.cs .swatch-custom{ width: 26px; height: 26px; border-radius: 50%; position: relative; overflow: hidden; cursor: pointer; background: conic-gradient(#E5484D, #F5A524, #46A758, #0EA5E9, #6E56CF, #E5484D); box-shadow: 0 0 0 1px var(--line); display: inline-block; }
.cs .swatch-custom.on{ box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.cs .swatch-custom input{ position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.cs .swatch-pick{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.cs .wap-media.nat{ aspect-ratio: auto; max-height: 300px; }
.cs .wap-media.nat img{ height: auto; max-height: 300px; object-fit: contain; }
.cs .media-thumb{ width: 88px; height: 60px; }
.cs .btn.danger-btn{ color: var(--danger-strong); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.cs .btn.danger-btn:hover:not([disabled]){ background: var(--danger-tint); }
.cs .payload .json-block{ white-space: pre; font-size: 11.5px; max-height: 280px; overflow: auto; }
.cs .nav-logo{ display: grid; place-items: center; padding: 2px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cs .nav-logo img{ width: 42px; height: 42px; border-radius: 50%; object-fit: contain; display: block; }
.cs .m-top{ display: none; }
@media (max-width: 820px){.cs .shell{ grid-template-rows: auto minmax(0, 1fr) auto; }
.cs .m-top{ display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.cs .m-top img{ height: 28px; width: auto; display: block; }
.cs .m-top span{ font-weight: 650; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid var(--line); padding-left: 10px; }
.cs .nav-logo{ display: none; }}
.cs .wap-wrap{ position: static; }
.cs .split.tpl-split{ grid-template-columns: minmax(0, 1fr) minmax(280px, 316px); }
.cs .tpl-aside{ position: sticky; top: 0; align-self: start; z-index: 2; background: var(--bg); padding-bottom: 8px; }
@media (max-width: 1100px){.cs .split.tpl-split{ grid-template-columns: minmax(0, 1fr); }
.cs .tpl-aside{ position: static; }}
.cs .tpl-checks{ border-top: 1px solid var(--line); padding-top: 12px; }
.cs .tid-card{ border: 1px solid color-mix(in srgb, var(--brand-3) 35%, var(--line)); background: color-mix(in srgb, var(--brand-3) 6%, var(--surface)); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cs .tid-card.pending{ flex-direction: row; align-items: center; gap: 10px; border-style: dashed; background: var(--surface); }
.cs .tid-card.pending > span:last-child{ display: flex; flex-direction: column; font-size: 13px; }
.cs .tid-card.optional{ border-color: var(--line); background: var(--surface); }
.cs .tid-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .tid-ic{ width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--brand-3); flex: none; }
.cs .tid-main{ flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.cs .tid-main .lbl{ font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cs .tid-val{ font-size: 15px; font-weight: 650; letter-spacing: .02em; color: var(--ink); }
.cs .tid-more{ border-top: 1px solid var(--line); padding-top: 8px; }
.cs .tid-dl{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 14px; margin: 0 0 8px; }
.cs .tid-dl dt{ font-size: 11.5px; color: var(--ink-3); }
.cs .tid-dl dd{ margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.cs .nt-choices{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.cs .nt-choice{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cs .nt-choice:hover, .cs .nt-choice:focus-visible{ border-color: var(--brand-3); box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--brand-3) 70%, transparent); transform: translateY(-1px); }
.cs .nt-choice b{ font-size: 14.5px; }
.cs .nt-ic{ width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); flex: none; }
.cs .nt-list{ display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.cs .nt-row{ display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cs .nt-row.on{ border-color: var(--brand-3); background: var(--brand-tint); }
.cs .nt-row input{ margin-top: 3px; }
.cs .nt-row-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .nt-row-main small{ color: var(--ink-3); font-size: 12px; }
.cs .nt-body{ font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce){.cs .nt-choice, .cs .nt-choice:hover{ transition: none; transform: none; }}
.cs .fmt-pick{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs .fmt-opt{ display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s ease, background .15s ease; }
.cs .fmt-opt b{ font-size: 13px; }
.cs .fmt-opt small{ font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.cs .fmt-opt[aria-pressed="true"]{ border-color: var(--brand-3); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand-3); }
.cs .fmt-opt:hover:not([disabled]){ border-color: color-mix(in srgb, var(--brand-3) 60%, var(--line)); }
.cs .fmt-opt[disabled]{ opacity: .5; cursor: not-allowed; }
.cs .fmt-pick.compact small{ display: none; }
@media (max-width: 560px){.cs .fmt-pick{ grid-template-columns: 1fr; }}
.cs .tpl-modes{ padding: 0 24px 12px; }
.cs .tpl-sub{ display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 0 23px; font-size: 11px; color: var(--ink-3); }
.cs .fmt-tag{ font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 5px; background: var(--info-tint); color: var(--info-strong); line-height: 17px; }
.cs .fmt-tag.dyn{ background: var(--warn-tint); color: var(--warn-strong); }
.cs .mini-media{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .mm-box{ position: relative; width: 96px; height: 96px; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--ink-3); flex: none; padding: 0; }
.cs .mm-box.has{ border-style: solid; }
.cs .mm-box img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cs .mm-act{ position: absolute; inset: auto 0 0 0; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: 3px 0; text-align: center; opacity: 0; transition: opacity .15s ease; }
.cs .mm-box:hover .mm-act, .cs .mm-box:focus-visible .mm-act, .cs .mm-box:not(.has) .mm-act{ opacity: 1; }
.cs .mm-box:not(.has) .mm-act{ position: static; background: none; color: var(--ink-2); }
.cs .mm-box:not(.has){ grid-template-rows: auto auto; align-content: center; gap: 2px; }
.cs .mini-media .help{ flex: 1; min-width: 160px; }
.cs .carousel-ed{ border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); }
.cs .card-tabs{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cs .card-tabs button{ display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 11px 3px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cs .card-tabs button:not(.has-media){ padding-left: 11px; }
.cs .card-tabs button img{ width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cs .card-tabs button[aria-selected="true"]{ border-color: var(--brand-3); color: var(--ink); background: var(--brand-tint); }
.cs .card-tabs .add{ border-style: dashed; padding-left: 9px; }
.cs .card-ed{ display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.cs .lto-box{ border: 1px solid color-mix(in srgb, #E5484D 30%, var(--line)); border-radius: 12px; padding: 12px; background: color-mix(in srgb, #E5484D 4%, var(--surface)); }
.cs .lto-box .lbl{ display: inline-flex; align-items: center; gap: 6px; }
.cs .wap-lto{ display: flex; align-items: center; gap: 9px; margin: 2px 2px 4px; padding: 8px 9px; border-radius: 8px; background: var(--wa-media); }
.cs .wap-lto-ic{ width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #E7F8EF; color: #008069; flex: none; }
.cs .wap-lto-txt{ display: flex; flex-direction: column; min-width: 0; }
.cs .wap-lto-txt b{ font-size: 13px; }
.cs .wap-lto-txt small{ font-size: 11px; color: var(--wa-sub); }
.cs .wap-cards{ display: flex; gap: 6px; overflow-x: auto; margin-top: 5px; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cs .wap-cards::-webkit-scrollbar{ display: none; }
.cs .wap-card{ flex: 0 0 78%; scroll-snap-align: start; background: var(--wa-bub); border-radius: 9px; overflow: hidden; box-shadow: 0 1px .5px rgba(0,0,0,.13); display: flex; flex-direction: column; }
.cs .wap-card-media{ position: relative; aspect-ratio: 1 / 1; background: var(--wa-media); display: grid; place-items: center; }
.cs .wap-card-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cs .wap-card-b{ padding: 6px 8px 2px; font-size: 12px; color: var(--wa-ink); }
.cs .wap-card-btns{ margin-top: 4px; border-top: 1px solid color-mix(in srgb, var(--wa-sub) 25%, transparent); }
.cs .wap-card-btn{ display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--wa-link); font-weight: 600; font-size: 12px; padding: 7px 6px; }
.cs .wap-card-btn + .wap-card-btn{ border-top: 1px solid color-mix(in srgb, var(--wa-sub) 25%, transparent); }
.cs .wap-dyn{ position: absolute; top: 6px; left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 5px; }
.cs .dyn-media{ border: 1px dashed color-mix(in srgb, var(--warn) 50%, var(--line)); border-radius: 10px; padding: 10px; background: var(--warn-tint); }
.cs .tag-dyn{ font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--surface); color: var(--warn-strong); margin-left: 6px; }
.cs .flows-intro{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cs .flows-intro > div{ flex: 1; min-width: 220px; }
.cs .dlg.wide{ width: min(1120px, 100%); height: min(860px, 100%); }
.cs .dlg.wide .dlg-foot{ align-items: center; flex-wrap: wrap; }
.cs .flow-note{ margin-right: auto; }
.cs .flow-builder{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.cs .flow-left{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs .flow-right{ position: sticky; top: 0; }
@media (max-width: 860px){.cs .flow-builder{ grid-template-columns: minmax(0, 1fr); }
.cs .flow-right{ position: static; }}
.cs .flow-scr{ border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.cs .flow-scr-h{ width: 100%; display: flex; align-items: center; gap: 8px; border: 0; padding: 10px 14px; background: var(--surface-2); color: var(--ink); font-weight: 650; font-size: 14px; text-align: left; transition: background .15s ease; }
.cs .flow-scr-h span{ flex: 1; }
.cs .flow-scr-h small{ font-weight: 500; color: var(--ink-3); font-size: 12px; }
.cs .flow-scr.open .flow-scr-h{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; }
.cs .flow-scr.open .flow-scr-h small{ color: rgba(255,255,255,.85); }
.cs .flow-scr-b{ padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.cs .flow-field{ display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.cs .ff-type{ font-size: 11.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .03em; padding-top: 12px; }
.cs .ff-edit{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs .ff-lbl-wrap{ position: relative; }
.cs .ff-lbl-wrap .inp{ padding-top: 14px; }
.cs .ff-float{ position: absolute; top: 2px; left: 11px; font-size: 10.5px; color: var(--ink-3); pointer-events: none; }
.cs .ff-count{ display: block; text-align: right; font-size: 11px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cs .ff-tools{ display: flex; gap: 2px; padding-top: 6px; }
.cs .ff-del{ color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); }
.cs .ff-opts{ display: flex; flex-direction: column; gap: 5px; }
.cs .ff-opt-row{ display: flex; gap: 4px; align-items: center; }
.cs .btn-field .ff-type{ color: var(--brand-3); }
.cs .btn.sq{ padding: 0; width: 38px; height: 38px; justify-content: center; }
.cs .flow-add{ width: 100%; justify-content: center; }
@media (max-width: 560px){.cs .flow-field{ grid-template-columns: minmax(0, 1fr) auto; }
.cs .ff-type{ grid-column: 1 / -1; padding-top: 0; }}
.cs .flow-phone .wap-screen{ background: #0B5C4D; }
.cs .flow-dim{ flex: 1; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(#0b6e5c, #075E54); padding-top: 44px; min-height: 0; }
.cs .flow-sheet{ flex: 1; background: #fff; color: #111B21; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; min-height: 0; }
.cs .flow-top{ display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 12px 8px; }
.cs .flow-top b{ font-size: 14px; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .flow-x{ width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; color: #54656F; padding: 0; }
.cs .flow-body{ flex: 1; overflow-y: auto; padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cs .ff-h{ font-size: 18px; font-weight: 700; line-height: 1.25; }
.cs .ff-sh{ font-size: 15px; font-weight: 650; }
.cs .ff-b{ font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.cs .ff-c{ font-size: 11.5px; color: #667781; }
.cs .ff-in{ display: flex; justify-content: space-between; align-items: center; gap: 6px; border: 1px solid #D1D7DB; border-radius: 8px; padding: 10px 10px; font-size: 12.5px; color: #667781; position: relative; }
.cs .ff-in small{ position: absolute; left: 10px; bottom: -15px; font-size: 10.5px; }
.cs .ff-in.ta{ min-height: 58px; align-items: flex-start; }
.cs .ff-in + *{ margin-top: 4px; }
.cs .ff-group{ display: flex; flex-direction: column; }
.cs .ff-gl{ font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cs .ff-choice{ display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #E9EDEF; font-size: 13px; }
.cs .ff-radio, .cs .ff-box{ width: 16px; height: 16px; border: 2px solid #8696A0; border-radius: 50%; flex: none; }
.cs .ff-box{ border-radius: 4px; }
.cs .ff-opt{ display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.cs .ff-opt u, .cs .flow-managed u{ color: #027EB5; text-decoration: none; }
.cs .flow-foot{ padding: 8px 12px 12px; border-top: 1px solid #E9EDEF; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cs .flow-cta{ width: 100%; border: 0; border-radius: 999px; background: #008069; color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px; transition: filter .15s ease; }
.cs .flow-cta:hover{ filter: brightness(1.08); }
.cs .flow-managed{ font-size: 10.5px; color: #667781; }
.cs .flow-dots{ display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.cs .flow-dots span{ width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.cs .flow-dots span.on{ background: var(--brand-3); }
.cs .int-tabs{ display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; scrollbar-width: none; flex: none; }
.cs .int-tabs::-webkit-scrollbar{ display: none; }
.cs .int-tabs button{ display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 12px 14px 11px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease; border-radius: 8px 8px 0 0; }
.cs .int-tabs button:hover{ color: var(--ink); background: var(--surface-2); }
.cs .int-tabs button[aria-selected="true"]{ color: var(--brand-3); border-bottom-color: var(--brand-3); }
.cs .int-hero{ display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cs .int-hero h2{ margin: 0 0 2px; font-size: 18px; }
.cs .int-search{ width: 280px; max-width: 100%; margin: 0; }
.cs .app-tile{ display: grid; place-items: center; border-radius: 14px; color: #fff; flex: none; box-shadow: 0 6px 14px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.cs .chan-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cs .chan-card{ display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.cs .chan-card:hover{ box-shadow: 0 10px 26px -16px rgba(0,0,0,.35); transform: translateY(-1px); }
.cs .chan-card.locked{ background: var(--surface-2); }
.cs .chan-card.locked .app-tile{ filter: grayscale(.85); opacity: .6; }
.cs .cc-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .cc-txt b{ font-size: 14.5px; }
.cs .cc-txt span{ font-size: 12px; color: var(--ink-3); }
.cs .cc-lock{ display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.cs .cat-chips{ display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cs .cat-chips button{ border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 13px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); transition: all .15s ease; }
.cs .cat-chips button:hover{ border-color: var(--brand-3); color: var(--ink); }
.cs .cat-chips button[aria-pressed="true"]{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; border-color: transparent; }
.cs .app-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cs .app-card{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); position: relative; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.cs .app-card::after{ content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--brand-3) 10%, transparent), transparent 70%); pointer-events: none; }
.cs .app-card:hover, .cs .app-card:focus-visible{ transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.4); border-color: color-mix(in srgb, var(--brand-3) 45%, var(--line)); }
.cs .app-card.on{ border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.cs .ac-top{ display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: 4px; }
.cs .ac-cat{ font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.cs .ac-on{ display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ok-strong); background: var(--ok-tint); border-radius: 999px; padding: 2px 8px; }
.cs .app-card b{ font-size: 15px; }
.cs .ac-desc{ font-size: 12.5px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.cs .ac-cta{ margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--brand-3); }
@media (prefers-reduced-motion: reduce){.cs .app-card, .cs .chan-card{ transition: none; }
.cs .app-card:hover, .cs .chan-card:hover{ transform: none; }}
.cs .key-row{ display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.cs .key-box{ display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding-right: 4px; }
.cs .key-box .inp{ border: 0; background: transparent; flex: 1; min-width: 0; }
.cs .key-acts{ display: flex; gap: 8px; }
.cs .tbl.brand-head thead th{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; border-bottom: 0; }
.cs .act-tag{ font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.cs .act-tag.create{ color: var(--ok-strong); }
.cs .act-tag.regenerate{ color: var(--info-strong); }
.cs .act-tag.delete{ color: var(--danger-strong); }
.cs .docs-layout{ display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px){.cs .docs-layout{ grid-template-columns: minmax(0, 1fr); }}
.cs .docs-nav{ border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; position: sticky; top: 0; }
.cs .docs-nav-h{ display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 8px; text-transform: uppercase; font-size: 12.5px; letter-spacing: .04em; }
.cs .docs-list{ max-height: 560px; overflow-y: auto; border-top: 1px solid var(--line); }
.cs .docs-list button{ display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 10px 12px; color: var(--ink); transition: background .15s ease; }
.cs .docs-list button:hover{ background: var(--surface-2); }
.cs .docs-list button[aria-current="true"]{ background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand-3); }
.cs .docs-list b{ display: block; font-size: 13.5px; }
.cs .docs-list small{ display: block; font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.cs .mth{ display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; flex: none; min-width: 38px; text-align: center; }
.cs .mth.get{ background: #DCFCE7; color: #166534; }
.cs .mth.post{ background: #DBEAFE; color: #1E40AF; }
.cs .mth.put, .cs .mth.patch{ background: #FEF3C7; color: #92400E; }
.cs .mth.delete{ background: #FEE2E2; color: #991B1B; }
.cs .docs-main{ min-width: 0; }
.cs .ep-url{ display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 14px 0; background: var(--surface-2); overflow-x: auto; }
.cs .ep-url .mono{ white-space: nowrap; font-size: 13px; }
.cs .lang-tabs{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; }
.cs .lang-tabs button{ border: 0; background: none; padding: 6px 14px; border-radius: 8px; font-weight: 600; color: var(--ink-2); transition: background .15s ease, color .15s ease; }
.cs .lang-tabs button[aria-selected="true"]{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; }
.cs .code-win{ border-radius: 12px; background: #0F172A; color: #E2E8F0; overflow: hidden; box-shadow: 0 12px 30px -18px rgba(0,0,0,.6); margin-bottom: 14px; }
.cs .cw-bar{ display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cs .cw-bar i{ width: 10px; height: 10px; border-radius: 50%; background: #F87171; }
.cs .cw-bar i:nth-child(2){ background: #FBBF24; }
.cs .cw-bar i:nth-child(3){ background: #34D399; }
.cs .cw-bar span{ margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.cs .cw-copy{ border: 1px solid rgba(255,255,255,.15); background: none; color: #CBD5E1; border-radius: 6px; width: 26px; height: 26px; display: grid; place-items: center; }
.cs .code-win pre{ margin: 0; padding: 14px 16px; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre; }
.cs .url-cell{ display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cs .var-chip{ display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; background: var(--brand-tint); color: var(--ink); border-radius: 5px; padding: 1px 6px; margin: 1px 4px 1px 0; }
.cs .row-menu{ position: absolute; right: 8px; top: calc(100% - 6px); z-index: 20; min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: 0 16px 36px -14px rgba(0,0,0,.3); text-align: left; }
.cs .row-menu button{ display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 9px; border-radius: 7px; color: var(--ink); font-size: 13px; }
.cs .row-menu button:hover{ background: var(--surface-2); }
.cs .row-menu button.danger{ color: var(--danger-strong); }
.cs .api-top{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 700px){.cs .api-top{ grid-template-columns: minmax(0, 1fr); }}
.cs .req{ color: var(--danger); }
.cs .url-box{ display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.cs .url-box select{ border: 0; background: var(--surface-2); color: var(--brand-3); font-weight: 800; padding: 9px 8px; border-right: 1px solid var(--line); }
.cs .url-box input{ border: 0; background: none; flex: 1; min-width: 0; padding: 9px 10px; color: var(--ink); }
.cs .url-box:focus-within{ outline: 2px solid var(--brand-3); outline-offset: -1px; }
.cs .cfg-sec{ border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cs .cfg-sec-h{ width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: var(--surface-2); padding: 11px 14px; font-weight: 650; color: var(--ink); }
.cs .cfg-sec-b{ padding: 12px 14px; }
.cs .kv{ display: flex; flex-direction: column; gap: 6px; }
.cs .kv-h, .cs .kv-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.cs .kv.out .kv-h, .cs .kv.out .kv-row{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 130px 40px; }
.cs .kv-h span{ font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.cs .test-out{ border: 1px dashed color-mix(in srgb, var(--ok) 50%, var(--line)); border-radius: 10px; padding: 10px; background: var(--ok-tint); }
@media (max-width: 560px){.cs .kv-h{ display: none; }
.cs .kv-row, .cs .kv.out .kv-row{ grid-template-columns: minmax(0, 1fr) 40px; }}
.cs .wh-card{ display: flex; flex-direction: column; gap: 6px; }
.cs .wh-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.cs .wh-box{ border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 12px; }
.cs .ev-chip{ display: inline-flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--brand-3) 40%, var(--line)); background: var(--surface); color: var(--brand-3); font-weight: 600; font-size: 12px; border-radius: 7px; padding: 3px 9px; }
.cs .ev-chip.on{ background: var(--brand-3); color: #fff; }
.cs .hdr-list{ list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cs .hdr-list li{ display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.cs .ev-groups{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; }
.cs .auto-color{ --sec-a: #2563EB; --sec-b: #7C3AED; }
.cs .auto-color[data-sec="welcome"]{ --sec-a: #16A34A; --sec-b: #0EA5E9; }
.cs .auto-color[data-sec="hours"]{ --sec-a: #F59E0B; --sec-b: #EF4444; }
.cs .auto-color[data-sec="replies"]{ --sec-a: #8B5CF6; --sec-b: #EC4899; }
.cs .auto-color[data-sec="quick"]{ --sec-a: #0EA5E9; --sec-b: #6366F1; }
.cs .auto-color[data-sec="workflows"]{ --sec-a: #EA580C; --sec-b: #F59E0B; }
.cs .auto-color[data-sec="ice"]{ --sec-a: #06B6D4; --sec-b: #22C55E; }
.cs .auto-color[data-sec="bots"]{ --sec-a: #6366F1; --sec-b: #A855F7; }
.cs .auto-color[data-sec="feedback"]{ --sec-a: #F43F5E; --sec-b: #F97316; }
.cs .auto-color[data-sec="routing"]{ --sec-a: #14B8A6; --sec-b: #3B82F6; }
.cs .auto-color .auto-nav{ background: linear-gradient(180deg, color-mix(in srgb, var(--sec-a) 6%, var(--surface)), var(--surface) 60%); }
.cs .auto-color .auto-item{ padding: 7px 8px; gap: 10px; transition: background .15s ease, transform .15s ease; }
.cs .auto-color .auto-item:hover{ transform: translateX(2px); }
.cs .ai-tile{ display: inline-grid; place-items: center; flex: none; }
.cs .auto-color .ai-tile{ width: 30px; height: 30px; border-radius: 9px; color: #fff; box-shadow: 0 4px 10px -6px rgba(0,0,0,.5); }
.cs .auto-color .ai-tile .ico{ color: #fff !important; }
.cs .auto-color .auto-item[data-sec="welcome"] .ai-tile{ background: linear-gradient(135deg, #16A34A, #0EA5E9); }
.cs .auto-color .auto-item[data-sec="hours"] .ai-tile{ background: linear-gradient(135deg, #F59E0B, #EF4444); }
.cs .auto-color .auto-item[data-sec="replies"] .ai-tile{ background: linear-gradient(135deg, #8B5CF6, #EC4899); }
.cs .auto-color .auto-item[data-sec="quick"] .ai-tile{ background: linear-gradient(135deg, #0EA5E9, #6366F1); }
.cs .auto-color .auto-item[data-sec="ice"] .ai-tile{ background: linear-gradient(135deg, #06B6D4, #22C55E); }
.cs .auto-color .auto-item[data-sec="bots"] .ai-tile{ background: linear-gradient(135deg, #6366F1, #A855F7); }
.cs .auto-color .auto-item[data-sec="workflows"] .ai-tile{ background: linear-gradient(135deg, #EA580C, #F59E0B); color: #fff; }
.cs .auto-color .auto-item[data-sec="feedback"] .ai-tile{ background: linear-gradient(135deg, #F43F5E, #F97316); }
.cs .auto-color .auto-item[data-sec="routing"] .ai-tile{ background: linear-gradient(135deg, #14B8A6, #3B82F6); }
.cs .auto-color .auto-item[aria-current="true"]{ background: color-mix(in srgb, var(--sec-a) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--sec-a); }
.cs .auto-color .auto-body{ background: radial-gradient(1200px 300px at 100% 0, color-mix(in srgb, var(--sec-b) 7%, transparent), transparent), var(--bg); }
.cs .auto-color .auto-body > div > .auto-head, .cs .auto-color .auto-body > div > div > .auto-head{ position: relative; overflow: hidden; padding: 18px 20px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, var(--sec-a), var(--sec-b)); box-shadow: 0 16px 34px -22px var(--sec-a); }
.cs .auto-color .auto-body .auto-head::after{ content: ''; position: absolute; right: -30px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none; }
.cs .auto-color .auto-body .auto-head h2{ color: #fff; font-size: 19px; }
.cs .auto-color .auto-body .auto-head p{ color: rgba(255,255,255,.9); }
.cs .auto-color .auto-body .auto-head .lbl{ color: #fff; }
.cs .auto-color .auto-body .auto-head .btn:not(.primary){ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.cs .auto-color .auto-body .auto-head .btn.primary{ background: #fff; color: var(--sec-a); }
.cs .auto-color .auto-body .auto-head .tgl[aria-checked="true"]{ background: #fff; }
.cs .auto-color .auto-body .panel{ border-top: 3px solid color-mix(in srgb, var(--sec-a) 70%, transparent); }
.cs .auto-color .rank-badge{ background: linear-gradient(135deg, var(--sec-a), var(--sec-b)); color: #fff; border: 0; }
.cs .auto-color .route-item{ transition: box-shadow .15s ease; }
.cs .auto-color .route-item:hover{ box-shadow: 0 8px 20px -14px var(--sec-a); }
.cs .auto-color .seg button[aria-checked="true"]{ background: linear-gradient(135deg, var(--sec-a), var(--sec-b)); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce){.cs .auto-color .auto-item:hover{ transform: none; }}
.cs .al-intro{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sec-a, #14B8A6) 35%, var(--line)); background: color-mix(in srgb, var(--sec-a, #14B8A6) 7%, var(--surface)); }
.cs .al-intro > div{ flex: 1; min-width: 220px; }
.cs .al-ic{ width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sec-a, #14B8A6), var(--sec-b, #3B82F6)); flex: none; }
.cs .al-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cs .al-card{ display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); border-top: 3px solid var(--sec-a, #14B8A6); transition: box-shadow .15s ease; }
.cs .al-card:hover{ box-shadow: 0 10px 24px -16px rgba(0,0,0,.35); }
.cs .al-card.off{ opacity: .6; }
.cs .kw-chips{ display: flex; flex-wrap: wrap; gap: 5px; }
.cs .kw{ display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sec-a, #14B8A6) 14%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--sec-a, #14B8A6) 35%, var(--line)); }
.cs .kw button{ border: 0; background: none; padding: 0 0 0 2px; color: var(--ink-3); font-size: 14px; line-height: 1; }
.cs .al-then{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .al-op{ display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; }
.cs .al-op.add{ color: var(--ok-strong); }
.cs .al-op.rem{ color: var(--danger-strong); }
.cs .pick-labels{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .pick-labels button{ border: 2px solid transparent; background: none; padding: 1px; border-radius: 999px; opacity: .55; transition: opacity .15s ease, border-color .15s ease; }
.cs .pick-labels button[aria-pressed="true"]{ opacity: 1; border-color: var(--ink); }
.cs .notif-nav{ position: relative; }
.cs .notif-badge{ position: absolute; top: 4px; right: 12px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.cs .notif-nav.has .ico{ animation: bellring 3.5s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes bellring{ 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(12deg); } 92% { transform: rotate(-10deg); } 95% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce){.cs .notif-nav.has .ico{ animation: none; }}
.cs .notes-top{ display: flex; align-items: center; gap: 10px; }
.cs .live-dot{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--wa-strong); background: var(--wa-tint); padding: 2px 9px; border-radius: 999px; }
.cs .note-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .note{ display: flex; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); border-left: 4px solid var(--n-c, var(--info)); animation: popin .2s ease; }
.cs .note.read{ background: var(--surface-2); }
.cs .note.k-critical{ --n-c: #E5484D; }
.cs .note.k-warning{ --n-c: #F59E0B; }
.cs .note.k-success{ --n-c: #22A565; }
.cs .note.k-info{ --n-c: #3B82F6; }
.cs .note.k-tip{ --n-c: #8B5CF6; }
.cs .note-ic{ width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: var(--n-c); }
.cs .note-main{ flex: 1; min-width: 0; }
.cs .note-h{ display: flex; align-items: center; gap: 6px; }
.cs .note-h b{ font-size: 13.5px; }
.cs .dot-new{ width: 8px; height: 8px; border-radius: 50%; background: var(--n-c); flex: none; }
.cs .note-main p{ margin: 3px 0 6px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.cs .note-f{ display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs .share-bar{ display: inline-block; width: 90px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.cs .share-bar i{ display: block; height: 100%; border-radius: 999px; }
.cs .chan-grid{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cs .cc-txt span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .cc-txt b{ white-space: nowrap; }
.cs .nav-new{ position: absolute; top: 3px; right: 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899); padding: 1px 5px; border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); animation: newglow 2.8s ease-in-out infinite; }
@keyframes newglow{ 0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 0 rgba(236,72,153,.0); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 10px 2px rgba(236,72,153,.45); } }
@media (prefers-reduced-motion: reduce){.cs .nav-new{ animation: none; }}
.cs .new-pill{ font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899); padding: 3px 9px; border-radius: 999px; vertical-align: middle; }
.cs .label-sel{ display: inline-flex; align-items: center; gap: 6px; }
.cs .ct-body{ display: flex; flex-direction: column; gap: 14px; }
.cs .ct-chan{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; width: fit-content; max-width: 100%; }
.cs .ct-chan button{ display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 999px; padding: 6px 13px; font-weight: 600; font-size: 13px; color: var(--ink-2); transition: background .15s ease, color .15s ease; position: relative; }
.cs .ct-chan button:hover{ color: var(--ink); background: var(--surface-2); }
.cs .ct-chan button[aria-selected="true"]{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; }
.cs .ct-chan button[aria-selected="true"][data-ch="WHATSAPP"]{ background: linear-gradient(135deg, #25D366, #128C7E); }
.cs .ct-chan button[aria-selected="true"] .ico{ color: #fff !important; }
.cs .on-dot{ width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 2px var(--surface); }
.cs .ct-tabs{ display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.cs .ct-tabs button{ display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 8px 14px; font-weight: 650; color: var(--ink-2); transition: all .15s ease; }
.cs .ct-tabs button:hover{ color: var(--ink); border-color: color-mix(in srgb, var(--brand-3) 45%, var(--line)); }
.cs .ct-tabs button[aria-selected="true"]{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -10px var(--brand-3); }
.cs .ct-tabs .count{ font-size: 11px; font-weight: 800; background: rgba(0,0,0,.08); padding: 0 6px; border-radius: 999px; }
.cs .ct-tabs button[aria-selected="true"] .count{ background: rgba(255,255,255,.25); }
.cs .ct-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.cs .ct-filters{ display: flex; gap: 10px; flex-wrap: wrap; }
.cs .ct-filters > select{ width: 200px; max-width: 100%; }
.cs .ct-actions{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 12px; }
.cs .btn.ct-grad{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; border-color: transparent; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.cs .btn.ct-grad:hover:not([disabled]){ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); filter: brightness(.93); transform: translateY(-1px); box-shadow: 0 6px 16px -8px var(--brand-3); }
.cs .btn.ct-grad .ico{ color: #fff; }
.cs .btn.ct-soft{ background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand-3) 30%, var(--line)); }
.cs .ct-bulk{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: var(--brand-tint); }
.cs .ct-bulk select{ width: auto; }
.cs .ct-table thead th{ background: var(--surface-2); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
.cs .ct-table tr[aria-selected="true"] td{ background: var(--brand-tint); }
.cs .ct-who{ display: flex; align-items: center; gap: 10px; }
.cs .ct-who span{ display: flex; flex-direction: column; }
.cs .ct-who small{ color: var(--ink-3); font-size: 12px; }
.cs .ct-cons{ display: inline-flex; gap: 4px; }
.cs .cons{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); }
.cs .cons.opted_in{ border-color: #22C55E; background: color-mix(in srgb, #22C55E 12%, var(--surface)); }
.cs .cons.pending{ border-color: #F59E0B; background: color-mix(in srgb, #F59E0B 12%, var(--surface)); }
.cs .cons.opted_out{ border-color: #E5484D; background: color-mix(in srgb, #E5484D 12%, var(--surface)); opacity: .7; }
.cs .ct-empty{ display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-3); padding: 30px 0; }
.cs .ct-pager{ display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--line); }
.cs .imp-steps{ display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.cs .imp-steps span{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2); }
.cs .imp-steps b{ width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--ink-2); font-size: 11px; }
.cs .imp-steps span.on{ color: var(--ink); background: var(--brand-tint); }
.cs .imp-steps span.on b{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; }
.cs .imp-drop, .cs .ai-drop{ display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 30px 16px; border: 2px dashed color-mix(in srgb, var(--brand-3) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--brand-3) 4%, var(--surface)); color: var(--brand-3); transition: background .15s ease, border-color .15s ease; }
.cs .imp-drop.drag, .cs .ai-drop.drag{ background: var(--brand-tint); border-color: var(--brand-3); }
.cs .imp-drop b, .cs .ai-drop b{ color: var(--ink); }
.cs .map-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cs .consent-box{ padding: 12px; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); border-radius: 10px; background: var(--ok-tint); margin-top: 0; }
.cs .imp-done{ display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.cs .imp-ok{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-tint); color: var(--ok-strong); }
.cs .grp-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cs .grp-card{ --g: var(--brand-3); display: flex; flex-direction: column; gap: 6px; min-height: 170px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--g) 10%, var(--surface)), var(--surface) 55%); border-top: 3px solid var(--g); transition: box-shadow .15s ease, transform .15s ease; }
.cs .grp-card:hover{ box-shadow: 0 12px 26px -18px var(--g); transform: translateY(-1px); }
.cs .grp-type{ font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--g) 16%, var(--surface)); color: var(--g); }
.cs .grp-n{ font-size: 12px; color: var(--ink-3); }
.cs .grp-n b{ font-size: 16px; color: var(--ink); }
.cs .grp-name{ font-size: 15px; }
.cs .grp-pick{ display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line) !important; background: var(--surface) !important; padding: 3px 10px !important; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cs .rule-row{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.2fr) 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.cs .op-fixed{ text-align: center; }
.cs .inline-sel{ display: inline-block; width: auto; padding: 2px 6px; margin: 0 4px; }
.cs .ai-body{ display: flex; flex-direction: column; gap: 14px; }
.cs .ai-hero{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #6D28D9, #A855F7 45%, #EC4899); box-shadow: 0 18px 36px -24px #7C3AED; position: relative; overflow: hidden; }
.cs .ai-hero::after{ content: ''; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); }
.cs .ai-hero-ic{ width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; }
.cs .ai-hero-ic .ico, .cs .ai-hero .ico{ color: #fff; }
.cs .ai-hero-txt{ flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; z-index: 1; }
.cs .ai-hero-txt b{ font-size: 16px; }
.cs .ai-hero-txt span{ font-size: 12.5px; opacity: .9; }
.cs .ai-hero-stats{ display: flex; gap: 18px; z-index: 1; }
.cs .ai-hero-stats span{ display: flex; flex-direction: column; font-size: 11.5px; opacity: .92; }
.cs .ai-hero-stats b{ font-size: 20px; }
.cs .ai-top{ display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .ai-ch-ctl{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .ai-ch-ctl select{ width: auto; }
.cs .ai-tabs{ display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.cs .ai-tabs button{ display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; background: none; border-radius: 10px; padding: 8px 14px; font-weight: 650; color: var(--ink-2); transition: all .15s ease; }
.cs .ai-tabs button:hover{ background: var(--surface-2); color: var(--ink); }
.cs .ai-tabs button[aria-selected="true"]{ background: linear-gradient(135deg, #7C3AED, #A855F7); color: #fff; box-shadow: 0 6px 16px -10px #7C3AED; }
.cs .ai-tabs button[aria-selected="true"] .ico{ color: #fff; }
.cs .ai-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; min-width: 0; }
.cs .ai-card-h{ display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cs .ai-card-h h2{ margin: 0; font-size: 17px; color: #6D28D9; }
:root[data-theme="dark"] .ai-card-h h2{ color: #C4B5FD; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ai-card-h h2{ color: #C4B5FD; }}
.cs .ai-cap{ margin-left: auto; }
.cs .ai-drop{ border-color: color-mix(in srgb, #7C3AED 35%, var(--line)); background: color-mix(in srgb, #7C3AED 4%, var(--surface)); color: #7C3AED; }
.cs .ai-off{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px; color: var(--ink-3); text-align: center; }
.cs .ai-off b{ color: var(--ink-2); }
.cs .ai-list{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs .ai-list li{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.cs .ai-list li .grow{ display: flex; flex-direction: column; min-width: 0; }
.cs .ai-list li b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .ai-list small{ font-size: 12px; color: var(--ink-3); }
.cs .ai-doc-ic{ width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 800; color: #fff; background: #7C3AED; }
.cs .ai-doc-ic.url{ background: #0EA5E9; }
.cs .ai-doc-ic.m-pdf{ background: #E5252A; }
.cs .ai-doc-ic.m-image{ background: #007BFC; }
.cs .ai-doc-ic.m-video{ background: #E3266C; }
.cs .ai-doc-ic .ico{ color: #fff; }
.cs .inp.trig{ margin-top: 4px; padding: 4px 8px; font-size: 12.5px; }
.cs .media-up{ display: inline-flex; flex-direction: column; gap: 4px; }
.cs .faq-list{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cs .faq-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 32px; gap: 8px; align-items: start; }
@media (max-width: 700px){.cs .faq-row{ grid-template-columns: minmax(0, 1fr) 32px; }
.cs .faq-row textarea{ grid-column: 1; }}
.cs .ai-grid2{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px){.cs .ai-grid2{ grid-template-columns: minmax(0, 1fr); }}
.cs .prov-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cs .prov{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.cs .prov small{ font-size: 11.5px; color: var(--ink-3); }
.cs .prov:hover{ border-color: color-mix(in srgb, #7C3AED 50%, var(--line)); }
.cs .prov[aria-pressed="true"]{ border-color: #7C3AED; background: color-mix(in srgb, #7C3AED 8%, var(--surface)); box-shadow: inset 0 0 0 1px #7C3AED; }
.cs .btn.ai-save{ min-width: 220px; justify-content: center; border-radius: 999px; background: linear-gradient(90deg, #6D28D9, #A78BFA) !important; }
.cs .ai-flow{ margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.cs .ai-flow li{ padding-left: 4px; }
.cs .ai-flow li::marker{ color: #7C3AED; font-weight: 800; }
.cs .ai-play{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px){.cs .ai-play{ grid-template-columns: minmax(0, 1fr); }}
.cs .ai-chat{ display: flex; flex-direction: column; }
.cs .pg-thread{ height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #EFEAE2; background-image: radial-gradient(rgba(17,27,33,.05) 1.2px, transparent 1.3px); background-size: 15px 15px; }
:root[data-theme="dark"] .pg-thread{ background-color: #0B141A; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pg-thread{ background-color: #0B141A; }}
.cs .pg-empty{ margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #54656F; }
.cs .pg-sugg{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px; }
.cs .pg-sugg button{ border: 1px solid rgba(0,0,0,.08); background: #fff; color: #027EB5; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
.cs .pg-msg{ max-width: 80%; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px .5px rgba(0,0,0,.13); white-space: pre-wrap; display: flex; flex-direction: column; gap: 4px; color: #111B21; }
.cs .pg-msg.user{ align-self: flex-end; background: #D9FDD3; border-top-right-radius: 2px; }
.cs .pg-msg.assistant{ align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.cs .pg-msg.system{ align-self: center; background: #FFEECD; color: #54656F; font-size: 12.5px; max-width: 92%; text-align: center; }
.cs .pg-ho{ font-style: normal; font-size: 11.5px; color: #B45309; display: inline-flex; align-items: center; gap: 4px; }
.cs .pg-media{ display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.05); font-weight: 600; font-size: 12.5px; }
.cs .pg-msg.typing{ flex-direction: row; gap: 4px; padding: 10px 12px; }
.cs .pg-msg.typing i{ width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: blink 1.2s infinite; }
.cs .pg-msg.typing i:nth-child(2){ animation-delay: .2s; }
.cs .pg-msg.typing i:nth-child(3){ animation-delay: .4s; }
@keyframes blink{ 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.cs .pg-input{ display: flex; gap: 8px; margin-top: 10px; }
.cs .conf-bar{ height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 4px 0; }
.cs .conf-bar i{ display: block; height: 100%; background: linear-gradient(90deg, #A855F7, #22C55E); border-radius: 999px; }
.cs .src-list{ margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.cs .src-list p{ margin: 2px 0 0; color: var(--ink-2); font-size: 12.5px; }
.cs .ai-why details summary{ cursor: pointer; font-weight: 600; font-size: 13px; }
.cs .sub-tabs{ display: flex; gap: 18px; border-bottom: 1px solid var(--line); }
.cs .sub-tabs button{ border: 0; background: none; padding: 8px 2px; font-weight: 650; color: var(--ink-2); border-bottom: 2.5px solid transparent; }
.cs .sub-tabs button[aria-selected="true"]{ color: #7C3AED; border-bottom-color: #7C3AED; }
.cs .voice-fund{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs .voice-fund > div{ flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.cs .vf-ic{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #7C3AED 12%, var(--surface)); color: #7C3AED; }
.cs .ai-kpis .kpi .v{ background: linear-gradient(135deg, #7C3AED, #EC4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs .ai-tag{ display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #7C3AED; margin-bottom: 4px; }
.cs .btn.ai-draft{ border-color: color-mix(in srgb, #7C3AED 40%, var(--line)); color: #7C3AED; }
.cs .btn.ai-draft:hover:not([disabled]){ background: color-mix(in srgb, #7C3AED 8%, var(--surface)); }
.cs .event-line.ev-ai > span{ background: color-mix(in srgb, #7C3AED 10%, var(--surface)); border-color: color-mix(in srgb, #7C3AED 35%, var(--line)); }
.cs .ai-body > *, .cs .ct-body > *{ flex-shrink: 0; }
.cs .bot-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cs .bot-card{ --bc: #1596A9; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: visible; transition: box-shadow .18s ease, transform .18s ease; }
.cs .bot-card:hover{ box-shadow: 0 14px 30px -20px var(--bc); transform: translateY(-1px); }
.cs .bot-head{ display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--bc) 10%, var(--surface)), var(--surface)); border-radius: 16px 16px 0 0; }
.cs .bot-av{ border-radius: 10px; display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06); background: #fff; }
.cs .bot-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .bot-t b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.cs .bot-t span{ display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .bot-st{ display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.cs .bot-st.ready{ color: var(--ok-strong); background: var(--ok-tint); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); }
.cs .bot-st.indexing{ color: var(--info-strong); background: var(--info-tint); }
.cs .spin{ width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg); } }
.cs .bot-body{ padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cs .bot-type{ --tc: #2563EB; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line)); padding: 2px 9px; border-radius: 7px; }
.cs .bot-dl{ margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.cs .bot-dl div{ display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.cs .bot-dl dt{ color: var(--ink-3); }
.cs .bot-dl dd{ margin: 0; font-weight: 600; text-align: right; }
.cs .bot-acts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs .bot-acts .btn{ justify-content: center; }
.cs .btn.bot-soft{ background: var(--brand-tint); color: var(--brand-3); border-color: color-mix(in srgb, var(--brand-3) 30%, var(--line)); }
.cs .bot-new{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; border: 2px dashed color-mix(in srgb, var(--brand-3) 35%, var(--line)); border-radius: 16px; background: transparent; color: var(--ink-2); padding: 20px; text-align: center; transition: background .15s ease, border-color .15s ease; }
.cs .bot-new span{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); }
.cs .bot-new span .ico{ color: #fff; }
.cs .bot-new small{ color: var(--ink-3); max-width: 220px; }
.cs .bot-new:hover{ background: var(--brand-tint); border-color: var(--brand-3); }
.cs .wiz-steps{ list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 8px; align-items: center; }
.cs .wiz-steps li{ display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-3); flex: 1; }
.cs .wiz-steps li:not(:last-child)::after{ content: ''; flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 12px; }
.cs .wiz-steps b{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; flex: none; }
.cs .wiz-steps li.on{ color: var(--ink); }
.cs .wiz-steps li.on b{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; border-color: transparent; }
.cs .wiz-steps li.done{ color: var(--ink-2); }
.cs .wiz-steps li.done b{ background: var(--ok-tint); color: var(--ok-strong); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.cs .wiz-steps li.done::after{ background: var(--ok); }
@media (max-width: 600px){.cs .wiz-steps span{ display: none; }
.cs .wiz-steps li.on span{ display: inline; }}
.cs .url-ic{ padding: 0 0 0 10px; color: var(--ink-3); display: grid; place-items: center; }
.cs .type-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px){.cs .type-grid{ grid-template-columns: minmax(0, 1fr); }}
.cs .type-opt{ --tc: #2563EB; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s ease, background .15s ease; }
.cs .type-opt .ico{ color: var(--tc); }
.cs .type-opt b{ flex: 1; font-size: 14px; }
.cs .type-opt .radio{ width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.cs .type-opt[aria-pressed="true"]{ border-color: var(--brand-3); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand-3); }
.cs .type-opt[aria-pressed="true"] .radio{ border-color: var(--brand-3); background: radial-gradient(var(--brand-3) 45%, transparent 50%); }
.cs .sheets-row{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, #22A565 40%, var(--line)); background: color-mix(in srgb, #22A565 7%, var(--surface)); }
.cs .sheets-row .ico{ color: #fff; }
.cs .opt-tag{ font-size: 11px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line); padding: 0 6px; border-radius: 5px; margin-left: 4px; }
.cs .wiz2{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 860px){.cs .wiz2{ grid-template-columns: minmax(0, 1fr); }}
.cs .color-box{ display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 4px 4px; background: var(--surface); }
.cs .color-box input{ width: 30px; height: 30px; border: 0; padding: 0; background: none; border-radius: 6px; cursor: pointer; }
.cs .divider-t{ display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.cs .divider-t::before, .cs .divider-t::after{ content: ''; flex: 1; height: 1px; background: var(--line); }
.cs .model-box{ padding: 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, #7C3AED 30%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #7C3AED 7%, var(--surface)), var(--surface)); }
.cs .model-box > b{ color: #6D28D9; }
.cs .wp-wrap{ display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; }
.cs .wp-site{ position: relative; height: 380px; border-radius: 12px; border: 1px solid var(--line); background: #F8FAFC; overflow: hidden; box-shadow: 0 10px 26px -18px rgba(0,0,0,.4); }
.cs .wp-bar{ display: flex; align-items: center; gap: 5px; padding: 7px 9px; background: #E2E8F0; }
.cs .wp-bar i{ width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; }
.cs .wp-bar span{ margin-left: 6px; font-size: 10px; color: #475569; background: #fff; border-radius: 5px; padding: 2px 8px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs .wp-page{ padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cs .wp-l{ height: 8px; border-radius: 4px; background: #E2E8F0; display: block; }
.cs .w60{ width: 60%; }
.cs .w90{ width: 90%; }
.cs .w75{ width: 75%; }
.cs .w50{ width: 50%; }
.cs .wp-blk{ height: 54px; border-radius: 8px; background: #E2E8F0; display: block; }
.cs .wp-chat{ position: absolute; right: 10px; bottom: 52px; width: 200px; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px -12px rgba(0,0,0,.35); overflow: hidden; color: #111827; }
.cs .wp-chat.left{ right: auto; left: 10px; }
.cs .wp-head{ display: flex; align-items: center; gap: 8px; padding: 8px; color: #fff; }
.cs .wp-head span{ display: flex; flex-direction: column; min-width: 0; }
.cs .wp-head b{ font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wp-head small{ font-size: 9.5px; opacity: .9; }
.cs .wp-msgs{ padding: 8px; background: #F8FAFC; min-height: 70px; }
.cs .wp-bot{ display: block; font-size: 10.5px; line-height: 1.4; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 6px 8px; }
.cs .wp-btn{ position: absolute; right: 10px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
.cs .wp-btn.left{ right: auto; left: 10px; }
.cs .wp-btn .ico{ color: #fff; }
.cs .drawer-ov{ position: fixed; inset: 0; z-index: 60; background: rgba(15,23,42,.35); display: flex; justify-content: flex-end; animation: fadein .15s ease; }
@keyframes fadein{ from { opacity: 0; } to { opacity: 1; } }
.cs .drawer{ width: min(440px, 100%); height: 100%; background: var(--surface); display: flex; flex-direction: column; box-shadow: -20px 0 40px -20px rgba(0,0,0,.4); animation: slidein .22s ease; }
@keyframes slidein{ from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){.cs .drawer, .cs .drawer-ov{ animation: none; }}
.cs .drawer-h{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cs .drawer-h span{ display: flex; flex-direction: column; min-width: 0; }
.cs .drawer-h small{ font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .drawer-chat{ --bc: #1596A9; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-2); }
.cs .dc-msgs{ flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cs .dc-m{ max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.cs .dc-m.assistant{ align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 3px; }
.cs .dc-m.user{ align-self: flex-end; background: var(--bc); color: #fff; border-top-right-radius: 3px; }
.cs .dc-m.typing{ display: flex; gap: 4px; }
.cs .dc-m.typing i{ width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.cs .dc-m.typing i:nth-child(2){ animation-delay: .2s; }
.cs .dc-m.typing i:nth-child(3){ animation-delay: .4s; }
.cs .dc-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cs .dc-chips button{ border: 1px solid color-mix(in srgb, var(--bc) 50%, var(--line)); color: var(--bc); background: var(--surface); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
.cs .dc-in{ display: flex; gap: 8px; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.cs .dc-send{ width: 38px; height: 38px; border-radius: 50%; border: 0; color: #fff; display: grid; place-items: center; flex: none; }
.cs .dc-send .ico{ color: #fff; }
.cs .dc-send[disabled]{ opacity: .5; }
.cs .dc-foot{ text-align: center; font-size: 11px; color: var(--ink-3); padding: 0 0 8px; background: var(--surface); }
.cs .embed-steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px){.cs .embed-steps{ grid-template-columns: minmax(0, 1fr); }}
.cs .embed-steps > div{ display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.cs .embed-steps b{ width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; font-size: 11px; flex: none; }
.cs .embed-steps .ok{ background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.cs .embed-steps .ok b{ background: var(--ok); }
.cs .cms-steps{ margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.cs .cms-steps li::marker{ color: var(--brand-3); font-weight: 800; }
.cs .page-head{ position: relative; }
.cs .page-head::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--fill-1), var(--fill-2), var(--fill-3)); opacity: .85; }
.cs .page-head h1{ background: linear-gradient(90deg, var(--ink) 60%, var(--fill-2)); -webkit-background-clip: text; background-clip: text; }
.cs .view{ background: radial-gradient(900px 260px at 100% 0, color-mix(in srgb, var(--brand-2) 6%, transparent), transparent), radial-gradient(700px 220px at 0 100%, color-mix(in srgb, var(--brand-1) 5%, transparent), transparent), var(--bg); }
.cs .nav{ background: linear-gradient(180deg, color-mix(in srgb, var(--brand-1) 5%, var(--surface)), var(--surface) 35%, color-mix(in srgb, var(--brand-3) 4%, var(--surface))); }
.cs .nav-item[aria-current="page"] .ico{ color: var(--brand-2); }
.cs .panel{ border-top-color: color-mix(in srgb, var(--brand-2) 18%, var(--line)); }
.cs .kpi .v, .cs .kpis .v{ color: var(--ink); }
.cs .btn.primary{ background: linear-gradient(135deg, var(--fill-1), var(--fill-2) 55%, var(--fill-3)); }
.cs .btn.primary:hover:not([disabled]){ background: linear-gradient(135deg, var(--fill-1), var(--fill-2) 55%, var(--fill-3)); }
.cs .bc-new{ background: transparent; }
.cs .bc-new .bc-form{ counter-reset: bcstep; padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.cs .bc-hero{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, var(--fill-1), var(--fill-2) 50%, var(--fill-3)); box-shadow: 0 18px 36px -26px var(--brand-3); position: relative; overflow: hidden; flex-shrink: 0; }
.cs .bc-hero::after{ content: ''; position: absolute; right: -50px; top: -70px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.13); }
.cs .bc-hero h1{ margin: 0; font-size: 22px; }
.cs .bc-hero p{ margin: 4px 0 0; opacity: .92; max-width: 56ch; }
.cs .bc-hero-txt{ z-index: 1; }
.cs .bc-hero-stats{ display: flex; gap: 10px; z-index: 1; flex-wrap: wrap; }
.cs .bc-hero-stats span{ display: flex; flex-direction: column; font-size: 11.5px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 8px 12px; min-width: 92px; }
.cs .bc-hero-stats b{ font-size: 19px; }
.cs .bc-card{ flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px !important; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cs .bc-card h2{ display: flex; align-items: center; gap: 10px; font-size: 16px !important; }
.cs .bc-card:not(.bc-formats-card) h2::before{ counter-increment: bcstep; content: counter(bcstep); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--fill-1), var(--fill-2)); flex: none; }
.cs .bc-card:nth-of-type(odd):not(.bc-formats-card) h2::before{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); }
.cs .bc-formats-card h2::before{ content: '✦'; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #F59E0B, #E5484D); font-size: 13px; }
.cs .bc-formats{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cs .bc-fmt{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cs .bc-fmt:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-2) 50%, var(--line)); box-shadow: 0 10px 22px -16px var(--brand-2); }
.cs .bc-fmt b{ font-size: 13.5px; }
.cs .bc-fmt small{ font-size: 11.5px; color: var(--ink-3); }
.cs .bc-fmt-ic{ width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; margin-bottom: 2px; }
.cs .bc-fmt-ic .ico{ color: #fff; }
.cs .bc-new .opt{ border-radius: 12px; transition: border-color .15s ease, background .15s ease; }
.cs .bc-new .opt[aria-checked="true"]{ border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--brand-2); }
.cs .bc-new .route-row{ border-radius: 12px; box-shadow: inset 4px 0 0 var(--c, var(--brand-2)); }
.cs .bc-new .route-row[data-ch="WHATSAPP"]{ --c: var(--wa); }
.cs .bc-new .route-row[data-ch="SMS"]{ --c: var(--sms); }
.cs .bc-new .route-row[data-ch="RCS"]{ --c: var(--rcs); }
.cs .bc-new .route-row[data-ch="EMAIL"]{ --c: var(--mail); }
.cs .bc-new .route-row.off{ box-shadow: inset 4px 0 0 var(--line); }
.cs .bc-new .tabs[role="tablist"]{ gap: 6px; border-bottom: 0; padding: 4px; background: var(--surface-2); border-radius: 12px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.cs .bc-new .tabs[role="tablist"] button{ border-radius: 9px; border-bottom: 0 !important; }
.cs .bc-new .tabs[role="tablist"] button[aria-selected="true"]{ background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cs .bc-new .bc-side{ background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 7%, var(--surface)), var(--surface) 30%); }
.cs .bc-new .bc-side > div:first-child{ padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand-2) 25%, var(--line)); box-shadow: 0 10px 24px -20px var(--brand-2); }
.cs .bc-new .reach-bar{ height: 12px; border-radius: 999px; }
.cs .bc-new .bc-side .btn.primary{ border-radius: 12px; font-size: 15px; box-shadow: 0 12px 24px -14px var(--brand-3); }
@media (prefers-reduced-motion: reduce){.cs .bc-fmt, .cs .bc-fmt:hover{ transition: none; transform: none; }}
.cs .ec{ display: flex; flex-direction: column; gap: 12px; }
.cs .ec-presets{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs .ec-chip{ border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cs .ec-chip:hover{ border-color: var(--mail); color: var(--ink); }
.cs .ec-env{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--mail) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mail) 25%, var(--line)); }
.cs .ec-wide{ grid-column: 1 / -1; }
.cs .ec-main{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
@media (max-width: 1500px){.cs .ec-main{ grid-template-columns: minmax(0, 1fr); }
.cs .ec-env{ grid-template-columns: minmax(0, 1fr); }}
.cs .ec-edit{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs .ec-style{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs .ec-style select{ width: auto; }
.cs .ec-style input[type=color]{ width: 28px; height: 28px; border: 0; padding: 0; background: none; border-radius: 6px; cursor: pointer; }
.cs .ec-blocks{ display: flex; flex-direction: column; gap: 4px; }
.cs .ec-row{ display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.cs .ec-row.on{ border-color: var(--mail); background: color-mix(in srgb, var(--mail) 7%, var(--surface)); }
.cs .ec-ic{ width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--mail); flex: none; }
.cs .ec-lbl{ flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; font-weight: 600; }
.cs .ec-lbl small{ font-weight: 400; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .ec-add{ align-self: flex-start; }
.cs .ec-addmenu{ position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: grid; grid-template-columns: repeat(2, 140px); gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 32px -14px rgba(0,0,0,.3); }
.cs .ec-addmenu button{ display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 7px 9px; border-radius: 8px; color: var(--ink); font-size: 13px; text-align: left; }
.cs .ec-addmenu button:hover{ background: var(--surface-2); }
.cs .ec-addmenu .ico{ color: var(--mail); }
.cs .ec-props{ display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--mail) 45%, var(--line)); background: var(--surface); }
.cs .ec-checks{ padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.cs .checks li.warnc{ color: var(--ink-2); }
.cs .checks li.warnc .ico{ color: var(--warn); }
.cs .ec-preview{ min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .ec-preview .seg button{ display: inline-flex; align-items: center; gap: 5px; }
.cs .ep-inbox{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cs .ep-av{ width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; flex: none; }
.cs .ep-inbox .grow{ display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.cs .ep-sub{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .ep-pre{ color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .ep-canvas{ border-radius: 12px; padding: 16px; border: 1px solid var(--line); max-height: 620px; overflow-y: auto; transition: padding .2s ease; }
.cs .ep-canvas.mobile{ padding: 16px calc(50% - 190px); }
.cs .ep-mail{ background: #fff; color: #111827; border-radius: 10px; overflow: hidden; max-width: 600px; margin: 0 auto; box-shadow: 0 8px 24px -18px rgba(0,0,0,.5); }
.cs .ep-canvas.mobile .ep-mail{ max-width: 380px; }
.cs .ep-brand{ padding: 16px 24px 0; font: 700 16px Arial, sans-serif; }
.cs .ep-body{ padding: 0 24px 8px; }
.cs .ep-blk{ border-radius: 6px; outline: 2px solid transparent; outline-offset: 3px; cursor: pointer; transition: outline-color .12s ease; }
.cs .ep-blk:hover{ outline-color: color-mix(in srgb, var(--mail) 40%, transparent); }
.cs .ep-blk.on{ outline-color: var(--mail); }
.cs .ep-imgph{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 150px; border-radius: 8px; background: #F3F4F6; color: #9CA3AF; font-size: 12px; margin: 10px 0; }
.cs .ep-prod{ display: flex; align-items: center; gap: 10px; border: 1px solid #E5E7EB; border-radius: 10px; padding: 8px 10px; margin: 8px 0; color: #111827; }
.cs .ep-prod img, .cs .ep-prod-ph{ width: 54px; height: 54px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; background: #F3F4F6; color: #9CA3AF; flex: none; }
.cs .ep-foot{ padding: 16px 24px 20px; font: 11px/1.6 Arial, sans-serif; color: #9CA3AF; text-align: center; border-top: 1px solid #F3F4F6; }
.cs .ec-test{ gap: 8px; }
.cs .email-an{ border-top: 3px solid var(--mail); }
.cs .ea-kpis{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.cs .ea-kpis > div{ display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--mail) 8%, var(--surface)), var(--surface)); border: 1px solid var(--line); }
.cs .ea-kpis .v{ font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cs .ea-kpis .l{ font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cs .ea-kpis .s{ font-size: 11.5px; color: var(--ink-3); }
.cs .ea-grid{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1100px){.cs .ea-grid{ grid-template-columns: minmax(0, 1fr); }}
.cs .ea-chart{ width: 100%; height: 150px; display: block; background: repeating-linear-gradient(0deg, transparent 0 36px, var(--line) 36px 37px); border-radius: 8px; }
.cs .ea-legend{ display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin: 6px 0; }
.cs .ea-legend i{ display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cs .ea-row{ display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.cs .ea-row > span:first-child{ flex: 1; min-width: 0; }
.cs .ea-bar{ width: 110px; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cs .ea-bar i{ display: block; height: 100%; background: linear-gradient(90deg, var(--fill-1), var(--fill-2)); border-radius: 999px; }
.cs .ea-stack{ display: flex; height: 12px; border-radius: 999px; overflow: hidden; }
.cs .ea-stack i{ display: block; height: 100%; }
.cs .es-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cs .es-head > div:first-child{ flex: 1; min-width: 280px; }
.cs .es-tracks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 800px){.cs .es-tracks{ grid-template-columns: minmax(0, 1fr); }}
.cs .es-track{ display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.cs .es-track[aria-pressed="true"]{ border-color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-2), 0 12px 26px -20px var(--brand-2); background: linear-gradient(160deg, color-mix(in srgb, var(--brand-2) 7%, var(--surface)), var(--surface)); }
.cs .es-track .grow{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs .es-track small{ color: var(--ink-3); font-size: 12px; }
.cs .es-ic{ width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fill-1), var(--fill-2)); flex: none; }
.cs .es-track:last-child .es-ic{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); }
.cs .es-ic .ico{ color: #fff; }
.cs .es-prog{ height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.cs .es-prog i{ display: block; height: 100%; background: linear-gradient(90deg, var(--fill-1), var(--fill-2), var(--fill-3)); }
.cs .es-steps{ display: flex; flex-direction: column; gap: 8px; }
.cs .es-step{ border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.cs .es-step-h{ width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 12px 14px; text-align: left; color: var(--ink); }
.cs .es-step-h b{ flex: 1; font-size: 14.5px; }
.cs .es-n{ width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); flex: none; }
.cs .es-step.open .es-n{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; border-color: transparent; }
.cs .es-step.done .es-n{ background: var(--ok-tint); color: var(--ok-strong); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.cs .es-step.open{ border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); }
.cs .es-step-b{ padding: 0 14px 14px 50px; }
@media (max-width: 600px){.cs .es-step-b{ padding-left: 14px; }}
.cs .dns td{ vertical-align: top; }
.cs .dns-v{ word-break: break-all; max-width: 320px; font-size: 12px; }
.cs .es-rules li .ico{ flex: none; }
@media (min-width: 821px) and (max-height: 860px){.cs .nav{ gap: 2px; padding: 8px 8px; }
.cs .nav-item{ padding: 7px 2px; }
.cs .nav-logo{ padding: 0 0 6px; margin-bottom: 2px; }
.cs .nav-logo img{ width: 34px; height: 34px; }
.cs .nav-foot{ gap: 2px; padding-top: 4px; }
.cs .nav-foot .avatar{ display: none; }}
@media (min-width: 821px) and (max-height: 640px){.cs .nav-item{ padding: 4px 2px; }
.cs .nav-logo img{ width: 28px; height: 28px; }}
@media (min-width: 821px) and (max-height: 520px){.cs .nav{ overflow-y: auto; scrollbar-width: none; }
.cs .nav::-webkit-scrollbar{ display: none; }}
.cs .bc-new .bc-card{ position: relative; }
.cs .bc-new .bc-card + .bc-card::before{ content: ''; position: absolute; left: 32px; top: -15px; width: 2px; height: 14px; background: linear-gradient(180deg, var(--fill-2), var(--fill-3)); opacity: .55; }
.cs .bc-new .bc-layout, .cs .bc-layout.bc-new{ grid-template-columns: minmax(0, 1fr) 420px; }
.cs .bcu{ display: flex; flex-direction: column; gap: 12px; }
.cs .bcu-head{ display: flex; flex-direction: column; gap: 6px; }
.cs .bcu-pills{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .bcu-pills button{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; }
.cs .bcu-pills button:hover{ border-color: color-mix(in srgb, var(--brand-2) 45%, var(--line)); }
.cs .bcu-pills button[aria-selected="true"]{ border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 9%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brand-2); }
.cs .bcu-sample{ border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 5%, var(--surface)), var(--surface)); }
.cs .bcu-sample-top{ display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cs .bcu-sample-top p{ margin: 3px 0 0; max-width: 62ch; }
.cs .bcu-dl{ white-space: nowrap; border-color: color-mix(in srgb, var(--brand-1) 50%, var(--line)) !important; color: color-mix(in srgb, var(--brand-1) 75%, var(--ink)) !important; font-weight: 650 !important; }
.cs .bcu-dl:hover{ background: color-mix(in srgb, var(--brand-1) 10%, var(--surface)) !important; }
.cs .bcu-table{ overflow-x: auto; margin-top: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.cs .bcu-table table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cs .bcu-table th{ text-align: left; padding: 7px 10px; background: var(--surface-2); color: var(--ink-2); font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--line); }
.cs .bcu-table td{ padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.cs .bcu-table tr:last-child td{ border-bottom: 0; }
.cs .bcu-table td.cc{ font-weight: 650; color: color-mix(in srgb, var(--brand-3) 80%, var(--ink)); }
.cs .bcu-row{ display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.cs .bcu-row .fld{ flex: 0 0 auto; }
.cs .bcu-drop{ flex: 1; min-width: 220px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; cursor: pointer; position: relative; }
.cs .bcu-drop input[type=file]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cs .bc-cc{ max-width: 220px; }
.cs .bcp{ padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand-2) 25%, var(--line)); box-shadow: 0 10px 24px -20px var(--brand-2); }
.cs .bcp-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cs .bcp-top .side-h{ margin: 0; }
.cs .bcp-ch{ display: flex; gap: 4px; }
.cs .bcp-ch button{ width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.cs .bcp-ch button[aria-pressed="true"]{ border-color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-2); background: color-mix(in srgb, var(--brand-2) 8%, var(--surface)); }
.cs .bcp-phone{ display: flex; justify-content: center; }
.cs .bcp-phone .wap-wrap{ position: static; }
.cs .bcp-empty{ display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-3); font-size: 13px; }
.cs .bcp-sms{ border-radius: 18px; background: var(--surface-2); padding: 12px; }
.cs .bcp-sms-h{ display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; margin-bottom: 10px; color: var(--ink-2); }
.cs .bcp-verified{ display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--rcs, #2C6FD6); font-weight: 600; }
.cs .bcp-bubble{ background: var(--surface); border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; max-width: 92%; box-shadow: 0 1px 2px rgba(0,0,0,.06); white-space: pre-wrap; }
.cs .bcp-mail{ border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cs .bcp-mail-h{ display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.cs .bcp-mail-h small{ color: var(--ink-3); }
.cs .bcp-mail-b{ padding: 10px 12px; font-size: 13px; max-height: 280px; overflow: auto; }
.cs .bcp-mail-b p{ margin: 0 0 4px; }
.cs .bc-new .bc-side > .bc-reach{ padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cs .bc-new .bc-side > div:first-child{ padding: 0; border: 0; box-shadow: none; background: transparent; }
.cs .bct{ margin-top: 16px; padding: 12px 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--brand-2) 45%, var(--line)); background: color-mix(in srgb, var(--brand-2) 4%, var(--surface)); }
.cs .bct-h{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cs .bct-h .ico{ align-self: center; color: var(--brand-2); }
.cs .bct-row{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs .bct-log{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cs .bct-log li{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs .bct-ok{ margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ok, #1F9D55); font-weight: 600; }
@media (max-width: 1100px){.cs .bc-layout.bc-new{ grid-template-columns: minmax(0, 1fr) 360px; }}
.cs .bc-flow{ flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 40px; display: flex; flex-direction: column; gap: 12px; counter-reset: bcstep; }
.cs .bc-flow > *{ width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto; }
.cs .bc-flow .bc-hero{ padding: 14px 18px; border-radius: 16px; }
.cs .bc-flow .bc-hero h1{ font-size: 20px; }
.cs .bc-flow .bc-hero-stats span{ padding: 6px 12px; min-width: 84px; }
.cs .bc-flow .bc-hero-stats b{ font-size: 17px; }
.cs .bc-flow .bc-card{ padding: 14px 18px !important; border-radius: 14px; }
.cs .bc-flow .bc-card h2{ margin: 0 0 8px; font-size: 15px !important; }
.cs .bc-flow .bc-card h2::before{ width: 24px !important; height: 24px !important; font-size: 12px !important; border-radius: 7px !important; }
.cs .bc-flow .bc-card + .bc-card::before{ left: 29px; }
.cs .bc-flow .bc-summary h2::before{ content: '✓' !important; counter-increment: none !important; background: linear-gradient(135deg, var(--fill-1), var(--fill-3)) !important; }
.cs .bc-tight{ margin: 6px 0 0 !important; }
.cs .bc-basics{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.cs .bc-routes{ display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cs .bc-flow .route-row{ display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0; }
.cs .bc-rank{ width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--surface-2); color: var(--ink-2); flex: none; }
.cs .route-row:not(.off) .bc-rank{ background: color-mix(in srgb, var(--c, var(--brand-2)) 16%, var(--surface)); color: var(--ink); }
.cs .bc-route-main{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs .bc-notready{ color: var(--mail) !important; }
.cs .bc-from{ max-width: 240px; font-size: 12.5px; padding: 4px 8px; }
.cs .bc-msg{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; margin-top: 10px; }
.cs .bc-msg-full{ margin-top: 10px; }
.cs .bc-msg-edit{ min-width: 0; }
.cs .bc-flow .bct{ margin-top: 4px; }
.cs .bc-flow .bcp{ position: sticky; top: 0; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: none; }
.cs .bc-flow .bcp-top{ display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.cs .bc-flow .bcp-phone{ zoom: .78; }
.cs .bc-flow .bcp-phone .help{ display: none; }
.cs .bc-aud-top{ margin-bottom: 10px; }
.cs .bcu{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.cs .bc-flow .bcu-drop{ min-height: 92px; padding: 14px; }
.cs .bcu-dl{ align-self: stretch; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px !important; }
.cs .bcu-done{ display: flex; flex-direction: column; gap: 10px; }
.cs .bcu-file{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand-1) 5%, var(--surface)); }
.cs .bcu-file > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .bcu-file-ic{ width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fill-1), var(--fill-2)); flex: none; }
.cs .bcu-replace{ position: relative; overflow: hidden; cursor: pointer; }
.cs .bcu-replace input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cs .bcu-stats{ display: flex; gap: 8px; flex-wrap: wrap; }
.cs .bcu-stats span{ display: flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.cs .bcu-stats b{ font-size: 15px; color: var(--ink); }
.cs .bc-countries{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cs .bc-cty{ position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; }
.cs .bc-cty small{ color: var(--ink-3); }
.cs .bc-cty i{ font-style: normal; font-weight: 700; color: color-mix(in srgb, var(--brand-3) 80%, var(--ink)); }
.cs .bc-cty em{ position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--fill-1), var(--fill-3)); }
.cs .bc-segs{ margin-top: 0; }
.cs .bc-when{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs .bc-sum-grid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.cs .bc-sum-big .num{ font-size: 15px; }
.cs .bc-sum-big .num b{ font-size: 22px; }
.cs .bc-sum-big .reach-bar{ margin: 8px 0; }
.cs .bc-sum-rows .reach-row{ padding: 4px 0; }
.cs .bc-sum-list{ list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cs .bc-sum-list li{ display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.cs .bc-sum-list li span{ color: var(--ink-3); }
.cs .bc-sum-list li b{ text-align: right; overflow-wrap: anywhere; }
.cs .bc-send{ display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cs .bc-send .cost-line{ margin: 0; }
.cs .bc-send-btn{ padding: 11px 20px !important; border-radius: 12px !important; font-size: 15px !important; box-shadow: 0 12px 24px -14px var(--brand-3); }
@media (max-width: 900px){.cs .bc-msg, .cs .bc-sum-grid{ grid-template-columns: minmax(0, 1fr); }
.cs .bc-flow .bcp{ position: static; }}
@media (max-width: 820px){.cs .bc-flow{ padding: 12px 14px 32px; }
.cs .bc-basics, .cs .bcu{ grid-template-columns: minmax(0, 1fr); }
.cs .bc-send{ justify-content: stretch; }
.cs .bc-send-btn{ width: 100%; justify-content: center; }}
.cs .bc-msg{ grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); }
.cs .bc-flow .bcp-phone{ zoom: .72; }
.cs .bc-flow .bcp .wap-screen{ height: 440px; }
.cs .bc-flow .bcp-top{ justify-content: flex-start; }
.cs .bc-msg{ grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); }
.cs .bc-flow .bcp-phone{ zoom: .792; }
.cs .bc-flow .bcp .wap-phone{ width: 300px; max-width: none; aspect-ratio: 393 / 852; height: auto; display: flex; flex-direction: column; border-radius: 46px; padding: 10px; }
.cs .bc-flow .bcp .wap-screen{ height: auto; flex: 1; min-height: 0; border-radius: 37px; }
.cs .chip-closed .chip-count{ margin-left: 4px; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.cs .chip-closed[aria-pressed="true"] .chip-count{ background: rgba(255,255,255,.25); color: inherit; }
.cs .ovx{ display: flex; flex-direction: column; gap: 14px; }
.cs .ovx-top{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 14px; }
.cs .ovx-hero{ position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: end; padding: 20px 22px; border-radius: 18px; color: #fff; background: linear-gradient(125deg, var(--fill-1), var(--fill-2) 55%, var(--fill-3)); box-shadow: 0 20px 40px -28px var(--brand-3); }
.cs .ovx-hero::after{ content: ''; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.cs .ovx-eyebrow{ font-size: 12px; font-weight: 600; opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
.cs .ovx-big{ font-size: 44px; font-weight: 750; line-height: 1.05; margin: 6px 0 12px; letter-spacing: -.02em; }
.cs .ovx-hero-stats{ display: flex; gap: 8px; flex-wrap: wrap; }
.cs .ovx-hero-stats span{ display: flex; flex-direction: column; font-size: 11px; opacity: .95; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); }
.cs .ovx-hero-stats b{ font-size: 14px; }
.cs .ovx-spark{ position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.cs .ovx-spark i{ flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.45)); min-width: 4px; transition: height .3s ease; }
.cs .ovx-svc{ display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cs .ovx-svc.tone-warn{ border-color: color-mix(in srgb, #F59E0B 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, #F59E0B 8%, var(--surface)), var(--surface) 60%); }
.cs .ovx-svc.tone-bad{ border-color: color-mix(in srgb, var(--danger, #E5484D) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--danger, #E5484D) 8%, var(--surface)), var(--surface) 60%); }
.cs .ovx-svc-h{ display: flex; align-items: center; gap: 10px; }
.cs .ovx-svc-h > div{ flex: 1; display: flex; flex-direction: column; }
.cs .ovx-svc-h > div span{ font-size: 12px; color: var(--ink-3); }
.cs .ovx-svc-ic{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--wa, #25D366), var(--fill-2)); flex: none; }
.cs .ovx-svc-num b{ font-size: 32px; font-weight: 750; letter-spacing: -.02em; }
.cs .ovx-svc-num span{ color: var(--ink-3); font-size: 14px; }
.cs .ovx-meter{ position: relative; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: visible; }
.cs .ovx-meter i{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--fill-1), var(--fill-2)); }
.cs .ovx-meter.warn i{ background: linear-gradient(90deg, #F59E0B, #F97316); }
.cs .ovx-meter.bad i{ background: linear-gradient(90deg, #F97316, var(--danger, #E5484D)); }
.cs .ovx-meter em{ position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-3); border-radius: 2px; }
.cs .ovx-svc-facts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs .ovx-svc-facts span{ display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.cs .ovx-svc-facts small{ font-size: 11px; color: var(--ink-3); }
.cs .ovx-svc-facts b{ font-size: 15px; }
.cs .ovx-svc .help{ margin: 0; }
.cs .ovx-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cs .ovx-tile{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cs .ovx-tile:disabled{ cursor: default; opacity: 1; }
.cs .ovx-tile:not(:disabled):hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); box-shadow: 0 10px 22px -18px var(--brand-2); }
.cs .ovx-tile-ic{ width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.cs .t-a .ovx-tile-ic{ background: linear-gradient(135deg, #1596A9, #2C6FD6); }
.cs .t-b .ovx-tile-ic{ background: linear-gradient(135deg, #2FA85C, #1596A9); }
.cs .t-c .ovx-tile-ic{ background: linear-gradient(135deg, #F59E0B, #E5484D); }
.cs .t-d .ovx-tile-ic{ background: linear-gradient(135deg, #7C3AED, #2C6FD6); }
.cs .ovx-tile-t{ display: flex; flex-direction: column; min-width: 0; }
.cs .ovx-tile-t b{ font-size: 22px; font-weight: 720; line-height: 1.1; }
.cs .ovx-tile-t span{ font-size: 13px; font-weight: 600; }
.cs .ovx-tile-t small{ font-size: 11.5px; color: var(--ink-3); }
.cs .ovx-grid3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.cs .ovx-grid2{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cs .ovx .panel{ margin: 0; border-radius: 16px; height: 100%; box-sizing: border-box; }
.cs .ovx-grid2 .panel{ height: auto; }
.cs .ovx-agents{ min-height: 0; }
.cs .ovx-agents .panel{ max-height: 340px; overflow: auto; }
@media (max-width: 1180px){.cs .ovx-grid3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .ovx-agents{ grid-column: 1 / -1; }}
@media (max-width: 1020px){.cs .ovx-top, .cs .ovx-grid2{ grid-template-columns: minmax(0, 1fr); }
.cs .ovx-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 640px){.cs .ovx-hero{ grid-template-columns: minmax(0, 1fr); }
.cs .ovx-spark{ height: 70px; }
.cs .ovx-grid3{ grid-template-columns: minmax(0, 1fr); }
.cs .ovx-big{ font-size: 36px; }}
.cs .svc-pop{ display: flex; gap: 14px; align-items: flex-start; }
.cs .svc-pop > div{ flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cs .svc-pop-ic{ width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(135deg, #F59E0B, #F97316); }
.cs .svc-pop.bad .svc-pop-ic{ background: linear-gradient(135deg, #F97316, var(--danger, #E5484D)); }
.cs .svc-pop .help{ margin: 0; }
.cs .inbox-segs{ grid-template-columns: auto minmax(0, 1fr); }
.cs .inbox-segs button{ white-space: nowrap; padding: 7px 10px; }
.cs .ovx-hero{ align-items: center; }
.cs .wa-status{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.cs .wa-st{ position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.cs .wa-st-ic{ width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; background: var(--c); }
.cs .wa-st-t{ display: flex; flex-direction: column; min-width: 0; }
.cs .wa-st-t b{ font-size: 20px; font-weight: 720; line-height: 1.1; }
.cs .wa-st-t span{ font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cs .wa-st-t small{ font-size: 11px; color: var(--ink-3); }
.cs .wa-st-bar{ position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c); opacity: .85; }
.cs .st-uploaded{ --c: linear-gradient(135deg, #64748B, #475569); }
.cs .st-sent{ --c: linear-gradient(135deg, #1596A9, #2C6FD6); }
.cs .st-delivered{ --c: linear-gradient(135deg, #2FA85C, #1596A9); }
.cs .st-seen{ --c: linear-gradient(135deg, #7C3AED, #2C6FD6); }
.cs .st-failed{ --c: linear-gradient(135deg, #F97316, #E5484D); }
.cs .wa-status.compact{ gap: 6px; }
.cs .wa-status.compact .wa-st{ padding: 8px 10px; }
.cs .wa-status.compact .wa-st-t b{ font-size: 16px; }
.cs td.st-delivered{ color: var(--ok, #1F9D55); }
.cs td.st-seen{ color: #7C3AED; }
.cs td.st-failed{ color: var(--danger, #E5484D); }
.cs .wa-status-panel{ margin-top: 0; }
.cs .meta-board{ padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cs .meta-board-h{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cs .meta-board-h h2{ margin: 0; font-size: 18px; flex: 1; }
.cs .meta-sel{ position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 220px; }
.cs .meta-sel select{ appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); flex: 1; padding-right: 4px; cursor: pointer; outline: none; }
.cs .meta-sel-ic{ width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #25D366; flex: none; }
.cs .meta-steps{ display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 12px; }
.cs .mstep{ padding: 12px 14px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); --mc: #2C6FD6; }
.cs .mstep.tone-warn{ --mc: #D97706; }
.cs .mstep.tone-bad{ --mc: #E5484D; }
.cs .mstep-h{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cs .mstep-h span{ font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cs .mstep-h b{ color: var(--mc); font-size: 14px; }
.cs .mstep-track{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.cs .mstep-track li{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cs .mstep-track li::before{ content: ''; position: absolute; top: 11px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.cs .mstep-track li:first-child::before{ display: none; }
.cs .mstep-track li.done::before, .cs .mstep-track li.cur::before{ background: var(--mc); }
.cs .mstep-dot{ position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--mc); }
.cs .mstep-track li.cur .mstep-dot{ box-shadow: 0 0 0 5px color-mix(in srgb, var(--mc) 22%, transparent); }
.cs .mstep-track li.todo .mstep-dot{ background: var(--surface); border: 2px solid var(--line); width: 22px; height: 22px; }
.cs .mstep-track li.todo .mstep-dot::after{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.cs .mstep-l{ font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.cs .mstep-track li.cur .mstep-l{ color: var(--mc); font-weight: 750; }
.cs .mstep-track li.todo .mstep-l{ color: var(--ink-3); font-weight: 500; }
@media (max-width: 1100px){.cs .meta-steps{ grid-template-columns: minmax(0, 1fr); }}
.cs .ovx-hero-wide{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.cs .ovx-hero-wide .ovx-spark{ height: 110px; }
.cs .ovx-pair{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.cs .ovx-pair .ovx-agents .panel{ max-height: none; height: 100%; }
@media (max-width: 1020px){.cs .ovx-pair{ grid-template-columns: minmax(0, 1fr); }}
.cs .svc-rep-kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.cs .svc-rep-kpis > div{ display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.cs .svc-rep-kpis small{ font-size: 11.5px; color: var(--ink-3); }
.cs .svc-rep-kpis b{ font-size: 20px; font-weight: 720; }
.cs .svc-rep-kpis span{ font-size: 11.5px; color: var(--ink-2); }
.cs .svc-rep-kpis .lim-warn{ background: color-mix(in srgb, #F59E0B 14%, var(--surface)); }
.cs .svc-rep-kpis .lim-over{ background: color-mix(in srgb, #E5484D 14%, var(--surface)); }
.cs .svc-rep-grid{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 16px; }
.cs .svc-bars{ display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-bottom: 18px; }
.cs .svc-bar{ flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.cs .svc-bar i{ width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #25D366, var(--fill-2)); }
.cs .svc-bar span{ position: absolute; bottom: -18px; font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.cs .svc-hours{ display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.cs .svc-hours i{ height: 22px; border-radius: 4px; background: var(--brand-2); }
.cs .svc-hours-l{ display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.cs .svc-tbl td{ padding: 6px 8px; }
.cs .svc-share{ width: 30%; }
@media (max-width: 900px){.cs .svc-rep-grid{ grid-template-columns: minmax(0, 1fr); }}
.cs .ovx > *{ flex-shrink: 0; }
.cs .ovx-svc-week{ margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.cs .ovx-svc-week-h{ display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); }
.cs .ovx-svc-week-h b{ color: var(--ink); }
.cs .ovx-svc-bars{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 110px; }
.cs .ovx-svc-bars > div{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.cs .ovx-svc-bars i{ width: 100%; max-width: 30px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #25D366, var(--fill-2)); }
.cs .ovx-svc-bars span{ font-size: 10.5px; color: var(--ink-3); }
:root{ --fill-1: var(--brand-1); --fill-2: var(--brand-2); --fill-3: var(--brand-3); }
:root[data-theme="dark"]{ --fill-1: #1E8A4E; --fill-2: #12808F; --fill-3: #2F62C6; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --fill-1: #1E8A4E; --fill-2: #12808F; --fill-3: #2F62C6; }}
:root[data-theme="dark"] .ovx-spark i{ background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.28)); }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ovx-spark i{ background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.28)); }}
:root[data-theme="dark"] .imp-bar{ background: #1E2A25; color: var(--ink); border: 1px solid #2E3E36; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .imp-bar{ background: #1E2A25; color: var(--ink); border: 1px solid #2E3E36; }}
.cs .theme-nav .ico{ transition: transform .3s ease; }
.cs .theme-nav:hover .ico{ transform: rotate(-18deg); }
.cs .login-form-side{
  --surface: #FFFFFF; --surface-2: #F1F6F3; --ink: #14231D; --ink-2: #4A5C53; --ink-3: #6E8078; --line: #DCE6E0;
  color: var(--ink); position: relative; overflow: hidden;
  background:
    radial-gradient(520px 360px at 100% 0%, rgba(41, 151, 214, .14), transparent 70%),
    radial-gradient(520px 380px at 0% 100%, rgba(47, 168, 92, .16), transparent 70%),
    linear-gradient(160deg, #F7FCF8 0%, #FFFFFF 45%, #F2F8FD 100%);
}
.cs .login-form-side .login-card{ position: relative; z-index: 1; max-width: 400px; padding: 30px 30px 22px; border-radius: 22px; background: rgba(255,255,255,.86); border: 1px solid rgba(20, 60, 40, .08); box-shadow: 0 30px 60px -36px rgba(20, 80, 60, .35), 0 2px 6px rgba(20, 60, 40, .04); backdrop-filter: blur(6px); }
.cs .login-form-side .inp{ background: #FFFFFF; color: var(--ink); border-color: var(--line); }
.cs .login-logo{ display: flex; justify-content: center; margin: 0 0 22px; }
.cs .login-logo img{ width: 100%; max-width: 300px; height: auto; display: block; mix-blend-mode: multiply; }
.cs .login-card h2{ text-align: left; }
.cs .login-brand{ justify-content: center !important; gap: 34px; }
@media (max-width: 820px){.cs .login-form-side .login-card{ padding: 22px 18px 16px; border-radius: 18px; }
.cs .login-logo img{ max-width: 230px; }}
.cs .login-brand{ background: radial-gradient(120% 140% at 0% 0%, var(--fill-1) 0%, var(--fill-2) 46%, var(--fill-3) 78%, #14335c 100%) !important; }
.cs .login-form-side .login-foot{ margin-top: 18px; }
.cs .login-form-side .login-submit{ margin-top: 4px; }
.cs .login-form-side .tc-row a{ color: #1B6FB8; }
.cs .page-body, .cs .view, .cs .bc-flow{ position: relative; }
.cs .sr{ clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px; }
.cs .log-msg{ min-width: 220px; max-width: 300px; }
.cs .log-msg-snip{ font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.cs .log-tpl{ display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; margin-right: 5px; border-radius: 999px; background: var(--wa-tint, #E3F6EA); color: var(--wa-strong, #127A3F); }
.cs .btn.xs, .cs .view-msg{ padding: 3px 9px !important; font-size: 11.5px !important; border-radius: 8px !important; gap: 4px; }
.cs .msgview{ display: flex; flex-direction: column; gap: 12px; }
.cs .msgview-meta{ display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.cs .msgview-meta > span:first-child{ display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); }
.cs .msgview-chat{ padding: 16px; border-radius: 14px; background: #EFEAE2; }
.cs .msgview-chat.ch-sms, .cs .msgview-chat.ch-rcs{ background: var(--surface-2); }
.cs .msgview-bubble{ position: relative; max-width: 88%; padding: 9px 12px 18px; border-radius: 12px 12px 12px 3px; background: #fff; color: #111B21; font-size: 14px; line-height: 1.45; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.cs .ch-whatsapp .msgview-bubble{ margin-left: auto; border-radius: 12px 12px 3px 12px; background: #D9FDD3; }
.cs .msgview-time{ position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: #667781; }
.cs .msgview-mail{ border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cs .msgview-mail-h{ display: flex; flex-direction: column; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cs .msgview-mail-h small{ font-size: 11px; color: var(--ink-3); }
.cs .msgview-mail-b{ padding: 12px 14px; font-size: 13.5px; }
.cs .msgview-mail-b p{ margin: 0 0 4px; }
.cs .msgview-vars{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs .msgview-var{ display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); }
.cs .msgview-raw summary{ cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.cs .msgview-raw pre{ margin-top: 8px; max-height: 240px; overflow: auto; }
.cs .sum-kpis{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
.cs .bt-studio{ display: flex; flex-direction: column; gap: 16px; }
.cs .bt-head h2{ margin: 0; font-size: 22px; }
.cs .bt-head p{ margin: 4px 0 0; color: var(--ink-2); }
.cs .bt-bar{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cs .bt-search{ flex: 0 1 300px; }
.cs .bt-search input{ width: 100%; }
.cs .bt-tabs{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.cs .bt-tabs button{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.cs .bt-tabs button span{ font-size: 11px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.08); }
.cs .bt-tabs button[aria-selected="true"]{ background: linear-gradient(135deg, var(--fill-2), var(--fill-3)); color: #fff; box-shadow: 0 6px 14px -8px var(--fill-3); }
.cs .bt-tabs button[aria-selected="true"] span{ background: rgba(255,255,255,.25); }
.cs .bt-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cs .bt-new{ min-height: 240px; border: 0; border-radius: 18px; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; font: inherit;
  background: radial-gradient(120% 120% at 0% 0%, var(--fill-1), var(--fill-2) 45%, var(--fill-3)); box-shadow: 0 20px 40px -26px var(--fill-3); transition: transform .15s ease, box-shadow .15s ease; }
.cs .bt-new:hover{ transform: translateY(-2px); box-shadow: 0 26px 46px -24px var(--fill-3); }
.cs .bt-new > span{ width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35); }
.cs .bt-new b{ font-size: 20px; }
.cs .bt-new small{ font-size: 14px; opacity: .9; max-width: 30ch; }
.cs .bt-card{ position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 0; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.cs .bt-card:hover{ border-color: color-mix(in srgb, var(--brand-3) 40%, var(--line)); box-shadow: 0 14px 30px -24px var(--brand-3); }
.cs .bt-card.active{ border-color: color-mix(in srgb, var(--brand-1) 45%, var(--line)); }
.cs .bt-card-h{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs .wa-dot{ width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: #25D366; flex: none; }
.cs .wa-dot.lg{ width: 28px; height: 28px; }
.cs .bt-card-name{ border: 0; background: transparent; padding: 0; font: inherit; font-size: 16.5px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.cs .bt-card-name:hover{ text-decoration: underline; }
.cs .bt-testing{ font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; color: #15803D; background: #DCFCE7; border: 1px solid #86EFAC; }
.cs .bt-act{ margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.cs .bt-card.active .bt-act{ color: var(--ok, #1F9D55); }
.cs .bt-desc{ margin: 0; color: var(--ink-2); font-size: 13.5px; }
.cs .bt-meta{ display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.cs .bt-meta > span{ display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.cs .bt-trig{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .bt-trig em{ font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.cs .bt-trig em.num{ color: #1D4ED8; background: #EFF6FF; border-color: #BFDBFE; }
.cs .bt-card-f{ margin: auto -18px 0; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2); display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cs .bt-card-f > span{ margin-right: auto; display: inline-flex; align-items: center; gap: 5px; }
.cs .bt-watermark{ position: absolute; right: 18px; top: 72px; color: var(--ink); opacity: .05; pointer-events: none; }
.cs .bt-ib{ width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; flex: none; }
.cs .bt-ib.sm{ width: 30px; height: 30px; border-radius: 8px; }
.cs .bt-ib:hover:not(:disabled){ border-color: var(--brand-3); color: var(--brand-3); }
.cs .bt-ib:disabled{ opacity: .4; cursor: default; }
.cs .bt-ib.danger:hover{ color: var(--danger); border-color: var(--danger); }
.cs .bt-lib-ic{ width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fill-1), var(--fill-3)); }
.cs .bt-libcard .bt-card-h b{ font-size: 16px; }
.cs .bt-libcard{ min-height: 170px; }
.cs .bt-editor{ position: fixed; top: 0; right: 0; bottom: 0; left: 76px; z-index: 60; display: flex; flex-direction: column; background: var(--bg); }
.cs .bt-top{ display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cs .bt-find{ display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); width: 230px; }
.cs .bt-find input{ border: 0; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--ink); flex: 1; min-width: 0; }
.cs .bt-find kbd, .cs .bt-find-n{ font: inherit; font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-3); white-space: nowrap; }
.cs .bt-title{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 180px; color: var(--brand-3); }
.cs .bt-title b{ font-size: 17px; color: var(--ink); cursor: text; }
.cs .bt-title input{ max-width: 280px; }
.cs .bt-unsaved{ font-size: 11px; font-weight: 700; color: #B45309; background: #FEF3C7; padding: 2px 8px; border-radius: 999px; }
.cs .bt-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 13px; }
.cs .bt-save{ padding: 8px 18px !important; }
.cs .bt-canvas{ position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab;
  background-color: var(--bg); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; }
.cs .bt-canvas:active{ cursor: grabbing; }
.cs .bt-world{ position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cs .bt-edges{ position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cs .bt-edges path{ fill: none; stroke: #94A3B8; stroke-width: 2; stroke-dasharray: 5 5; }
.cs .bt-edges path.on{ stroke: var(--brand-3); stroke-width: 2.5; }
.cs .bt-pos{ position: absolute; }
.cs .bn{ position: relative; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--bc); box-shadow: 0 4px 14px -8px rgba(15,23,42,.25); cursor: pointer; padding-bottom: 16px; }
.cs .bn:hover{ box-shadow: 0 8px 22px -10px rgba(15,23,42,.35); }
.cs .bn.sel{ outline: 2px solid var(--brand-3); outline-offset: 1px; }
.cs .bn.hit{ outline: 3px solid #F59E0B; outline-offset: 2px; }
.cs .bn-h{ display: flex; align-items: center; gap: 6px; padding: 8px 8px 7px 10px; border-bottom: 1px solid var(--line); }
.cs .bn-ic{ color: var(--bc); display: inline-flex; }
.cs .bn-h b{ flex: 1; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .bn-more{ border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 2px; border-radius: 6px; }
.cs .bn-more:hover{ background: var(--surface-2); }
.cs .bn-col{ position: absolute; right: -11px; top: 9px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.cs .bn-b{ padding: 9px 10px 6px; display: flex; flex-direction: column; gap: 5px; }
.cs .bn-txt{ font-size: 11.5px; line-height: 1.4; padding: 7px 9px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; max-height: 86px; overflow: hidden; color: var(--ink); }
.cs .bn-txt.mono{ font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; word-break: break-all; }
.cs .bn-empty{ display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #B7791F; padding: 8px; border-radius: 7px; border: 1px dashed #F6C453; background: #FFFBEB; }
.cs .bn-btn{ display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 700; color: #fff; padding: 5px; border-radius: 6px; background: #1A73D9; }
.cs .bn-media{ display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 5px 8px; border-radius: 6px; background: var(--surface-2); border: 1px dashed var(--line); color: var(--ink-2); }
.cs .bn-tags{ display: flex; flex-wrap: wrap; gap: 4px; }
.cs .bn-tags span{ font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--bc) 14%, var(--surface)); color: var(--ink-2); }
.cs .bn-add{ position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); background: #1A73D9; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(26,115,217,.4); z-index: 2; }
.cs .bn-add:hover{ transform: translateX(-50%) scale(1.12); }
.cs .bn-folded{ position: absolute; right: 8px; bottom: -22px; font-size: 10.5px; color: var(--ink-3); }
.cs .bt-menu{ position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 18px); z-index: 20; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 34px -14px rgba(15,23,42,.4); padding: 6px; }
.cs .bt-menu.node{ top: 34px; left: auto; right: 6px; transform: none; }
.cs .bt-menu-h{ font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--ink-3); padding: 4px 8px 6px; }
.cs .bt-menu button{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; }
.cs .bt-menu button:hover:not(:disabled){ background: var(--surface-2); }
.cs .bt-menu button:disabled{ opacity: .55; cursor: default; }
.cs .bt-menu button.danger{ color: var(--danger); }
.cs .bt-menu em{ margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: #FEF3C7; color: #B45309; }
.cs .bt-zoom{ position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 20px -14px rgba(0,0,0,.4); }
.cs .bt-zoom button{ width: 40px; height: 38px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.cs .bt-zoom button + button{ border-top: 1px solid var(--line); }
.cs .bt-zoom span{ font-size: 10.5px; color: var(--ink-3); padding: 2px 0 6px; }
.cs .bt-legend{ position: absolute; right: 16px; bottom: 16px; display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.cs .bt-legend span{ display: inline-flex; align-items: center; gap: 5px; }
.cs .bt-legend i{ width: 10px; height: 10px; border-radius: 3px; }
.cs .bt-drawer, .cs .bt-sim{ position: absolute; top: 57px; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 40px -28px rgba(0,0,0,.4); display: flex; flex-direction: column; z-index: 30; }
.cs .bt-dh{ display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cs .bt-dh b{ flex: 1; font-size: 16px; }
.cs .bt-dh-ic{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); }
.cs .bt-dh-ic.wa{ color: #fff; background: #25D366; }
.cs .bt-db{ flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cs .bt-df{ display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.cs .bt-lblrow{ display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cs .bt-lblrow label, .cs .bt-sub{ font-size: 11.5px; font-weight: 800; letter-spacing: .05em; color: var(--ink-2); }
.cs .bt-lblrow > span{ font-size: 11px; color: var(--ink-3); }
.cs .bt-blocks{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs .bt-blocks button{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.cs .bt-blocks button:hover{ border-color: var(--brand-3); color: var(--brand-3); background: color-mix(in srgb, var(--brand-3) 6%, var(--surface)); }
.cs .bt-list{ display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cs .bt-hint{ font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
.cs .bt-blk{ border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cs .bt-blk-h{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); }
.cs .bt-blk-h b{ flex: 1; font-size: 13.5px; }
.cs .bt-blk-ic{ width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-3) 12%, var(--surface)); color: var(--brand-3); }
.cs .bt-grip{ display: flex; flex-direction: column; }
.cs .bt-grip button{ border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0 2px; line-height: 0; }
.cs .bt-mini{ display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--brand-3) 40%, var(--line)); background: color-mix(in srgb, var(--brand-3) 7%, var(--surface)); color: var(--brand-3); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cs .bt-mini.del{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.cs .bt-blk-b{ padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cs .bt-count{ font-size: 11px; color: var(--ink-3); text-align: right; }
.cs .bt-seg{ display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.cs .bt-seg button{ border: 0; background: transparent; padding: 5px 10px; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cs .bt-seg button.on{ background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cs .bt-btns{ display: flex; flex-direction: column; gap: 6px; }
.cs .bt-btnrow{ display: flex; align-items: center; gap: 6px; }
.cs .bt-btnrow input{ flex: 1; }
.cs .bt-btnrow > button{ border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.cs .bt-btnpill{ width: 30px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #1A73D9; color: #fff; flex: none; }
.cs .bt-drop{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px; border: 1.5px dashed var(--line); border-radius: 10px; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.cs .bt-drop small{ color: var(--ink-3); }
.cs .bt-drop input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cs .bt-img{ max-width: 100%; max-height: 160px; border-radius: 8px; object-fit: cover; }
.cs .bt-msg{ border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: color-mix(in srgb, var(--brand-2) 3%, var(--surface)); }
.cs .bt-msg-h{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-bottom: 6px; }
.cs .bt-msg-h b{ flex: 1; letter-spacing: .04em; }
.cs .bt-msg-h button{ border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.cs .bt-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 600; }
.cs .bt-info{ color: var(--ink-3); display: inline-flex; vertical-align: middle; cursor: help; }
.cs .bt-tg{ position: relative; display: inline-flex; align-items: center; width: 52px; height: 24px; border-radius: 999px; border: 0; background: #CBD5E1; cursor: pointer; padding: 0; flex: none; }
.cs .bt-tg i{ position: absolute; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s ease; }
.cs .bt-tg span{ position: absolute; right: 7px; font-size: 9.5px; font-weight: 800; color: #475569; }
.cs .bt-tg.on{ background: #1A73D9; }
.cs .bt-tg.on i{ left: 31px; }
.cs .bt-tg.on span{ left: 8px; right: auto; color: #fff; }
.cs .bt-val{ display: flex; gap: 6px; }
.cs .bt-val > *{ flex: 1; min-width: 0; }
.cs .bt-chips{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
.cs .bt-chips span{ display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; }
.cs .bt-chips span button{ border: 0; background: transparent; padding: 0; color: var(--ink-3); cursor: pointer; display: inline-flex; }
.cs .bt-chips input{ flex: 1; min-width: 140px; border: 0 !important; box-shadow: none !important; }
.cs .bt-set .bt-row{ margin-top: 2px; }
.cs .bt-sim{ width: min(380px, 100%); }
.cs .bt-sim-chat{ flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #EFEAE2; }
.cs .bt-sim-hint{ font-size: 12.5px; color: #54656F; text-align: center; padding: 10px; background: rgba(255,255,255,.7); border-radius: 10px; }
.cs .bt-sim-hint button{ margin: 4px 3px 0; border: 1px solid #CBD5E1; background: #fff; border-radius: 999px; padding: 2px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.cs .bt-sim-sys{ align-self: center; font-size: 11px; color: #54656F; background: #FFF5C4; padding: 3px 10px; border-radius: 8px; }
.cs .bt-sim-b{ max-width: 84%; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: #111B21; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.cs .bt-sim-b.me{ align-self: flex-end; background: #D9FDD3; border-radius: 10px 10px 2px 10px; }
.cs .bt-sim-b.bot{ align-self: flex-start; background: #fff; border-radius: 10px 10px 10px 2px; }
.cs .bt-sim-t{ white-space: pre-wrap; }
.cs .bt-sim-media{ display: flex; align-items: center; gap: 6px; padding: 8px; margin-bottom: 6px; border-radius: 8px; background: #F0F2F5; font-size: 12px; color: #54656F; }
.cs .bt-sim-btns{ display: flex; flex-direction: column; gap: 4px; margin-top: 8px; border-top: 1px solid #E9EDEF; padding-top: 6px; }
.cs .bt-sim-btns button, .cs .bt-sim-list button, .cs .bt-sim-list summary{ display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: transparent; color: #027EB5; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; }
.cs .bt-sim-list{ margin-top: 8px; border-top: 1px solid #E9EDEF; padding-top: 4px; }
.cs .bt-sim-list summary{ list-style: none; }
.cs .bt-sim-list[open] button{ width: 100%; justify-content: flex-start; color: #111B21; font-weight: 500; border-top: 1px solid #F0F2F5; }
.cs .bt-sim-in{ display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.cs .bt-sim-in input{ flex: 1; }
.cs .bt-sim-vars{ display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); font-size: 11.5px; }
.cs .bt-sim-vars span{ padding: 2px 8px; border-radius: 6px; background: var(--surface-2); }
@media (max-width: 820px){.cs .bt-editor{ left: 0; bottom: 64px; }
.cs .bt-title{ order: -1; flex-basis: 100%; justify-content: flex-start; }
.cs .bt-find{ width: 150px; }
.cs .bt-legend{ display: none; }
.cs .bt-drawer, .cs .bt-sim{ top: 0; width: 100%; }}
:root[data-theme="dark"] .bt-sim-chat{ background: #0B141A; }
:root[data-theme="dark"] .bt-sim-b.bot{ background: #202C33; color: #E9EDEF; }
:root[data-theme="dark"] .bt-sim-b.me{ background: #005C4B; color: #E9EDEF; }
:root[data-theme="dark"] .bn-empty{ background: #2A2410; border-color: #8A6D1C; color: #F6C453; }
.cs .bot-tag{ color: #B7791F !important; background: #FEF3C7 !important; }
.cs .bn-if{ display: flex; flex-direction: column; gap: 4px; }
.cs .bn-if > div{ display: flex; gap: 6px; align-items: baseline; font-size: 11px; line-height: 1.35; padding: 5px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.cs .bn-if em, .cs .if-br-h em{ font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #B43FA8; padding: 1px 5px; border-radius: 4px; flex: none; }
.cs .bn-if em.else, .cs .if-br-h em.else{ background: #64748B; }
.cs .bt-menu em.new{ background: #F7E3F4; color: #8E2F85; }
.cs .if-ed{ display: flex; flex-direction: column; gap: 10px; }
.cs .if-explain{ display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #B43FA8 9%, var(--surface)); border: 1px solid color-mix(in srgb, #B43FA8 30%, var(--line)); color: #8E2F85; font-size: 12.5px; }
.cs .if-explain > div{ display: flex; flex-direction: column; gap: 3px; color: var(--ink-2); }
.cs .if-explain b{ color: var(--ink); }
.cs .if-examples summary{ cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--brand-3); }
.cs .if-examples button{ display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.cs .if-examples button:hover{ border-color: #B43FA8; }
.cs .if-examples button span{ font-size: 12px; color: var(--ink-3); }
.cs .if-br{ display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid #B43FA8; background: var(--surface); }
.cs .if-br.else{ border-left-color: #64748B; background: var(--surface-2); }
.cs .if-br-h{ display: flex; align-items: center; gap: 8px; }
.cs .if-br-h input{ flex: 1; }
.cs .if-match{ align-self: flex-start; }
.cs .if-rule{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs .if-rule > select, .cs .if-rule > input{ flex: 1 1 120px; min-width: 0; }
.cs .if-join{ flex-basis: 100%; font-size: 10.5px; font-weight: 800; color: #B43FA8; letter-spacing: .05em; }
.cs .if-days{ display: flex; gap: 3px; flex-wrap: wrap; flex: 1 1 100%; }
.cs .if-days button{ padding: 4px 7px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 11.5px; cursor: pointer; }
.cs .if-days button.on{ background: #B43FA8; color: #fff; border-color: #B43FA8; }
.cs .bt-sim-ctx{ border-bottom: 1px solid var(--line); padding: 8px 12px; font-size: 12.5px; }
.cs .bt-sim-ctx summary{ cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 650; color: #8E2F85; }
.cs .bt-sim-ctx-g{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; margin-top: 8px; }
.cs .bt-sim-ctx-g label{ display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink-3); }
.cs .bt-sim-ctx-g select{ padding: 4px 6px; font-size: 12px; }
.cs .bt-sim-ctx-g label.chk{ flex-direction: row; align-items: center; gap: 5px; color: var(--ink-2); grid-column: span 3; }
.cs .bs{ gap: 14px; }
.cs .bs-hero{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: stretch; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line);
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, #5B5BD6 16%, transparent), transparent 60%), radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, #0F9D8A 12%, transparent), transparent 60%), var(--surface); }
.cs .bs-eyebrow{ display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5B5BD6; }
.cs .bs-hero h2{ margin: 6px 0 4px; font-size: 24px; letter-spacing: -.01em; }
.cs .bs-hero p{ margin: 0; color: var(--ink-2); max-width: 62ch; font-size: 13.5px; }
.cs .bs-cta{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cs .bs-stats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs .bs-stats > div{ display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.cs .bs-stats b{ font-size: 24px; line-height: 1.1; }
.cs .bs-stats b small{ font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cs .bs-stats span{ font-size: 12px; color: var(--ink-2); }
.cs .bs-bar{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs .bs-tabs{ display: inline-flex; border-bottom: 2px solid var(--line); gap: 2px; }
.cs .bs-tabs button{ border: 0; background: transparent; padding: 8px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; font: inherit; font-weight: 650; font-size: 13.5px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cs .bs-tabs button span{ font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-3); }
.cs .bs-tabs button[aria-selected="true"]{ color: var(--ink); border-bottom-color: #5B5BD6; }
.cs .bs-tabs button[aria-selected="true"] span{ background: #5B5BD6; color: #fff; }
.cs .bs-chf{ display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.cs .bs-chf button{ display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cs .bs-chf button[aria-pressed="true"]{ border-color: var(--cc, var(--ink)); color: var(--cc, var(--ink)); background: color-mix(in srgb, var(--cc, var(--ink)) 9%, var(--surface)); }
.cs .bs-chf button svg{ color: var(--cc, currentColor); }
.cs .bs-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cs .bs-card{ position: relative; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); transition: transform .15s ease, box-shadow .15s ease; }
.cs .bs-card::before{ content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--line); }
.cs .bs-card.on::before{ background: linear-gradient(90deg, #0F9D8A, #5B5BD6); }
.cs .bs-card.on.test::before{ background: repeating-linear-gradient(90deg, #D9822B 0 10px, transparent 10px 16px); }
.cs .bs-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 32px -26px rgba(15, 23, 42, .55); }
.cs .bs-card-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs .bs-state{ display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.cs .bs-state i{ width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
.cs .bs-card.on .bs-state{ color: #0F9D8A; }
.cs .bs-card.on .bs-state i{ background: #0F9D8A; box-shadow: 0 0 0 3px color-mix(in srgb, #0F9D8A 22%, transparent); }
.cs .bs-card.on.test .bs-state{ color: #B4691F; }
.cs .bs-card.on.test .bs-state i{ background: #D9822B; box-shadow: 0 0 0 3px color-mix(in srgb, #D9822B 22%, transparent); }
.cs .bs-name{ font-size: 17px !important; font-weight: 700; letter-spacing: -.01em; }
.cs .bs-desc{ margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.cs .bs-ribbon{ display: flex; align-items: center; gap: 0; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.cs .bs-ribbon i{ width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--bc); flex: none; position: relative; }
.cs .bs-ribbon i + i{ margin-left: 10px; }
.cs .bs-ribbon i + i::before{ content: ''; position: absolute; right: 100%; top: 50%; width: 10px; height: 2px; background: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.cs .bs-ribbon em, .cs .bs-ribbon span{ white-space: nowrap; }
.cs .bs-ribbon em{ font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); margin-left: 8px; }
.cs .bs-ribbon span{ margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cs .bs-chs{ display: flex; flex-wrap: wrap; gap: 5px; }
.cs .bch{ display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; border-radius: 7px; font-size: 11.5px; font-weight: 650; color: var(--cc); background: color-mix(in srgb, var(--cc) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cc) 28%, transparent); }
.cs .bs-kw{ display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; }
.cs .bs-kw > span{ color: var(--ink-3); font-weight: 600; margin-right: 2px; }
.cs .bs-kw em{ font-style: normal; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--line); color: var(--ink); background: var(--surface); }
.cs .bs-kw.test em{ border-style: solid; color: #B4691F; border-color: color-mix(in srgb, #D9822B 40%, transparent); }
.cs .bs-foot{ display: flex; align-items: center; gap: 6px; margin: auto -16px 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.cs .bs-foot > span{ margin-right: auto; }
.cs .bs-foot .btn{ display: inline-flex; gap: 5px; align-items: center; }
.cs .bs-new{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, #5B5BD6 40%, var(--line)); background: color-mix(in srgb, #5B5BD6 4%, var(--surface)); color: var(--ink); font: inherit; cursor: pointer; padding: 18px; text-align: center; }
.cs .bs-new > span{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #5B5BD6; color: #fff; }
.cs .bs-new b{ font-size: 15px; }
.cs .bs-new small{ color: var(--ink-3); max-width: 26ch; }
.cs .bs-new:hover{ border-color: #5B5BD6; background: color-mix(in srgb, #5B5BD6 8%, var(--surface)); }
.cs .bs-none{ grid-column: 1 / -1; }
.cs .bs-lib{ padding-top: 16px; }
.cs .bs-lib-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs .bs .bt-lib-ic{ background: linear-gradient(135deg, #5B5BD6, #0F9D8A); }
@media (max-width: 900px){.cs .bs-hero{ grid-template-columns: 1fr; }
.cs .bs-chf{ margin-left: 0; }
.cs .bs-chf button span{ display: none; }}
.cs .bch-pick{ display: flex; flex-direction: column; gap: 6px; }
.cs .bch-opt{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.cs .bch-opt.on{ border-color: color-mix(in srgb, var(--cc) 55%, var(--line)); background: color-mix(in srgb, var(--cc) 5%, var(--surface)); }
.cs .bch-opt > label{ flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.cs .bch-ic{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--cc); flex: none; }
.cs .bch-t{ display: flex; flex-direction: column; min-width: 0; }
.cs .bch-t b{ font-size: 13.5px; }
.cs .bch-t small{ font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.cs .bch-st{ font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; display: inline-flex; gap: 3px; align-items: center; }
.cs .bch-st.ok{ color: #1F9D55; }
.cs .bch-link{ display: flex; gap: 5px; }
.cs .bch-link input{ width: 150px; padding: 5px 8px; }
.cs .bt-top{ gap: 6px; padding: 8px 14px; background: color-mix(in srgb, var(--surface) 92%, #5B5BD6); }
.cs .bt-ib{ border-radius: 10px; }
.cs .bt-title{ color: #5B5BD6; }
.cs .bt-chip{ border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); padding: 3px 10px 3px 4px; gap: 4px; }
.cs .bt-chip .bch{ height: 22px; padding: 0 5px; }
.cs .bt-canvas{ background-color: color-mix(in srgb, var(--bg) 85%, #5B5BD6 3%);
  background-image: linear-gradient(color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
.cs .bt-edges path{ stroke: color-mix(in srgb, var(--ink-3) 70%, transparent); stroke-width: 2; stroke-dasharray: none; }
.cs .bt-edges circle{ fill: var(--surface); stroke: color-mix(in srgb, var(--ink-3) 70%, transparent); stroke-width: 2; }
.cs .bt-edges g.on path{ stroke: #5B5BD6; stroke-width: 2.5; }
.cs .bt-edges g.on circle{ stroke: #5B5BD6; }
.cs .bt-edges .ah{ fill: color-mix(in srgb, var(--ink-3) 70%, transparent); stroke: none; }
.cs .bt-edges .ah.on{ fill: #5B5BD6; }
.cs .bn{ border: 1px solid color-mix(in srgb, var(--bc) 30%, var(--line)); border-left-width: 1px; border-radius: 14px; overflow: visible; box-shadow: 0 1px 0 color-mix(in srgb, var(--bc) 20%, transparent), 0 10px 24px -18px rgba(15, 23, 42, .45); padding-bottom: 18px; }
.cs .bn.sel{ outline: 2px solid var(--bc); outline-offset: 2px; }
.cs .bn-h{ padding: 8px 8px 8px 8px; border-bottom: 0; border-radius: 13px 13px 0 0; background: color-mix(in srgb, var(--bc) 11%, var(--surface)); }
.cs .bn-ic{ width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--bc); flex: none; }
.cs .bn-ht{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.cs .bn-ht small{ font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bc); }
.cs .bn-h .bn-ht b{ text-align: left; font-size: 13px; }
.cs .bn-txt{ border-radius: 10px; border-color: transparent; background: var(--surface-2); }
.cs .bn-btn{ background: transparent; color: var(--bc); border: 1px solid color-mix(in srgb, var(--bc) 45%, transparent); border-radius: 999px; }
.cs .bn-add{ width: auto; height: 22px; padding: 0 9px 0 6px; gap: 3px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface); color: var(--bc); border: 1.5px solid var(--bc); box-shadow: 0 4px 10px -6px var(--bc); font: inherit; font-size: 11px; font-weight: 700; bottom: -11px; }
.cs .bn-add:hover{ background: var(--bc); color: #fff; }
.cs .bt-menu{ border-radius: 14px; }
.cs .bt-menu-h{ color: #5B5BD6; }
.cs .bt-zoom{ flex-direction: row; border-radius: 999px; }
.cs .bt-zoom button{ width: 36px; height: 34px; }
.cs .bt-zoom button + button{ border-top: 0; border-left: 1px solid var(--line); }
.cs .bt-zoom span{ padding: 0 12px 0 8px; font-weight: 700; }
.cs .bt-legend{ top: 14px; bottom: auto; left: 14px; right: auto; border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); }
.cs .bt-legend i{ border-radius: 50%; }
.cs .bt-dh b small{ display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.cs .bt-sim-chs{ display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cs .bt-sim-chs button{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.cs .bt-sim-chs button[aria-selected="true"]{ background: var(--cc); border-color: var(--cc); color: #fff; }
.cs .bt-sim-chips{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cs .bt-sim-chips button{ border: 1px solid #C7D2FE; color: #3730A3; background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cs .bt-sim-numbered{ display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.cs .bt-sim-numbered button{ text-align: left; border: 0; background: transparent; padding: 1px 0; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; }
.cs .bt-sim-numbered button b{ display: inline-block; min-width: 14px; }
.cs .bt-sim-numbered small{ font-size: 11px; color: #64748B; }
.cs .bt-sim[data-ch="INSTAGRAM"] .bt-sim-chat, .cs .bt-sim[data-ch="MESSENGER"] .bt-sim-chat, .cs .bt-sim[data-ch="WEBCHAT"] .bt-sim-chat{ background: #fff; }
.cs .bt-sim[data-ch="INSTAGRAM"] .bt-sim-b.bot, .cs .bt-sim[data-ch="MESSENGER"] .bt-sim-b.bot{ background: #EFEFF2; border-radius: 18px 18px 18px 4px; box-shadow: none; }
.cs .bt-sim[data-ch="INSTAGRAM"] .bt-sim-b.me{ background: linear-gradient(135deg, #8B3FD9, #D6337A); color: #fff; border-radius: 18px 18px 4px 18px; }
.cs .bt-sim[data-ch="MESSENGER"] .bt-sim-b.me{ background: #2F6FED; color: #fff; border-radius: 18px 18px 4px 18px; }
.cs .bt-sim[data-ch="WEBCHAT"] .bt-sim-chat{ background: #F6F7FB; }
.cs .bt-sim[data-ch="WEBCHAT"] .bt-sim-b.bot{ background: #fff; border: 1px solid #E5E7EB; border-radius: 14px 14px 14px 4px; }
.cs .bt-sim[data-ch="WEBCHAT"] .bt-sim-b.me{ background: #0F766E; color: #fff; border-radius: 14px 14px 4px 14px; }
.cs .bt-sim[data-ch="RCS"] .bt-sim-chat{ background: #F8FAFF; }
.cs .bt-sim[data-ch="RCS"] .bt-sim-b.bot{ background: #E8EEFC; border-radius: 18px; box-shadow: none; }
.cs .bt-sim[data-ch="RCS"] .bt-sim-b.me{ background: #4F46E5; color: #fff; border-radius: 18px; }
.cs .bt-sim[data-ch="SMS"] .bt-sim-chat{ background: #fff; }
.cs .bt-sim[data-ch="SMS"] .bt-sim-b.bot{ background: #E9E9EB; border-radius: 16px; box-shadow: none; }
.cs .bt-sim[data-ch="SMS"] .bt-sim-b.me{ background: #34C759; color: #fff; border-radius: 16px; }
:root[data-theme="dark"] .bt-sim:not([data-ch="WHATSAPP"]) .bt-sim-chat{ background: #111827; }
:root[data-theme="dark"] .bt-sim:not([data-ch="WHATSAPP"]) .bt-sim-b.bot{ background: #1F2937; color: #E5E7EB; border-color: #374151; }
:root[data-theme="dark"] .bt-sim-chips button{ background: #1F2937; color: #C7D2FE; border-color: #3730A3; }
.cs .wf-home{ display: flex; flex-direction: column; gap: 14px; }
.cs .wf-hero{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, #C25A12 9%, var(--surface)), var(--surface) 45%, color-mix(in srgb, #15935A 8%, var(--surface))); }
.cs .wf-hero h2{ margin: 6px 0 4px; font-size: 23px; letter-spacing: -.01em; }
.cs .wf-hero p{ margin: 0; max-width: 70ch; color: var(--ink-2); font-size: 13.5px; }
.cs .wf-eyebrow{ display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #C25A12; }
.cs .wf-mono{ display: inline-grid; place-items: center; flex: none; border-radius: 28%; color: #fff; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(145deg, color-mix(in srgb, var(--ac) 82%, #fff), var(--ac)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.cs .wf-mono.empty{ background: var(--surface-2); color: var(--ink-3); border: 1.5px dashed var(--line); box-shadow: none; }
.cs .wf-appstrip{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.cs .wf-appchip{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.cs .wf-appchip > span:not(.wf-mono){ display: flex; flex-direction: column; min-width: 0; }
.cs .wf-appchip b{ font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wf-appchip small{ font-size: 11px; color: var(--ink-3); }
.cs .wf-appchip.on small{ color: #1F9D55; font-weight: 600; }
.cs .wf-appchip:not(.on) .wf-mono{ filter: grayscale(.7); opacity: .75; }
.cs .wf-appchip:hover{ border-color: var(--ink-3); }
@media (max-width: 1280px){.cs .wf-appstrip{ grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (max-width: 640px){.cs .wf-appstrip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.cs .wf-bar{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .wf-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.cs .wf-card{ display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 0; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: box-shadow .15s ease, transform .15s ease; }
.cs .wf-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 32px -26px rgba(15,23,42,.55); }
.cs .wf-card-flow{ display: flex; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.cs .wf-arrow{ width: 16px; height: 2px; background: var(--ink-3); position: relative; opacity: .5; }
.cs .wf-arrow::after{ content: ''; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: var(--ink-3); }
.cs .wf-card-flow i{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--sc); background: color-mix(in srgb, var(--sc) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent); }
.cs .wf-card-flow em{ font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.cs .wf-card-tg{ margin-left: auto; }
.cs .wf-card-name{ border: 0; background: transparent; padding: 0; font: inherit; font-size: 16.5px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.cs .wf-card-name:hover{ text-decoration: underline; }
.cs .wf-card-desc{ margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.cs .wf-card-trig{ display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.cs .wf-card-trig span{ font-size: 11px; color: var(--ink-3); font-weight: 600; }
.cs .wf-card-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cs .wf-card-stats span{ display: flex; flex-direction: column; font-size: 11px; color: var(--ink-3); }
.cs .wf-card-stats b{ font-size: 15px; color: var(--ink); }
.cs .wf-card footer{ display: flex; align-items: center; gap: 6px; margin: auto -16px 0; padding: 10px 16px; border-top: 1px solid var(--line); }
.cs .wf-card footer .btn{ display: inline-flex; align-items: center; gap: 5px; }
.cs .wf-card footer .wf-status{ margin-right: 2px; }
.cs .wf-card footer .bt-ib:first-of-type{ margin-left: auto; }
.cs .wf-status{ display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.cs .wf-status::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs .wf-status.active{ color: #15803D; background: color-mix(in srgb, #15803D 12%, var(--surface)); }
.cs .wf-status.paused{ color: #B45309; background: color-mix(in srgb, #B45309 12%, var(--surface)); }
.cs .wf-fixn{ display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--danger); }
.cs .wf-trig-cell{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cs .wf-empty{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 20px; text-align: center; border-radius: 18px; border: 1.5px dashed var(--line); }
.cs .wf-empty > span{ width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, #C25A12 12%, var(--surface)); color: #C25A12; }
.cs .wf-empty b{ font-size: 17px; }
.cs .wf-empty p{ margin: 0 0 6px; color: var(--ink-2); max-width: 46ch; }
.cs .wf-create .wf-apps{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs .wf-apps{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cs .wf-app{ display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.cs .wf-app > span:not(.wf-mono){ display: flex; flex-direction: column; min-width: 0; }
.cs .wf-app b{ font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wf-app small{ font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wf-app.on{ border-color: var(--brand-3); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-3) 25%, transparent); }
@media (max-width: 640px){.cs .wf-create .wf-apps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.cs .wf-editor{ position: fixed; top: 0; right: 0; bottom: 0; left: 76px; z-index: 60; display: flex; flex-direction: column; background: var(--bg); }
.cs .wf-top{ display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cs .wf-top-name{ display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.cs .wf-top-name b{ font-size: 17px; cursor: text; }
.cs .wf-top-name input{ max-width: 320px; }
.cs .wf-top-g{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs .wf-top-g .btn{ display: inline-flex; align-items: center; gap: 5px; }
.cs .wf-chk{ display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid color-mix(in srgb, #1F9D55 40%, var(--line)); background: color-mix(in srgb, #1F9D55 8%, var(--surface)); color: #15803D; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cs .wf-chk.bad{ border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); color: var(--danger); }
.cs .wf-body{ flex: 1; min-height: 0; display: flex; position: relative; }
.cs .wf-pal{ position: relative; width: 268px; flex: none; border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; transition: width .15s ease; }
.cs .wf-pal.shut{ width: 14px; overflow: visible; }
.cs .wf-pal-tg{ position: absolute; right: -13px; top: 14px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.cs .wf-pal-in{ padding: 14px 12px; display: flex; flex-direction: column; gap: 5px; }
.cs .wf-pal-h{ font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); padding: 0 4px 4px; display: flex; flex-direction: column; gap: 2px; }
.cs .wf-pal-h span{ text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.cs .wf-pal-it, .cs .wf-pal-trig{ display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; border: 1px solid transparent; background: transparent; font: inherit; text-align: left; cursor: grab; color: var(--ink); }
.cs .wf-pal-it:hover{ border-color: color-mix(in srgb, var(--sc) 40%, var(--line)); background: color-mix(in srgb, var(--sc) 6%, var(--surface)); }
.cs .wf-pal-it > span:last-child, .cs .wf-pal-trig > span:not(.wf-mono){ display: flex; flex-direction: column; min-width: 0; }
.cs .wf-pal-it b, .cs .wf-pal-trig b{ font-size: 13px; }
.cs .wf-pal-it small, .cs .wf-pal-trig small{ font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.cs .wf-pal-ic, .cs .wfn-ic{ width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: var(--sc); }
.cs .wfn-ic.sm{ width: 26px; height: 26px; border-radius: 8px; }
.cs .wf-pal-trig{ cursor: pointer; border-color: var(--line); }
.cs .wf-pal-trig > svg{ margin-left: auto; color: var(--ink-3); }
.cs .wf-pal-trig > span:not(.wf-mono){ flex: 1; }
.cs .wf-canvas{ position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: grab;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #C25A12 4%, transparent), transparent 60%), linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, var(--bg); }
.cs .wf-canvas:active{ cursor: grabbing; }
.cs .wf-world{ position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cs .wf-edges{ position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cs .wf-edges path{ fill: none; stroke: color-mix(in srgb, var(--ink-3) 65%, transparent); stroke-width: 2; }
.cs .wf-edges g.gh path{ stroke-dasharray: 4 5; opacity: .7; }
.cs .wf-edges g.run path{ stroke: #15935A; stroke-width: 3; }
.cs .wf-yn{ display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; color: #fff; }
.cs .wf-yn.yes{ background: #15935A; }
.cs .wf-yn.no{ background: #B4472B; }
.cs .wfn{ position: absolute; display: flex; align-items: center; gap: 11px; padding: 0 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line), 0 12px 24px -20px rgba(15,23,42,.6); cursor: pointer; box-sizing: border-box; }
.cs .wfn::before{ content: ''; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--surface); border: 2px solid color-mix(in srgb, var(--ink-3) 65%, transparent); }
.cs .wfn-trigger::before{ display: none; }
.cs .wfn:hover{ border-color: color-mix(in srgb, var(--sc) 50%, var(--line)); }
.cs .wfn.sel{ border-color: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 22%, transparent), 0 14px 26px -20px rgba(15,23,42,.6); }
.cs .wfn-trigger{ background: linear-gradient(135deg, #1E293B, #334155); border-color: #1E293B; color: #fff; }
.cs .wfn-trigger .wfn-t small{ color: #CBD5E1; }
.cs .wfn-trigger .wfn-t b{ color: #fff; }
.cs .wfn-end{ border-radius: 999px; }
.cs .wfn-t{ display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.cs .wfn-t small{ font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wfn-t b{ font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wfn-t em{ font-style: normal; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wfn-warn{ position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.cs .wfn-rs{ position: absolute; right: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 2px solid var(--surface); }
.cs .wfn-rs.ok{ background: #15935A; }
.cs .wfn-rs.failed{ background: var(--danger); }
.cs .wfn-rs.waiting{ background: #7A45D6; }
.cs .wfn-rs.skipped{ background: #94A3B8; }
.cs .wfn.rs-failed{ border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.cs .wfn.rs-ok{ border-color: color-mix(in srgb, #15935A 60%, var(--line)); }
.cs .wfn.dim{ opacity: .45; }
.cs .wf-ghost{ position: absolute; width: 150px; height: 40px; }
.cs .wf-ghost > button{ width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--ink-3) 50%, var(--line)); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.cs .wf-ghost > button:hover, .cs .wf-ghost.on > button, .cs .wf-ghost.over > button{ border-color: #C25A12; color: #C25A12; background: color-mix(in srgb, #C25A12 7%, var(--surface)); border-style: solid; }
.cs .wf-menu{ position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 210px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 36px -16px rgba(15,23,42,.45); }
.cs .wf-menu button{ display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; }
.cs .wf-menu button:hover{ background: var(--surface-2); }
.cs .wf-zoom{ position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 18px -14px rgba(0,0,0,.4); }
.cs .wf-zoom button{ width: 36px; height: 34px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.cs .wf-zoom span{ font-size: 11.5px; font-weight: 700; min-width: 42px; text-align: center; color: var(--ink-2); }
.cs .wf-result{ position: absolute; left: 16px; bottom: 16px; width: min(460px, calc(100% - 140px)); max-height: 46%; overflow: auto; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgba(15,23,42,.5); }
.cs .wf-result-h{ position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.cs .wf-result-h b{ font-size: 13.5px; color: var(--ink); margin-right: auto; }
.cs .wf-result.success .wf-result-h > svg{ color: #15935A; }
.cs .wf-result.failed .wf-result-h > svg{ color: var(--danger); }
.cs .wf-result.waiting .wf-result-h > svg{ color: #7A45D6; }
.cs .wf-result ol{ list-style: none; margin: 0; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.cs .wf-result li{ display: grid; grid-template-columns: 12px 130px 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; }
.cs .wf-result li b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wf-result li > span:last-child{ color: var(--ink-2); }
.cs .wf-dot{ width: 9px; height: 9px; border-radius: 50%; background: #15935A; }
.cs li.failed .wf-dot{ background: var(--danger); }
.cs li.failed > span:last-child{ color: var(--danger) !important; }
.cs li.skipped .wf-dot{ background: #94A3B8; }
.cs li.waiting .wf-dot{ background: #7A45D6; }
.cs .wf-pane{ width: 440px; flex: none; border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; box-shadow: -18px 0 36px -30px rgba(0,0,0,.4); z-index: 4; }
.cs .wf-pane.wide{ width: min(820px, 62vw); }
.cs .wf-pane-h{ display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 9%, var(--surface)), var(--surface)); }
.cs .wf-pane-h > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .wf-pane-h small{ font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sc); }
.cs .wf-pane-h b{ font-size: 16px; }
.cs .wf-pane-ic{ width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--sc); flex: none; }
.cs .wf-title-in{ border: 0; border-bottom: 1px dashed var(--line); background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); padding: 1px 0; outline: none; }
.cs .wf-title-in:focus{ border-bottom-color: var(--sc); }
.cs .wf-pane-b{ flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.cs .wf-pane-f{ display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.cs .wf-pane-f .btn{ display: inline-flex; align-items: center; gap: 5px; }
.cs .wf-issue, .cs .wf-ok{ margin-right: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--danger); }
.cs .wf-ok{ color: #15803D; }
.cs .btn.danger-ghost{ color: var(--danger); background: transparent; border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.cs .btn.danger-ghost:hover{ background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.cs .wf-sec{ display: flex; flex-direction: column; gap: 8px; }
.cs .wf-sec-h{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; }
.cs .wf-sec-h > b{ width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; background: var(--ink); color: var(--surface); flex: none; }
.cs .wf-sec-h .help{ font-weight: 500; font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.cs .wf-pane .wf-apps{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs .wf-evs{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .wf-ev{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; cursor: pointer; }
.cs .wf-ev input{ position: absolute; opacity: 0; pointer-events: none; }
.cs .wf-ev.on{ border-color: var(--brand-3); color: var(--brand-3); background: color-mix(in srgb, var(--brand-3) 8%, var(--surface)); }
.cs .wf-ev:focus-within{ outline: 2px solid var(--brand-3); outline-offset: 1px; }
.cs .wf-connect{ padding: 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, #C25A12 45%, var(--line)); background: color-mix(in srgb, #C25A12 5%, var(--surface)); }
.cs .wf-connect .btn{ align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; }
.cs .wf-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs .wf-hook{ display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.cs .wf-hook code{ flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wf-hook .btn{ display: inline-flex; gap: 4px; align-items: center; }
.cs .wf-method{ font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 7px; border-radius: 6px; background: #15935A; color: #fff; }
.cs .wf-method.key{ background: #475569; }
.cs .wf-setup{ margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.cs .wf-setup svg{ flex: none; margin-top: 2px; }
.cs .wj{ font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.65; padding: 12px 14px; border-radius: 12px; background: #0F172A; color: #CBD5E1; max-height: 330px; overflow: auto; }
.cs .wj-k{ color: #93C5FD; }
.cs .wj-leaf{ border: 0; background: transparent; padding: 0 2px; margin: 0 -2px; font: inherit; cursor: copy; border-radius: 4px; }
.cs .wj-leaf:hover{ background: rgba(255,255,255,.12); }
.cs .wj-s{ color: #FCD34D; }
.cs .wj-n{ color: #86EFAC; }
.cs .wj-b{ color: #F9A8D4; }
.cs .wf-vi{ position: relative; display: flex; flex-direction: column; gap: 3px; }
.cs .wf-vi-row{ display: flex; gap: 0; }
.cs .wf-vi-row .inp{ flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cs .wf-vi-btn{ width: 36px; flex: none; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.cs .wf-vi-btn.on, .cs .wf-vi-btn:hover{ color: #C25A12; }
.cs .wf-vi-pop{ position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 36px -16px rgba(15,23,42,.45); }
.cs .wf-vi-ph{ display: flex; gap: 4px; }
.cs .wf-vi-ph .inp{ flex: 1; }
.cs .wf-vi-list{ max-height: 220px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; }
.cs .wf-vi-list button{ display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 12px; cursor: pointer; text-align: left; color: var(--ink); }
.cs .wf-vi-list button:hover{ background: var(--surface-2); }
.cs .wf-vi-list code{ font-size: 11.5px; color: #C25A12; }
.cs .wf-vi-list span{ color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cs .wf-vi-sample{ display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wf-tpl{ display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start; }
.cs .wf-tpl-form{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs .wf-tpl-prev{ position: sticky; top: 0; }
.cs .wf-phone{ width: 100%; }
.cs .wf-map{ display: grid; grid-template-columns: 44px 84px minmax(0, 1fr); gap: 8px; align-items: start; }
.cs .wf-ph{ font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; padding: 8px 0; color: #C25A12; }
.cs .wf-map-s{ font-size: 11.5px; color: var(--ink-3); padding: 9px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .wf-note, .cs .wf-explain{ display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; background: var(--surface-2); color: var(--ink-2); }
.cs .wf-note svg, .cs .wf-explain > svg{ flex: none; margin-top: 2px; }
.cs .wf-explain{ background: color-mix(in srgb, #C25A12 7%, var(--surface)); border: 1px solid color-mix(in srgb, #C25A12 25%, var(--line)); }
.cs .wf-explain > svg{ color: #C25A12; }
.cs .wf-explain > div{ display: flex; flex-direction: column; gap: 2px; }
.cs .wf-explain b{ color: var(--ink); }
.cs .wf-explain em{ font-style: normal; font-weight: 700; padding: 0 6px; border-radius: 6px; color: #fff; }
.cs .wf-explain em.y{ background: #15935A; }
.cs .wf-explain em.n{ background: #B4472B; }
.cs .wf-rule{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); position: relative; }
.cs .wf-join{ position: absolute; top: -10px; left: 12px; font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #C25A12; color: #fff; }
.cs .wf-rule .bt-mini{ align-self: flex-start; }
.cs .wf-verdict{ font-size: 12.5px; padding: 8px 12px; border-radius: 10px; }
.cs .wf-verdict.y{ background: color-mix(in srgb, #15935A 10%, var(--surface)); color: #15803D; }
.cs .wf-verdict.n{ background: color-mix(in srgb, #B4472B 10%, var(--surface)); color: #B4472B; }
.cs .wf-check{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.cs .wf-check input{ margin-top: 3px; }
.cs .wf-check > span{ display: flex; flex-direction: column; }
.cs .wf-check b{ font-size: 13px; }
.cs .wf-check small{ font-size: 12px; color: var(--ink-3); }
.cs .wf-pills{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .wf-pills button{ display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.cs .wf-pills button[aria-pressed="true"]{ background: #C13A7A; border-color: #C13A7A; color: #fff; }
.cs .wf-samples{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .wf-json-in{ font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.cs .wf-issues{ display: flex; flex-direction: column; gap: 6px; }
.cs .wf-issues button{ display: grid; grid-template-columns: 26px 140px 1fr 16px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--ink); }
.cs .wf-issues button span:nth-child(3){ color: var(--danger); }
.cs .wf-issues button:hover{ border-color: var(--ink-3); }
.cs .wf-runs{ display: flex; flex-direction: column; gap: 12px; }
.cs .wf-kpis{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cs .wf-kpis > div{ display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); border-top: 3px solid var(--line); }
.cs .wf-kpis small{ font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cs .wf-kpis b{ font-size: 22px; }
.cs .wf-kpis span{ font-size: 11.5px; color: var(--ink-3); }
.cs .wf-kpis .ok{ border-top-color: #15935A; }
.cs .wf-kpis .bad{ border-top-color: var(--danger); }
.cs .wf-kpis .wait{ border-top-color: #7A45D6; }
@media (max-width: 1100px){.cs .wf-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.cs .wf-runs-bar{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs .wf-tbl td, .cs .wf-tbl th{ white-space: nowrap; }
.cs .wf-tbl .mono{ font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.cs .wf-test{ margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink-3); }
.cs .wf-rs-pill{ display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.cs .wf-rs-pill::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs .wf-rs-pill.success{ color: #15803D; background: color-mix(in srgb, #15803D 12%, var(--surface)); }
.cs .wf-rs-pill.failed{ color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, var(--surface)); }
.cs .wf-rs-pill.waiting{ color: #7A45D6; background: color-mix(in srgb, #7A45D6 12%, var(--surface)); }
.cs .wf-empty-row{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px; color: var(--ink-3); }
.cs .wf-rv{ display: flex; flex-direction: column; gap: 14px; }
.cs .wf-rv-top{ display: flex; align-items: center; gap: 12px; }
.cs .wf-rv-top > div{ flex: 1; display: flex; flex-direction: column; }
.cs .wf-rv-top b{ font-size: 15px; }
.cs .wf-rv-top > div > span{ font-size: 12.5px; color: var(--ink-3); }
.cs .wf-rv-kv{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs .wf-rv-kv span{ display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.cs .wf-rv-kv small{ font-size: 11px; font-weight: 600; color: var(--ink-3); }
.cs .wf-tl{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs .wf-tl li{ display: grid; grid-template-columns: 28px 1fr; gap: 10px; position: relative; padding-bottom: 12px; }
.cs .wf-tl li:not(:last-child)::before{ content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.cs .wf-tl-dot{ width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--sc); }
.cs .wf-tl li.failed .wf-tl-dot{ background: var(--danger); }
.cs .wf-tl li.skipped .wf-tl-dot{ background: #94A3B8; }
.cs .wf-tl-b{ min-width: 0; }
.cs .wf-tl-b p{ margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.cs .wf-tl li.failed .wf-tl-b p{ color: var(--danger); }
.cs .wf-tl-h{ display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 4px 0 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.cs .wf-tl-h b{ font-size: 13.5px; }
.cs .wf-tl-h em{ margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.cs .wf-tl-st{ font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #15935A 12%, var(--surface)); color: #15803D; }
.cs .wf-tl-st.failed{ background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.cs .wf-tl-st.waiting{ background: color-mix(in srgb, #7A45D6 12%, var(--surface)); color: #7A45D6; }
.cs .wf-tl-st.skipped{ background: var(--surface-2); color: var(--ink-3); }
.cs .wf-fix{ display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 7px 10px; border-radius: 9px; font-size: 12px; background: color-mix(in srgb, #F59E0B 12%, var(--surface)); color: var(--ink); }
.cs .wf-fix svg{ flex: none; margin-top: 2px; color: #B45309; }
.cs .wf-tl-io{ display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.cs .wf-tl-io small{ font-size: 11px; font-weight: 700; color: var(--ink-3); }
.cs .wf-tl-io pre{ margin: 2px 0 0; max-height: 200px; overflow: auto; font-size: 11.5px; padding: 8px 10px; border-radius: 9px; background: #0F172A; color: #E2E8F0; }
@media (max-width: 900px){.cs .wf-editor{ left: 0; bottom: 64px; }
.cs .wf-pal:not(.shut){ position: absolute; z-index: 8; height: 100%; }
.cs .wf-pane, .cs .wf-pane.wide{ position: absolute; right: 0; top: 0; bottom: 0; width: 100%; }
.cs .wf-tpl{ grid-template-columns: 1fr; }
.cs .wf-pane .wf-apps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .wf-2{ grid-template-columns: 1fr; }}
:root[data-theme="dark"] .wfn-trigger{ background: linear-gradient(135deg, #0B1220, #1E293B); border-color: #334155; }
:root[data-theme="dark"] .wf-sec-h > b{ background: #E2E8F0; color: #0F172A; }
*:has(.overlay) .imp-bar{ display: none; }
.cs .wf-pal-it.off{ opacity: .5; cursor: not-allowed; }
.cs .wf-menu button:disabled{ opacity: .45; cursor: not-allowed; }
.cs .fresh-empty{ display: flex; align-items: center; gap: 10px; padding: 18px 14px; margin-top: 10px; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--ink-3); font-size: 13px; }
.cs .fresh-empty svg{ flex: none; }
.cs .gs{ border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, #1FAF5A 8%, var(--surface)), var(--surface) 55%); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.cs .gs-h{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cs .gs-h > div:first-child{ flex: 1; display: flex; flex-direction: column; }
.cs .gs-h b{ font-size: 17px; }
.cs .gs-h span{ font-size: 12.5px; color: var(--ink-2); }
.cs .gs-bar{ width: 200px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cs .gs-bar i{ display: block; height: 100%; background: linear-gradient(90deg, #1FAF5A, #0E87A3); border-radius: inherit; }
.cs .gs > ol{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cs .gs > ol > li{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cs .gs > ol > li > div{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cs .gs > ol > li b{ font-size: 13.5px; }
.cs .gs > ol > li small{ font-size: 12px; color: var(--ink-3); }
.cs .gs > ol > li .btn{ align-self: flex-start; }
.cs .gs-n{ width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--ink-2); }
.cs .gs > ol > li.done{ background: color-mix(in srgb, #1FAF5A 6%, var(--surface)); border-color: color-mix(in srgb, #1FAF5A 30%, var(--line)); }
.cs .gs > ol > li.done .gs-n{ background: #1FAF5A; color: #fff; }
.cs .gs > ol > li.done b{ text-decoration: line-through; color: var(--ink-3); }
@media (max-width: 1100px){.cs .gs > ol{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 560px){.cs .gs > ol{ grid-template-columns: 1fr; }}
.cs .wacc{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, #1FAF5A 35%, var(--line)); background: color-mix(in srgb, #1FAF5A 6%, var(--surface)); margin-bottom: 18px; }
.cs .wacc > div{ flex: 1; display: flex; flex-direction: column; }
.cs .wacc b{ font-size: 15px; }
.cs .wacc span{ font-size: 12.5px; color: var(--ink-2); }
.cs .wacc-ic{ width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1FAF5A, #0E7C5B); flex: none; }
.cs .wacc .btn{ display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px){.cs .wacc{ flex-wrap: wrap; }}
.cs .wac{ display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; min-height: 340px; }
.cs .wac-steps{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 14px; }
.cs .wac-steps li{ display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 9px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cs .wac-steps li span{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; border: 1.5px solid var(--line); flex: none; }
.cs .wac-steps li.on{ color: var(--ink); background: var(--surface-2); }
.cs .wac-steps li.on span{ border-color: #1FAF5A; color: #1FAF5A; }
.cs .wac-steps li.done{ color: var(--ink-2); }
.cs .wac-steps li.done span{ background: #1FAF5A; border-color: #1FAF5A; color: #fff; }
.cs .wac-body{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs .wac-paths{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs .wac-path{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.cs .wac-path svg{ color: #1FAF5A; }
.cs .wac-path b{ font-size: 14px; }
.cs .wac-path span{ font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.cs .wac-path.on{ border-color: #1FAF5A; background: color-mix(in srgb, #1FAF5A 6%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, #1FAF5A 18%, transparent); }
.cs .wac-need{ padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.cs .wac-need ul{ margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }
.cs .wac-sim{ display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; background: color-mix(in srgb, #2F6FED 8%, var(--surface)); color: var(--ink-2); }
.cs .wac-sim svg{ flex: none; margin-top: 2px; color: #2F6FED; }
.cs .wac-2{ display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start; }
.cs .wac-card{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; border-radius: 16px; background: var(--surface-2); text-align: center; }
.cs .wac-av{ width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1FAF5A, #0E7C5B); margin-bottom: 4px; }
.cs .wac-card b{ font-size: 15px; }
.cs .wac-card small{ font-size: 11.5px; color: var(--ink-3); }
.cs .wac-card p{ margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.cs .wac-card em{ margin-top: 8px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; }
.cs .wac-phone{ display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; }
.cs .wac-code{ letter-spacing: .4em; font-size: 18px; max-width: 200px; }
.cs .wac-done{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10px 0; }
.cs .wac-ok{ width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1FAF5A; }
.cs .wac-done h3{ margin: 4px 0 0; font-size: 19px; }
.cs .wac-done p{ margin: 0; max-width: 52ch; color: var(--ink-2); font-size: 13.5px; }
.cs .wac-facts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 6px 0; }
.cs .wac-facts span{ display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: var(--surface-2); font-weight: 650; font-size: 13px; }
.cs .wac-facts small{ font-size: 11px; color: var(--ink-3); font-weight: 600; }
.cs .wac-err{ display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
@media (max-width: 760px){.cs .wac{ grid-template-columns: 1fr; }
.cs .wac-steps{ flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
.cs .wac-steps li{ white-space: nowrap; }
.cs .wac-paths, .cs .wac-2{ grid-template-columns: 1fr; }
.cs .wac-phone{ grid-template-columns: 1fr; }}
:root[data-theme="dark"] .wac-card em{ background: #3A2E0A; color: #FCD34D; }
.cs .wac{ display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; min-height: 380px; align-items: start; }
.cs .wac-rail{ list-style: none; margin: 0; padding: 4px 18px 4px 0; display: flex; flex-direction: column; gap: 0; border-right: 1px solid var(--line); align-self: stretch; }
.cs .wac-rail > li{ position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 0 22px; }
.cs .wac-rail > li:not(:last-child)::before{ content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.cs .wac-rail > li.done:not(:last-child)::before{ background: #1FAF5A; }
.cs .wac-dot{ width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; border: 2px solid var(--line); background: var(--surface); color: var(--ink-3); position: relative; z-index: 1; }
.cs .wac-rail > li.on .wac-dot{ border-color: #1FAF5A; color: #1FAF5A; box-shadow: 0 0 0 4px color-mix(in srgb, #1FAF5A 16%, transparent); }
.cs .wac-rail > li.done .wac-dot{ background: #1FAF5A; border-color: #1FAF5A; color: #fff; }
.cs .wac-rt{ display: flex; flex-direction: column; gap: 1px; padding-top: 3px; min-width: 0; }
.cs .wac-rt b{ font-size: 13.5px; color: var(--ink-2); font-weight: 650; }
.cs .wac-rt small{ font-size: 11.5px; color: var(--ink-3); }
.cs .wac-rail > li.on .wac-rt b{ color: var(--ink); }
.cs .wac-stack{ display: flex; flex-direction: column; gap: 14px; }
.cs .wac-path{ display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 2px; align-items: start; padding: 14px; }
.cs .wac-path > .wac-path-ic{ grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, #1FAF5A 12%, var(--surface)); color: #15935A; }
.cs .wac-path.on > .wac-path-ic{ background: #1FAF5A; color: #fff; }
.cs .wac-need{ padding: 14px; }
.cs .wac-need > b{ display: block; margin-bottom: 10px; font-size: 13.5px; }
.cs .wac-need-g{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs .wac-need-g > div{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.cs .wac-need-g > div > svg{ flex: none; margin-top: 1px; color: #15935A; }
.cs .wac-need-g b{ color: var(--ink); font-weight: 650; }
.cs .wac-how{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: color-mix(in srgb, #2F6FED 7%, var(--surface)); border: 1px solid color-mix(in srgb, #2F6FED 22%, var(--line)); }
.cs .wac-how > svg{ flex: none; margin-top: 2px; color: #2F6FED; }
.cs .wac-meta-btn{ background: #1E5BD8 !important; border-color: #1E5BD8 !important; display: inline-flex; align-items: center; gap: 6px; }
.cs .wac-stage{ display: grid; place-items: center; padding: 14px; border-radius: 16px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 10px, transparent 10px 20px); min-height: 370px; }
.cs .mwin{ width: min(500px, 100%); border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -28px rgba(15,23,42,.55); }
.cs .mwin-bar{ display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.cs .mwin-dots{ display: inline-flex; gap: 5px; }
.cs .mwin-dots i{ width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.cs .mwin-url{ flex: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; }
.cs .mwin-bar em{ font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: #FEF3C7; color: #92400E; }
.cs .mwin-steps{ display: flex; gap: 4px; padding: 10px 16px 0; }
.cs .mwin-steps span{ flex: 1; font-size: 10.5px; font-weight: 650; color: var(--ink-3); padding-top: 6px; border-top: 3px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .mwin-steps span.done{ border-top-color: #1E5BD8; color: var(--ink-2); }
.cs .mwin-steps span.on{ border-top-color: #1E5BD8; color: #1E5BD8; }
.cs .mwin-b{ padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 210px; }
.cs .mwin-b h4{ margin: 0; font-size: 16px; }
.cs .mwin-b .help{ margin: 0; }
.cs .mwin-opts{ display: flex; flex-direction: column; gap: 6px; }
.cs .mwin-opts label{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; cursor: pointer; }
.cs .mwin-opts label.on{ border-color: #1E5BD8; background: color-mix(in srgb, #1E5BD8 6%, var(--surface)); }
.cs .mwin-perms{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs .mwin-perms > li{ display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.cs .mwin-perms svg{ color: #1E5BD8; flex: none; margin-top: 2px; }
.cs .mwin-f{ display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.cs .mwin-next{ background: #1E5BD8 !important; border-color: #1E5BD8 !important; color: #fff !important; min-width: 96px; }
.cs .mwin .wac-code, .cs .mwin .link-btn{ align-self: flex-start; }
.cs .wac-h{ margin: 0; font-size: 18px; }
.cs .wac-fin{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .wac-fin > li{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.cs .wac-fin > li > span{ width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--line); }
.cs .wac-fin > li.on{ color: var(--ink); border-color: color-mix(in srgb, #1FAF5A 40%, var(--line)); }
.cs .wac-fin > li.done{ color: var(--ink-2); }
.cs .wac-fin > li.done > span{ background: #1FAF5A; border-color: #1FAF5A; color: #fff; }
.cs .wac-spin{ width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, #1FAF5A 30%, transparent); border-top-color: #1FAF5A; animation: wacspin .8s linear infinite; }
@keyframes wacspin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){.cs .wac-spin{ animation: none; }}
@media (max-width: 860px){.cs .wac{ grid-template-columns: 1fr; }
.cs .wac-rail{ flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; overflow-x: auto; gap: 14px; }
.cs .wac-rail > li{ padding: 0; }
.cs .wac-rail > li::before{ display: none; }
.cs .wac-rt small{ display: none; }
.cs .wac-need-g{ grid-template-columns: 1fr; }}
:root[data-theme="dark"] .mwin-bar em{ background: #3A2E0A; color: #FCD34D; }
.cs .wac-path > .wac-path-ic svg{ color: #15935A; }
.cs .wac-path.on > .wac-path-ic svg{ color: #fff; }
.cs .wac{ min-height: 0; }
.cs .bc-rep-h{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs .bc-rep-h h2{ margin: 0; }
.cs .bc-rep-h .help{ margin: 4px 0 0; }
.cs .bc-tsearch{ min-width: 260px; }
.cs .bce-link{ display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; font: inherit; font-weight: 700; color: var(--brand-3); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.cs .bce-link:hover:not(:disabled){ background: color-mix(in srgb, var(--brand-3) 10%, transparent); }
.cs .bce-link:disabled{ color: var(--ink-3); text-decoration: none; cursor: default; }
.cs .bce-link:disabled svg{ display: none; }
.cs .bce-clicks{ min-width: 140px; }
.cs .bce-chips{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cs .bce-chips span{ font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.cs .bce-chips b{ color: var(--ink); }
.cs .st-optout{ color: #B45309; }
.cs .st-blocked{ color: var(--danger); }
.cs .bce{ display: flex; flex-direction: column; gap: 14px; }
.cs .bce-kpis{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cs .bce-kpis > div{ display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-top: 3px solid var(--line); }
.cs .bce-kpis small{ font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cs .bce-kpis b{ font-size: 22px; }
.cs .bce-kpis span{ font-size: 11.5px; color: var(--ink-3); }
.cs .bce-kpis .r{ border-top-color: #2C6FD6; }
.cs .bce-kpis .c{ border-top-color: #15935A; }
.cs .bce-kpis .o{ border-top-color: #D97706; }
.cs .bce-kpis .b{ border-top-color: var(--danger); }
.cs .bce-btns{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.cs .bce-btns > b{ font-size: 13px; }
.cs .bce-btn{ display: grid; grid-template-columns: minmax(140px, 220px) 1fr 70px; gap: 12px; align-items: center; font-size: 13px; }
.cs .bce-bl{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.cs .bce-bl em{ font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink-3); padding: 0 6px; border-radius: 5px; background: var(--surface); }
.cs .bce-bar{ height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.cs .bce-bar i{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #15935A, #2C6FD6); }
.cs .bce-btn > b{ text-align: right; }
.cs .bce-bar2{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .bce-tbl{ max-height: 360px; overflow: auto; }
.cs .bce-tbl td{ white-space: nowrap; }
.cs .bce-msg{ white-space: normal !important; max-width: 280px; }
.cs .bce-type{ font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.cs .bce-type.t-textreply{ color: #2C6FD6; background: color-mix(in srgb, #2C6FD6 10%, var(--surface)); }
.cs .bce-type.t-button{ color: #15935A; background: color-mix(in srgb, #15935A 11%, var(--surface)); }
.cs .bce-type.t-linkclick, .cs .bce-type.t-call{ color: #7C3AED; background: color-mix(in srgb, #7C3AED 10%, var(--surface)); }
.cs .bce-type.t-optout{ color: #B45309; background: color-mix(in srgb, #D97706 12%, var(--surface)); }
@media (max-width: 760px){.cs .bce-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .bce-btn{ grid-template-columns: 1fr 60px; }
.cs .bce-btn .bce-bar{ grid-column: 1 / -1; grid-row: 2; }}
.cs .bc-rep-h ~ .table-wrap th{ white-space: nowrap; }
.cs .bc-tsearch{ min-width: 300px; }
.cs .bcp-per{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.cs .bcp-in{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.cs .bcp-in .inp{ width: auto; padding: 6px 8px; }
.cs .bcp-lbl{ font-size: 12.5px; font-weight: 650; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; background: var(--surface-2); }
.cs .cost-h{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cs .cost-h h2{ margin: 0; }
.cs .cost-basis{ display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.cs .cost-ctl{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs .cost-ctl .btn{ display: inline-flex; gap: 5px; align-items: center; }
.cs .cost-kpis{ display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.cs .cost-kpis > div{ display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.cs .cost-kpis small{ font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cs .cost-kpis b{ font-size: 20px; }
.cs .cost-kpis span{ font-size: 11.5px; color: var(--ink-3); }
.cs .cost-kpis .main{ color: #fff; border: 0; background: linear-gradient(135deg, var(--fill-2, #1596A9), var(--fill-3, #2C6FD6)); }
.cs .cost-kpis .main small, .cs .cost-kpis .main span{ color: rgba(255,255,255,.85); }
.cs .cost-kpis .main b{ font-size: 24px; }
.cs .cost-chart{ display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 6px 2px 20px; border-bottom: 1px solid var(--line); }
.cs .cost-chart > div{ flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.cs .cost-chart i{ display: block; width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--fill-3, #2C6FD6), var(--fill-2, #1596A9)); }
.cs .cost-chart span{ position: absolute; bottom: -18px; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.cs .cost-sub{ margin: 16px 0 6px; font-size: 14px; }
.cs .cost-tbl th.bill, .cs .cost-tbl td.bill{ background: color-mix(in srgb, var(--brand-3) 8%, transparent); color: var(--ink); font-weight: 700; }
.cs .cost-tbl tfoot td{ font-weight: 800; border-top: 2px solid var(--line); }
@media (max-width: 900px){.cs .cost-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.cs .perm-btn{ display: inline-flex; align-items: center; gap: 5px; }
.cs .pm{ display: flex; flex-direction: column; gap: 12px; }
.cs .pm-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs .pm-who{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.cs .pm-who > div{ display: flex; flex-direction: column; }
.cs .pm-who span{ font-size: 12px; color: var(--ink-3); }
.cs .pm-presets{ margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); }
.cs .pm-one{ display: flex; flex-direction: column; gap: 12px; }
.cs .pm-grp h4{ margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cs .pm-grp{ display: flex; flex-direction: column; gap: 6px; }
.cs .pm-row{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.cs .pm-row > div{ flex: 1; display: flex; flex-direction: column; }
.cs .pm-row b{ font-size: 13.5px; }
.cs .pm-row span{ font-size: 12px; color: var(--ink-3); }
.cs .pm-row.on{ border-color: color-mix(in srgb, var(--brand-1) 40%, var(--line)); background: color-mix(in srgb, var(--brand-1) 5%, var(--surface)); }
.cs .pm-matrix{ max-height: 60vh; overflow: auto; }
.cs .pm-col{ text-align: center; white-space: nowrap; }
.cs .pm-col small{ display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.cs .pm-matrix input[type=checkbox]{ width: 17px; height: 17px; accent-color: var(--brand-3); }
.cs .pm-g td{ background: var(--surface-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 12px; }
.cs .pm-matrix{ max-height: none; overflow: visible; }
.cs .pv-bar{ position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 56; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 999px; background: #7C3AED; color: #fff; font-size: 13px; box-shadow: 0 12px 28px -14px rgba(124,58,237,.7); }
.cs .pv-bar .btn{ background: #fff; color: #5B21B6; border: 0; }
.cs .rtabs{ flex: none; padding: 10px 24px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cs .rtabs-in{ position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cs .rtabs-in::-webkit-scrollbar{ display: none; }
.cs .rtabs-ink{ position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px -6px rgba(15,23,42,.25); transition: transform .28s cubic-bezier(.3,.7,.2,1), width .28s cubic-bezier(.3,.7,.2,1); z-index: 0; }
.cs .rtab{ position: relative; z-index: 1; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: color .2s ease; }
.cs .rtab b{ font-weight: 600; }
.cs .rtab svg{ opacity: .75; }
.cs .rtab:hover{ color: var(--ink); }
.cs .rtab[aria-selected="true"]{ color: var(--brand-3); }
.cs .rtab[aria-selected="true"] b{ font-weight: 700; }
.cs .rtab[aria-selected="true"] svg{ opacity: 1; }
.cs .rtab em{ font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.cs .rtab[aria-selected="true"] em{ background: color-mix(in srgb, var(--brand-3) 14%, transparent); color: var(--brand-3); }
.cs .rtab.bad em{ background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.cs .rtab:focus-visible{ outline: 2px solid var(--brand-3); outline-offset: -2px; }
.cs .rt-pane{ display: flex; flex-direction: column; animation: rtin .2s ease; }
.cs .rt-pane > .panel:first-child, .cs .rt-pane > section:first-child{ margin-top: 0 !important; }
.cs .rt-pane > section + section, .cs .rt-pane > .panel + .panel{ margin-top: 16px; }
@keyframes rtin{ from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){.cs .rt-pane{ animation: none; }
.cs .rtabs-ink{ transition: none; }}
@media (max-width: 760px){.cs .rtabs{ padding: 8px 12px 10px; }
.cs .rtab{ flex: 0 0 auto; padding: 8px 12px; }}
.cs .cost-kpis.k2{ grid-template-columns: 1.3fr 1fr; }
.cs .tz-chip{ display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; cursor: help; }
.cs .tz-chip b{ color: var(--ink); font-weight: 650; }
.cs .cur-chip{ display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.cs .cur-chip button{ border: 0; background: transparent; padding: 0 10px; height: 100%; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.cs .cur-chip button[aria-pressed="true"]{ background: linear-gradient(135deg, var(--fill-2, #1596A9), var(--fill-3, #2C6FD6)); color: #fff; }
.cs .cost-ctl .cur-chip{ height: 32px; }
.cs .cur-tag{ display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: help; }
.cs .cost-ctl .cur-tag{ height: 32px; }
.cs .wa-mode{ display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.cs .wa-mode i{ width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 3px color-mix(in srgb, #F59E0B 22%, transparent); }
.cs .wa-mode.live i{ background: #1FA855; box-shadow: 0 0 0 3px color-mix(in srgb, #1FA855 22%, transparent); }
.cs .wa-limits{ display: flex; flex-direction: column; gap: 12px; }
.cs .wa-limits-h{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cs .wa-limits-h h2{ margin: 0 0 2px; }
.cs .wa-limits-g{ display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 10px; }
.cs .wl-cell{ display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.cs .wl-k{ font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.cs .wl-cell b{ font-size: 19px; }
.cs .wl-cell small{ color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.cs .wl-bar{ height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.cs .wl-bar i{ display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #1FA855, #128C7E); }
.cs .wl-bar i.hot{ background: linear-gradient(90deg, #F59E0B, #E5484D); }
.cs .wl-foot{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
@media (max-width: 860px){.cs .wa-limits-g{ grid-template-columns: 1fr; }}
.cs .wa-set{ display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; align-items: start; }
.cs .wa-set-nav{ position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cs .wa-set-num{ display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.cs .wa-set-num .wa-mode{ align-self: flex-start; }
.cs .wa-set-item{ display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cs .wa-set-item:hover{ background: var(--surface-2); color: var(--ink); }
.cs .wa-set-item.on{ background: color-mix(in srgb, #1FA855 12%, var(--surface)); color: var(--ink); font-weight: 600; }
.cs .wa-set-item.on svg{ color: #128C7E; }
.cs .wa-set-body{ display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs .wa-sec-h{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cs .wa-sec-h h2, .cs .wa-sec-h h3{ margin: 0 0 2px; }
.cs .wa-sec-h p{ margin: 0; max-width: 680px; }
.cs .wa-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 20px; }
.cs .wa-empty h3{ margin: 4px 0 0; }
@media (max-width: 900px){.cs .wa-set{ grid-template-columns: 1fr; }
.cs .wa-set-nav{ position: static; flex-direction: row; flex-wrap: wrap; }
.cs .wa-set-num{ width: 100%; }}
.cs .wa-num-list{ display: grid; gap: 12px; }
.cs .wa-num{ border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cs .wa-num-h{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .wa-num-h > div{ display: flex; flex-direction: column; }
.cs .wa-num-h > div span{ font-size: 12.5px; color: var(--ink-3); }
.cs .wa-num-ic{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #25D366, #128C7E); flex: none; }
.cs .wa-num-g{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; margin: 0; }
.cs .wa-num-g div{ min-width: 0; }
.cs .wa-num-g dt{ font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
.cs .wa-num-g dd{ margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.cs .wa-num-a{ flex-wrap: wrap; }
.cs .wa-lim-explain h3{ margin-top: 0; }
.cs .wa-steps{ margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.cs .grow{ flex: 1 1 auto; min-width: 0; }
.cs .wa-prof{ display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.cs .wa-prof-form{ border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 16px; }
.cs .wa-photo-row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs .wa-photo{ width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--ink-3); flex: none; }
.cs .wa-photo.sm{ width: 48px; height: 48px; }
.cs .wa-photo img{ width: 100%; height: 100%; object-fit: cover; }
.cs .wa-prof-prev{ position: sticky; top: 12px; }
.cs .wpp-phone{ border-radius: 26px; border: 8px solid #1d2733; background: #F0F2F5; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 380px; }
.cs .wpp-top{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; background: #fff; border-radius: 12px; text-align: center; color: #111b21; }
.cs .wpp-top small{ color: #667781; }
.cs .wpp-row{ background: #fff; border-radius: 10px; padding: 9px 11px; font-size: 12.5px; color: #111b21; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.cs .wpp-row small{ color: #667781; font-size: 11px; }
@media (max-width: 1000px){.cs .wa-prof{ grid-template-columns: 1fr; }
.cs .wa-prof-prev{ position: static; }}
.cs .wa-user-cur{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs .wa-user-at{ font-size: 20px; font-weight: 700; color: #128C7E; }
.cs .wa-at{ font-weight: 700; color: var(--ink-3); }
.cs .wa-rules{ margin: 8px 0 0; padding-left: 18px; color: var(--ink-3); font-size: 12.5px; display: grid; gap: 2px; }
.cs .chip-btn{ display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; font-style: normal; }
.cs .chip-btn:hover{ border-color: #1FA855; }
.cs .chip-btn.sm{ padding: 2px 8px; font-size: 11.5px; cursor: default; }
.cs .wa-kv{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cs .wa-kv > span:first-child{ color: var(--ink-3); font-size: 12.5px; min-width: 96px; }
.cs .wa-hours{ display: grid; gap: 8px; margin-top: 10px; }
.cs .wa-hour-row{ display: grid; grid-template-columns: 140px 120px auto 120px; gap: 8px; align-items: center; }
.cs .wa-hour-row .inp{ padding: 6px 8px; }
@media (max-width: 560px){.cs .wa-hour-row{ grid-template-columns: 1fr 1fr; }}
.cs .wa-qr-new{ display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cs .wa-qr-plain{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; }
.cs .wa-qr-img{ display: block; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.cs .wa-qr-img.ph{ width: 120px; height: 120px; display: grid; place-items: center; color: var(--ink-3); background: var(--surface-2); }
.cs .wa-qr-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.cs .wa-qr-card{ display: flex; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); align-items: flex-start; }
.cs .wa-qr-msg{ font-size: 13px; color: var(--ink-2); }
.cs .mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.cs .wa-trunc{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .wa-seq{ display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cs .wa-seq > div{ display: flex; flex-direction: column; gap: 3px; }
.cs .wa-seq span{ font-size: 12.5px; color: var(--ink-2); }
.cs .wa-groups{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cs .wa-group{ display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cs .wa-group.on, .cs .wa-group:hover{ border-color: #1FA855; }
.cs .wa-group > span:last-child{ display: flex; flex-direction: column; }
.cs .wa-group small{ color: var(--ink-3); }
.cs .wa-group-ic{ width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #1FA855 14%, var(--surface)); color: #128C7E; flex: none; }
.cs .wa-group-d{ display: flex; flex-direction: column; gap: 10px; }
.cs .wa-jr{ padding: 6px 0; border-bottom: 1px solid var(--line); }
.cs .wa-partners{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs .wa-partners li{ display: flex; gap: 8px; align-items: center; }
.cs .nowrap{ white-space: nowrap; }
.cs .notice.warn{ background: color-mix(in srgb, #F59E0B 10%, var(--surface)); border: 1px solid color-mix(in srgb, #F59E0B 35%, var(--line)); color: var(--ink); display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; align-items: flex-start; }
.cs .wac-coex, .cs .wac-mode{ display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: color-mix(in srgb, #1FA855 7%, var(--surface)); border: 1px solid color-mix(in srgb, #1FA855 22%, var(--line)); }
.cs .wac-mode{ align-items: center; background: var(--surface-2); border-color: var(--line); }
.cs .wac-paths{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
.cs .wa-id-fields{ border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; }
.cs .wa-id-fields summary{ cursor: pointer; font-size: 13px; font-weight: 600; }
.cs .ct-user{ display: block; color: #128C7E; font-family: inherit; }
.cs .wa-ctx .wa-kv b{ overflow-wrap: anywhere; }
.cs .wr-prods{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; }
.cs .wr-prod{ display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; color: inherit; cursor: pointer; }
.cs .wr-prod small{ color: var(--ink-3); font-size: 11.5px; }
.cs .wr-prod.on{ border-color: #1FA855; background: color-mix(in srgb, #1FA855 9%, var(--surface)); }
.cs .wr-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cs .wr-card{ display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cs .wr-card.add{ align-items: center; justify-content: center; min-height: 160px; border-style: dashed; color: var(--ink-3); font: inherit; cursor: pointer; }
.cs .wr-card-img{ display: grid; place-items: center; height: 110px; border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: pointer; color: var(--ink-3); font-size: 12px; }
.cs .wr-card-img span{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cs .wr-card-img img{ width: 100%; height: 100%; object-fit: cover; }
.cs .wa-rec{ display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.cs .wa-rec b{ font-size: 22px; min-width: 60px; }
.cs .wa-rec-dot{ width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.cs .wa-rec-dot.on{ background: #E5484D; animation: pulse 1s infinite; }
@keyframes pulse{ 50% { opacity: .35; } }
.cs .rc-voice{ display: flex; align-items: center; gap: 8px; }
.cs .rc-voice audio{ height: 34px; max-width: 230px; }
.cs .rc-voice small{ color: #34B7F1; font-size: 11px; }
.cs .rc-voice-ic{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; flex: none; }
.cs .rc-order, .cs .rc-form{ min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.cs .rc-order-h{ display: flex; align-items: center; gap: 6px; }
.cs .rc-order ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.cs .rc-order li, .cs .rc-order-t{ display: flex; justify-content: space-between; gap: 12px; }
.cs .rc-order-t{ border-top: 1px solid var(--line); padding-top: 5px; font-size: 13.5px; }
.cs .rc-order-n{ font-size: 12.5px; color: var(--ink-2); font-style: italic; }
.cs .rc-form dl{ margin: 0; display: grid; gap: 4px; }
.cs .rc-form dl div{ display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 13px; }
.cs .rc-form dt{ color: var(--ink-3); text-transform: capitalize; }
.cs .rc-form dd{ margin: 0; }
.cs .rc-call{ display: flex; align-items: center; gap: 10px; min-width: 200px; }
.cs .rc-call > span:last-child{ display: flex; flex-direction: column; }
.cs .rc-call small{ color: var(--ink-3); }
.cs .rc-call-ic{ width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #1FA855 16%, var(--surface)); color: #128C7E; flex: none; }
.cs .rc-call.missed .rc-call-ic{ background: color-mix(in srgb, #E5484D 14%, var(--surface)); color: #E5484D; }
.cs .rc-sys{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.cs .rc-sys.ok svg{ color: #1FA855; }
.cs .rc-sys.bad svg, .cs .rc-sys.warn svg{ color: #E5484D; }
.cs .rc-prod{ display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); margin-bottom: 6px; }
.cs .rc-prod > span{ display: flex; flex-direction: column; }
.cs .rc-prod small{ color: var(--ink-3); font-size: 11.5px; }
.cs .rc-car{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; max-width: 360px; }
.cs .rc-car-c{ flex: 0 0 150px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.cs .rc-car-c img, .cs .rc-car-ph{ width: 100%; height: 90px; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.cs .rc-car-c p{ margin: 6px 8px 0; font-size: 12px; }
.cs .rc-car-b{ margin: 6px 8px 8px; padding-top: 6px; border-top: 1px solid var(--line); text-align: center; color: #128C7E; font-size: 12.5px; font-weight: 600; }
.cs .rc-ad{ display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; margin-bottom: 6px; border-radius: 8px; background: color-mix(in srgb, #1877F2 9%, var(--surface)); border-left: 3px solid #1877F2; font-size: 12.5px; }
.cs .rc-ad-tag{ display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #1877F2; font-weight: 700; }
.cs .rc-ad small{ color: var(--ink-3); }
.cs .rc-from{ font-size: 12px; font-weight: 700; color: #128C7E; margin-bottom: 3px; }
.cs .rc-echo, .cs .rc-fwd, .cs .rc-held{ display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); margin-bottom: 4px; font-style: italic; }
.cs .rc-held{ font-style: normal; color: #B45309; }
.cs .reaction.theirs{ right: auto; left: 8px; }
.cs .wa-tt{ position: relative; display: inline-flex; align-items: center; gap: 2px; }
.cs .wa-tt-menu{ top: calc(100% + 6px); bottom: auto; left: auto; right: 0; width: 280px; }
.cs .wa-call{ position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 300px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0B4F43, #128C7E); box-shadow: 0 22px 50px -14px rgba(0,0,0,.45); animation: popin .18s ease; }
.cs .wa-call.ringing{ animation: ring 1.2s ease-in-out infinite; }
@keyframes ring{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cs .wa-call-t{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cs .wa-call-t span{ font-size: 12.5px; opacity: .85; }
.cs .wa-call-a{ display: flex; gap: 8px; }
.cs .wa-cbtn{ width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); cursor: pointer; }
.cs .wa-cbtn.ok{ background: #1FA855; }
.cs .wa-cbtn.bad{ background: #E5484D; }
.cs .wa-cbtn.on{ background: #fff; color: #0B4F43; }
.cs .lib-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; max-height: 55vh; overflow: auto; }
.cs .lib-card{ display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: inherit; color: inherit; cursor: pointer; }
.cs .lib-card:hover{ border-color: #1FA855; }
.cs .lib-card.static{ cursor: default; background: var(--surface-2); }
.cs .lib-top{ display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cs .lib-top small{ color: var(--ink-3); font-size: 11.5px; }
.cs .lib-body{ font-size: 13px; line-height: 1.5; color: var(--ink); }
.cs .lib-btns{ display: flex; gap: 6px; flex-wrap: wrap; }
.cs .lib-btns em{ font-style: normal; font-size: 12px; color: #128C7E; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.cs .auth-otp{ margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cs .bc-wa-lim{ display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.cs .bc-wa-lim.over{ background: color-mix(in srgb, #F59E0B 10%, var(--surface)); border-color: color-mix(in srgb, #F59E0B 40%, var(--line)); }
.cs .sms-conn .grp-head, .cs .grp-head:has(.wa-mode){ display: flex; align-items: center; gap: 10px; }
.cs .sc-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cs .sc-grid > div{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs .sc-grid b{ overflow-wrap: anywhere; }
.cs .sc-form{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.cs .sc-form .sc-wide{ grid-column: 1 / -1; }
.cs .sc-chk{ gap: 8px; font-size: 13px; color: var(--ink-2); grid-column: 1 / -1; }
.cs .sc-test{ margin-top: 14px; flex-wrap: wrap; gap: 8px; }
.cs .sc-test .grow{ flex: 1; }
.cs .sc-hooks, .cs .sc-adv{ margin-top: 12px; }
.cs .sc-hooks summary, .cs .sc-adv summary{ cursor: pointer; font-weight: 600; font-size: 13px; }
.cs .sc-senders{ margin-top: 12px; }
.cs .sc-h{ display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.cs .sc-domains{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cs .sc-domains .inline{ gap: 8px; flex-wrap: wrap; }
.cs .btn.danger-ghost{ color: var(--bad, #c0392b); }
.cs .sc-grid .pill{ align-self: flex-start; }
.cs .tabscroll-btn{ display: none; }
.cs .tabscroll-row{ scroll-behavior: smooth; }
.cs .ts-over > .tabscroll-btn{ display: grid; place-items: center; position: sticky; z-index: 4; flex: none; width: 30px; height: 30px; padding: 0; align-self: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px rgba(15, 23, 42, .16); cursor: pointer; transition: opacity .15s; }
.cs .ts-over > .tabscroll-btn:hover{ background: var(--surface-2); }
.cs .ts-over > .tabscroll-btn.left{ left: 2px; margin-right: -30px; }
.cs .ts-over > .tabscroll-btn.right{ right: 2px; margin-left: -30px; }
.cs .ts-over.ts-start > .tabscroll-btn.left, .cs .ts-over.ts-end > .tabscroll-btn.right{ opacity: 0; pointer-events: none; }
.cs .int-tabs.ts-over{ padding-left: 8px; padding-right: 8px; }
.cs .cx2{ background: var(--bg); padding: 0 0 18px; }
.cs .cx2-hero{ position: relative; margin: 0; padding: 18px 16px 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 70%); border-bottom: 1px solid var(--line); }
.cs .cx2-close{ position: absolute; top: 10px; right: 10px; }
.cs .cx2-id{ display: flex; gap: 12px; align-items: center; padding-right: 30px; }
.cs .cx2-id .avatar{ box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--c) 45%, var(--line)); flex: none; }
.cs .cx2-who{ min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs .cx2-who h2{ margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .cx2-sub{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cs .cx2-sub span{ display: inline-flex; gap: 3px; align-items: center; }
.cs .cx2-ref{ font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.cs .cx2-time{ display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-2); }
.cs .cx2-actions{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.cs .cx2-act{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, transform .15s; }
.cs .cx2-act:hover{ border-color: color-mix(in srgb, var(--c, var(--brand-1)) 50%, var(--line)); background: color-mix(in srgb, var(--c, var(--brand-1)) 6%, var(--surface)); transform: translateY(-1px); }
.cs .cx2-act svg{ color: var(--c, var(--brand-1)); }
.cs .cx2-card{ margin: 12px 12px 0; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.cs .cx2 .wa-ctx{ margin: 12px 12px 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cs .cx2-h{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cs .cx2-h h3{ margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cs .cx2-status{ display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 999px; }
.cs .cx2-status i{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs .cx2-status.open{ color: var(--ok); background: var(--ok-tint); }
.cs .cx2-status.closed{ color: var(--ink-3); background: var(--surface-2); }
.cs .cx2-kv{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cs .cx2-kv > div{ min-width: 0; }
.cs .cx2-kv dt{ font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
.cs .cx2-kv dd{ margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.cs .cx2-wrap{ overflow-wrap: anywhere; }
.cs .cx2-muted{ color: var(--ink-3); font-weight: 500; }
.cs .cx2-agent{ display: inline-flex; gap: 6px; align-items: center; }
.cs .cx2-agent .avatar{ font-size: 9px !important; }
.cs .cx2-mix{ display: flex; gap: 3px; height: 6px; margin-top: 14px; border-radius: 999px; overflow: hidden; }
.cs .cx2-mixi{ background: var(--c); min-width: 6px; }
.cs .cx2-mixl{ display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11.5px; color: var(--ink-2); }
.cs .cx2-mixl span{ display: inline-flex; gap: 5px; align-items: center; }
.cs .cx2-mixl i{ width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.cs .cx2-window{ display: grid; grid-template-columns: 18px 1fr; gap: 4px 8px; align-items: start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.cs .cx2-window b{ display: block; font-size: 12.5px; }
.cs .cx2-window span{ color: var(--ink-2); }
.cs .cx2-window.open{ background: var(--wa-tint); color: var(--wa-strong); }
.cs .cx2-window.shut{ background: var(--warn-tint); color: var(--warn-strong); }
.cs .cx2-winbar{ grid-column: 1 / -1; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--wa) 18%, transparent); overflow: hidden; }
.cs .cx2-winbar i{ display: block; height: 100%; background: var(--wa); border-radius: inherit; }
.cs .cx2-labels{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs .cx2-add{ display: inline-flex; gap: 5px; align-items: center; padding: 5px 10px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.cs .cx2-add:hover{ border-color: var(--brand-1); color: var(--ink); }
.cs .cx2-chs{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .cx2-chs li{ display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line)); }
.cs .cx2-chs li.off{ background: var(--surface-2); border-color: var(--line); opacity: .75; }
.cs .cx2-chic{ width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--c); }
.cs .cx2-chs li.off .cx2-chic{ background: var(--ink-3); }
.cs .cx2-chb{ min-width: 0; }
.cs .cx2-chn{ font-weight: 650; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cs .cx2-badge{ font-size: 10.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--c-tint); color: var(--c-strong); }
.cs .cx2-chh{ font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; margin-top: 1px; }
.cs .cx2-tags{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cs .cx2-tags span{ display: inline-flex; gap: 4px; align-items: center; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.cs .cx2-tags span.ok{ color: var(--ok-strong); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.cs .cx2-tags span.bad{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.cs .cx2-copy{ opacity: .55; }
.cs .cx2-chs li:hover .cx2-copy{ opacity: 1; }
.cs .cx2-groups{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cs .cx2-groups span{ font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--info-tint); color: var(--info-strong); }
.cs .cx2-tl{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs .cx2-tl li{ display: grid; grid-template-columns: 14px 1fr; gap: 8px; position: relative; padding-bottom: 12px; }
.cs .cx2-tl li:not(:last-child)::before{ content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.cs .cx2-tl li > i{ width: 10px; height: 10px; margin: 4px 0 0 2px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand-1); }
.cs .cx2-tl li[data-kind="close"] > i{ border-color: var(--ink-3); }
.cs .cx2-tl li[data-kind="transfer"] > i, .cs .cx2-tl li[data-kind="assign"] > i{ border-color: var(--info); }
.cs .cx2-tl li div{ display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink); }
.cs .cx2-tl em{ color: var(--ink-2); font-size: 12px; }
.cs .cx2-tl small{ color: var(--ink-3); font-size: 11.5px; }
.cs .sms-prov{ padding: 0; overflow: hidden; }
.cs .sp-tabs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cs .sp-tabs button{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.cs .sp-tabs button + button{ border-left: 1px solid var(--line); }
.cs .sp-tabs button[aria-selected="true"]{ background: var(--surface); color: var(--ink); border-bottom-color: var(--p1); }
.cs .sp-logo{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; background: linear-gradient(135deg, var(--p1), var(--p2)); flex: none; }
.cs .sp-name{ font-weight: 700; font-size: 14.5px; }
.cs .sp-state{ margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); white-space: nowrap; }
.cs .sp-state.ok{ color: var(--info-strong); background: var(--info-tint); border-color: transparent; }
.cs .sp-state.on{ color: var(--ok-strong); background: var(--ok-tint); border-color: transparent; }
.cs .sp-pane{ padding: 16px; }
@media (max-width: 560px){.cs .sp-state{ display: none; }}
.cs .login-code .lc-head{ display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--brand-tint); }
.cs .lc-ic{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); flex: none; }
.cs .lc-head > div{ display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-2); }
.cs .lc-head > div > b{ color: var(--ink); font-size: 14.5px; }
.cs .lc-input{ font-size: 26px !important; letter-spacing: .5em; text-align: center; font-family: ui-monospace, Menlo, monospace; padding: 12px !important; }
.cs .lc-foot{ display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.cs .lc-foot .link-btn:disabled{ color: var(--ink-3); cursor: default; text-decoration: none; }
.cs .tl-page{ flex: 1; min-height: 0; overflow-y: auto; padding: 16px 0 32px; }
.cs .tl-page .meta-wrap, .cs .tl-page .tpl-modes{ padding-left: 24px; padding-right: 24px; }
.cs .tl-panel{ margin: 0 24px; padding: 0; overflow: hidden; }
.cs .tl-tabs{ padding: 0 14px; border-bottom: 1px solid var(--line); }
.cs .tl-tools{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cs .tl-tools select.inp{ width: auto; min-width: 150px; }
.cs .tl-search{ position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.cs .tl-search svg{ position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.cs .tl-search .inp{ padding-left: 32px; width: 100%; }
.cs .tl-wrap{ overflow-x: auto; }
.cs .tl-table th{ white-space: nowrap; }
.cs .tl-table td{ vertical-align: middle; }
.cs .tl-table .nowrap{ white-space: nowrap; }
.cs .tl-name{ min-width: 190px; }
.cs .tl-name .name-btn{ display: inline-flex; gap: 7px; align-items: center; font-weight: 600; text-align: left; white-space: nowrap; }
.cs .tl-table .fmt-tag{ white-space: nowrap; display: inline-block; }
.cs .tl-table td{ padding-top: 10px; padding-bottom: 10px; }
.cs .tl-why{ max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.cs .tl-prev .mini-tpl{ max-width: 190px; min-width: 150px; }
.cs .tl-table{ min-width: 1100px; }
.cs .tl-prev .mt-txt b{ display: none; }
.cs .tl-prev .mt-txt small{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs .tl-act{ display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
.cs .tl-q{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cs .tl-q i{ width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.cs .tl-q.ok i{ background: var(--ok, #1f9d55); }
.cs .tl-q.warn i{ background: var(--warn, #d08a00); }
.cs .tl-q.bad i{ background: var(--bad, #d64545); }
.cs .tl-foot{ padding: 10px 14px; border-top: 1px solid var(--line); }
.cs .overlay.tpl-ed-ov{ padding: 2vh 2vw; }
.cs .dlg.tpl-ed-dlg{ width: min(1280px, 100%); height: 100%; max-height: 100%; position: relative; overflow: hidden; }
.cs .tpl-ed-body{ flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 28px; }
.cs .tpl-ed-x{ position: absolute; top: 14px; right: 14px; z-index: 5; background: var(--surface); }
.cs .tpl-ed-body > .stack-v > .inline:first-child{ padding-right: 44px; }
.cs .tpl-ed-dlg .split.tpl-split{ grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
.cs .tpl-ed-dlg .tpl-aside{ top: -18px; padding-top: 18px; }
@media (max-width: 900px){.cs .tpl-ed-dlg .split.tpl-split{ grid-template-columns: minmax(0, 1fr); }
.cs .tl-panel{ margin: 0 14px; }
.cs .tl-page .meta-wrap, .cs .tl-page .tpl-modes{ padding-left: 14px; padding-right: 14px; }}
.cs .bct-grid{ display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; align-items: start; }
.cs .bct-list{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs .bct-item{ display: flex; gap: 6px; align-items: center; }
.cs .bct-item .inp{ flex: 1; min-width: 0; }
.cs .bct-actions{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs .bct-actions .grow{ flex: 1; }
@media (max-width: 640px){.cs .bct-grid{ grid-template-columns: minmax(0, 1fr); }}
.cs .ec2-mode{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cs .ec2-mode .lbl{ font-weight: 600; font-size: 13px; }
.cs .eh-main{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.cs .eh-code{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs .eh-bar{ display: flex; gap: 6px; flex-wrap: wrap; }
.cs .ec-html textarea.eh-ta{ height: 480px; min-height: 480px; font-size: 12.5px; line-height: 1.5; white-space: pre; overflow: auto; resize: vertical; tab-size: 2; background: var(--surface-2); }
.cs .eh-prev{ min-width: 0; }
.cs .eh-frame-wrap{ border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #F3F4F6; margin-top: 8px; display: flex; justify-content: center; }
.cs .eh-frame-wrap.mobile .eh-frame{ width: 375px; max-width: 100%; }
.cs .eh-frame{ width: 100%; height: 520px; border: 0; background: #fff; display: block; }
@media (max-width: 1000px){.cs .eh-main{ grid-template-columns: minmax(0, 1fr); }}
.cs .em-extra{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cs .em-extra > .inline{ width: 100%; flex-wrap: wrap; gap: 8px; }
.cs .em-extra-row{ width: 100%; gap: 8px; }
.cs .em-extra-row .inp{ flex: 1; min-width: 0; }
.cs .inbox-head.ibx2{ gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cs .ibx2-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs .ibx2-org{ min-width: 0; }
.cs .ibx2-org .org-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .ibx2-soc{ display: flex; gap: 6px; flex-shrink: 0; }
.cs .ibx2-socb{ width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s; }
.cs .ibx2-socb:not(.on){ opacity: .7; filter: grayscale(1); }
.cs .ibx2-socb.on{ background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.cs .ibx2-socb.on:hover{ transform: translateY(-1px); }
.cs .ibx2-socb.sel{ box-shadow: 0 0 0 2px var(--brand-2); }
.cs .inbox-head.ibx2 .search{ margin: 0; }
.cs .inbox-head.ibx2 .inbox-segs, .cs .inbox-segs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs .inbox-segs button{ justify-content: center; gap: 5px; white-space: nowrap; padding: 7px 4px; }
.cs .ibx2-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs .ibx2-pills{ display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; }
.cs .ibx2-pills .chip{ padding: 4px 10px; font-size: 12px; }
.cs .ibx2-chs{ display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); flex-shrink: 0; }
.cs .ibx2-ch{ width: 28px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; padding: 0; }
.cs .ibx2-ch:hover{ color: var(--ink); }
.cs .ibx2-ch[aria-pressed="true"]{ background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.cs .ibx2-ch[aria-pressed="true"][data-ch="WHATSAPP"]{ color: var(--wa-strong, #128C4B); }
.cs .ibx2-ch[aria-pressed="true"][data-ch="EMAIL"]{ color: #C2410C; }
.cs .ibx2-sel{ display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.cs .ibx2-sel select.inp{ font-size: 12.5px; padding: 6px 8px; min-width: 0; width: 100%; }
.cs .qr-host{ position: relative; }
.cs .qrp{ position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(10,18,26,.16); padding: 6px; max-height: 300px; overflow-y: auto; }
.cs .qrp-h{ display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; color: var(--ink-2); }
.cs .qrp-h .inp{ flex: 1; padding: 5px 8px; font-size: 12.5px; }
.cs .qrp-h .icon-btn{ margin-left: auto; }
.cs .qrp-item{ display: flex; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px; border-radius: 8px; cursor: pointer; align-items: flex-start; }
.cs .qrp-item:hover, .cs .qrp-item:focus{ background: var(--surface-2); }
.cs .qrp-sc{ font: 600 12px/1.6 ui-monospace, monospace; color: var(--brand-2); min-width: 64px; }
.cs .qrp-tx{ display: flex; flex-direction: column; min-width: 0; }
.cs .qrp-tx small{ color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .qrp-empty{ padding: 12px; color: var(--ink-3); font-size: 13px; }
.cs .qr-btn{ color: var(--ink-3); }
.cs .qr-btn[aria-expanded="true"]{ color: var(--brand-2); }
.cs .cx-notes .cxn-new{ display: flex; flex-direction: column; gap: 6px; }
.cs .cx-notes textarea.inp{ min-height: 56px; font-size: 13px; }
.cs .cxn-list{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .cxn-list li{ background: color-mix(in srgb, #F59E0B 8%, var(--surface)); border: 1px solid color-mix(in srgb, #F59E0B 25%, var(--line)); border-radius: 10px; padding: 8px 10px; }
.cs .cxn-list p{ margin: 0 0 4px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cs .cxn-meta{ display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.cs .soc-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cs .soc-card{ display: flex; align-items: center; gap: 12px; padding: 14px; }
.cs .soc-card .soc-t{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cs .soc-ic{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.cs .soc-card.on{ border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); }
.cs .composer .row{ flex-wrap: nowrap; }
.cs .composer .row .hint{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .composer .row .send{ flex-shrink: 0; }
.cs .bc-flow.bc3 > *{ max-width: 1400px; }
.cs .bc3-start{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.cs .bc3-start-h{ display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.cs .bc3-start .bc-formats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.cs .bc3-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.cs .bc3-main{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs .bc3-side{ position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.cs .bc3-side .bc-summary{ border-color: color-mix(in srgb, var(--brand-2) 30%, var(--line)); box-shadow: 0 10px 30px rgba(10,18,26,.07); }
.cs .bc3-side .bc-sum-grid{ grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
.cs .bc3-side .bc-sum-big .num b{ font-size: 30px; }
.cs .bc3-side .bc-send{ flex-direction: column; align-items: stretch; gap: 8px; }
.cs .bc3-side .bc-send-btn{ width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
.cs .bc3-side .bc-sum-list li{ padding: 6px 0; border-bottom: 1px dashed var(--line); }
@media (max-width: 1180px){.cs .bc3-grid{ grid-template-columns: minmax(0, 1fr); }
.cs .bc3-side{ position: static; }}
.cs .bc-from-one{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.cs .bc-from-one > span:nth-child(2){ display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.cs .bc-from-one .mono{ font-size: 12.5px; color: var(--ink-2); }
.cs .bc-from-ic{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--wa-tint, #E7F7EE); color: var(--wa-strong, #128C4B); }
.cs .tl-chs{ display: flex; gap: 6px; padding: 12px 14px 0; flex-wrap: wrap; }
.cs .tl-chs button{ display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 12px; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.cs .tl-chs button[aria-selected="true"]{ background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cs .tl-chs .count{ font-size: 11px; opacity: .75; }
.cs .nt-ch .nt-choice{ min-height: 140px; }
.cs .ot-head{ gap: 10px; flex-wrap: wrap; padding-right: 44px; }
.cs .ot-head .grow{ flex: 1; }
.cs .rch-bar{ display: flex; gap: 8px; padding: 12px 24px 0; flex-wrap: wrap; }
.cs .rch-bar button{ display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; min-width: 190px; }
.cs .rch-bar button[aria-selected="true"]{ border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cs .rch-t{ display: flex; flex-direction: column; line-height: 1.25; }
.cs .rch-t small{ color: var(--ink-3); font-size: 11.5px; }
.cs .rch-ic{ width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); }
.cs .rk-panel{ padding: 18px 20px; }
.cs .rk-h{ display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.cs .rk-h h2{ margin: 0 0 2px; }
.cs .rk-kpis{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.cs .rk-kpis > div{ display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.cs .rk-kpis .v{ font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cs .rk-kpis .l{ font-weight: 600; font-size: 12.5px; }
.cs .rk-kpis .s{ font-size: 11.5px; color: var(--ink-3); }
.cs .rk-kpis > div.bad .v{ color: var(--danger, #E5484D); }
.cs .rk-grid{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1000px){.cs .rk-grid{ grid-template-columns: minmax(0, 1fr); }}
.cs .rk-card{ border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.cs .rk-card > b{ display: block; margin-bottom: 10px; }
.cs .mbar-plot{ display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.cs .mbar-col{ flex: 1; display: flex; flex-direction: column-reverse; height: 100%; min-width: 2px; }
.cs .mbar-col i{ display: block; border-radius: 2px 2px 0 0; }
.cs .mbar-x{ display: flex; gap: 3px; margin-top: 6px; }
.cs .mbar-x span{ flex: 1; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: visible; }
.cs .rk-leg{ display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.cs .rk-leg i{ display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cs .rk-reasons{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs .rk-reasons li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.cs .rk-reasons li i{ grid-column: 1 / -1; height: 6px; border-radius: 4px; background: #E5484D; opacity: .75; }
.cs .rk-issues{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.cs .rk-issues > div{ display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.cs .rk-issues .v{ font-size: 22px; font-weight: 750; }
.cs .auto-color .auto-body > div > .auto-head, .cs .auto-color .auto-body > div > div > .auto-head{ color: var(--ink); background: linear-gradient(120deg, color-mix(in srgb, var(--sec-a) 9%, var(--surface)), color-mix(in srgb, var(--sec-b) 6%, var(--surface))); border: 1px solid color-mix(in srgb, var(--sec-a) 22%, var(--line)); box-shadow: none; }
.cs .auto-color .auto-body .auto-head::after{ background: color-mix(in srgb, var(--sec-a) 7%, transparent); }
.cs .auto-color .auto-body .auto-head h2{ color: color-mix(in srgb, var(--sec-a) 70%, var(--ink)); }
.cs .auto-color .auto-body .auto-head p{ color: var(--ink-2); }
.cs .auto-color .auto-body .auto-head .lbl{ color: var(--ink-2); }
.cs .auto-color .auto-body .auto-head .btn:not(.primary){ background: var(--surface); border-color: var(--line); color: var(--ink); }
.cs .auto-color .auto-body .auto-head .btn.primary{ background: var(--sec-a); color: #fff; }
.cs .auto-color .auto-body .auto-head .tgl[aria-checked="true"]{ background: var(--sec-a); }
.cs .ai-hero{ color: var(--ink); background: linear-gradient(120deg, color-mix(in srgb, #7C3AED 8%, var(--surface)), color-mix(in srgb, #EC4899 5%, var(--surface))); border: 1px solid color-mix(in srgb, #7C3AED 20%, var(--line)); box-shadow: none; }
.cs .ai-hero::after{ background: color-mix(in srgb, #7C3AED 6%, transparent); }
.cs .ai-hero-ic{ background: color-mix(in srgb, #7C3AED 14%, var(--surface)); }
.cs .ai-hero-ic .ico, .cs .ai-hero .ico{ color: #6D28D9; }
.cs .ai-hero-txt span{ color: var(--ink-2); opacity: 1; }
.cs .ai-hero-stats span{ color: var(--ink-2); opacity: 1; }
.cs .ai-hero-stats b{ color: #6D28D9; }
.cs .vs{ display: flex; flex-direction: column; gap: 14px; }
.cs .vs-head{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, #0EA5E9 25%, var(--line)); border-radius: 14px; background: color-mix(in srgb, #0EA5E9 6%, var(--surface)); }
.cs .vs-ic{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #0EA5E9 15%, var(--surface)); color: #0369A1; }
.cs .vs-t{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cs .vs-two{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1000px){.cs .vs-two{ grid-template-columns: minmax(0, 1fr); }}
.cs .vs-steps{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs .vs-steps li{ display: flex; align-items: center; gap: 10px; }
.cs .vs-steps li > div{ flex: 1; display: flex; flex-direction: column; }
.cs .vs-steps .n{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.cs .vs-steps li.ok .n{ background: #16A34A; color: #fff; border-color: #16A34A; }
.cs .vs-latest{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .vs-latest li{ display: flex; align-items: center; gap: 10px; }
.cs .vs-latest .grow{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cs .vs-latest small{ color: var(--ink-3); }
.cs .vs-dir{ width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; color: var(--ink-2); }
.cs .vs-agents{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cs .vs-agent{ padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cs .vs-agent.off{ opacity: .6; }
.cs .vs-kv{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.cs .vs-kv dt{ font-size: 11.5px; color: var(--ink-3); }
.cs .vs-kv dd{ margin: 0; font-size: 13px; }
.cs .vs-greet{ margin: 0; font-style: italic; }
.cs .vs-form{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cs .vs-form section{ display: flex; flex-direction: column; gap: 10px; }
.cs .vs-form h4{ margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
@media (max-width: 900px){.cs .vs-form{ grid-template-columns: minmax(0, 1fr); }}
.cs .vs-chk{ gap: 8px; font-size: 13px; align-items: flex-start; }
.cs .vs-trig{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.cs .vs-trig > div{ display: flex; flex-direction: column; gap: 2px; }
.cs .vs-hours{ display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.cs .vs-hours > div{ flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.cs .vs-hours i{ width: 100%; background: #0EA5E9; border-radius: 3px 3px 0 0; min-height: 2px; }
.cs .vs-hours span{ font-size: 10px; color: var(--ink-3); height: 12px; }
.cs .vs-tx{ list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .vs-tx li{ padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; display: flex; flex-direction: column; }
.cs .vs-tx li.ai{ background: color-mix(in srgb, #0EA5E9 8%, var(--surface)); }
.cs .vs-tx b{ font-size: 11.5px; color: var(--ink-3); }
.cs .mg{ display: flex; flex-direction: column; gap: 12px; }
.cs .mg-sep{ margin: 0; }
.cs .mg-list{ display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cs .mg-item + .mg-item{ border-top: 1px solid var(--line); }
.cs .mg-item.cur{ background: color-mix(in srgb, #16A34A 4%, var(--surface)); }
.cs .mg-row{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.cs .mg-row .grow{ flex: 1; text-align: right; }
.cs .mg-item.open .mg-row svg:last-child{ transform: rotate(180deg); }
.cs .mg-body{ padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.cs .mg-cols{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.cs .mg-cols ol{ margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px){.cs .mg-cols{ grid-template-columns: minmax(0, 1fr); }}
.cs .mg-tbl td, .cs .mg-tbl th{ font-size: 12.5px; }
.cs .ai-learn .al-list{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs .ai-learn .al-list li{ border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cs .al-q, .cs .al-a{ display: flex; gap: 8px; font-size: 13px; }
.cs .al-q b, .cs .al-a b{ width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 11px; background: var(--surface-2); flex: none; }
.cs .al-a b{ background: color-mix(in srgb, #7C3AED 14%, var(--surface)); color: #6D28D9; }
.cs .al-meta{ display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs .mg-tbl td.mono .help{ font-family: inherit; font-size: 11.5px; }
.cs .tpl-chbar{ padding: 0 24px 12px; }
.cs .rch-n{ display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--surface-2); font-size: 11px; font-weight: 700; text-align: center; color: var(--ink-2); }
.cs .rch-bar button[aria-selected="true"] .rch-n{ background: var(--ink); color: var(--surface); }
.cs .tl-table.tl-sms, .cs .tl-table.tl-email{ min-width: 900px; }
.cs .tl-smsmsg{ border: 0; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; text-align: left; font: inherit; font-size: 13px; color: var(--ink-2); max-width: 420px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.cs .tl-subj{ max-width: 280px; }
.cs .fmt-tag.promo{ background: color-mix(in srgb, #F59E0B 16%, var(--surface)); color: #B45309; }
.cs .ec-preview .seg button, .cs .eh-prev .seg button{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; line-height: 1; }
.cs .ec-preview .seg button svg, .cs .eh-prev .seg button svg{ flex: none; }
.cs .tl-table.tl-sms, .cs .tl-table.tl-email{ width: 100%; }
.cs .fmt-tag.ready{ background: color-mix(in srgb, #16A34A 14%, var(--surface)); color: #15803D; margin-top: 4px; display: inline-block; }
.cs .etp{ display: flex; flex-direction: column; gap: 10px; }
.cs .etp .eh-frame{ height: 540px; border: 1px solid var(--line); border-radius: 12px; }
.cs .auto-color[data-sec="fallback"]{ --sec-a: #0EA5E9; --sec-b: #6366F1; }
.cs .auto-color .auto-item[data-sec="fallback"] .ai-tile{ background: linear-gradient(135deg, #0EA5E9, #6366F1); }
.cs .fb{ display: flex; flex-direction: column; gap: 12px; }
.cs .fb-flow{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); }
.cs .fbf{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); }
.cs .fbf.wa{ color: var(--wa-strong, #128C4B); }
.cs .fbf.q{ color: #B45309; }
.cs .fbf.sms{ color: #2C6FD6; }
.cs .fbf.email{ color: #C2410C; }
.cs .fb-flow i{ width: 18px; height: 2px; background: var(--line); position: relative; }
.cs .fb-flow i::after{ content: ''; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: var(--ink-3); }
.cs .fb-flow i.then{ background: none; width: auto; height: auto; font-style: normal; }
.cs .fb-flow i.then::after{ content: 'then'; position: static; border: 0; font-size: 11px; color: var(--ink-3); }
.cs .fb-cat{ padding: 0; overflow: hidden; }
.cs .fb-cat.on{ border-color: color-mix(in srgb, #0EA5E9 35%, var(--line)); }
.cs .fb-cat-h{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.cs .fb-cat-h > div{ display: flex; flex-direction: column; }
.cs .fb-cat-b{ display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.cs .fb-row{ display: flex; flex-direction: column; gap: 6px; }
.cs .fb-chs{ display: flex; gap: 8px; flex-wrap: wrap; }
.cs .fb-ch{ display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; }
.cs .fb-ch.on{ background: color-mix(in srgb, #0EA5E9 6%, var(--surface)); border-color: color-mix(in srgb, #0EA5E9 30%, var(--line)); }
.cs .fb-trig{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 1000px){.cs .fb-trig{ grid-template-columns: minmax(0, 1fr); }}
.cs .fb-t{ display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.cs .fb-t.on{ border-color: color-mix(in srgb, #0EA5E9 35%, var(--line)); background: color-mix(in srgb, #0EA5E9 4%, var(--surface)); }
.cs .fb-t label span{ display: flex; flex-direction: column; }
.cs .fb-t small{ color: var(--ink-3); font-size: 12px; }
.cs .fb-t select.inp{ width: auto; align-self: flex-start; }
.cs .fb-sum{ display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.cs .fb-tpls summary{ cursor: pointer; font-weight: 600; font-size: 13px; }
.cs .fb-tpl{ display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.cs .fb-log{ padding: 14px 16px; }
.cs .bc-fbnote{ display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.cs .bc-fbnote.on{ background: color-mix(in srgb, #0EA5E9 7%, var(--surface)); border-color: color-mix(in srgb, #0EA5E9 30%, var(--line)); }
.cs .bc-fbnote > span{ flex: 1; }
.cs .bct-chip{ display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13px; height: fit-content; }
.cs .fb-t label{ display: flex; align-items: flex-start; gap: 8px; }
.cs .fb-t label > span{ flex: 1; min-width: 0; }
.cs .fb-t label input{ margin-top: 3px; flex: none; }
.cs .bc-camps{ margin-bottom: 14px; }
.cs .bc-camps-h{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cs .bc-camps-h h2{ margin: 0; }
.cs .bc-job{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cs .bc-job + .bc-job, .cs .bc-job.live + .bc-camp-list, .cs .bc-camp-list .bc-job + .bc-job{ margin-top: 8px; }
.cs .bc-job.live{ display: block; padding: 12px 14px; border-color: color-mix(in srgb, var(--wa) 35%, var(--line)); background: color-mix(in srgb, var(--wa) 4%, var(--surface)); }
.cs .bc-job.live[data-ch="SMS"]{ border-color: color-mix(in srgb, var(--sms) 35%, var(--line)); background: color-mix(in srgb, var(--sms) 4%, var(--surface)); }
.cs .bc-job.live[data-ch="EMAIL"]{ border-color: color-mix(in srgb, var(--mail) 35%, var(--line)); background: color-mix(in srgb, var(--mail) 4%, var(--surface)); }
.cs .bc-job-top{ display: flex; align-items: center; gap: 8px; }
.cs .bc-job-top .sp{ flex: 1; }
.cs .bc-job-chip{ font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--ok-tint); color: var(--ok-strong); }
.cs .bc-job-chip.stop{ background: var(--warn-tint); color: var(--warn-strong); }
.cs .bc-prog{ height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 10px 0 8px; border: 1px solid var(--line); }
.cs .bc-prog > i{ display: block; height: 100%; background: var(--wa); border-radius: 99px; transition: width .6s ease; }
.cs .bc-job.live[data-ch="SMS"] .bc-prog > i{ background: var(--sms); }
.cs .bc-job.live[data-ch="EMAIL"] .bc-prog > i{ background: var(--mail); }
.cs .bc-job-stats, .cs .bc-job-nums{ display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.cs .bc-job-stats b, .cs .bc-job-nums b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.cs .bc-job-stats .bad b, .cs .bc-job-nums .bad b, .cs .bc-job-main .bad{ color: var(--danger-strong); }
.cs .bc-job-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs .bc-job-main .help{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .bc-camp-list{ margin-top: 8px; }
.cs .bc-camps > .link-btn{ margin-top: 8px; }
.cs .bc-checks{ border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 12px 0; background: var(--surface); }
.cs .bc-checks.has-block{ border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.cs .bc-checks.has-warn{ border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.cs .bc-checks-h{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cs .bc-checks.has-block .bc-checks-h{ color: var(--danger-strong); }
.cs .bc-checks:not(.has-block):not(.has-warn) .bc-checks-h{ color: var(--ok-strong); }
.cs .bc-checks-busy{ margin-left: auto; }
.cs .bc-checks ul{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.cs .bc-checks li{ display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.cs .bc-checks li > svg{ flex: none; margin-top: 2px; }
.cs .bc-checks li > div{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs .bc-checks li.lv-ok > svg{ color: var(--ok); }
.cs .bc-checks li.lv-info > svg{ color: var(--info); }
.cs .bc-checks li.lv-warn > svg{ color: var(--warn-strong); }
.cs .bc-checks li.lv-block > svg{ color: var(--danger); }
.cs .bc-checks li.lv-block b{ color: var(--danger-strong); }
.cs .bc-checks .bc-fix{ align-self: flex-start; margin-top: 2px; font-size: 12.5px; }
.cs .bc-checks.compact{ margin: 10px 0 12px; }
.cs .bc-confirm-h{ font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 16px 0 6px; }
.cs .bc-flow .bc-camps h2::before{ content: none !important; display: none !important; counter-increment: none !important; }
.cs .sum-card{ margin: 8px 14px 0; padding: 10px 14px 12px; border: 1px solid color-mix(in srgb, var(--brand-1, #0EA5E9) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--brand-1, #0EA5E9) 5%, var(--surface)); }
.cs .sum-h{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cs .sum-h .sp{ flex: 1; }
.cs .sum-src{ font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.cs .sum-card ul{ margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.cs .sum-card li.tone-warn{ color: var(--warn-strong); }
.cs .sum-card li.tone-bad{ color: var(--danger-strong); font-weight: 600; }
.cs .sum-note{ margin: 6px 0 0; font-size: 13px; }
.cs .sum-foot{ margin: 8px 0 0; font-size: 12px; }
.cs .ai-bar{ display: flex; align-items: center; gap: 8px; margin: 8px 14px 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, #8B5CF6 8%, var(--surface)); border: 1px solid color-mix(in srgb, #8B5CF6 30%, var(--line)); }
.cs .ai-bar > span{ flex: 1; }
.cs .ai-bar.warn{ background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.cs .ai-bar.quiet{ background: transparent; border-style: dashed; font-size: 12.5px; color: var(--ink-2); }
.cs .event-line .ev-sum{ margin: 6px auto 0; max-width: 560px; text-align: left; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.cs .event-line .ev-sum summary{ cursor: pointer; font-weight: 600; color: var(--ink-2); }
.cs .event-line .ev-sum p{ margin: 4px 0; }
.cs .tr-sum textarea{ margin-top: 6px; font-size: 13px; }
.cs .tr-sum .chk{ display: flex; gap: 8px; align-items: center; font-weight: 600; }
.cs .inv-frame{ width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cs .inv-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 640px){.cs .inv-grid{ grid-template-columns: 1fr; }}
.cs .inv-probs{ list-style: none; padding: 8px 12px; margin: 0 0 12px; border-radius: 10px; background: var(--warn-tint); font-size: 12.5px; display: grid; gap: 3px; }
.cs .inv-probs li.bad{ color: var(--danger-strong); }
.cs .inv-probs li.warn{ color: var(--warn-strong); }
.cs .inv-ok{ color: var(--ok-strong); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.cs .inv-client .notice{ margin-bottom: 8px; }
.cs .logo-mark-img{ object-fit: contain; }
.cs .login-logo img{ mix-blend-mode: normal; }
.cs .da-wide-d, .cs .logo-full .logo-wide.da-wide-d{ display: none; }
:root[data-theme="dark"] .da-wide-l, :root[data-theme="dark"] .logo-full .logo-wide.da-wide-l{ display: none; }
:root[data-theme="dark"] .da-wide-d{ display: block; }
:root[data-theme="dark"] .logo-full .logo-wide.da-wide-d{ display: block; }
@media (max-width: 860px){:root[data-theme="dark"] .logo-full .logo-wide.da-wide-d{ display: none; }}
.cs .lang-sw{ position: absolute; top: 18px; right: 20px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,.1)); background: var(--panel, #fff); color: var(--ink-2, #444); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.cs .lang-sw:hover{ border-color: var(--accent, #0E7C66); color: var(--accent, #0E7C66); }
.cs .lang-sw:disabled{ opacity: .6; cursor: progress; }
.cs .lang-sw span:lang(ar), .cs .lang-nav .lbl:lang(ar), .cs .lang-nav .flyout:lang(ar){ font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
.cs .lang-nav[aria-busy="true"]{ opacity: .6; pointer-events: none; }
.cs .m-top img.da-wide-d{ display: none; }
:root[data-theme="dark"] .m-top img.da-wide-l{ display: none; }
:root[data-theme="dark"] .m-top img.da-wide-d{ display: block; }
.cs .img-fit{ display: grid; gap: 6px; margin-top: 8px; }
.cs .img-fit .seg{ justify-self: start; }
.cs .media-notes{ color: var(--ok, #15803D); display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.cs .pp{ display: grid; gap: 14px; }
.cs .pp.off{ opacity: .7; }
.cs .pp-top{ display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, #F6F8F7); }
.cs .pp-all{ display: flex; gap: 12px; align-items: center; }
.cs .pp-all b{ display: block; font-size: 14px; }
.cs .pp-sens-n{ color: #B45309; font-weight: 600; }
.cs .pp-presets{ display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cs .pp-find{ grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface, #fff); color: var(--ink-3); }
.cs .pp-find input{ flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); }
.cs .pp-grp h4{ margin: 4px 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cs .pp-sec{ border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--surface, #fff); overflow: hidden; }
.cs .pp-sec.on{ border-color: color-mix(in srgb, var(--accent, #0E7C66) 35%, var(--line)); }
.cs .pp-row{ display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; }
.cs .pp-act{ grid-template-columns: 1fr auto; padding: 9px 12px 9px 50px; border-top: 1px solid var(--line); background: var(--surface-2, #FAFBFA); }
.cs .pp-act:not(.on) .pp-txt b{ color: var(--ink-2); }
.cs .pp-txt b{ display: block; font-size: 13.5px; }
.cs .pp-txt > span{ display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.cs .pp-exp{ width: 28px; height: 28px; border: 0; background: transparent; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }
.cs .pp-exp:hover{ background: var(--surface-2); }
.cs .pp-exp[aria-expanded="false"] .ico{ transform: rotate(-90deg); }
.cs .pp-exp .ico{ transition: transform .15s; }
.cs .pp-count{ font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: end; }
.cs .pp-txt b .pp-sens{ display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; vertical-align: 1px; color: #92400E; background: #FEF3C7; }
.cs .pp-limit{ display: flex !important; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px !important; }
.cs .pp-limit label{ font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.cs .pp-limit .inp{ width: 120px; height: 30px; }
.cs .pp-limit small{ width: 100%; color: var(--ink-3); }
.cs .pp-foot{ display: flex; gap: 6px; align-items: center; margin: 0; }
.cs .view-only{ margin: 14px 24px 0; }
.cs .composer-locked{ display: flex; gap: 8px; align-items: center; padding: 14px 16px; color: var(--ink-2); font-size: 13.5px; }
:root[data-theme="dark"] .pp-txt b .pp-sens{ color: #FCD34D; background: rgba(251, 191, 36, .15); }
@media (max-width: 640px){.cs .pp-top{ grid-template-columns: 1fr; }
.cs .pp-presets{ justify-content: flex-start; }
.cs .pp-act{ padding-left: 14px; }}
.cs .seat-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, #F6F8F7); }
.cs .seat-bar .seat{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cs .seat-bar .help{ flex-basis: 100%; }
.cs .ib-more{ list-style: none; display: flex; justify-content: center; padding: 12px 8px 16px; }
.cs .ib-more .btn{ min-width: 160px; justify-content: center; gap: 8px; }
.cs .ib-spin{ display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ib-spin .8s linear infinite; opacity: .7; vertical-align: -2px; }
@keyframes ib-spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){.cs .ib-spin{ animation-duration: 2.4s; }}
.cs .empty.ib-loading{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cs .ct-selall{ margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft, rgba(81, 87, 174, .08)); font-size: 13px; }
.cs .ct-selall .link-btn{ margin-inline-start: 6px; font-weight: 600; }
.cs .attach-menu{ max-height: min(72vh, 520px); overflow-y: auto; overscroll-behavior: contain; width: 320px; }
.cs .am-group + .am-group{ border-top: 1px solid var(--line); margin-top: 4px; padding-top: 2px; }
.cs .am-h{ font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 8px 8px 3px; }
.cs .attach-menu button{ padding: 5px 8px; }
.cs .am-ic{ width: 28px; height: 28px; }
.cs .am-cta_url{ background: #2F6FED; }
.cs .am-loc_req{ background: #1FA855; }
.cs .am-flow{ background: #6B3FD6; }
.cs .am-product_list, .cs .am-catalog{ background: #E8590C; }
.cs .am-call_perm, .cs .am-call_btn{ background: #0F9D8A; }
.cs .mic-btn[aria-expanded="true"]{ color: var(--brand-2); }
.cs .nav-new{ left: 50%; right: auto; top: -5px; transform: translateX(-50%); max-width: calc(100% - 4px); overflow: hidden; white-space: nowrap; line-height: 1.35; animation: newglow 2.8s ease-in-out 3; }
.cs :lang(ar) .nav-new, .cs .nav-new:lang(ar){ letter-spacing: 0; font-size: 9px; padding: 0 5px; }
.cs .notif-nav.has .ico{ animation: bellring 3.5s ease-in-out 2; }
@media (prefers-reduced-motion: reduce){.cs .nav-new, .cs .notif-nav.has .ico{ animation: none; }}
.cs .login-brand{ padding: 48px clamp(28px, 4vw, 64px) !important; gap: 30px !important; isolation: isolate;
  background:
    radial-gradient(70% 55% at 85% 12%, rgba(120, 220, 255, .22), transparent 70%),
    radial-gradient(60% 50% at 8% 92%, rgba(70, 230, 150, .20), transparent 70%),
    linear-gradient(150deg, #0E7A55 0%, #0F7F86 30%, #1663C7 62%, #13306A 100%) !important; }
.cs .login-brand::before{ background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) !important;
  background-size: 44px 44px !important; opacity: 1 !important; -webkit-mask-image: radial-gradient(80% 70% at 30% 40%, #000 20%, transparent 85%); mask-image: radial-gradient(80% 70% at 30% 40%, #000 20%, transparent 85%); }
.cs .lb-orb{ position: absolute !important; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: -1; pointer-events: none; }
.cs .lb-o1{ width: 340px; height: 340px; top: -90px; right: -60px; background: #5EEAD4; animation: lbdrift 14s ease-in-out infinite alternate; }
.cs .lb-o2{ width: 300px; height: 300px; bottom: -110px; left: -70px; background: #60A5FA; animation: lbdrift 18s ease-in-out infinite alternate-reverse; }
@keyframes lbdrift{ to { transform: translate(40px, 30px) scale(1.08); } }
.cs .login-pitch{ max-width: 560px; }
.cs .lb-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); margin-bottom: 18px; }
.cs .lb-eyebrow i{ width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.cs .login-brand .login-pitch h1{ font-size: clamp(30px, 3.3vw, 44px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; max-width: 17ch; margin: 0 0 14px; }
.cs .lb-hl{ background: linear-gradient(90deg, #A7F3D0, #FFFFFF 55%, #BAE6FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs .login-brand .login-pitch p{ font-size: 15.5px; line-height: 1.55; opacity: .9; max-width: 46ch; margin: 0 0 24px; }
.cs .login-brand .login-features{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs .login-brand .login-features li{ align-items: flex-start; gap: 11px; padding: 12px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.4;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease; }
.cs .login-brand .login-features li:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.cs .login-brand .login-features .fic{ width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--lc); box-shadow: 0 6px 14px -6px var(--lc), inset 0 1px 0 rgba(255,255,255,.3); }
.cs .login-brand .ftx{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs .login-brand .ftx b{ font-size: 13.5px; font-weight: 650; }
.cs .login-brand .ftx span{ opacity: .82; }
.cs .login-brand [data-ch="WHATSAPP"]{ --lc: linear-gradient(135deg, #25D366, #128C7E); }
.cs .login-brand [data-ch="SMS"]{ --lc: linear-gradient(135deg, #60A5FA, #2563EB); }
.cs .login-brand [data-ch="RCS"]{ --lc: linear-gradient(135deg, #C084FC, #7C3AED); }
.cs .login-brand [data-ch="EMAIL"]{ --lc: linear-gradient(135deg, #FDBA74, #EA580C); }
.cs .login-brand .login-features [data-ch] .fic, .cs .lb-ic{ background: var(--lc); }
.cs .lb-stage{ position: relative; max-width: 560px; display: flex; flex-direction: column; gap: 9px; }
.cs .lb-msg{ display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; width: min(100%, 360px); color: #14231D;
  background: rgba(255,255,255,.94); box-shadow: 0 18px 36px -18px rgba(5, 20, 50, .55), 0 1px 0 rgba(255,255,255,.6) inset; animation: lbfloat 6s ease-in-out infinite; }
.cs .lb-m2{ margin-left: 56px; animation-delay: -2s; }
.cs .lb-m3{ margin-left: 22px; animation-delay: -4s; }
@keyframes lbfloat{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cs .lb-ic{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.cs .lb-t{ display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12.5px; }
.cs .lb-t b{ font-size: 13px; }
.cs .lb-t span{ color: #4A5C53; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .lb-st{ display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; color: #167A40; background: #E1F5E8; padding: 3px 8px; border-radius: 999px; flex: none; }
.cs .lb-m1 .lb-st{ color: #1D5FD0; background: #E3EEFF; }
.cs .lb-m3 .lb-st{ color: #9A4A0E; background: #FDEEDF; }
@media (max-height: 760px){.cs .lb-stage{ display: none; }}
@media (max-width: 1100px){.cs .login-brand .login-features{ grid-template-columns: minmax(0, 1fr); }
.cs .lb-stage{ display: none; }}
@media (max-width: 860px){.cs .lb-eyebrow, .cs .lb-orb, .cs .login-brand .login-features, .cs .login-brand .login-pitch p{ display: none; }
.cs .login-brand .login-pitch h1{ font-size: 22px; margin: 0; }}
@media (prefers-reduced-motion: reduce){.cs .lb-orb, .cs .lb-msg{ animation: none; }}
.cs .login-brand [data-k="ai"]{ --lc: linear-gradient(135deg, #C084FC, #7C3AED); }
.cs .login-brand [data-k="call"]{ --lc: linear-gradient(135deg, #F472B6, #DB2777); }
.cs .login-brand [data-k="omni"]{ --lc: linear-gradient(135deg, #25D366, #128C7E); }
.cs .login-brand [data-k="bc"]{ --lc: linear-gradient(135deg, #FDBA74, #EA580C); }
.cs .login-brand [data-k="api"]{ --lc: linear-gradient(135deg, #60A5FA, #2563EB); }
.cs .login-brand [data-k="live"]{ --lc: linear-gradient(135deg, #5EEAD4, #0D9488); }
.cs .login-brand .login-pitch{ max-width: 600px; }
.cs .login-brand .login-pitch h1{ max-width: 20ch; font-size: clamp(28px, 3vw, 40px); }
.cs .login-brand .login-features li{ padding: 11px 12px; }
.cs .lb-stage{ max-width: 600px; }
.cs .lb-m1 .lb-st{ color: #6D28D9; background: #EFE6FD; }
.cs .lb-m2 .lb-st{ color: #167A40; background: #E1F5E8; }
.cs .lb-m3 .lb-st{ color: #9A4A0E; background: #FDEEDF; }
.cs .lb-made{ position: absolute !important; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.cs .lb-heart{ color: #FF5A6E; display: inline-block; margin: 0 2px; animation: lbbeat 1.6s ease-in-out infinite; }
@keyframes lbbeat{ 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } }
@media (max-height: 880px){.cs .lb-stage{ display: none; }}
@media (max-width: 860px){.cs .lb-made{ display: none; }}
@media (prefers-reduced-motion: reduce){.cs .lb-heart{ animation: none; }}
.cs .lb-msg{ width: min(100%, 390px); }
@media (max-height: 940px){.cs .lb-stage{ display: none; }}
.cs .login-brand{ background:
    radial-gradient(60% 50% at 80% 8%, rgba(110, 231, 214, .35), transparent 70%),
    radial-gradient(55% 45% at 10% 95%, rgba(96, 165, 250, .35), transparent 70%),
    radial-gradient(40% 35% at 30% 30%, rgba(167, 139, 250, .18), transparent 70%),
    linear-gradient(160deg, #0B6E58 0%, #0D7690 35%, #1A5CC0 70%, #172E6E 100%) !important; }
.cs .login-brand::before{ opacity: .35 !important; }
.cs .lb-orb{ filter: blur(90px); opacity: .45; }
.cs .login-brand .login-pitch h1{ letter-spacing: -.025em; font-weight: 700; }
.cs .login-brand .login-pitch p{ font-size: 16px; opacity: .85; margin-bottom: 30px; max-width: 42ch; }
.cs .login-brand .login-features{ gap: 18px 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); max-width: 560px; }
.cs .login-brand .login-features li{ padding: 0; background: none; border: 0; backdrop-filter: none; border-radius: 0; align-items: center; gap: 12px; }
.cs .login-brand .login-features li:hover{ background: none; transform: none; }
.cs .login-brand .login-features .fic{ width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); box-shadow: none; position: relative; overflow: hidden; }
.cs .login-brand .login-features .fic::before{ content: ""; position: absolute; inset: 0; background: var(--lc); opacity: .55; }
.cs .login-brand .login-features .fic .ico{ position: relative; }
.cs .login-brand .ftx b{ font-size: 14px; font-weight: 600; }
.cs .login-brand .ftx span{ font-size: 12.5px; opacity: .72; }
.cs .login-pitch > *{ animation: lbup .7s cubic-bezier(.2,.7,.2,1) both; }
.cs .login-pitch > :nth-child(2){ animation-delay: .06s; }
.cs .login-pitch > :nth-child(3){ animation-delay: .12s; }
.cs .login-pitch > :nth-child(4){ animation-delay: .18s; }
.cs .login-brand .login-features li{ animation: lbup .7s cubic-bezier(.2,.7,.2,1) both; }
.cs .login-brand .login-features li:nth-child(1){ animation-delay: .24s; }
.cs .login-brand .login-features li:nth-child(2){ animation-delay: .28s; }
.cs .login-brand .login-features li:nth-child(3){ animation-delay: .32s; }
.cs .login-brand .login-features li:nth-child(4){ animation-delay: .36s; }
.cs .login-brand .login-features li:nth-child(5){ animation-delay: .40s; }
.cs .login-brand .login-features li:nth-child(6){ animation-delay: .44s; }
@keyframes lbup{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cs .login-form-side .login-card{ animation: lbup .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce){.cs .login-pitch > *, .cs .login-brand .login-features li, .cs .login-form-side .login-card{ animation: none; }}
.cs .doc-nav{ display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; border: 0; background: transparent; padding: 7px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); }
.cs .doc-nav:hover{ background: var(--surface-2); }
.cs .doc-nav.on{ background: var(--brand-soft, var(--surface-2)); font-weight: 700; }
.cs .mth{ display: inline-block; min-width: 42px; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.cs .mth.get{ color: var(--info-strong); }
.cs .mth.post{ color: var(--ok-strong); }
.cs .mth.patch, .cs .mth.put{ color: var(--warn-strong, var(--info-strong)); }
.cs .mth.delete{ color: var(--danger-strong); }
.cs ul.plain{ margin: 8px 0 12px; padding-inline-start: 18px; display: grid; gap: 6px; }
.cs .rcs-conn .sc-form, .cs .dns-rec{ margin-top: 8px; }
.cs .dns-rec{ display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cs .dns-rec .mono{ word-break: break-all; }
@media (max-width: 820px){.cs .login-form-side{ flex-direction: column; align-items: stretch; justify-content: flex-start; }
.cs .login-form-side .lang-sw{ position: static; align-self: flex-end; margin: 0 0 12px; }
.cs .login-form-side .login-card{ align-self: center; width: 100%; }}
:root{ --ease-out: cubic-bezier(.2, .7, .2, 1); --nav-w: 76px; --nav-w-open: 232px; }
.cs .nav-brand{ display: none; }
.cs .nav-pin .flyout{ white-space: nowrap; }
@media (min-width: 821px){.cs .shell{ transition: grid-template-columns .24s var(--ease-out); }
.cs .shell.nav-open{ grid-template-columns: var(--nav-w-open) minmax(0, 1fr); }
.cs .nav{ overflow-x: hidden; }
.cs .nav-pin{ margin-bottom: 4px; color: var(--ink-3); }
.cs .nav-pin .lbl{ display: none; }
.cs .shell.nav-open .nav-logo{ justify-content: flex-start; display: flex; align-items: center; gap: 10px; padding-inline: 6px; }
.cs .shell.nav-open .nav-brand{ display: block; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: navfade .22s var(--ease-out) both; }
.cs .shell.nav-open .nav-item{ flex-direction: row; justify-content: flex-start; gap: 12px; padding: 9px 12px; font-size: 14px; }
.cs .shell.nav-open .nav-item .lbl{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: inherit; animation: navfade .22s var(--ease-out) both; }
.cs .shell.nav-open .nav-item .flyout{ display: none; }
.cs .shell.nav-open .nav-new{ position: static; transform: none; margin-inline-start: auto; order: 3; animation: none; }
.cs .shell.nav-open .nav-foot{ align-items: stretch; }
.cs .shell.nav-open .nav-foot .nav-item{ width: 100%; }
.cs .shell.nav-open .nav-foot .avatar{ margin: 4px 12px; }
.cs .shell.nav-open .notif-badge{ position: static; margin-inline-start: auto; order: 3; }
.cs .shell.nav-open .lang-nav .lbl{ display: block; }
.cs .shell.nav-open .lang-nav .lbl::after{ content: ""; }}
@media (max-width: 820px){.cs .nav-pin{ display: none !important; }}
@keyframes navfade{ from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.cs .view:not([hidden]){ animation: viewin .2s var(--ease-out) both; }
@keyframes viewin{ from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cs .btn, .cs .nav-item, .cs .link-btn, .cs .cat-chips button, .cs .seg button, .cs .int-tabs button, .cs [role="tab"], .cs .lane, .cs .chip, .cs .app-card, .cs .chan-card, .cs .ads-filter button{
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .18s ease, transform .12s ease, filter .16s ease; }
.cs .btn:active:not([disabled]), .cs .nav-item:active, .cs .cat-chips button:active, .cs .seg button:active, .cs .ads-filter button:active{ transform: scale(.97); }
.cs .app-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(16, 40, 30, .35); }
.cs .app-card:active{ transform: translateY(0) scale(.99); }
.cs .btn:focus-visible, .cs .nav-item:focus-visible, .cs .link-btn:focus-visible{ outline: 2px solid var(--brand-3, #2C6FD6); outline-offset: 2px; }
.cs .overlay{ animation: fadein .16s ease both; }
.cs .overlay .dlg{ animation: dlgin .2s var(--ease-out) both; }
.cs .overlay.side .dlg{ animation: sidein .24s var(--ease-out) both; }
@keyframes dlgin{ from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sidein{ from { opacity: .4; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.cs .toast{ animation: toastin .22s var(--ease-out) both; }
@keyframes toastin{ from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce){.cs .shell, .cs .view:not([hidden]), .cs .overlay, .cs .overlay .dlg, .cs .toast, .cs .shell.nav-open .nav-item .lbl, .cs .shell.nav-open .nav-brand{ animation: none !important; transition: none !important; }
.cs .btn:active, .cs .nav-item:active, .cs .app-card:hover{ transform: none !important; }}
.cs .setup-steps{ list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs .setup-steps li{ counter-increment: st; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cs .setup-steps li::before{ content: counter(st); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand-3)); }
.cs .setup-steps b{ display: block; font-size: 14px; }
.cs .setup-steps span{ display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.cs .shell{ --ads-1: #2a78d6; --ads-2: #eb6834; --ads-3: #1baf7a; }
:root[data-theme="dark"] .shell{ --ads-1: #3987e5; --ads-2: #d95926; --ads-3: #199e70; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .shell{ --ads-1: #3987e5; --ads-2: #d95926; --ads-3: #199e70; }}
.cs .ads-body{ display: grid; gap: 16px; align-content: start; }
.cs .ads-conn{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cs .ads-pcard{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0; }
.cs .ads-pcard.on{ border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); }
.cs .ads-pg{ width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex: 0 0 auto; }
.cs .ads-pt{ min-width: 0; flex: 1; display: grid; gap: 2px; }
.cs .ads-pt b{ font-size: 14.5px; }
.cs .ads-empty{ padding: 20px 22px; }
.cs .ads-empty h2{ margin: 0 0 6px; }
.cs .ads-filter{ display: flex; flex-wrap: wrap; gap: 8px; }
.cs .ads-filter button{ display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cs .ads-filter button[aria-pressed="true"]{ background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cs .ads-kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cs .ads-kpi{ margin: 0; padding: 14px 16px; display: grid; gap: 2px; }
.cs .ads-kpi span{ font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.cs .ads-kpi b{ font-size: 22px; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs .ads-kpi small{ font-size: 12px; color: var(--ink-3); }
.cs .ads-chart-card, .cs .ads-camps{ margin: 0; padding: 16px 18px; }
.cs .ads-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cs .ads-h h2{ margin: 0; font-size: 16px; }
.cs .ads-legend{ display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.cs .ads-legend span, .cs .ag-tip div{ display: inline-flex; align-items: center; gap: 6px; }
.cs .ads-legend i, .cs .ag-tip i{ width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cs .ads-chart{ position: relative; }
.cs .ads-chart svg{ width: 100%; height: auto; display: block; overflow: visible; }
.cs .ag-grid{ stroke: var(--line); stroke-width: 1; }
.cs .ag-ax{ fill: var(--ink-3); font-size: 9px; font-family: inherit; }
.cs .ag-line{ fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cs .ag-end{ fill: var(--ink-2); font-size: 10px; font-weight: 600; font-family: inherit; }
.cs .ag-cross{ stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.cs .ag-dot{ stroke: var(--surface); stroke-width: 2; }
.cs .ag-tip{ position: absolute; top: 4px; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 26px -12px rgba(0,0,0,.35); padding: 8px 10px; font-size: 12.5px; display: grid; gap: 3px; pointer-events: none; min-width: 150px; z-index: 2; }
.cs .ag-tip div span{ margin-inline-start: auto; padding-inline-start: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.cs .ads-sum{ margin-top: 10px; }
.cs .ads-camps .tbl td{ vertical-align: middle; }
.cs .ads-cn{ display: flex; gap: 10px; align-items: center; min-width: 240px; }
.cs .ads-cn b{ display: block; }
.cs .ads-off td{ color: var(--ink-3); }
.cs .ads-bud{ display: inline-flex; gap: 6px; align-items: center; }
.cs .ads-bud .inp{ width: 90px; }
.cs .ads-note{ margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; font-size: 13.5px; color: var(--ink-2); }
.cs .ctwa-grid{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 760px){.cs .ctwa-grid{ grid-template-columns: minmax(0, 1fr); }}
.cs .ctwa-prev{ border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.cs .ctwa-prev .cp-head{ display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; }
.cs .ctwa-prev .cp-head span{ color: var(--ink-3); font-size: 12px; margin-inline-start: auto; }
.cs .ctwa-prev img, .cs .ctwa-prev .cp-img{ width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.cs .ctwa-prev p{ margin: 10px 12px; font-size: 13.5px; white-space: pre-wrap; }
.cs .ctwa-prev .cp-cta{ display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0 12px 12px; padding: 9px; border-radius: 10px; background: #25D366; color: #fff; font-weight: 700; font-size: 13.5px; }
.cs .ag-today{ stroke-dasharray: 4 4; opacity: .8; }
@media (min-width: 821px) and (min-height: 521px){.cs .nav{ overflow: visible; }
.cs .shell.nav-open .nav{ overflow-x: hidden; overflow-y: auto; }}
.cs .ads-tabs{ margin: -4px 0 0; }
.cs .ads-guide{ display: grid; gap: 16px; }
.cs .guide-hero{ padding: 20px 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 10%, var(--surface)), color-mix(in srgb, var(--brand-3) 8%, var(--surface))); }
.cs .guide-hero h2{ margin: 0 0 6px; }
.cs .guide-hero p{ margin: 0; max-width: 820px; color: var(--ink-2); }
.cs .guide-flow{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 16px; }
.cs .gf-step{ position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cs .gf-step .ico{ color: var(--brand-3); }
.cs .gf-step b{ font-size: 14.5px; }
.cs .gf-step span:last-child{ font-size: 13px; color: var(--ink-3); }
.cs .gf-n{ position: absolute; top: 10px; inset-inline-end: 12px; font-size: 12px; font-weight: 800; color: var(--ink-3); }
.cs .guide-tbl td:not(:first-child), .cs .guide-tbl th:not(:first-child){ text-align: center; }
.cs .ag-yes{ color: var(--ok-strong, #15803D); display: inline-flex; }
.cs .ag-no{ color: var(--ink-3); }
.cs .sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs .guide-p{ padding: 18px 20px; }
.cs .guide-ph{ display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.cs .guide-ph h3{ margin: 0; }
.cs .guide-ph p{ margin: 2px 0 0; }
.cs .guide-cols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cs .guide-cols h4{ margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cs .guide-ol{ margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 14px; }
.cs .guide-tip{ display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.cs h1, .cs h2, .cs .page-head h1{ letter-spacing: -0.015em; }
.cs .page-head h1{ font-weight: 700; }
.cs .tbl td, .cs .tbl th, .cs .num, .cs .kpi, .cs [class*="kpi"] b{ font-variant-numeric: tabular-nums; }
.cs .mono, .cs code, .cs pre, .cs .json-block{ font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-variant-ligatures: none; }
.cs .ico.brand{ stroke: none; }
.cs .ico.brand-whatsapp .bf{ fill: #25D366; }
.cs .ico.brand-instagram .bf{ fill: url(#da-ig); }
.cs .ico.brand-messenger .bf{ fill: url(#da-fbm); }
.cs .ico.brand.mono .bf, .cs .lane[disabled] .ico.brand .bf, .cs .bt-dh-ic .ico.brand .bf, .cs .app-tile .ico.brand .bf{ fill: currentColor; }
.cs [data-ch="INSTAGRAM"]{ --c: #D62976; --c-strong: #B0215F; --c-tint: #FCE7F1; }
.cs [data-ch="MESSENGER"]{ --c: #0A7CFF; --c-strong: #0062CC; --c-tint: #E3F0FF; }
.cs .lane{ transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.cs .lane[aria-checked="true"], .cs .lane[aria-checked="true"]:hover:not([disabled]){ background: var(--c-strong); border-color: var(--c-strong); color: #fff; box-shadow: 0 1px 2px color-mix(in srgb, var(--c-strong) 35%, transparent), 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.cs .lane[aria-checked="true"] .ico{ color: #fff; }
.cs .lane[aria-checked="true"] .ico.brand .bf{ fill: #fff; }
.cs .lane[aria-checked="true"] small{ color: rgba(255, 255, 255, .85); }
:root[data-theme="dark"] .lane[aria-checked="true"], :root[data-theme="dark"] .lane[aria-checked="true"]:hover:not([disabled]){ background: var(--c); border-color: var(--c); color: #0B1210; }
:root[data-theme="dark"] .lane[aria-checked="true"] .ico{ color: #0B1210; }
:root[data-theme="dark"] .lane[aria-checked="true"] .ico.brand .bf{ fill: #0B1210; }
:root[data-theme="dark"] .lane[aria-checked="true"] small{ color: rgba(11, 18, 16, .75); }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lane[aria-checked="true"], :root:not([data-theme="light"]) .lane[aria-checked="true"]:hover:not([disabled]){ background: var(--c); border-color: var(--c); color: #0B1210; }
:root:not([data-theme="light"]) .lane[aria-checked="true"] .ico{ color: #0B1210; }
:root:not([data-theme="light"]) .lane[aria-checked="true"] .ico.brand .bf{ fill: #0B1210; }
:root:not([data-theme="light"]) .lane[aria-checked="true"] small{ color: rgba(11, 18, 16, .75); }}
.cs .ibx2-ch[aria-pressed="true"][data-ch="SMS"]{ color: var(--sms-strong); }
.cs .ibx2-ch[aria-pressed="true"][data-ch="RCS"]{ color: var(--rcs-strong); }
.cs .sms-kind{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs .sms-kind button{ display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); text-align: start; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.cs .sms-kind button:hover:not([aria-checked="true"]){ background: var(--surface-2); }
.cs .sms-kind button .ico{ color: var(--ink-3); }
.cs .sms-kind button span{ display: flex; flex-direction: column; min-width: 0; }
.cs .sms-kind button b{ font-size: 13px; font-weight: 600; color: var(--ink); }
.cs .sms-kind button small{ font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .sms-kind button[aria-checked="true"]{ border-color: var(--sms); background: var(--sms-tint); box-shadow: inset 0 0 0 1px var(--sms); }
.cs .sms-kind button[aria-checked="true"] .ico{ color: var(--sms-strong); }
.cs .sms-kind button:focus-visible{ outline: 2px solid var(--sms); outline-offset: 2px; }
.cs .composer .banner .btn{ margin-inline-start: auto; flex: none; align-self: center; }
.cs .sms-vars{ display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cs .sms-vars label{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.cs .sms-vars .inp{ width: 150px; padding: 5px 8px; }
.cs .composer .field select + .sms-vars + .tpl-preview, .cs .composer .field select + .tpl-preview{ margin-top: 8px; }
@media (max-width: 520px){.cs .sms-kind small{ display: none; }}
.cs .app-tile .ico.brand .bf, .cs .wacc-ic .ico.brand .bf, .cs .wa-num-ic .ico.brand .bf, .cs .meta-sel-ic .ico.brand .bf, .cs .cp-cta .ico.brand .bf, .cs .ovx-svc-ic .ico.brand .bf, .cs .wf-pal-ic .ico.brand .bf, .cs .wfn-ic .ico.brand .bf, .cs .wf-pane-ic .ico.brand .bf, .cs .wf-tl-dot .ico.brand .bf, .cs .bch-ic .ico.brand .bf, .cs .cx2-chic .ico.brand .bf, .cs .bt-sim-chs button[aria-selected="true"] .ico.brand .bf, .cs .bc-fmt-ic .ico.brand .bf{ fill: #fff; }
.cs .chan-card.locked .ico.brand .bf{ fill: currentColor; }
.cs .thread-head{ padding: 7px 14px; min-height: 52px; }
.cs .thread-head > .avatar{ width: 32px !important; height: 32px !important; font-size: 12px !important; }
.cs .thread-title.tt-line{ display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.cs .thread-title.tt-line h1{ flex: none; font-size: 14.5px; white-space: nowrap; }
.cs .thread-title.tt-line p{ flex: 0 1 auto; min-width: 0; font-size: 12px; }
.cs .thread-title.tt-line .thread-labels{ margin: 0; flex-wrap: nowrap; flex: none; max-width: 40%; overflow: hidden; }
.cs .thread-title.tt-line .lchip{ font-size: 10.5px; line-height: 1.5; padding: 0 6px 0 4px; }
.cs .thread-title.tt-line .lchip-dot{ width: 6px; height: 6px; }
.cs .thread-head .chat-actions .btn{ padding: 4px 9px; font-size: 12.5px; min-height: 30px; }
.cs .thread-head .icon-btn{ width: 30px; height: 30px; }
@media (max-width: 760px){.cs .thread-title.tt-line p{ display: none; }}
.cs .pane.thread{ container-type: inline-size; container-name: thread; }
.cs .thread-title.tt-line p{ flex: 1 1 auto; }
@container thread (max-width: 900px){ .thread-head .chat-actions .ca-lbl { display: none; } .thread-head .chat-actions .btn { padding: 4px 8px; } }
@container thread (max-width: 560px){ .thread-title.tt-line p { display: none; } }
.cs .shell:not(.nav-open) .nav-new{ top: 3px; left: auto; right: 3px; transform: none; font-size: 6.5px; letter-spacing: .03em; padding: 0 3px; line-height: 1.45; max-width: none; box-shadow: 0 0 0 1.5px var(--surface); }
.cs .composer{ padding: 8px 14px 10px; gap: 7px; }
.cs .composer .lanes{ gap: 5px; }
.cs .composer .lane{ padding: 3px 10px; font-size: 12.5px; gap: 5px; }
.cs .composer .lane small{ font-size: 11px; }
.cs .composer .route{ font-size: 12.5px; gap: 3px 12px; }
.cs .composer .note{ font-size: 11.5px; padding: 1px 8px; }
.cs .composer .banner{ padding: 6px 10px; gap: 8px; font-size: 12.5px; border-radius: 8px; align-items: center; }
.cs .composer .banner .ico{ width: 14px; height: 14px; }
.cs .composer .field input, .cs .composer .field textarea, .cs .composer .field select{ padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.cs .composer .field textarea{ min-height: 38px; }
.cs .composer .tpl-preview{ padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.cs .composer .sms-vars{ margin: 6px 0; gap: 6px; }
.cs .composer .sms-vars .inp{ padding: 4px 8px; font-size: 12.5px; width: 140px; }
.cs .composer .field select + .sms-vars + .tpl-preview, .cs .composer .field select + .tpl-preview{ margin-top: 6px; }
.cs .composer .row .hint{ font-size: 12px; }
.cs .composer .send{ padding: 6px 13px; font-size: 13px; border-radius: 8px; gap: 6px; }
.cs .composer .sms-kind button{ padding: 5px 10px; }
.cs .composer .sms-kind button b{ font-size: 12.5px; }
.cs .composer .sms-kind button small{ font-size: 11px; }
.cs .composer .sms-vars{ margin: 6px 0 0; }
.cs .composer .sms-vars + .tpl-preview{ margin-top: 6px !important; }
.cs .composer .field{ gap: 6px; }
.cs .composer .field > .sms-vars, .cs .composer .field > .tpl-preview{ margin: 0 !important; }
@media (min-width: 821px){.cs .nav{ --rail-mid: 30px; --lg: 42px; padding-inline: 8px; }
.cs .nav .nav-item, .cs .shell.nav-open .nav .nav-item{ flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px;
    padding-block: 9px; padding-inline: calc(var(--rail-mid) - 10px) 10px; font-size: 14px; min-height: 38px; }
.cs .nav .nav-pin .ico{ margin-inline-start: 0.5px; }
.cs .nav .nav-item .lbl{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; max-width: 0; transition: opacity .16s ease, max-width 0s .24s; }
.cs .shell.nav-open .nav .nav-item .lbl{ opacity: 1; max-width: 160px; transition: opacity .2s ease .06s, max-width 0s; animation: none; }
.cs .nav-logo, .cs .shell.nav-open .nav-logo{ display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-inline: 0; }
.cs .nav-logo img{ width: var(--lg); height: var(--lg); flex: none; margin-inline-start: calc(var(--rail-mid) - var(--lg) / 2); }
.cs .nav-brand{ display: block; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 14px; color: var(--ink); transition: opacity .16s ease, max-width 0s .24s; }
.cs .shell.nav-open .nav-brand{ opacity: 1; max-width: 150px; transition: opacity .2s ease .06s, max-width 0s; animation: none; }
.cs .nav-foot, .cs .shell.nav-open .nav-foot{ align-items: stretch; }
.cs .nav-foot .nav-item, .cs .shell.nav-open .nav-foot .nav-item{ width: 100%; }
.cs .nav-foot .avatar, .cs .shell.nav-open .nav-foot .avatar{ align-self: flex-start; margin: 4px 0 2px calc(var(--rail-mid) - 14px); }
.cs .shell:not(.nav-open) .nav .nav-new{ left: calc(var(--rail-mid) + 2px); right: auto; top: 3px; }
.cs .shell:not(.nav-open) .nav .notif-badge{ left: calc(var(--rail-mid) + 1px); right: auto; top: 3px; }
.cs .shell.nav-open .nav .nav-new, .cs .shell.nav-open .nav .notif-badge{ position: static; margin-inline-start: auto; order: 3; }}
@media (min-width: 821px) and (max-height: 860px){.cs .nav{ --lg: 34px; }
.cs .nav .nav-item, .cs .shell.nav-open .nav .nav-item{ padding-block: 7px; min-height: 34px; }}
@media (min-width: 821px) and (max-height: 640px){.cs .nav{ --lg: 28px; }
.cs .nav .nav-item, .cs .shell.nav-open .nav .nav-item{ padding-block: 4px; min-height: 30px; }}
@media (prefers-reduced-motion: reduce){.cs .nav .nav-item .lbl, .cs .nav-brand{ transition: none !important; }}
.cs .ads-body{ grid-auto-rows: max-content; }
.cs .ads-tabs{ min-height: 46px; overflow-y: hidden; }
.cs .composer .svc-hint{ font-size: 11.5px; color: var(--ink-3); margin-top: -3px; }
.cs .wac-bsp-on .wac-need, .cs .wac-bsp-on .wac-coex, .cs .wac-bsp-on .wac-mode, .cs .wac-bsp-on .wac-how{ display: none; }
.cs .wac-bsp{ display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2, var(--surface)); }
.cs .wac-bsp-steps{ margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.cs .wac-bsp .wac-stack{ display: flex; flex-direction: column; gap: 12px; }
.cs .wa-hide{ display: none !important; }
.cs .wa-bsp-tools{ display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cs .wa-num-g3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px){.cs .wa-num-g3{ grid-template-columns: 1fr; }}
.mc{
  --bg:#F6F8F7;
  --surface:#FFFFFF;
  --surface-2:#EEF2F0;
  --border:#DEE6E1;
  --fg:#152420;
  --fg-dim:#5C6B64;
  --fg-mute:#86958E;
  --brand-1:#2FA85C;
  --brand-2:#1596A9;
  --brand-3:#2C6FD6;
  --brand-grad:linear-gradient(135deg,var(--brand-1),var(--brand-2) 55%,var(--brand-3));
  --ok:#2FA85C;
  --ok-bg:#E4F5EA;
  --warn:#C9881E;
  --warn-bg:#FBF0DC;
  --danger:#D1473F;
  --danger-bg:#FBE6E4;
  --info:#2C6FD6;
  --info-bg:#E8F0FC;
  --violet:#7C5CE0;
  --violet-bg:#EFEAFB;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(18,36,28,.05),0 10px 28px -14px rgba(18,36,28,.16);
  --font-display:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mc{
    --bg:#0D1512; --surface:#15201B; --surface-2:#1B2822; --border:#283830;
    --fg:#E9F1EC; --fg-dim:#9AACA3; --fg-mute:#6B7D74;
    --ok:#49C97C; --ok-bg:#163826; --warn:#E3A53C; --warn-bg:#3A2E14;
    --danger:#F0675F; --danger-bg:#3A1C1A; --info:#5B96EC; --info-bg:#162A42;
    --violet:#A78BFA; --violet-bg:#241C3D;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }}
:root[data-theme="dark"] .mc{
  --bg:#0D1512; --surface:#15201B; --surface-2:#1B2822; --border:#283830;
  --fg:#E9F1EC; --fg-dim:#9AACA3; --fg-mute:#6B7D74;
  --ok:#49C97C; --ok-bg:#163826; --warn:#E3A53C; --warn-bg:#3A2E14;
  --danger:#F0675F; --danger-bg:#3A1C1A; --info:#5B96EC; --info-bg:#162A42;
  --violet:#A78BFA; --violet-bg:#241C3D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}
.mc *{box-sizing:border-box;}
.mc, .mc{height:100%;}
.mc{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;text-rendering:optimizeLegibility;}
.mc a{color:var(--brand-2);text-decoration:none;}
.mc button{font-family:inherit;}
.mc ::-webkit-scrollbar{width:10px;height:10px;}
.mc ::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
.mc .app{display:flex;min-height:100vh;}
.mc .rail{width:64px;flex:0 0 64px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:14px 0 10px;gap:4px;position:sticky;top:0;height:100vh;z-index:40;}
.mc .rail-mark{width:34px;height:34px;border-radius:9px;overflow:hidden;margin-bottom:14px;flex:0 0 auto;box-shadow:var(--shadow);}
.mc .rail-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.mc .rail-items{display:flex;flex-direction:column;gap:3px;width:100%;align-items:center;}
.mc .nav-item{position:relative;width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--fg-dim);cursor:pointer;flex:0 0 auto;}
.mc .nav-item:hover{background:var(--surface-2);color:var(--fg);}
.mc .nav-item.active{background:var(--brand-grad);color:#fff;}
.mc .nav-item .nav-label{position:absolute;left:58px;top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;background:var(--fg);color:var(--bg);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:var(--shadow);z-index:60;}
.mc .nav-item:hover .nav-label{opacity:1;transform:translateY(-50%) translateX(0);}
.mc .rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;}
.mc .rail-foot .nav-item{width:40px;height:40px;}
.mc .main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow-y:auto;}
.mc .topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:16px 28px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.mc .topbar h1{font-family:var(--font-display);font-size:22px;font-weight:650;margin:0;letter-spacing:-0.018em;}
.mc .topbar .sub{color:var(--fg-dim);font-size:13px;margin-top:2px;}
.mc .topbar-right{display:flex;align-items:center;gap:10px;}
.mc .content{padding:22px 28px 60px;max-width:1400px;width:100%;margin:0 auto;}
.mc .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:8px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s;}
.mc .btn:hover{background:var(--surface-2);}
.mc .btn.primary{background:var(--brand-grad);color:#fff;border:none;}
.mc .btn.primary:hover{filter:brightness(1.05);}
.mc .btn.danger{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 35%, var(--border));}
.mc .btn.sm{padding:5px 10px;font-size:12px;}
.mc .btn:disabled{opacity:.5;cursor:not-allowed;}
.mc .icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--fg-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.mc .icon-btn:hover{background:var(--surface-2);color:var(--fg);}
.mc input[type=text], .mc input[type=search], .mc input[type=email], .mc input[type=number], .mc select{background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--fg);padding:8px 11px;font-size:13px;font-family:inherit;}
.mc input::placeholder{color:var(--fg-mute);}
.mc .seg{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap;}
.mc .seg button{border:none;background:transparent;color:var(--fg-dim);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:7px;cursor:pointer;white-space:nowrap;}
.mc .seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow);}
.mc .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.01em;white-space:nowrap;}
.mc .pill.ok{background:var(--ok-bg);color:var(--ok);}
.mc .pill.warn{background:var(--warn-bg);color:var(--warn);}
.mc .pill.bad{background:var(--danger-bg);color:var(--danger);}
.mc .pill.info{background:var(--info-bg);color:var(--info);}
.mc .pill.violet{background:var(--violet-bg);color:var(--violet);}
.mc .pill.mute{background:var(--surface-2);color:var(--fg-dim);}
.mc .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.mc .panel-pad{padding:18px 20px;}
.mc .panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px 14px;gap:10px;flex-wrap:wrap;}
.mc .panel-head h3{margin:0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px;}
.mc .panel-head .muted{color:var(--fg-dim);font-size:12.5px;margin-top:3px;display:block;max-width:440px;}
.mc .info-dot{width:15px;height:15px;border-radius:50%;border:1px solid var(--border);color:var(--fg-mute);display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:0 0 auto;}
.mc .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
.mc .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.mc .kpi .lbl{font-size:12px;color:var(--fg-dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.mc .kpi .val{font-family:var(--font-display);font-size:27px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;}
.mc .kpi .foot{font-size:12px;color:var(--fg-dim);margin-top:4px;}
.mc .kpi.brand{background:var(--brand-grad);border:none;color:#fff;}
.mc .kpi.brand .lbl, .mc .kpi.brand .foot{color:rgba(255,255,255,.82);}
.mc .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}
@media (max-width:980px){.mc .dash-grid{grid-template-columns:1fr;}}
.mc .table-wrap{overflow-x:auto;}
.mc table{width:100%;border-collapse:collapse;font-size:13px;}
.mc th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-dim);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;}
.mc th .chv{opacity:.5;margin-left:3px;}
.mc td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.mc tbody tr:hover{background:var(--surface-2);}
.mc tbody tr:last-child td{border-bottom:none;}
.mc td.num, .mc th.num{text-align:right;font-variant-numeric:tabular-nums;}
.mc .avatar{width:34px;height:34px;border-radius:9px;background:var(--brand-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto;}
.mc .tier-bar{width:84px;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.mc .tier-bar i{display:block;height:100%;border-radius:99px;}
.mc .acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.mc .acc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:11px;cursor:pointer;transition:border-color .12s;}
.mc .acc-card:hover{border-color:var(--brand-2);}
.mc .acc-card .hd{display:flex;align-items:center;gap:11px;}
.mc .acc-card .hd .nm{font-weight:700;font-size:14px;}
.mc .acc-card .hd .ind{font-size:12px;color:var(--fg-dim);}
.mc .overlay{position:fixed;inset:0;background:rgba(10,18,14,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.mc .dlg{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);max-width:460px;width:100%;max-height:86vh;overflow-y:auto;}
.mc .dlg.side{position:fixed;top:0;right:0;height:100%;max-height:100%;border-radius:0;max-width:540px;width:100%;}
.mc .overlay.side-wrap{justify-content:flex-end;padding:0;}
.mc .dlg-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);}
.mc .dlg-head h3{margin:0;font-size:15.5px;font-weight:700;}
.mc .dlg-body{padding:18px 20px;}
.mc .field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.mc .field label{font-size:12.5px;font-weight:600;color:var(--fg-dim);}
.mc .field input, .mc .field select{width:100%;}
.mc .field .err{font-size:11.5px;color:var(--danger);}
.mc .field .hint2{font-size:11.5px;color:var(--fg-mute);}
.mc .dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface);}
.mc .att-row{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--border);}
.mc .att-row:last-child{border-bottom:none;}
.mc .att-row .info{flex:1;min-width:0;}
.mc .att-row .nm{font-weight:600;font-size:13px;}
.mc .att-row .note{font-size:12px;color:var(--fg-dim);}
.mc .chart-wrap{padding:4px 20px 8px;}
.mc .chart-legend{display:flex;gap:16px;font-size:12px;color:var(--fg-dim);margin-top:4px;flex-wrap:wrap;justify-content:center;}
.mc .chart-legend span{display:inline-flex;align-items:center;gap:6px;}
.mc .chart-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.mc .readout{font-size:12px;color:var(--fg-dim);text-align:center;min-height:16px;}
.mc .tabbar{display:flex;gap:4px;border-bottom:1px solid var(--border);padding:0 20px;overflow-x:auto;}
.mc .tabbar button{border:none;background:transparent;padding:13px 14px;font-size:13px;font-weight:700;color:var(--fg-dim);cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;white-space:nowrap;}
.mc .tabbar button:hover{color:var(--fg);}
.mc .tabbar button.on{color:var(--fg);border-bottom-color:var(--brand-2);}
.mc .tabbar .count{background:var(--surface-2);color:var(--fg-dim);font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;}
.mc .tabbar button.on .count{background:var(--info-bg);color:var(--info);}
.mc .tab-note{padding:10px 20px;font-size:12.5px;color:var(--fg-dim);display:flex;align-items:center;gap:7px;}
.mc .tab-note i{width:6px;height:6px;border-radius:50%;background:var(--info);}
.mc .heat{font-weight:700;padding:2px 8px;border-radius:7px;background:var(--ok-bg);color:var(--ok);display:inline-block;font-variant-numeric:tabular-nums;}
.mc .flat{color:var(--fg-dim);font-variant-numeric:tabular-nums;}
.mc .btn-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;}
.mc .btn-link:hover{background:var(--brand-grad);color:#fff;border-color:transparent;}
.mc .btn-link.sm2{padding:4px 9px;font-size:11.5px;}
.mc .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--border);}
.mc .toolbar .grow{flex:1;min-width:160px;}
.mc .checkbox{width:16px;height:16px;accent-color:var(--brand-2);}
.mc .price-table td, .mc .price-table th{padding:9px 12px;}
.mc .price-table input[type=number]{width:96px;text-align:right;}
.mc .margin-up{color:var(--ok);font-weight:700;}
.mc .margin-flat{color:var(--fg-dim);}
.mc .setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.mc .setup-grid{grid-template-columns:1fr;}}
.mc .assigned{color:var(--fg-mute);font-style:italic;font-size:12.5px;}
.mc .daterange-pop{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:70;display:flex;min-width:460px;max-width:92vw;overflow:hidden;}
.mc .preset-list{display:flex;flex-direction:column;padding:8px;border-right:1px solid var(--border);min-width:140px;}
.mc .preset-list button{text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--fg-dim);cursor:pointer;}
.mc .preset-list button:hover{background:var(--surface-2);color:var(--fg);}
.mc .preset-list button.on{background:var(--info-bg);color:var(--info);}
.mc .daterange-custom{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:200px;}
.mc .daterange-custom .field{margin-bottom:0;}
@media (max-width:560px){.mc .daterange-pop{flex-direction:column;min-width:260px;}
.mc .preset-list{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;flex-wrap:wrap;}}
.mc .kpi .delta{display:inline-flex;align-items:center;gap:3px;font-weight:700;}
.mc .kpi .delta.up{color:var(--ok);}
.mc .kpi .delta.down{color:var(--danger);}
.mc .funnel-row{display:flex;flex-direction:column;gap:3px;}
.mc .funnel-row .fr-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;}
.mc .funnel-row .fr-top b{font-size:13.5px;font-variant-numeric:tabular-nums;}
.mc .funnel-track{height:11px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.mc .funnel-track i{display:block;height:100%;border-radius:99px;background:var(--brand-grad);}
.mc .snap-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media (max-width:760px){.mc .snap-grid{grid-template-columns:1fr;}}
.mc .stacked-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--surface-2);}
.mc .stacked-bar i{display:block;height:100%;}
.mc .snap-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:12px;color:var(--fg-dim);}
.mc .snap-legend span{display:inline-flex;align-items:center;gap:6px;}
.mc .snap-legend i{width:9px;height:9px;border-radius:3px;display:inline-block;}
.mc .industry-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:6px 0;}
.mc .industry-row .nm{width:108px;flex:0 0 108px;color:var(--fg-dim);}
.mc .industry-row .bar{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.mc .industry-row .bar i{display:block;height:100%;background:var(--brand-2);border-radius:99px;}
.mc .industry-row .v{width:38px;text-align:right;font-variant-numeric:tabular-nums;color:var(--fg-dim);}
.mc .wallet-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.mc .wallet-balance{font-family:var(--font-display);font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;}
.mc .wallet-balance.low{color:var(--danger);}
.mc .wallet-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;background:var(--surface-2);}
.mc .wallet-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mc .topup-row{display:flex;gap:8px;align-items:flex-end;margin-top:14px;flex-wrap:wrap;}
.mc .topup-row .field{margin-bottom:0;flex:1;min-width:140px;}
.mc .wallet-chip-row{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap;}
.mc .wallet-chip{border:1px solid var(--border);background:var(--surface);padding:4px 10px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;}
.mc .wallet-chip:hover{background:var(--surface-2);}
.mc .empty{padding:40px 20px;text-align:center;color:var(--fg-dim);font-size:13px;}
.mc .hint{font-size:12px;color:var(--fg-mute);}
@media (max-width:760px){.mc .topbar{padding:14px 16px;}
.mc .content{padding:16px 16px 48px;}
.mc .kpi-row{grid-template-columns:repeat(2,1fr);}}
.mc .err{ color: var(--danger); font-size: 12px; }
.mc .mono{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -.01em; }
.mc .small{ font-size: 12px; }
.mc button.btn-link{ font-family: inherit; }
.mc button.btn-link:disabled{ opacity: .45; cursor: not-allowed; }
.mc .link-name{ border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--fg); cursor: pointer; text-align: left; }
.mc .link-name:hover{ color: var(--brand-2); text-decoration: underline; }
.mc .table-foot{ padding: 10px 20px 14px; border-top: 1px solid var(--border); }
.mc .nav-item{ border: 0; background: transparent; font: inherit; }
.mc .nav-item:focus-visible, .mc .btn:focus-visible, .mc .switch:focus-visible{ outline: 2px solid var(--brand-2); outline-offset: 2px; }
.mc .switch{ position: relative; width: 40px; height: 22px; border-radius: 99px; border: 0; background: var(--border); cursor: pointer; flex: 0 0 auto; transition: background .15s; padding: 0; }
.mc .switch i{ position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.mc .switch.on{ background: var(--brand-1); }
.mc .switch.on i{ transform: translateX(18px); }
.mc .switch:disabled{ opacity: .5; cursor: progress; }
@media (prefers-reduced-motion: reduce){.mc .switch, .mc .switch i{ transition: none; }}
.mc .ch-pills{ display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mc .chp{ display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.mc .chp.ch-sms, .mc .ch-ic.ch-sms{ background: var(--info-bg); color: var(--info); }
.mc .chp.ch-rcs, .mc .ch-ic.ch-rcs{ background: var(--violet-bg); color: var(--violet); }
.mc .chp.ch-email, .mc .ch-ic.ch-email{ background: var(--warn-bg); color: var(--warn); }
.mc .chp.ch-instagram, .mc .ch-ic.ch-instagram{ background: var(--danger-bg); color: var(--danger); }
.mc .chp.ch-messenger, .mc .ch-ic.ch-messenger{ background: var(--info-bg); color: var(--brand-3); }
.mc .ch-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 520px){.mc .ch-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.mc .ch-opt{ display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--fg-dim); cursor: pointer; }
.mc .ch-opt.on{ border-color: var(--brand-2); color: var(--fg); background: var(--surface-2); }
.mc .ch-opt input{ accent-color: var(--brand-2); margin: 0; }
.mc .ch-list{ display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mc .ch-row{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.mc .ch-row:last-child{ border-bottom: 0; }
.mc .ch-row:not(.on) .ch-txt b{ color: var(--fg-dim); }
.mc .ch-ic{ width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); flex: none; }
.mc .ch-row:not(.on) .ch-ic{ background: var(--surface-2); color: var(--fg-mute); }
.mc .ch-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc .ch-txt .hint{ line-height: 1.35; }
.mc .detail-tabs{ padding: 14px 20px 0; overflow-x: auto; }
.mc .detail-tabs .seg{ flex-wrap: nowrap; }
.mc .sub-h{ margin: 6px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim); }
.mc .eyebrow{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-dim); }
.mc .notice{ display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.mc .notice.info{ background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.mc .notice.bad{ background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); color: var(--fg); margin-bottom: 12px; }
.mc .copy-row{ display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mc .copy-row label{ font-size: 12px; font-weight: 600; color: var(--fg-dim); }
.mc .copy-box{ display: flex; gap: 8px; align-items: center; }
.mc .copy-box input{ flex: 1; min-width: 0; }
.mc .cred-card{ border: 1px solid color-mix(in srgb, var(--brand-1) 40%, var(--border)); background: color-mix(in srgb, var(--brand-1) 6%, var(--surface)); border-radius: var(--radius); padding: 14px 16px; }
.mc .cred-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--brand-1); }
.mc .cred-head b{ color: var(--fg); }
.mc .cred-foot{ display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mc .cred-foot .hint{ flex: 1; min-width: 200px; }
.mc .txn-form{ margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mc .txn-fields{ display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.mc .txn-fields .field{ margin-bottom: 0; min-width: 120px; }
.mc .txn-fields .field.grow{ flex: 1; min-width: 180px; }
.mc .txn-table td{ vertical-align: top; }
.mc .amt-in{ color: var(--ok); font-weight: 700; }
.mc .amt-out{ color: var(--fg); }
.mc .credit-bar{ height: 7px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 12px; }
.mc .credit-bar i{ display: block; height: 100%; background: var(--brand-grad); border-radius: 99px; }
.mc .live-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: livepulse 1.8s infinite; display: inline-block; }
@keyframes livepulse{ 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce){.mc .live-dot{ animation: none; }}
.mc .banner-warn{ display: flex; align-items: center; gap: 10px; padding: 10px 28px; background: var(--warn-bg); color: var(--fg); border-bottom: 1px solid var(--border); font-size: 13px; }
.mc .banner-warn span{ flex: 1; }
.mc .toast{ position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 120; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13px; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
@media (max-width: 760px){.mc .rail{ width: 56px; flex-basis: 56px; }
.mc .nav-item{ width: 42px; height: 42px; }}
.mc .btn.primary{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;}
.mc .btn.primary:hover:not([disabled]){background:var(--brand-grad);color:#fff;filter:brightness(.93) saturate(1.08);transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(15,110,140,.55);}
.mc .btn.primary:active:not([disabled]){transform:none;filter:brightness(.88);}
@media (prefers-reduced-motion: reduce){.mc .btn.primary, .mc .btn.primary:hover:not([disabled]){transition:none;transform:none;}}
.mc .meta-ids{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px;}
.mc .svc-meter{ position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); margin-top: 6px; }
.mc .svc-meter i{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--brand-grad); }
.mc .svc-meter.none i{ background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 10px); }
.mc .svc-meter.warn i{ background: linear-gradient(90deg, #F59E0B, #F97316); }
.mc .svc-meter.over i{ background: linear-gradient(90deg, #F97316, var(--danger)); }
.mc .svc-meter em{ position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fg-mute); border-radius: 2px; }
.mc .svc-now{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.mc .svc-now .lbl{ font-size: 12px; color: var(--fg-dim); }
.mc .svc-now .val{ font-size: 22px; font-weight: 700; }
.mc .limit-choice{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc .limit-choice .lc{ text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.mc .limit-choice .lc.on{ border-color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-2); background: color-mix(in srgb, var(--brand-2) 7%, var(--surface)); }
.mc .limit-presets{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mc .chip-btn{ padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-dim); font: inherit; font-size: 12.5px; cursor: pointer; }
.mc .chip-btn.on{ border-color: var(--brand-2); color: var(--fg); background: color-mix(in srgb, var(--brand-2) 9%, var(--surface)); }
.mc .warn-txt{ color: var(--warn) !important; }
.mc .bad-txt{ color: var(--danger) !important; font-weight: 700; }
.mc .svc-cell{ min-width: 96px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.mc .svc-cell .svc-meter{ flex-basis: 100%; height: 5px; margin-top: 2px; }
.mc .svc-row{ display: flex; align-items: baseline; gap: 8px; }
.mc .svc-row b{ font-size: 18px; }
.mc .svc-alerts{ display: flex; flex-direction: column; gap: 10px; }
.mc .svc-alert{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.mc .svc-alert .grow{ flex: 1; min-width: 0; }
.mc .wcp{ border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; background: var(--surface); }
.mc .wcp.on{ border-color: color-mix(in srgb, var(--brand-2) 45%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 5%, var(--surface)), var(--surface) 120px); }
.mc .wcp-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc .wcp-title{ display: flex; gap: 10px; align-items: flex-start; }
.mc .wcp-ic{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--brand-grad); flex: none; }
.mc .wcp-body{ margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.mc .wcp-tools{ display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mc .wcp-tools .grow{ flex: 1; }
.mc .wcp-markup{ margin: 0 !important; }
.mc .wcp-mk-row{ display: flex; align-items: center; gap: 6px; }
.mc .wcp-mk-row input{ width: 90px; }
.mc .wcp-presets{ display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; }
.mc .wcp-search{ width: 100%; margin-bottom: 8px; }
.mc .wcp-table{ max-height: 420px; overflow: auto; }
.mc .wcp-table thead th{ position: sticky; top: 0; background: var(--surface); z-index: 1; }
.mc .wcp-table td{ vertical-align: middle; }
.mc .wcp-ctys{ max-width: 260px; white-space: normal; line-height: 1.3; }
.mc .wcp-cell{ display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.mc .wcp-arrow{ color: var(--fg-mute); font-size: 11px; }
.mc .wcp-in{ width: 78px; padding: 4px 6px !important; font-size: 12.5px; text-align: right; }
.mc .wcp-in.sm{ width: 58px; }
.mc .wcp-in::placeholder{ color: var(--fg); opacity: .55; }
.mc tr.wcp-custom td:first-child{ box-shadow: inset 3px 0 0 var(--brand-2); }
.mc .wcp-cats{ margin-bottom: 8px; }
.mc .wcp-in{ width: 86px; }
.mc .wcp-in::placeholder{ opacity: .45; }
.mc .wcp-in{ width: 76px; }
.mc .wcp-in.sm{ width: 50px; }
.mc .wcp-table th, .mc .wcp-table td{ padding-left: 6px; padding-right: 6px; }
.mc .rs-mark{ width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; background: linear-gradient(135deg, var(--c1, #2FA85C), var(--c2, #2C6FD6)); flex: none; box-shadow: 0 8px 18px -12px var(--c2, #2C6FD6); }
.mc .rs-mark.sm{ width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.mc .rs-mark.img{ object-fit: contain; background: #fff; border: 1px solid var(--border); }
.mc .rs-name{ display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: var(--fg); font: inherit; }
.mc .rs-name > span:last-child{ display: flex; flex-direction: column; }
.mc .rs-name:hover b{ text-decoration: underline; }
.mc .rs-chs{ display: flex; gap: 4px; flex-wrap: wrap; }
.mc .rs-chs .ch-ic{ width: 24px; height: 24px; border-radius: 7px; }
.mc .rs-top{ margin-bottom: 16px; }
.mc .rs-tag{ display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--violet-bg); color: var(--violet); }
.mc .rs-steps{ list-style: none; margin: 0; padding: 10px 20px; display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.mc .rs-steps li button{ display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--fg-mute); cursor: pointer; white-space: nowrap; }
.mc .rs-steps li b{ width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--surface-2); color: var(--fg-dim); }
.mc .rs-steps li.cur button{ color: var(--fg); font-weight: 650; background: var(--surface-2); }
.mc .rs-steps li.cur b, .mc .rs-steps li.done b{ background: var(--brand-grad); color: #fff; }
.mc .rs-steps li.done button{ color: var(--fg-dim); }
.mc .dlg:has(.rs-steps){ max-width: 820px; width: 100%; }
.mc .rs-body{ max-height: min(62vh, 640px); overflow-y: auto; }
.mc .rs-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.mc .rs-grid .field{ margin-bottom: 14px; }
.mc .rs-wide{ grid-column: 1 / -1; }
.mc .req{ color: var(--danger); margin-left: 3px; }
.mc .rs-phone{ display: flex; gap: 6px; }
.mc .rs-phone select{ width: 150px; flex: none; }
.mc .rs-phone input{ flex: 1; min-width: 0; }
.mc .rs-check{ display: flex; align-items: center; gap: 8px; font-weight: 500 !important; font-size: 13.5px; color: var(--fg); cursor: pointer; }
.mc .rs-colors{ display: flex; align-items: center; gap: 12px; }
.mc .rs-colors label{ display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; }
.mc .rs-colors input[type=color]{ width: 38px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.mc .rs-swatch{ width: 60px; height: 26px; border-radius: 8px; display: inline-block; }
.mc .rs-swatch.sm{ width: 34px; height: 14px; border-radius: 5px; vertical-align: middle; }
.mc .rs-logo{ display: flex; align-items: center; gap: 10px; }
.mc .rs-logo img{ width: 44px; height: 44px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.mc .rs-logo-ph{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; }
.mc .rs-feats{ display: flex; flex-wrap: wrap; gap: 8px; }
.mc .rs-feat{ display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); font-weight: 500 !important; font-size: 13px; cursor: pointer; background: var(--surface); color: var(--fg); }
.mc .rs-feat.on{ border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 8%, var(--surface)); }
.mc .rs-choice{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc .rs-choice .lc{ text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.mc .rs-choice .lc.on{ border-color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand-2); background: color-mix(in srgb, var(--brand-2) 7%, var(--surface)); }
.mc .rs-suffix{ display: flex; align-items: center; gap: 6px; }
.mc .rs-suffix input{ width: 110px; }
.mc .rs-preview{ display: flex; height: 120px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 8px; }
.mc .rs-prev-rail{ width: 56px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.mc .rs-prev-rail > span, .mc .rs-prev-rail img{ width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; background: linear-gradient(135deg, var(--c1), var(--c2)); object-fit: contain; }
.mc .rs-prev-rail i{ width: 22px; height: 6px; border-radius: 3px; background: var(--border); }
.mc .rs-prev-rail i:first-of-type{ background: var(--c1); }
.mc .rs-prev-main{ flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.mc .rs-prev-bar{ height: 26px; border-radius: 8px; background: linear-gradient(120deg, var(--c1), var(--c2)); }
.mc .rs-prev-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mc .rs-prev-cards i{ height: 24px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.mc .rs-prev-main small{ position: absolute; right: 10px; bottom: 6px; font-size: 10px; color: var(--fg-mute); }
.mc .rs-review{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.mc .rs-review > div{ padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.mc .rs-review h4{ margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-dim); }
.mc .rs-review p{ margin: 0; font-size: 13px; line-height: 1.5; }
.mc .rs-confirm{ padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border); }
.mc .dlg.side:has(.rs-detail){ max-width: min(1180px, 94vw); }
.mc .rs-detail{ display: flex; flex-direction: column; height: 100%; min-height: 0; }
.mc .rs-head{ background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 10%, var(--surface)), var(--surface) 60%); }
.mc .rs-dbody{ flex: 1; min-height: 0; overflow-y: auto; }
.mc .rs-kpis{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-bottom: 14px; }
.mc .rs-ov .topbar{ position: static; padding: 0 0 12px; background: transparent; border: 0; }
.mc .rs-ov .content{ padding: 0; }
.mc .rs-assign{ display: flex; gap: 8px; margin-bottom: 12px; }
.mc .rs-assign select{ flex: 1; }
.mc .rs-profile{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mc .rs-profile > div{ padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); }
.mc .rs-profile h4{ margin: 0 0 8px; }
.mc .rs-profile dl{ margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 6px 10px; font-size: 13px; }
.mc .rs-profile dt{ color: var(--fg-dim); }
.mc .rs-profile dd{ margin: 0; overflow-wrap: anywhere; }
.mc .rs-rail-mark{ width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; background: linear-gradient(135deg, var(--rs1), var(--rs2)); }
.mc .rs-scope .nav-item.active{ background: linear-gradient(135deg, var(--rs1), var(--rs2)) !important; color: #fff !important; }
.mc .rs-banner{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 28px 0; padding: 12px 16px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, var(--rs1), var(--rs2)); box-shadow: 0 16px 32px -24px var(--rs2); }
.mc .rs-banner-mark{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: rgba(255,255,255,.2); }
.mc .rs-banner > div{ display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.mc .rs-banner > div span{ font-size: 12.5px; opacity: .9; }
.mc .rs-banner-note{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); }
.mc .rs-banner .btn{ background: #fff; color: #14231D; border-color: transparent; }
@media (max-width: 760px){.mc .rs-grid, .mc .rs-review, .mc .rs-profile, .mc .rs-choice{ grid-template-columns: minmax(0, 1fr); }
.mc .rs-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.mc .rs-banner{ margin: 12px 14px 0; }}
.mc .field .rs-check, .mc .field .rs-feat{ display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; }
.mc .rs-check input, .mc .rs-feat input{ width: auto !important; height: auto; flex: none; margin: 0; }
.mc .rs-body input[type=tel], .mc .rs-body input[type=date], .mc .rs-body textarea, .mc .rs-dbody input[type=number]{ width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; }
.mc .rs-body textarea{ resize: vertical; }
.mc .rs-phone input[type=tel]{ width: auto; }
.mc .rs-body .ch-opt{ justify-content: flex-start; gap: 8px; }
.mc .rs-body .ch-opt input{ width: auto !important; flex: none; margin: 0; }
.mc .basis-grid{ display: grid; grid-template-columns: 1fr; gap: 8px; }
.mc .basis-opt{ position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 12px 12px 12px 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel, var(--surface)); color: inherit; font: inherit; cursor: pointer; }
.mc .basis-opt b{ font-size: 14px; }
.mc .basis-opt .hint{ font-size: 12px; line-height: 1.4; }
.mc .basis-dot{ position: absolute; left: 12px; top: 14px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); }
.mc .basis-opt.on{ border-color: var(--accent, #2C6FD6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2C6FD6) 18%, transparent); }
.mc .basis-opt.on .basis-dot{ border-color: var(--accent, #2C6FD6); background: radial-gradient(circle, var(--accent, #2C6FD6) 45%, transparent 50%); }
@media (max-width: 640px){.mc .basis-grid{ grid-template-columns: 1fr; }}
.mc .tz-chip{ display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel, #fff); font-size: 12.5px; color: var(--fg-dim, #555); white-space: nowrap; cursor: help; }
.mc .tz-chip b{ color: var(--fg, #111); font-weight: 650; }
.mc .cur-wrap{ position: relative; display: inline-flex; }
.mc .cur-chip{ display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel, #fff); }
.mc .cur-chip button{ border: 0; background: transparent; padding: 0 9px; height: 100%; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 650; color: var(--fg-dim, #555); cursor: pointer; }
.mc .cur-chip button[aria-pressed="true"]{ background: var(--accent, #2C6FD6); color: #fff; }
.mc .cur-chip .cur-fx{ padding: 0 7px; display: grid; place-items: center; }
.mc .cur-pop{ position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 260px; padding: 14px; border-radius: 12px; background: var(--panel, #fff); border: 1px solid var(--line); box-shadow: 0 18px 36px -16px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; }
.mc .cur-pop .hint{ margin: 0; font-size: 12px; }
.mc .cur-row{ display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.mc .cur-row input{ width: 100%; }
.mc .cur-acts{ display: flex; justify-content: flex-end; gap: 6px; }
.mc .addon-list{ display: flex; flex-direction: column; gap: 8px; }
.mc .addon-row{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(110px, .8fr) 110px 32px; gap: 8px; align-items: center; }
.mc .addon-row input, .mc .addon-row select{ width: 100%; }
.mc .addon-price{ display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel, #fff); }
.mc .addon-price span{ padding: 0 8px; font-size: 12px; color: var(--fg-dim, #666); border-right: 1px solid var(--line); align-self: stretch; display: grid; place-items: center; }
.mc .addon-price input{ border: 0 !important; box-shadow: none !important; }
.mc .addon-add{ margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.mc .wa-plat{ display: flex; flex-direction: column; gap: 14px; }
.mc .wa-plat-h{ display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.mc .wa-plat-h h3{ margin: 0 0 2px; }
.mc .wa-dot{ width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.mc .wa-dot.live{ background: #1FA855; box-shadow: 0 0 0 4px rgba(31,168,85,.2); }
.mc .wa-plat-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mc .wa-plat-grid h3{ margin-top: 0; }
@media (max-width: 1000px){.mc .wa-plat-grid{ grid-template-columns: 1fr; }}
.mc .wa-checks{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc .wa-checks li{ display: flex; gap: 8px; align-items: flex-start; }
.mc .wa-checks li span{ display: flex; flex-direction: column; }
.mc .wa-checks small{ color: var(--fg-dim); font-size: 12px; }
.mc .wa-checks li.ok svg{ color: #1FA855; }
.mc .wa-checks li.no svg{ color: #9aa3ad; }
.mc .wa-checks b{ font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.mc .wa-copy{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.mc .wa-copy .mono{ overflow-wrap: anywhere; }
.mc .wa-plat-h2{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc .wa-plat-h2 h3{ margin: 0; flex: 1; }
.mc .wa-test{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin: 10px 0; border-radius: 10px; background: var(--bg); }
.mc .wa-acct{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.mc .wa-acct > div{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc .wa-acct b{ overflow-wrap: anywhere; }
.mc .mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.mc .nowrap{ white-space: nowrap; }
.mc .ch-email-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.mc .ch-email-grid>div{display:flex;flex-direction:column;gap:4px}
.mc .ch-email-grid input{width:100%}
.mc .wa-acct .pill{ align-self: flex-start; }
.mc .tabscroll-btn{ display: none; }
.mc .detail-tabs.tabscroll-row{ display: flex; align-items: center; }
.mc .ts-over > .tabscroll-btn{ display: grid; place-items: center; position: sticky; z-index: 4; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--fg); box-shadow: 0 2px 10px rgba(15, 23, 42, .16); cursor: pointer; transition: opacity .15s; }
.mc .ts-over > .tabscroll-btn.left{ left: 2px; margin-right: -30px; }
.mc .ts-over > .tabscroll-btn.right{ right: 2px; margin-left: -30px; }
.mc .ts-over.ts-start > .tabscroll-btn.left, .mc .ts-over.ts-end > .tabscroll-btn.right{ opacity: 0; pointer-events: none; }
.mc .ncfg{ display: flex; flex-direction: column; gap: 16px; padding-bottom: 80px; }
.mc .n-banner{ display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #E0A100 14%, var(--surface)); border: 1px solid color-mix(in srgb, #E0A100 40%, var(--border)); font-size: 13px; }
.mc .n-tabs{ display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.mc .n-tabs button{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 0; background: transparent; color: var(--fg-dim); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.mc .n-tabs button.on{ background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px -6px rgba(15,23,42,.25); }
.mc .n-dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mc .n-dot.on{ background: #1FA855; box-shadow: 0 0 0 3px color-mix(in srgb, #1FA855 22%, transparent); }
.mc .n-dot.off{ background: #C9CED6; }
.mc .n-grid{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px){.mc .n-grid{ grid-template-columns: 1fr; }}
.mc .n-side{ display: flex; flex-direction: column; gap: 16px; }
.mc .n-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.mc .n-card h4{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.mc .n-head{ display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.mc .n-head h3{ margin: 0 0 3px; font-size: 16px; }
.mc .n-head p{ margin: 0; color: var(--fg-dim); font-size: 13px; }
.mc .n-head-r{ margin-left: auto; flex: none; }
.mc .n-ic{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.mc .n-ic.wa{ background: linear-gradient(135deg, #25D366, #128C7E); }
.mc .n-ic.sms{ background: linear-gradient(135deg, #3568D4, #2851AE); }
.mc .n-ic.mail{ background: linear-gradient(135deg, #F59E0B, #C1670A); }
.mc .n-form{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; margin-top: 4px; }
.mc .n-form.one{ grid-template-columns: 1fr; }
.mc .nf{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mc .nf.wide{ grid-column: 1 / -1; }
.mc .nf-l{ font-size: 12.5px; font-weight: 600; color: var(--fg); }
.mc .nf-h{ font-size: 11.5px; color: var(--fg-dim); }
.mc .nf input, .mc .nf select, .mc .nf textarea, .mc .n-row input, .mc .n-row select, .mc .n-filters select, .mc .n-contacts input{ width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; font-size: 13.5px; }
.mc .nf textarea{ resize: vertical; line-height: 1.45; }
.mc .nf input.mono, .mc .nf .mono{ font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.mc .n-actions{ display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mc .n-actions .grow, .mc .n-filters .grow{ flex: 1; }
.mc .n-toggle{ display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mc .n-toggle.row{ display: flex; padding: 6px 0; }
.mc .n-test .n-row{ display: grid; grid-template-columns: 1fr; gap: 8px; }
.mc .n-test .btn{ justify-content: center; }
.mc .n-res{ margin-top: 10px; padding: 9px 11px; border-radius: 9px; font-size: 12.5px; }
.mc .n-res.ok{ background: color-mix(in srgb, #1FA855 12%, var(--surface)); }
.mc .n-res.bad{ background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.mc .n-tpls{ display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.mc .n-tpl{ display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; }
.mc .n-tpl b{ font-size: 12px; }
.mc .n-tpl small{ color: var(--fg-dim); font-size: 11.5px; }
.mc .n-prov{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.mc .n-prov button{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
.mc .n-prov button.on{ border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent); }
.mc .n-prov .pill{ margin-left: auto; }
.mc .n-plogo{ width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; }
.mc .n-plogo.etisalat{ background: linear-gradient(135deg, #E4002B, #9A001D); }
.mc .n-plogo.du{ background: linear-gradient(135deg, #00A9CE, #753BBD); }
.mc .n-adv{ margin-top: 12px; }
.mc .n-adv summary{ cursor: pointer; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.mc .n-copy{ display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12px; flex-wrap: wrap; }
.mc .n-copy span{ font-weight: 600; }
.mc .n-copy code{ flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 11.5px; color: var(--fg-dim); }
.mc .n-kv{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; margin-bottom: 12px; }
.mc .n-list{ margin: 0; padding-left: 18px; color: var(--fg-dim); font-size: 12.5px; line-height: 1.6; }
.mc .n-events{ display: flex; flex-direction: column; gap: 16px; }
.mc .n-3{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.mc .n-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.mc .n-chip{ padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-dim); font: inherit; font-size: 12px; cursor: pointer; }
.mc .n-chip.on{ background: color-mix(in srgb, var(--brand-2) 14%, var(--surface)); border-color: color-mix(in srgb, var(--brand-2) 50%, var(--border)); color: var(--fg); font-weight: 600; }
.mc .n-group h4{ text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; color: var(--fg-dim); }
.mc .n-ev{ border-top: 1px solid var(--border); padding: 12px 0; }
.mc .n-ev:first-of-type{ border-top: 0; }
.mc .n-ev-row{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
@media (max-width: 900px){.mc .n-ev-row{ grid-template-columns: auto 1fr; }
.mc .n-ev-ch, .mc .n-ev-row > .btn{ grid-column: 2; }}
.mc .n-ev-t b{ display: block; font-size: 14px; }
.mc .n-ev-t span{ font-size: 12.5px; color: var(--fg-dim); }
.mc .n-ev:not(.on) .n-ev-t{ opacity: .6; }
.mc .n-ev-ch{ display: flex; gap: 6px; flex-wrap: wrap; }
.mc .n-chb{ display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; position: relative; }
.mc .n-chb:disabled{ opacity: .5; cursor: default; }
.mc .n-chb.on.wa{ background: #E1F5E8; color: #167A40; border-color: #9FD9B4; }
.mc .n-chb.on.sms{ background: #E4ECFC; color: #2851AE; border-color: #A9C1F2; }
.mc .n-chb.on.mail{ background: #FBEEDA; color: #9C5306; border-color: #EDC48A; }
.mc .n-chb.warn::after{ content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #E0A100; border: 2px solid var(--surface); }
.mc .n-ev-edit{ margin: 12px 0 4px 54px; padding: 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mc .n-ev-edit .n-form{ width: 100%; }
.mc .n-vars{ font-size: 12px; color: var(--fg-dim); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mc .n-vars code{ padding: 2px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; }
.mc .n-savebar{ position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px -10px rgba(15,23,42,.35); }
.mc .n-savebar span{ flex: 1; font-weight: 600; font-size: 13.5px; }
.mc .n-logs{ display: flex; flex-direction: column; gap: 14px; }
.mc .n-chtabs{ display: flex; gap: 8px; flex-wrap: wrap; }
.mc .n-chtabs button{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-dim); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.mc .n-chtabs button.on{ color: var(--fg); border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 16%, transparent); }
.mc .n-chtabs .count{ padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; }
.mc .n-filters{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mc .n-filters select{ width: auto; }
.mc .n-search{ display: flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); min-width: 260px; flex: 1 1 260px; max-width: 420px; color: var(--fg-dim); }
.mc .n-search input{ border: 0; outline: 0; background: transparent; padding: 9px 0; width: 100%; font: inherit; font-size: 13.5px; color: var(--fg); }
.mc .n-table .n-click{ cursor: pointer; }
.mc .n-table .n-click:hover td{ background: var(--surface-2); }
.mc .n-chtag{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.mc .n-chtag.wa{ background: #E1F5E8; color: #167A40; }
.mc .n-chtag.sms{ background: #E4ECFC; color: #2851AE; }
.mc .n-chtag.mail{ background: #FBEEDA; color: #9C5306; }
.mc .n-det{ max-width: 320px; }
.mc .n-det .hint, .mc .n-err{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc .n-err{ color: var(--danger); font-size: 12.5px; }
.mc .n-pager{ display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
.mc .n-pager .hint{ margin-right: auto; }
.mc .n-detail{ display: flex; flex-direction: column; gap: 14px; }
.mc .n-detail h4{ margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim); }
.mc .n-dk{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mc .n-dk > div{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc .n-dk span{ font-size: 11.5px; color: var(--fg-dim); }
.mc .n-dk b{ font-size: 13px; overflow-wrap: anywhere; }
.mc .n-dk .pill{ align-self: flex-start; }
.mc .n-errbox{ display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); font-size: 13px; }
.mc .n-msg{ padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mc .n-msg b{ display: block; margin-bottom: 6px; }
.mc .n-msg pre{ margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.5; }
.mc .n-tl{ list-style: none; margin: 0; padding: 0; }
.mc .n-tl li{ display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 12px; position: relative; }
.mc .n-tl li:not(:last-child)::before{ content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--border); }
.mc .n-tl i{ width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; background: #9AA3AF; }
.mc .n-tl i.ok{ background: #1FA855; }
.mc .n-tl i.bad{ background: var(--danger); }
.mc .n-tl i.info{ background: var(--brand-2); }
.mc .n-tl i.warn{ background: #E0A100; }
.mc .n-tl div{ display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.mc .n-tl span{ color: var(--fg-dim); font-size: 12.5px; }
.mc .n-tl small{ color: var(--fg-dim); font-size: 11.5px; }
.mc .n-vars-t{ display: grid; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.mc .n-vars-t div{ display: flex; gap: 10px; }
.mc .n-vars-t code{ min-width: 110px; }
.mc .mc-provs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mc .mc-prov{ padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.mc .mc-prov.on{ border-color: color-mix(in srgb, #1FA855 50%, var(--border)); background: color-mix(in srgb, #1FA855 5%, var(--surface)); }
.mc .mc-prov-h{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc .wa-acct .pill, .mc .n-head-r .pill{ white-space: nowrap; }
.mc .chan-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.mc .chan-chip{border:1px solid var(--border);background:var(--surface,transparent);color:inherit;border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.mc .chan-chip b{font-weight:600;opacity:.8}
.mc .chan-chip.on{background:var(--brand-2,#2C6FD6);border-color:transparent;color:#fff}
.mc .topbar-right{flex-wrap:wrap;justify-content:flex-end}
.mc .total-row td{border-top:2px solid var(--border);background:var(--surface-2)}
.mc .detail-tabs{ scrollbar-width: none; }
.mc .detail-tabs::-webkit-scrollbar{ display: none; }
.mc .detail-tabs.ts-over{ padding-left: 6px; padding-right: 6px; }
.mc .wcp-notes{ list-style: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand-2, #2C6FD6) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-2, #2C6FD6) 20%, var(--border)); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; }
.mc .wcp-notes li{ display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--fg-dim); }
.mc .wcp-notes li .ico, .mc .wcp-notes li svg{ flex: none; margin-top: 2px; color: var(--brand-2, #2C6FD6); }
.mc .wcp-notes b{ color: var(--fg); }
.mc .wcp-call{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.mc .inv-status{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1100px){.mc .inv-status{ grid-template-columns: 1fr 1fr; }}
.mc .inv-stat{ background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mc .inv-stat b{ font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.mc .inv-stat.ok{ border-color: color-mix(in srgb, #16a34a 40%, var(--line, #e5e7eb)); }
.mc .inv-stat.bad{ border-color: color-mix(in srgb, #dc2626 45%, var(--line, #e5e7eb)); }
.mc .inv-stat.warn{ border-color: color-mix(in srgb, #d97706 45%, var(--line, #e5e7eb)); }
.mc .inv-issue{ display: flex; gap: 8px; align-items: center; }
.mc .inv-issue input{ flex: 1; min-width: 0; }
.mc .inv-missing .inv-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.mc .inv-filters{ display: flex; gap: 8px; flex-wrap: wrap; }
.mc .inv-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.mc .inv-table th, .mc .inv-table td{ padding: 9px 10px; border-bottom: 1px solid var(--line, #e5e7eb); text-align: left; }
.mc .inv-table .num{ text-align: right; white-space: nowrap; }
.mc .inv-table tfoot td{ border-bottom: none; }
.mc .inv-frame{ width: 100%; height: 520px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: #fff; }
.mc .inv-form{ margin-top: 6px; }
.mc .inv-probs{ list-style: none; padding: 8px 12px; margin: 0 0 12px; border-radius: 10px; background: color-mix(in srgb, #d97706 10%, transparent); font-size: 12.5px; display: grid; gap: 4px; }
.mc .inv-probs li{ display: flex; gap: 6px; align-items: flex-start; }
.mc .inv-probs li.bad{ color: #b91c1c; }
.mc .inv-probs li.warn{ color: #b45309; }
.mc .inv-ok{ display: flex; gap: 6px; align-items: center; color: #15803d; font-weight: 600; margin-bottom: 10px; font-size: 13px; }
.mc .inv-asp{ margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #0ea5e9 8%, transparent); font-size: 12.5px; line-height: 1.5; }
.mc .inv-autos{ display: grid; gap: 8px; }
.mc .inv-autos label{ display: flex; gap: 10px; align-items: center; font-weight: 400; }
.mc .inv-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mc .inv-pills{ display: flex; gap: 6px; }
.mc .inv-block{ padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #dc2626 6%, transparent); margin-bottom: 12px; font-size: 13px; }
.mc .inv-asplog{ font-size: 12.5px; margin-bottom: 10px; display: grid; gap: 3px; }
.mc .inv-cn{ margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line, #e5e7eb); }
.mc .inv-foot{ flex-wrap: wrap; gap: 8px; }
.mc .inv-legal{ font-size: 12px; margin: 12px 2px 24px; line-height: 1.5; }
.mc .dlg:has(.inv-frame), .mc .dlg:has(.inv-form){ width: min(980px, 94vw); max-width: min(980px, 94vw); }
.mc .inv-page .link-btn, .mc .dlg .inv-block .link-btn{ background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font: inherit; }
.mc .inv-stat .link-btn{ background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; align-self: flex-start; }
.mc .rail-mark{ background: #fff; }
.mc .rail-mark img{ object-fit: contain; padding: 3px; }
.mc .team-seats .seat-row{ display: grid; grid-template-columns: 110px auto 1fr; align-items: center; gap: 10px; margin: 6px 0; }
.mc .team-seats .seat-row label{ margin: 0; font-weight: 500; }
.mc .team-seats .seat-ctl{ display: inline-flex; align-items: center; gap: 4px; }
.mc .team-seats .seat-ctl input{ width: 72px; text-align: center; }
@media (max-width: 520px){.mc .team-seats .seat-row{ grid-template-columns: 1fr auto; }
.mc .team-seats .seat-row .hint{ grid-column: 1 / -1; }}
.mc .rail{ transition: width .24s cubic-bezier(.2,.7,.2,1), flex-basis .24s cubic-bezier(.2,.7,.2,1); }
.mc .app.rail-open .rail{ overflow-x: hidden; overflow-y: auto; }
.mc .rail-pin{ color: var(--fg-dim); margin-bottom: 6px; }
@media (min-width: 821px){.mc .app.rail-open .rail{ width: 224px; flex-basis: 224px; align-items: stretch; padding-inline: 10px; }
.mc .app.rail-open .rail-mark{ margin-inline-start: 6px; }
.mc .app.rail-open .rail-items, .mc .app.rail-open .rail-foot{ align-items: stretch; }
.mc .app.rail-open .nav-item{ width: 100%; justify-content: flex-start; gap: 12px; padding: 0 12px; }
.mc .app.rail-open .rail-foot .nav-item{ width: 100%; height: 40px; }
.mc .app.rail-open .nav-item .nav-label{ position: static; opacity: 1; transform: none; background: none; color: inherit; padding: 0; box-shadow: none; font-size: 14px; font-weight: 500; pointer-events: auto; animation: railfade .22s cubic-bezier(.2,.7,.2,1) both; }
.mc .app.rail-open .nav-item.active .nav-label{ font-weight: 650; }}
@media (max-width: 820px){.mc .rail-pin{ display: none !important; }}
@keyframes railfade{ from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.mc .nav-item, .mc .btn{ transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .18s ease, transform .12s ease; }
.mc .nav-item:active, .mc .btn:active:not([disabled]){ transform: scale(.97); }
.mc .main > .topbar, .mc .main > .content{ animation: mcin .2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mcin{ from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){.mc .rail, .mc .nav-item, .mc .btn, .mc .main > .topbar, .mc .main > .content, .mc .app.rail-open .nav-item .nav-label{ transition: none !important; animation: none !important; }
.mc .nav-item:active, .mc .btn:active{ transform: none !important; }}
.mc .rail-pin svg{ transform: scaleX(-1); transition: transform .24s cubic-bezier(.2,.7,.2,1); }
.mc .app.rail-open .rail-pin svg{ transform: none; }
.mc .new-tag{ display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899); vertical-align: 1px; }
.mc .kpi .val, .mc .wallet-balance{ letter-spacing: -0.02em; font-weight: 650; }
.mc table td, .mc table th{ font-variant-numeric: tabular-nums; }
.mc .ico.brand{ stroke: none; flex: none; }
.mc .ico.brandWa .bf{ fill: #25D366; }
.mc .ico.brandIg .bf{ fill: url(#da-ig); }
.mc .ico.brandFbm .bf{ fill: url(#da-fbm); }
.mc .ch-row:not(.on) .ch-ic .ico.brand .bf, .mc .nav-item.active .ico.brand .bf, .mc .chp.off .ico.brand .bf{ fill: currentColor; }
.mc .inv-lines{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mc .inv-line{ display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px 120px 34px; gap: 8px; align-items: center; width: 100%; }
.mc .inv-line-h{ font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-mute); }
.mc .inv-line .n{ text-align: right; }
.mc .inv-line input{ width: 100%; min-width: 0; }
.mc .inv-amt{ font-variant-numeric: tabular-nums; font-weight: 600; }
.mc .inv-sum{ margin: 12px 0 0 auto; width: min(320px, 100%); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mc .inv-sum > div{ display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.mc .inv-sum .grand{ border-top: 1px solid var(--line, #e5e7eb); padding-top: 6px; font-size: 15px; }
.mc .inv-sum .hint{ display: block; text-align: right; }
.mc .inv-send{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.mc .inv-savetpl{ display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line, #e5e7eb); }
.mc .inv-savetpl input{ flex: 1; min-width: 0; }
.mc .inv-ob{ display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; background: var(--surface-2, #f8fafc); }
.mc .inv-ob-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc .inv-obbar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; font-size: 13px; background: var(--surface, #fff); }
.mc .inv-obbar.on{ border-color: color-mix(in srgb, #16a34a 40%, var(--line, #e5e7eb)); background: color-mix(in srgb, #16a34a 5%, var(--surface, #fff)); }
@media (max-width: 640px){.mc .inv-line{ grid-template-columns: minmax(0, 1fr) 64px 34px; }
.mc .inv-line > :nth-child(3), .mc .inv-line > :nth-child(4){ grid-column: span 1; }
.mc .inv-line-h{ display: none; }}
.mc .inv-tpls{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mc .inv-tpl{ display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; }
.mc .inv-tpl-main{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mc .inv-tpl-side{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.mc .pill-mini{ display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; margin: 0 4px 4px 0; background: var(--surface-2, #f1f5f9); color: var(--ink-3, #64748b); }
.mc .pill-mini.ok{ background: rgba(31, 175, 90, .12); color: #148a45; }