/* TK SMS — shared interface system */
:root {
    --bg:#f4f6fa;
    --bg-card:#fff;
    --text:#19263b;
    --muted:#64748b;
    --border:#e1e7ef;
    --primary:#cc3547;
    --primary-dark:#ac2637;
    --danger:#b42336;
    --radius-lg:12px;
    --radius-xl:18px;
    --sidebar:256px;
    --shadow:0 4px 24px #18284005
}

*,*::before,*::after {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body {
    margin:0;
    font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.55
}
a {
    color:#a72b3d;
    text-underline-offset:3px
}
button,input,textarea,select {
    font:inherit
}
button,a,input,textarea,select {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
img,svg {
    max-width:100%
}
h1,h2,h3,p {
    overflow-wrap:anywhere
}
h1,h2,h3 {
    line-height:1.25
}
p {
    margin:0 0 16px
}
h2 {
    font-size:18px;
    letter-spacing:-.35px;
    margin:0 0 16px
}
small {
    font-size:12px
}
form {
    margin:0
}
button:disabled,[aria-disabled="true"] {
    opacity:.55;
    cursor:not-allowed
}
[hidden] {
    display:none!important
}
:focus-visible {
    outline:3px solid #d75969;
    outline-offset:3px
}
.icon {
    width:20px;
    height:20px;
    flex:none;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round
}
.skip-link {
    position:fixed;
    left:16px;
    top:-100px;
    z-index:100;
    background:white;
    padding:12px 20px;
    border-radius:8px
}
.skip-link:focus {
    top:12px
}

.app-shell {
    display:flex;
    min-height:100vh;
    min-height:100dvh
}
.main {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column
}
.sidebar {
    width:var(--sidebar);
    flex:none;
    position:sticky;
    top:0;
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    background:#111e32;
    color:#c6d0e0;
    padding:26px 16px 18px;
    display:flex;
    flex-direction:column;
    scrollbar-width:thin;
    scrollbar-color:#3b4b63 transparent
}
.sidebar-header {
    padding:0 12px 26px;
    border-bottom:1px solid #ffffff10;
    margin-bottom:18px
}
.brand-mark {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:12px;
    background:#cf3b4e;
    color:white;
    margin-bottom:14px
}
.logo-text {
    color:#fff;
    font-size:23px;
    font-weight:750;
    letter-spacing:-.8px;
    overflow-wrap:anywhere;
    line-height:1.3
}
.sidebar-header small {
    display:block;
    color:#99a9c0;
    font-size:11px;
    margin-top:5px;
    line-height:1.6
}
.sidebar-nav {
    display:flex;
    flex-direction:column;
    gap:4px
}
.nav-group {
    margin-top:22px
}
.nav-group-title {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:700;
    color:#8c9fb9;
    padding:0 14px 10px
}
.nav-item {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:10px 13px;
    border-radius:9px;
    text-decoration:none;
    color:#b9c7db;
    font-size:13px;
    font-weight:500;
    transition:background .15s,color .15s
}
.nav-item span {
    min-width:0;
    overflow-wrap:anywhere
}
.nav-item .icon {
    width:18px;
    height:18px;
    opacity:.85
}
.nav-item:hover {
    background:#ffffff09;
    color:white
}
.nav-item.active {
    background:#cc3547;
    color:#fff;
    box-shadow:0 4px 12px #0002
}
.sidebar-bottom {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    padding:30px 12px 0;
    font-size:11px;
    color:#95a7c0
}
.status-dot {
    display:inline-block;
    flex:none;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#45ba92
}
.sidebar-close {
    display:none
}
.menu-backdrop {
    display:none
}
.topbar {
    min-height:82px;
    padding:16px 36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:#fff;
    border-bottom:1px solid var(--border)
}
.topbar-context {
    min-width:0
}
.topbar-context small {
    display:block;
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    margin-bottom:3px
}
.topbar-title {
    font-size:14px;
    font-weight:650;
    overflow-wrap:anywhere
}
.topbar-menu-toggle {
    display:none
}
.account {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0
}
.account-avatar {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    background:#eef1f6;
    border:1px solid var(--border);
    border-radius:50%;
    font-size:12px;
    font-weight:700;
    flex:none
}
.account-person {
    min-width:0;
    max-width:210px;
    display:flex;
    flex-direction:column;
    gap:1px
}
.account-person a {
    color:var(--text);
    text-decoration:none;
    font-weight:600;
    font-size:12px;
    overflow-wrap:anywhere
}
.account-person .badge {
    background:none;
    padding:0;
    color:var(--muted);
    font-size:11px;
    border:0
}
.account form {
    flex:none;
    margin-left:8px
}
.account .btn-secondary {
    min-height:36px;
    padding:7px 12px;
    font-size:12px
}
.content {
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding:34px 36px 48px;
    flex:1;
    min-width:0
}
.footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding:20px 36px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:11px
}
.footer-contacts,.support-contacts {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    min-width:0
}
.footer a,.support-contacts a {
    color:var(--muted);
    font-size:11px;
    text-decoration:none;
    overflow-wrap:anywhere
}
.support-contacts {
    margin-top:24px
}

.page-header {
    margin-bottom:28px
}
.page-header h1 {
    font-size:clamp(25px,2.2vw,34px);
    letter-spacing:-1.1px;
    font-weight:700;
    margin:0 0 10px
}
.page-header p {
    color:var(--muted);
    font-size:14px;
    max-width:720px;
    margin:0;
    line-height:1.7
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.65px;
    font-weight:750;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:10px
}
.flex-between {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap
}
.flex-between>div {
    min-width:0
}
.page-header>.btn-primary,.page-header>.btn-secondary {
    flex:none
}
.grid-2,.grid-3,.grid-4 {
    display:grid;
    gap:20px;
    margin-bottom:24px;
    align-items:start
}
.grid-2 {
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)
}
.grid-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.grid-4 {
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch
}
.grid-2>*,.grid-3>*,.grid-4>* {
    min-width:0
}
.card {
    background:white;
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:26px;
    box-shadow:var(--shadow);
    min-width:0
}
.card h2 {
    font-weight:650
}
.card>p {
    color:var(--muted)
}
.card-link {
    display:block;
    text-decoration:none;
    color:inherit;
    transition:border-color .2s,box-shadow .2s
}
.card-link:hover {
    border-color:#becbdc;
    box-shadow:0 8px 25px #1828400a
}
.kpi {
    position:relative;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:5px
}
.kpi-label {
    font-size:12px;
    color:var(--muted);
    line-height:1.5
}
.kpi-value {
    font-size:36px;
    font-weight:700;
    letter-spacing:-1.2px;
    font-variant-numeric:tabular-nums;
    line-height:1.3
}
.kpi-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}
.metric-icon {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:10px;
    background:#edf7f3;
    color:#188362
}
.kpi[data-metric="pending"] .metric-icon {
    background:#edf2fc;
    color:#416ac4
}
.kpi[data-metric="errors"] .metric-icon {
    background:#fff0f1;
    color:#c0394b
}
.kpi[data-metric="unknowns"] .metric-icon {
    background:#fff7e6;
    color:#9a701d
}
.metric-arrow {
    color:#718096
}
.kpi-foot {
    font-size:10px;
    letter-spacing:.2px;
    color:#758196;
    margin-top:7px
}
.dashboard-grid {
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)
}
.chart-legend {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted)
}
.chart-legend span {
    display:flex;
    align-items:center;
    gap:6px
}
.chart-key {
    width:8px;
    height:8px;
    border-radius:3px;
    background:#469e86
}
.chart-key.error {
    background:#df7985
}
.activity-chart {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:12px;
    align-items:end;
    padding:24px 0 14px;
    margin:14px 0 24px;
    border-bottom:1px solid var(--border);
    background:repeating-linear-gradient(to top,transparent 0,transparent 49px,#edf1f5 50px)
}
.chart-day {
    text-align:center;
    min-width:0
}
.chart-bars {
    height:130px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px
}
.chart-bar {
    width:18px;
    max-width:35%;
    height:var(--bar-height);
    background:#469e86;
    border-radius:4px 4px 0 0;
    min-height:2px
}
.chart-bar.error {
    background:#df7985
}
.chart-day small {
    display:block;
    color:var(--muted);
    font-size:10px;
    background:white;
    padding-top:10px
}
.quick-actions {
    display:grid;
    gap:10px
}
.quick-action {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--border);
    border-radius:11px;
    padding:15px;
    text-decoration:none;
    color:var(--text)
}
.quick-action:hover {
    border-color:#cc354766;
    background:#fffbfc
}
.quick-action>div {
    min-width:0
}
.quick-action strong {
    display:block;
    font-size:13px
}
.quick-action small {
    display:block;
    color:var(--muted);
    margin-top:3px;
    font-size:11px
}
.quick-action>.icon:last-child {
    margin-left:auto;
    width:16px
}
.balance-box {
    background:#f7f9fc;
    border:1px solid var(--border);
    border-radius:12px;
    padding:18px;
    margin-top:22px
}
.balance-box h2 {
    font-size:14px;
    margin-bottom:8px
}
.sms-balance {
    font-size:22px;
    font-weight:650;
    letter-spacing:-.5px
}

