/* Admin Overview (owner console) — self-contained styling for
   resources/views/filament/pages/admin-overview*.blade.php. Filament ships
   precompiled CSS, so every class here is prefixed sts-c- and defined below.
   Tokens come from the signed-off mockup; Filament toggles `dark` on <html>. */

.sts-console {
    --sts-card: #ffffff;
    --sts-card2: #eef1f6;
    --sts-line: #d5dbe4;
    --sts-line2: #c4ccd7;
    --sts-ink: #0e1726;
    --sts-muted: #465063;
    --sts-subtle: #5d6778;
    --sts-action: #0e1726;
    --sts-signal: #ec4622;
    --sts-signal-text: #ae300e;
    --sts-signal-soft: #fde3db;
    --sts-success: #08705a;
    --sts-success-soft: #d7f2e8;
    --sts-warning: #634606;
    --sts-warning-soft: #f4e9ca;
    --sts-danger: #a81f32;
    --sts-danger-soft: #fbe1e4;
    --sts-bar: #62708a;
    --sts-bar2: #c4ccd7;
    font-variant-numeric: tabular-nums;
    color: var(--sts-ink);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dark .sts-console {
    --sts-card: #20252e;
    --sts-card2: #1c2129;
    --sts-line: #2a303b;
    --sts-line2: #373e4a;
    --sts-ink: #eaedf2;
    --sts-muted: #aab2bf;
    --sts-subtle: #8e97a5;
    --sts-action: #dde3ec;
    --sts-signal: #ff6a48;
    --sts-signal-text: #ff8a6e;
    --sts-signal-soft: #3d211a;
    --sts-success: #4fd1a7;
    --sts-success-soft: #12332a;
    --sts-warning: #f1d17a;
    --sts-warning-soft: #3a3218;
    --sts-danger: #ff8a96;
    --sts-danger-soft: #3f1c22;
    --sts-bar: #aab2bf;
    --sts-bar2: #373e4a;
    color-scheme: dark;
}

/* Plain links only: Filament buttons rendered as <a> (header actions) keep their own colours. */
.sts-console a:not(.fi-btn):not(.fi-link) {
    color: var(--sts-ink);
}

/* Header (title + date + period switch) */
.sts-c-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.sts-c-title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 750;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--sts-ink);
}

.sts-c-date {
    color: var(--sts-muted);
    margin: 2px 0 0;
    font-size: 14px;
}

.sts-c-seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 12px;
    background: var(--sts-card2);
    border: 1px solid var(--sts-line);
}

.sts-c-seg button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--sts-muted);
    padding: 6px 12px;
    border-radius: 9px;
    cursor: pointer;
}

.sts-c-seg button:hover {
    color: var(--sts-ink);
}

.sts-c-seg button.sts-c-on {
    background: var(--sts-card);
    color: var(--sts-ink);
    box-shadow: 0 1px 2px rgba(14, 23, 38, 0.12);
}

.dark .sts-c-seg button.sts-c-on {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.sts-c-seg button:focus-visible {
    outline: 2px solid var(--sts-bar);
    outline-offset: 1px;
}

/* Cards */
.sts-c-card {
    background: var(--sts-card);
    border: 1px solid var(--sts-line);
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(14, 23, 38, 0.05);
    min-width: 0;
}

.dark .sts-c-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sts-c-ch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sts-line);
}

.sts-c-ct {
    font-size: 15px;
    line-height: 22px;
    font-weight: 650;
    margin: 0;
    color: var(--sts-ink);
}

.sts-c-cs {
    font-size: 12px;
    line-height: 16px;
    color: var(--sts-subtle);
    font-weight: 500;
}

.sts-c-cb {
    padding: 16px 20px;
}

.sts-c-scroll {
    overflow-x: auto;
}

.sts-c-empty {
    padding: 16px 20px;
    margin: 0;
    color: var(--sts-subtle);
    font-size: 14px;
}

/* KPI tiles */
.sts-c-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sts-c-chart-note {
    margin: 8px 0 0;
}

/* Text shown only on desktop or only on a phone (stacked rows carry their own words). */
.sts-c-ph {
    display: none;
}

.sts-c-ev-plan {
    white-space: nowrap;
}