.form {
    display:flex;
    flex-direction:column;
    gap:18px
}
.form label,.form-inline label {
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:12px;
    font-weight:600;
    color:#435168;
    min-width:0
}
.form-inline,.form.form-inline {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px
}
.form-inline label {
    flex:1 1 160px
}
.form label.checkbox-label,.checkbox-label {
    flex-direction:row;
    align-items:center;
    gap:10px
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea {
    width:100%;
    max-width:100%;
    min-width:0;
    border:1px solid #d6dee9;
    border-radius:9px;
    padding:11px 12px;
    background:#fff;
    color:var(--text);
    font-size:14px;
    min-height:44px;
    transition:border-color .15s,box-shadow .15s
}
textarea {
    resize:vertical;
    min-height:100px;
    line-height:1.6
}
input::placeholder,textarea::placeholder {
    color:#8895a7
}
input:focus,select:focus,textarea:focus {
    outline:0;
    border-color:#be5261;
    box-shadow:0 0 0 3px #cc354713
}
input[type="checkbox"],input[type="radio"] {
    width:18px;
    height:18px;
    accent-color:var(--primary);
    flex:none
}
.btn-primary,.btn-secondary {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    min-height:44px;
    border:1px solid transparent;
    border-radius:9px;
    padding:11px 18px;
    font-size:12px;
    font-weight:650;
    line-height:1.4;
    text-decoration:none;
    text-align:center;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    transition:background .15s,border-color .15s
}
.btn-primary {
    background:var(--primary);
    color:white;
    box-shadow:0 2px 4px #cc354712
}
.btn-primary:hover {
    background:var(--primary-dark)
}
.btn-secondary {
    background:white;
    color:#435168;
    border-color:#dbe2eb
}
.btn-secondary:hover {
    background:#f3f6fa;
    border-color:#bbc7d7
}
.btn-primary .icon,.btn-secondary .icon {
    width:17px;
    height:17px
}
.action-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px
}
.action-row form {
    max-width:100%
}
.link {
    display:inline-flex;
    align-items:center;
    min-height:36px;
    margin-right:8px;
    font-size:12px;
    color:#a52c3e;
    text-decoration:none;
    white-space:nowrap
}
.link:hover {
    text-decoration:underline
}
.link-danger {
    color:var(--danger)
}
button.link {
    border:0;
    background:none;
    padding:0;
    font-family:inherit
}
.inline-form {
    display:inline;
    margin:0
}
.bulk-row {
    display:grid;
    grid-template-columns:minmax(0,3fr) minmax(70px,1fr);
    gap:10px;
    margin-bottom:10px
}
.divider {
    border:0;
    border-top:1px solid var(--border);
    margin:24px 0
}
.hint {
    font-size:12px;
    color:var(--muted);
    line-height:1.7
}
.muted {
    color:var(--muted)
}
.narrow {
    max-width:620px
}
.mb-2 {
    margin-bottom:20px
}
.mt-2 {
    margin-top:20px
}

.table-wrapper,.table-scroll {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:#bcc8d8 #f2f5f9
}
.table-scroll {
    width:100%;
    border-radius:8px
}
.table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:12px
}
.table th,.table td {
    padding:14px 12px;
    border-bottom:1px solid #e8edf3;
    vertical-align:top;
    line-height:1.65;
    overflow-wrap:anywhere
}
.table th {
    background:#f7f9fc;
    color:#6a788e;
    font-size:10px;
    font-weight:650;
    text-transform:uppercase;
    letter-spacing:.7px;
    white-space:nowrap
}
.table td {
    max-width:380px;
    min-width:92px
}
.table td[colspan] {
    padding:36px 18px;
    text-align:center;
    color:var(--muted);
    background:#fbfcfe
}
.table tbody tr:hover {
    background:#fbfcfe
}
.table tbody tr:last-child td {
    border-bottom:0
}
.table code,pre {
    font:12px/1.65 ui-monospace,Consolas,monospace;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word
}
.table pre {
    min-width:170px;
    max-width:360px;
    background:#f4f6fa;
    border-radius:6px;
    padding:10px
}
.table textarea {
    min-width:180px
}
.table tfoot th {
    border-top:2px solid var(--border)
}
.col-actions {
    width:125px;
    min-width:112px!important
}
.table small {
    color:var(--muted);
    font-size:11px
}
.table td>a:not(.btn-primary):not(.btn-secondary) {
    font-weight:600
}
.pagination {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-top:22px;
    font-size:12px
}
.pagination a {
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    text-decoration:none
}
.badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:6px;
    padding:5px 9px;
    background:#f0f3f8;
    color:#53657d;
    font-size:10px;
    font-weight:600;
    line-height:1.5;
    max-width:100%;
    overflow-wrap:anywhere
}
.badge[data-status="SUCCESS"],.badge[data-status="completed"] {
    background:#eaf7f1;
    color:#1b7657
}
.badge[data-status="ERROR"],.badge[data-status="UNKNOWN"] {
    background:#fff0f1;
    color:#ab3044
}
.badge[data-status="PENDING"],.badge[data-status="queued"],.badge[data-status="running"] {
    background:#edf3fe;
    color:#3a61a8
}
.badge[data-status="paused"] {
    background:#fff5df;
    color:#906519
}
.flash {
    padding:14px 18px;
    border-radius:10px;
    margin-bottom:18px;
    font-size:12px;
    line-height:1.7;
    overflow-wrap:anywhere;
    border:1px solid transparent
}
.flash-success {
    background:#edf8f2;
    color:#20654d;
    border-color:#d2eadc
}
.flash-error {
    background:#fff0f1;
    color:#a53144;
    border-color:#f6d8de
}
.flash-warning {
    background:#fff9eb;
    color:#85621f;
    border-color:#f0e3bf
}
.job-error {
    display:block;
    color:#a53144;
    max-width:300px;
    margin-top:5px;
    font-size:11px;
    overflow-wrap:anywhere
}
progress {
    display:block;
    width:100%;
    height:10px;
    accent-color:var(--primary);
    margin:20px 0;
    border:0;
    border-radius:8px;
    overflow:hidden
}
progress::-webkit-progress-bar {
    background:#edf1f6
}
progress::-webkit-progress-value {
    background:var(--primary)
}
summary {
    cursor:pointer;
    color:#a52c3e;
    padding:5px 0;
    min-height:32px
}
.settings-form .grid-2 {
    align-items:stretch
}
.settings-form .hint {
    margin:0
}
.settings-form .form h2 {
    margin-bottom:0
}