@media (min-width: 1280px) {
    .sts-c-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Two renderings of the MRR chart: 12 months on wide screens, the last 6 with
   readable labels on a phone. */
.sts-c-chart-phone {
    display: none;
}

.sts-c-stat {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sts-c-sl {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--sts-muted);
}

.sts-c-sv {
    font-size: 28px;
    line-height: 34px;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.sts-c-sd {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sts-c-up {
    color: var(--sts-success);
}

.sts-c-dn {
    color: var(--sts-danger);
}

.sts-c-mu {
    color: var(--sts-subtle);
    font-weight: 500;
}

/* Badges */
.sts-c-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 650;
    padding: 3px 9px;
    border-radius: 9999px;
    white-space: nowrap;
}

.sts-c-b-ok {
    background: var(--sts-success-soft);
    color: var(--sts-success);
}

.sts-c-b-warn {
    background: var(--sts-warning-soft);
    color: var(--sts-warning);
}

.sts-c-b-bad {
    background: var(--sts-danger-soft);
    color: var(--sts-danger);
}

.sts-c-b-new {
    background: var(--sts-signal-soft);
    color: var(--sts-signal-text);
}

.sts-c-b-mute {
    background: var(--sts-card2);
    color: var(--sts-muted);
    border: 1px solid var(--sts-line);
}

/* Rows */
.sts-c-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sts-c-chart {
    flex: 2 1 520px;
}

.sts-c-plans {
    flex: 1 1 300px;
}

.sts-c-funnel {
    flex: 2 1 380px;
}

.sts-c-events {
    flex: 3 1 480px;
}

/* Tables */
.sts-c-table {
    width: 100%;
    border-collapse: collapse;
}

.sts-c-table th {
    font-size: 12px;
    line-height: 16px;
    font-weight: 650;
    color: var(--sts-subtle);
    text-align: start;
    padding: 10px 20px;
    border-bottom: 1px solid var(--sts-line);
    background: var(--sts-card2);
    white-space: nowrap;
}

.sts-c-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--sts-line);
    vertical-align: middle;
}

.sts-c-table tr:last-child td {
    border-bottom: 0;
}

.sts-c-num,
.sts-c-table th.sts-c-num {
    text-align: end;
    white-space: nowrap;
}

.sts-c-org {
    font-weight: 650;
}

.sts-c-tiny {
    font-size: 12px;
    line-height: 16px;
    color: var(--sts-subtle);
}

.sts-c-why {
    margin-inline-start: 6px;
}

.sts-c-when {
    width: 140px;
}

.sts-c-link {
    font-weight: 600;
    font-size: 13px;
}

/* Revenue by plan */
.sts-c-plan-rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sts-c-plan {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sts-c-plan-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.sts-c-plan-name {
    font-weight: 650;
}

.sts-c-plan-foot {
    border-top: 1px solid var(--sts-line);
    padding-top: 12px;
}

.sts-c-track {
    height: 10px;
    border-radius: 9999px;
    background: var(--sts-card2);
    border: 1px solid var(--sts-line);
    overflow: hidden;
}

.sts-c-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--sts-bar);
}

/* Self-serve funnel */
.sts-c-fun {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 56px 64px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.sts-c-fun-label {
    font-weight: 600;
    font-size: 13px;
}

.sts-c-fun-count {
    font-weight: 650;
}

.sts-c-fun-note {
    margin: 12px 0 0;
}

/* MRR chart (inline SVG) */
.sts-c-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sts-c-grid {
    stroke: var(--sts-line);
    stroke-width: 1;
}

.sts-c-tick {
    fill: var(--sts-subtle);
    font-size: 11px;
}

.sts-c-bv {
    fill: var(--sts-muted);
    font-size: 11px;
    font-weight: 650;
}

.sts-c-bx {
    fill: var(--sts-subtle);
    font-size: 11px;
}

.sts-c-bar {
    fill: var(--sts-bar2);
}

.sts-c-bar-cur {
    fill: var(--sts-action);
}

/* Customer detail: underline tabs (the mockup's section switch) */
.sts-c-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--sts-line);
}

.sts-c-tabs button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--sts-muted);
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.sts-c-tabs button:hover {
    color: var(--sts-ink);
}

.sts-c-tabs button.sts-c-on {
    color: var(--sts-ink);
    border-bottom-color: var(--sts-ink);
}

.sts-c-tabs button:focus-visible {
    outline: 2px solid var(--sts-bar);
    outline-offset: 1px;
}

/* Customer detail header actions (Edit) beside the title */
.sts-c-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Two-column card layout (main + side rail) */
.sts-c-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.sts-c-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.sts-c-col-main {
    flex: 2 1 560px;
}

.sts-c-col-side {
    flex: 1 1 320px;
}

/* Usage meters */
.sts-c-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.sts-c-mt {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sts-card2);
    border: 1px solid var(--sts-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sts-c-ml {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--sts-muted);
}

.sts-c-mv {
    font-size: 20px;
    line-height: 26px;
    font-weight: 750;
}

.sts-c-mv small {
    font-size: 13px;
    font-weight: 600;
    color: var(--sts-subtle);
}

/* Key-value grid (subscription, owner) */
.sts-c-kv {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    font-size: 14px;
}

.sts-c-k {
    color: var(--sts-muted);
    white-space: nowrap;
}