.send-workspace {
    display:grid;
    gap:24px
}
.section-heading {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:24px
}
.section-heading>div {
    min-width:0
}
.section-heading h2 {
    font-size:16px;
    margin:2px 0 5px
}
.section-heading p {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    margin:0
}
.section-heading .badge {
    margin-left:auto;
    flex:none
}
.step-number,.install-section h2 span {
    width:34px;
    height:34px;
    flex:none;
    display:grid;
    place-items:center;
    background:#fbeff1;
    color:#b63849;
    border:1px solid #f4dce1;
    border-radius:10px;
    font-size:11px;
    font-weight:700
}
.send-layout {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr);
    gap:24px;
    align-items:start
}
.select-all,.command-choice {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:600
}
.select-all {
    border-bottom:1px solid var(--border);
    padding-bottom:18px
}
.command-list {
    display:grid;
    gap:16px;
    padding-top:18px
}
.send-command {
    display:grid;
    gap:12px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:11px
}
.send-command:has(input:checked) {
    border-color:#d596a0;
    background:#fffcfc
}
.send-command textarea {
    font:12px/1.7 ui-monospace,Consolas,monospace;
    min-height:78px;
    background:#f8fafc
}
.send-destinations .hint {
    margin:0
}
.send-note {
    padding:14px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#f7f9fc;
    font-size:12px;
    line-height:1.7;
    color:#596a80
}
.send-empty {
    text-align:center;
    padding:60px 24px
}
.send-empty .auth-symbol {
    margin:0 auto 22px
}
.send-empty p {
    max-width:440px;
    margin:0 auto;
    color:var(--muted)
}

.auth-page {
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:40px 24px;
    background:#eef2f7
}
.auth-layout {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    width:min(1000px,100%);
    border:1px solid #dfe5ee;
    border-radius:24px;
    overflow:hidden;
    background:white;
    box-shadow:0 24px 80px #192a4010
}
.auth-intro {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    background:#111e32;
    color:white;
    padding:56px 46px
}
.auth-symbol {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#fbeff1;
    color:#be3548;
    font-size:25px;
    font-weight:600;
    margin-bottom:30px
}
.auth-intro .auth-symbol {
    background:#cc3547;
    color:white
}
.auth-intro .eyebrow {
    color:#f7a9b3;
    margin-top:28px
}
.auth-intro h2 {
    font-size:39px;
    line-height:1.18;
    letter-spacing:-1.5px;
    margin:8px 0 24px
}
.auth-intro p:not(.eyebrow) {
    color:#adbed4;
    font-size:14px;
    line-height:1.9
}
.auth-intro-foot {
    margin-top:auto;
    padding-top:56px;
    font-size:11px;
    color:#95a9c3
}
.auth-card {
    width:100%;
    max-width:460px;
    background:white;
    padding:42px;
    border-radius:18px;
    min-width:0
}
.auth-layout .auth-card {
    max-width:none;
    border-radius:0;
    padding:56px 44px
}
.auth-card h1 {
    font-size:28px;
    letter-spacing:-.9px;
    margin:0 0 10px
}
.auth-card .form {
    margin-top:30px
}
.auth-card .hint {
    margin-top:24px
}
.auth-card .btn-primary {
    min-height:48px
}
.install-card {
    max-width:860px;
    border:1px solid var(--border)
}
.install-form {
    gap:24px
}
.install-section {
    border-top:1px solid var(--border);
    padding-top:24px;
    display:grid;
    gap:16px
}
.install-section h2 {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:17px;
    margin:0 0 4px
}
.install-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 24px
}
.install-fields small {
    grid-column:1/-1
}
.install-section small {
    color:var(--muted);
    line-height:1.6
}
.install-actions {
    border-top:1px solid var(--border);
    padding-top:24px
}
.install-actions p {
    font-size:12px;
    color:var(--muted);
    margin-bottom:0
}

@media(min-width:1600px) {
    .content {
    padding-top:44px
}
.topbar {
    padding-left:44px;
    padding-right:44px
}

}