.sts-c-v {
    text-align: end;
    overflow-wrap: break-word;
    min-width: 0;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Channel dots */
.sts-c-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    margin-inline-end: 8px;
    vertical-align: middle;
}

.sts-c-ch-wa {
    background: #1fa855;
}

.sts-c-ch-ms {
    background: #0a7cff;
}

.sts-c-ch-ig {
    background: #d62976;
}

.sts-c-ch-em {
    background: #5d6778;
}

.sts-c-ch-wc {
    background: #0e1726;
}

.sts-c-ch-ot {
    background: #8e97a5;
}

.dark .sts-c-ch-wa {
    background: #3ccf73;
}

.dark .sts-c-ch-ms {
    background: #4a9dff;
}

.dark .sts-c-ch-ig {
    background: #f0569b;
}

.dark .sts-c-ch-em {
    background: #8e97a5;
}

.dark .sts-c-ch-wc {
    background: #eaedf2;
}

.dark .sts-c-ch-ot {
    background: #8e97a5;
}

/* Phone: tiles 2 per row, cards stack (the flex-basis minima wrap them). */
@media (max-width: 640px) {
    .sts-c-ph {
        display: inline;
    }

    .sts-c-desk {
        display: none;
    }

    .sts-c-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .sts-c-stat {
        padding: 12px 14px;
        gap: 4px;
    }

    .sts-c-sl {
        font-size: 12px;
        line-height: 16px;
    }

    .sts-c-sv {
        font-size: 22px;
        line-height: 28px;
        letter-spacing: -0.01em;
    }

    .sts-c-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sts-c-seg {
        display: flex;
    }

    .sts-c-seg button {
        flex: 1;
        padding: 8px 4px;
        min-height: 38px;
    }

    .sts-c-ch {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 12px 14px;
        gap: 8px 10px;
    }

    .sts-c-ch > :first-child {
        flex: 1 1 100%;
    }

    .sts-c-cb {
        padding: 12px 14px;
    }

    .sts-c-table th,
    .sts-c-table td {
        padding: 10px 14px;
    }

    .sts-c-fun {
        grid-template-columns: 96px minmax(0, 1fr) 30px;
    }

    .sts-c-fun-rate {
        display: none;
    }

    .sts-c-chart-wide {
        display: none;
    }

    .sts-c-chart-phone {
        display: block;
    }

    /* Tables become a list: one block per row, no column headers. */
    .sts-c-table thead {
        display: none;
    }

    .sts-c-table,
    .sts-c-table tbody {
        display: block;
    }

    .sts-c-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 4px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--sts-line);
    }

    .sts-c-table tr:last-child {
        border-bottom: 0;
    }

    .sts-c-table th,
    .sts-c-table td {
        display: block;
        padding: 0;
        border: 0;
        min-width: 0;
    }

    .sts-c-table .sts-c-num {
        text-align: end;
    }

    /* Needs attention: customer, then the reason, then amount + Open. */
    .sts-c-attn tr > td:nth-child(-n + 2) {
        grid-column: 1 / -1;
    }

    .sts-c-attn tr > td:nth-child(3) {
        text-align: start;
    }

    /* Customer detail tables (team, channels, invoices): first two cells
       stack full width, the last two share a row. */
    .sts-c-stack tr > td:nth-child(-n + 2) {
        grid-column: 1 / -1;
    }

    .sts-c-stack tr > td:nth-child(3) {
        text-align: start;
    }
}

/* System page (owner console health) */

/* Health grid: cards wrap, never narrower than 230px, no page scroll at 390px. */
.sts-c-hgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

/* Card top row: name left, badge/chip right. */
.sts-c-hc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Header crumb above the title ("Platform"). */
.sts-c-crumb {
    font-size: 12px;
    line-height: 16px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sts-subtle);
    margin: 0 0 4px;
}

/* "Phase 2" chip: dashed, muted — a placeholder, not a status. */
.sts-c-chip-ph2 {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: 650;
    padding: 3px 9px;
    border-radius: 9999px;
    border: 1px dashed var(--sts-line2);
    color: var(--sts-subtle);
    white-space: nowrap;
    vertical-align: 2px;
    margin-inline-start: 6px;
}

/* Monospace values (image tags, commit shas) read smaller than other values. */
.sts-c-sv.sts-c-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