@media(max-width:1200px) {
    :root {
    --sidebar:230px
}
.content {
    padding:28px 24px 40px
}
.topbar {
    padding:16px 24px
}
.card {
    padding:22px
}
.grid-4 {
    gap:14px
}
.kpi {
    padding:18px
}
.send-layout {
    grid-template-columns:1fr
}
.dashboard-grid {
    grid-template-columns:1fr 1fr
}
.grid-2:not(.dashboard-grid) {
    grid-template-columns:1fr
}
.grid-3 {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.footer {
    padding:20px 24px
}

}

@media(max-width:900px) {
    .sidebar {
    position:fixed;
    left:0;
    top:0;
    z-index:50;
    width:min(300px,86vw);
    visibility:hidden;
    transform:translateX(-100%);
    transition:transform .2s,visibility .2s
}
.sidebar.open {
    visibility:visible;
    transform:translateX(0)
}
.sidebar-close {
    display:grid;
    place-items:center;
    position:absolute;
    right:16px;
    top:24px;
    width:36px;
    height:36px;
    border:1px solid #ffffff25;
    border-radius:8px;
    background:transparent;
    color:white
}
.sidebar-header {
    padding-right:34px
}
.menu-backdrop:not([hidden]) {
    display:block;
    position:fixed;
    inset:0;
    background:#0c182c80;
    backdrop-filter:blur(2px);
    z-index:40
}
.menu-open {
    overflow:hidden
}
.topbar-menu-toggle {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:none;
    background:white;
    border:1px solid var(--border);
    border-radius:9px;
    color:var(--text)
}
.topbar {
    position:sticky;
    top:0;
    z-index:20;
    min-height:74px;
    gap:14px
}
.topbar-context {
    flex:1
}
.account-avatar {
    display:none
}
.content {
    padding-top:26px
}
.grid-2 {
    grid-template-columns:1fr
}
.grid-4 {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.dashboard-grid {
    grid-template-columns:1fr 1fr
}
.auth-intro {
    padding:36px
}
.auth-layout .auth-card {
    padding:36px
}
.auth-intro h2 {
    font-size:33px
}

}

@media(max-width:650px) {
    html {
    scroll-padding-top:90px
}
.topbar {
    padding:12px 16px;
    gap:10px
}
.topbar-context small {
    display:none
}
.topbar-title {
    font-size:12px
}
.account-person {
    display:none
}
.account form {
    margin-left:0
}
.account-profile-mobile {
    display:grid!important;
    place-items:center;
    width:38px;
    height:38px;
    background:#f3f5f9;
    color:var(--text);
    border-radius:9px
}
.account {
    gap:6px
}
.content {
    padding:24px 16px 32px
}
.page-header {
    margin-bottom:24px
}
.page-header h1 {
    font-size:27px;
    letter-spacing:-.8px
}
.page-header p {
    font-size:13px
}
.page-header.flex-between {
    align-items:flex-start;
    gap:16px
}
.grid-2,.grid-3,.dashboard-grid {
    grid-template-columns:1fr
}
.grid-2,.grid-3,.grid-4 {
    gap:14px;
    margin-bottom:18px
}
.card {
    padding:20px;
    border-radius:14px
}
.kpi {
    padding:16px
}
.kpi-top {
    margin-bottom:8px
}
.kpi-value {
    font-size:30px
}
.kpi-label {
    font-size:11px
}
.kpi-foot {
    font-size:9px
}
.metric-icon {
    width:30px;
    height:30px
}
.metric-icon .icon {
    width:16px;
    height:16px
}
.form-inline label {
    flex-basis:calc(50% - 14px)
}
.form-inline .btn-primary,.form-inline .btn-secondary {
    flex:1 1 auto
}
.form label,.form-inline label {
    font-size:12px
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea {
    font-size:16px
}
.table {
    font-size:12px
}
.table th,.table td {
    padding:12px 10px
}
.table-wrapper.card {
    padding:18px
}
.table-scroll {
    border-radius:6px
}
.btn-primary,.btn-secondary {
    min-height:44px
}
.section-heading {
    gap:10px;
    flex-wrap:wrap
}
.section-heading>div {
    flex:1;
    min-width:160px
}
.section-heading .badge {
    margin-left:44px
}
.send-layout {
    gap:16px
}
.send-command {
    padding:12px
}
.send-workspace {
    gap:18px
}
.send-empty {
    padding:36px 20px
}
.action-row>* {
    flex:1 1 auto
}
.action-row form .btn-primary,.action-row form .btn-secondary {
    width:100%
}
.footer {
    padding:20px 16px;
    gap:12px;
    align-items:flex-start;
    flex-direction:column
}
.auth-page {
    padding:20px 14px
}
.auth-layout {
    grid-template-columns:1fr;
    border-radius:18px
}
.auth-intro {
    padding:26px
}
.auth-intro .auth-symbol,.auth-intro-foot,.auth-intro p:not(.eyebrow) {
    display:none
}
.auth-intro .eyebrow {
    margin-top:0
}
.auth-intro h2 {
    font-size:27px;
    margin:4px 0 0
}
.auth-intro h2 br {
    display:none
}
.auth-layout .auth-card,.install-card {
    padding:28px 24px
}
.auth-card h1 {
    font-size:25px
}
.install-fields {
    grid-template-columns:1fr
}
.install-actions .btn-primary {
    width:100%
}
.pagination {
    gap:10px
}
.activity-chart {
    gap:8px
}

}

.account-profile-mobile {
    display:none
}

@media(max-width:380px) {
    .content {
    padding:20px 12px
}
.topbar {
    padding:10px 12px;
    gap:8px
}
.account .btn-secondary {
    padding:8px
}
.account-profile-mobile {
    width:32px!important
}
.topbar-menu-toggle {
    width:38px;
    height:38px
}
.card {
    padding:16px
}
.form-inline label {
    flex-basis:100%
}
.kpi {
    padding:13px
}
.kpi-label {
    font-size:10px
}
.page-header h1 {
    font-size:25px
}
.kpi-foot {
    display:none
}

}

@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}
*,*::before,*::after {
    transition:none!important;
    animation:none!important
}

}

@media print {
    .sidebar,.topbar,.footer,.menu-backdrop,.btn-primary,.btn-secondary {
    display:none!important
}
.app-shell,.main {
    display:block
}
.content {
    padding:0;
    max-width:none
}
.card {
    box-shadow:none;
    break-inside:avoid
}
.table-scroll,.table-wrapper {
    overflow:visible
}
body {
    background:white
}

}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}


.kpi-label {
    min-height:36px
}
.card>.flex-between {
    margin-bottom:16px
}
.card>.flex-between>h2 {
    margin-bottom:0
}


@media(max-width:650px) {
    .form-inline label { flex-basis:100%; }
}

/* SVG attributes keep chart proportions compatible with the content security policy. */
.chart-bar, .chart-bar.error {
    height:130px;
    background:none;
    border-radius:0;
}
.chart-bar rect { fill:#469e86; }
.chart-bar.error rect { fill:#df7985; }
/* Cloud SMS */
:root{--bg:#f5f5f5;--text:#171717;--muted:#626262;--border:#dedede;--primary:#c62032;--primary-dark:#a41424}
.sidebar,.auth-intro{background:#171717;color:#fff}
.topbar{background:#fff}.topbar-menu-toggle{display:inline-flex}
.balance-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.action-menu{display:flex;flex-direction:column;gap:8px;min-width:100px;padding:12px 0}
details>summary{cursor:pointer;font-weight:600;padding:6px 0}
details .form{margin-top:16px}
.auth-page>.auth-card{width:min(680px,calc(100% - 32px));margin:32px auto}
@media(min-width:901px){.sidebar-collapsed .sidebar{transform:translateX(-100%)}.sidebar-collapsed .main{margin-left:0}.sidebar-collapsed .app-shell{grid-template-columns:1fr}}

.auth-page{background:#f4f4f4}.auth-page>.auth-card{max-width:680px}.checkbox-label{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px}.checkbox-label input{flex:0 0 auto}.checkbox-label span{display:block}

.topbar-menu-toggle{width:40px;height:40px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#171717;align-items:center;justify-content:center}.card p,.hint{color:#606060}.sidebar .nav-item{color:#ddd}.sidebar .nav-item.active{color:#fff}

/* Administration overview and focused sections */
.admin-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:20px}.admin-breadcrumb span{padding:0 10px;color:#bdc4ce}
.dash-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 28px}.dash-heading h1{font-size:30px;letter-spacing:-1px;margin:5px 0 9px}.dash-heading p{color:var(--muted);margin:0}
.period-switch{display:flex;background:#fff;border:1px solid var(--border);padding:4px;border-radius:12px;white-space:nowrap}.period-switch a{padding:8px 16px;text-decoration:none;color:var(--muted);border-radius:8px;font-weight:600}.period-switch a[aria-current]{background:#172234;color:#fff}
.dash-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}.dash-metric{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;padding:23px;text-decoration:none;color:var(--text);box-shadow:0 4px 20px #18284004}.dash-metric:hover{border-color:#d4a5ad}.dash-metric-label{display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--muted);font-weight:500;font-size:13px}.dash-metric-icon{display:grid;place-items:center;border-radius:12px;width:36px;height:36px;flex-shrink:0;background:#fcecef;color:#cc3547}.tone-1 .dash-metric-icon{background:#edf3ff;color:#547ac5}.tone-2 .dash-metric-icon{background:#e9f6ef;color:#28855a}.tone-3 .dash-metric-icon{background:#fff4e5;color:#b68128}.dash-metric strong{font-size:29px;line-height:1.3;letter-spacing:-1px;margin:17px 0 9px;font-variant-numeric:tabular-nums}.dash-metric-foot{font-size:12px;color:var(--muted);line-height:1.5}
.dash-charts,.dash-bottom{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:24px;margin-bottom:24px}.dash-charts>.card,.dash-bottom>.card{min-width:0;padding:25px;border-radius:16px}.dash-card-heading{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:20px}.dash-card-heading h2{margin:0 0 7px;font-size:17px}.dash-card-heading p{font-size:12px;color:var(--muted);margin:0}.dash-card-heading a{font-size:12px;white-space:nowrap}.dash-dot-label{font-size:11px;color:var(--muted)}.dash-dot-label:before,.dash-dot{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#cc3547;margin-right:7px}.cash-chart{display:block;width:100%;min-height:200px}.chart-data{margin-top:14px;border-top:1px solid var(--border);padding-top:15px}.chart-data summary{font-size:12px;color:var(--muted)}.donut-wrap{max-width:190px;margin:0 auto 18px}.donut-value{fill:var(--text);font-size:32px;font-weight:700;letter-spacing:-1px}.donut-caption{fill:var(--muted);font-size:11px}.dash-stat-row{display:flex;justify-content:space-between;margin:12px 0;font-size:13px}.dash-dot.muted{background:#d8dee7}.dash-text-link{display:block;border-top:1px solid var(--border);padding-top:16px;margin-top:18px;font-size:13px;text-decoration:none}
.dash-empty{padding:18px 0;color:var(--muted);font-size:13px}.dash-empty strong{display:block;color:var(--text);font-size:16px;margin-bottom:8px}.cell-date{display:block;color:var(--muted);font-size:11px;margin-top:4px}.sms-stat{margin:22px 0}.sms-stat>div{display:flex;justify-content:space-between;font-size:13px}.sms-stat progress{display:block;width:100%;height:8px;border:0;border-radius:8px;overflow:hidden;margin-top:10px;background:#edf0f4}.sms-stat progress::-webkit-progress-bar{background:#edf0f4}.sms-stat progress::-webkit-progress-value{background:#538b77;border-radius:8px}.sms-stat progress.bad::-webkit-progress-value{background:#cc3547}.sms-stat progress.waiting::-webkit-progress-value{background:#d5a34c}.sms-stat progress::-moz-progress-bar{background:#538b77}
.admin-sections{display:grid;gap:20px;margin-top:20px}.admin-sections>.card{margin-top:0;padding:26px;border-radius:16px}.admin-sections summary{font-size:16px;font-weight:600;padding:5px 0}.admin-sections details[open]>summary{margin-bottom:22px}.admin-sections .form{max-width:740px}.compact-metrics,.settings-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 28px}.service-item{padding:20px;background:#f7f8fb;border-radius:12px;border:1px solid var(--border)}.service-item>span{display:block;color:var(--muted);font-size:12px}.service-item strong{display:block;margin:7px 0;font-size:16px}.service-item p{font-size:12px;color:var(--muted);margin:0}
@media(min-width:1600px){.dash-metric strong{font-size:34px}.cash-chart{min-height:240px}}
@media(max-width:1180px){.dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-charts,.dash-bottom{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr)}.dash-dot-label{display:none}}
@media(max-width:800px){.dash-charts,.dash-bottom{grid-template-columns:1fr}.dash-heading h1{font-size:25px}.dash-heading{align-items:start}.settings-shortcuts{grid-template-columns:1fr}}
@media(max-width:480px){.dash-heading{flex-direction:column}.dash-metrics{gap:10px}.dash-metric{padding:15px}.dash-metric strong{font-size:23px}.dash-metric-icon{display:none}.dash-metric-label{font-size:12px}.dash-charts>.card,.dash-bottom>.card,.admin-sections>.card{padding:18px}.compact-metrics,.service-grid{grid-template-columns:1fr}.dash-card-heading{flex-wrap:wrap}}
.client-sections{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 24px}.client-sections a{padding:9px 15px;border:1px solid var(--border);border-radius:10px;background:white;text-decoration:none}.client-table td{padding:0!important}.client-table td a{display:block;padding:18px 16px;color:inherit;text-decoration:none;min-height:64px}.client-table tr:hover td{background:#fff6f7}.client-table strong{color:var(--primary)}