/* Small neutral button (Check now, Retry, Retry all). */
.sts-c-btn {
    border: 1px solid var(--sts-line);
    background: var(--sts-card);
    color: var(--sts-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
}

.sts-c-btn:hover {
    background: var(--sts-card2);
}

.sts-c-btn:focus-visible {
    outline: 2px solid var(--sts-bar);
    outline-offset: 1px;
}

.sts-c-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* Failed jobs list. */
.sts-c-fj {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sts-c-fj-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sts-c-fj-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sts-c-para {
    margin: 0;
    font-size: 14px;
    color: var(--sts-muted);
}

.sts-c-para-note {
    margin: 8px 0 0;
}

/* Limits and features tab: override inputs, buttons, switches, activity */
.sts-c-cell-label {
    display: none;
}

.sts-c-input {
    width: 110px;
    max-width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--sts-line2);
    background: var(--sts-card);
    color: var(--sts-ink);
    text-align: end;
}

.sts-c-input:focus-visible {
    outline: 2px solid var(--sts-bar);
    outline-offset: 1px;
}

.sts-c-err {
    color: var(--sts-danger);
    font-size: 12px;
    line-height: 16px;
    margin-top: 4px;
    text-align: start;
}

.sts-c-btnrow {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 20px 16px;
}

/* Customer controls: the System page's .sts-c-btn above is the base (bordered,
   neutral); the primary/secondary variants add their size and colours. */
.sts-c-btn-pri,
.sts-c-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 650;
    padding: 8px 14px;
    min-height: 36px;
    border-radius: 10px;
}

.sts-c-btn-pri {
    background: var(--sts-action);
    color: var(--sts-card);
    border-color: transparent;
}

.sts-c-btn-sec {
    background: transparent;
    color: var(--sts-ink);
    border-color: var(--sts-line2);
}

.sts-c-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.sts-c-btn:focus-visible {
    outline: 2px solid var(--sts-bar);
    outline-offset: 1px;
}

.sts-c-feat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sts-line);
}

.sts-c-feat:last-child {
    border-bottom: 0;
}

.sts-c-feat-text {
    min-width: 0;
}

.sts-c-feat-name {
    font-size: 14px;
    font-weight: 650;
}

.sts-c-feat-desc {
    color: var(--sts-subtle);
    font-size: 12px;
    line-height: 16px;
    margin-top: 2px;
}

/* Toggle: a <button role="switch">, on = aria-checked="true". */
.sts-c-switch {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    padding: 0;
    border-radius: 9999px;
    border: 1px solid var(--sts-line2);
    background: var(--sts-bar2);
    cursor: pointer;
}

.sts-c-knob {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: var(--sts-card);
    transition: inset-inline-start 0.15s ease;
}

.sts-c-switch[aria-checked="true"] {
    background: var(--sts-success);
    border-color: transparent;
}

.sts-c-switch[aria-checked="true"] .sts-c-knob {
    inset-inline-start: 22px;
}

.sts-c-switch:disabled {
    opacity: 0.55;
    cursor: default;
}

.sts-c-switch:focus-visible {
    outline: 2px solid var(--sts-bar);
    outline-offset: 2px;
}

.sts-c-act-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--sts-line);
}

.sts-c-act-item:last-child {
    border-bottom: 0;
}

.sts-c-act-summary {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.sts-c-act-reason {
    margin: 4px 0 0;
    color: var(--sts-muted);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.sts-c-act-meta {
    margin: 4px 0 0;
    color: var(--sts-subtle);
    font-size: 12px;
    line-height: 16px;
}

@media (max-width: 640px) {
    .sts-c-btnrow {
        padding: 0 14px 12px;
    }

    .sts-c-btn {
        flex: 1;
    }

    .sts-c-feat {
        padding: 12px 14px;
        gap: 12px;
    }

    .sts-c-act-item {
        padding: 12px 14px;
    }

    .sts-c-input {
        width: 100%;
        text-align: start;
    }

    /* Limits: name, then "Plan 15" and "Using 3" side by side, then the input. */
    .sts-c-cell-label {
        display: inline;
        color: var(--sts-subtle);
    }

    .sts-c-limits tr > td:first-child,
    .sts-c-limits tr > td:last-child {
        grid-column: 1 / -1;
    }

    .sts-c-limits tr > td:nth-child(3) {
        text-align: end;
    }
}

/* Inbox settings table (System page): group rows, the key under the title, long values wrap. */
.sts-c-settings .sts-c-set-group th {
    font-size: 11px;
    line-height: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sts-subtle);
    background: var(--sts-card2);
    padding-block: 8px;
}

/* Setting 40%, value takes the rest, date and action stay on one line. */
.sts-c-settings {
    table-layout: fixed;
}

.sts-c-settings thead th:first-child {
    width: 40%;
}

.sts-c-settings thead th:nth-child(3) {
    width: 104px;
}

.sts-c-settings thead th:nth-child(4) {
    width: 96px;
}

.sts-c-set-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sts-c-when {
    white-space: nowrap;
}

.sts-c-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.sts-c-val {
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 640px) {
    .sts-c-settings .sts-c-set-group {
        display: block;
        padding: 8px 14px;
    }
}