@charset "UTF-8";
:root {
    --bg: #f6f8f6;
    --surface: #fff;
    --ink: #202e29;
    --muted: #7a847e;
    --border: #e7ebe7;
    --green: #287450;
    --green-dark: #183e30;
    --lime: #c3ed95;
    --sidebar: #142c27;
    --radius: 13px;
    --shadow: 0 4px 18px #1a362b05
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

button, input, select, textarea {
    font: inherit
}

button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent
}

button, a {
    touch-action: manipulation
}

button {
    cursor: pointer
}

button:disabled {
    cursor: not-allowed;
    opacity: .5
}

button {
    color: inherit
}

a {
    color: inherit;
    text-decoration: none
}

button, input, select, textarea {
    outline-offset: 4px
}

:focus-visible {
    outline: 3px solid #73ac82;
    outline-offset: 4px
}

button {
    border: 0
}

svg {
    flex-shrink: 0
}

button svg, a svg {
    pointer-events: none
}

h1, h2, h3, p {
    margin: 0
}

.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    flex-shrink: 0
}

small {
    font-size: 11px
}

.skip-link {
    position: fixed;
    top: -60px;
    left: 20px;
    padding: 10px;
    background: var(--green-dark);
    color: white;
    z-index: 100
}

.skip-link:focus {
    top: 12px
}

.app-shell {
    min-height: 100vh
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 244px;
    z-index: 30;
    background: var(--sidebar);
    color: #d5e1da;
    padding: 30px 18px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin
}

.brand {
    display: flex;
    align-items: center;
    font-size: 26px;
    letter-spacing: -1.3px;
    font-weight: 800;
    color: white;
    margin: 0 12px 35px
}

.brand > span:not(.brand-symbol):not(.brand-dot) {
    font-weight: 400
}

.brand .brand-symbol {
    display: inline-grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: var(--lime);
    color: #153a29;
    font-size: 31px;
    font-weight: 600;
    margin-right: 9px;
    line-height: 1
}

.brand-dot {
    color: var(--lime)
}

.workspace-label, .nav-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #7b978b;
    margin: 0 13px 12px
}

.environment-box {
    padding: 12px 12px 13px;
    border: 1px solid #365044;
    border-radius: 9px;
    background: #1c352d;
    margin-bottom: 28px
}

.environment-box label {
    display: block;
    font-size: 10px;
    color: #a1b3a8;
    margin-bottom: 6px
}

.environment-box select {
    width: 100%;
    border: 0;
    background-color: #1c352d;
    color: #f0f5ef;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 0;
    color-scheme: dark
}

.environment-box .client-select-label {
    margin-top: 14px;
    border-top: 1px solid #365044;
    padding-top: 10px
}

.nav-label {
    margin-bottom: 8px
}

nav {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: #b5c7bc;
    border-radius: 7px;
    font-size: 13px;
    position: relative;
    transition: background .18s, color .18s
}

.nav-item > .icon {
    width: 18px;
    height: 18px;
    color: #90a99a
}

.nav-item:hover {
    background: #213d32;
    color: white
}

.nav-item.active {
    color: #d6efbb;
    background: #2b4935
}

.nav-item.active > .icon {
    color: #c4e79f
}

.nav-item.active i {
    margin-left: auto;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    background: var(--lime)
}

.sidebar-bottom {
    margin-top: auto;}

.local-note {
    font-size: 10px;
    color: #91aa9c;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 10px 15px
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #82b785;
    border-radius: 50%;
    flex-shrink: 0
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 4px;
    border-top: 1px solid #33483d
}

.sidebar-profile strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #e3eae1
}

.sidebar-profile small {
    display: block;
    font-size: 10px;
    color: #91a697
}

.avatar {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 650;
    border-radius: 11px;
    flex-shrink: 0;
    background: #edf3e8;
    color: #4e7754;
    letter-spacing: -.3px
}

.avatar.amber {
    background: #fbf1db;
    color: #ae8235
}

.avatar.purple {
    background: #efeaf8;
    color: #8a6daf
}

.avatar.green {
    background: #e8f2e8;
    color: #5b835b
}

.avatar.admin-avatar {
    background: #34503c;
    color: #d1e5b8;
    font-size: 11px;
    width: 33px;
    height: 33px
}

.large-avatar {
    width: 53px;
    height: 53px;
    font-size: 17px;
    border-radius: 15px
}

.main-shell {
    margin-left: 244px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.topbar {
    height: 75px;
    padding: 0 33px;
    background: #ffffffbd;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 17px
}

.breadcrumb {
    color: #9aaba0;}

.breadcrumb span {
    margin: 0 13px;
    color: #cad0ca
}

.breadcrumb strong {
    font-weight: 500;
    color: #536257
}

.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e3e9db;
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 9px;
    letter-spacing: .2px;
    color: #718559;
    background: #f6f9f0;
    white-space: nowrap
}

.menu-button {
    display: none !important
}

main {
    width: 100%;
    max-width: 1750px;
    margin: 0 auto;
    padding: 32px 33px 26px;
    flex: 1
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px
}

.eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #7e8e80;
    font-weight: 600;
    margin-bottom: 7px
}

h1 {
    font-size: 29px;
    line-height: 1.2;
    letter-spacing: -.9px;
    font-weight: 650
}

.page-header p {
    margin-top: 8px;
    color: #839087;
    font-size: 12px
}

.page-actions {
    display: flex;
    gap: 9px;
    flex-shrink: 0
}

.btn {
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 7px;
    padding: 10px 15px;
    min-height: 39px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    transition: background .18s, box-shadow .18s, transform .18s;
    text-align: center;
    background: none
}

.btn .icon {
    width: 16px;
    height: 16px
}

.btn-primary {
    background: #2f734e;
    color: white;
    box-shadow: 0 2px 3px #213e2310
}

.btn-primary:hover {
    background: #245b3e;
    box-shadow: 0 3px 9px #1a472329
}

.btn-secondary {
    background: white;
    border-color: #dfe6dc;
    color: #586c57
}

.btn-secondary:hover {
    background: #f0f5eb;
    border-color: #cad8c4
}

.btn-danger {
    background: #b94d43;
    color: white
}

.btn-danger:hover {
    background: #9b3931
}

.btn:active {
    transform: translateY(1px)
}

.btn-small {
    padding: 7px 10px;
    min-height: 31px;
    font-size: 10px
}

.full-width {
    width: 100%
}

.icon-button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #89958a;
    transition: background .18s, color .18s
}

.icon-button:hover {
    background: #eef3eb;
    color: #3e7047
}

.icon-button .icon {
    width: 16px;
    height: 16px
}

.text-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    font-weight: 600;
    color: #60815a;
    white-space: nowrap;
    padding: 5px
}

.text-button .icon {
    width: 13px;
    height: 13px
}

.welcome-banner {
    background: #1f4634;
    border-radius: 12px;
    padding: 26px 30px;
    min-height: 191px;
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    background-image: radial-gradient(ellipse at 80% 130%, #456b3e55, transparent 60%)
}

.welcome-banner > div:first-child {
    position: relative;
    z-index: 2
}

.welcome-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    letter-spacing: 1.45px;
    color: #b2cea2;
    margin-bottom: 12px
}

.welcome-tag span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c6ee95
}

.welcome-banner h2 {
    font-size: 26px;
    letter-spacing: -.7px;
    font-weight: 500;
    line-height: 1.25
}

.welcome-banner p {
    color: #b6c7b4;
    font-size: 11px;
    margin: 9px 0 17px
}

.banner-link {
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #d5efb1;
    font-weight: 500;
    font-size: 10px
}

.banner-link .icon {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.banner-link:hover .icon {
    transform: translateX(4px)
}

.banner-art {
    position: absolute;
    width: 300px;
    height: 300px;
    right: 95px;
    top: -42px;
    opacity: .9
}

.orbit {
    position: absolute;
    border: 1px solid #b5ce9a24;
    border-radius: 50%;
    inset: 0
}

.orbit-two {
    inset: 40px
}

.orbit-three {
    inset: 81px
}

.art-center {
    position: absolute;
    display: grid;
    place-items: center;
    box-shadow: 0 5px 12px #0a201430;}

.art-center {
    width: 66px;
    height: 66px;
    left: 117px;
    top: 117px;
    background: #cae59d;
    color: #385a2c;
    border: 0;
    border-radius: 17px;
    transform: rotate(-8deg)
}

.art-center .icon {
    width: 33px;
    height: 33px
}

.metrics-grid {
    display: grid;
    gap: 15px;
    margin-bottom: 22px
}

.metrics-grid.six, .metrics-grid.three {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

.metrics-grid.four {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

.metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    min-width: 0;
    box-shadow: var(--shadow)
}

.metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;}

.metric-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 6px;
    background: #f1f6ed;
    color: #6e9166
}

.metric-icon .icon {
    width: 15px;
    height: 15px
}

.metric-value {
    font-weight: 600;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -.9px;
    margin: 9px 0
}

.metric-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.metric-bottom > .icon {
    width: 12px;
    height: 12px
}

.metric-button {
    text-align: left;
    transition: border-color .18s, transform .18s
}

.metric-button:hover {
    border-color: #b2c6a9;
    transform: translateY(-2px)
}

.amber-metric .metric-icon {
    color: #b08d43;
    background: #fbf5e8
}

.green-metric {
    background: #f0f6eb;
    border-color: #dce8d2
}

.green-metric .metric-value {
    color: #416f3c
}

.green-metric .metric-icon {
    background: #e4eedc;
    color: #688f54
}

.panel {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
    overflow: hidden;
    margin-bottom: 22px
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 21px 22px 16px
}

.panel-header h2 {
    font-weight: 600;
    letter-spacing: -.2px
}

.panel-header p {
    margin-top: 4px
}

.chart-grid {
    display: grid;
    grid-template-columns:minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 20px
}

.chart-grid .panel {
    margin-bottom: 22px
}

.chart-wrap {
    padding: 0 18px
}

.line-chart {
    width: 100%;
    height: auto;
    display: block;
    min-height: 175px
}

.line-chart text {
    fill: #99a396;
    font-size: 10px;
    font-family: inherit
}

.chart-point {
    opacity: 0;
    transition: opacity .2s;
    cursor: help
}

.line-chart:hover .chart-point {
    opacity: 1
}

.chart-point:hover {
    r: 6px
}

.period-label {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 7px;
    color: #8a9885
}

.period-label .icon {
    width: 12px;
    height: 12px
}

.period-label select {
    border: 0;
    color: #6c7c65;
    background: white;
    padding: 0;
    max-width: 115px;
    cursor: pointer
}

.revenue-chart {
    height: 164px;
    display: flex;
    gap: 16px;
    padding: 10px 22px 0;
    align-items: stretch;
    border-bottom: 1px solid #f0f3ec;
    background: repeating-linear-gradient(to top, transparent 0, transparent 39px, #f0f3ec 40px, #f0f3ec 41px);
    margin: 0 18px
}

.bar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0
}

.bars {
    height: 128px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    justify-content: center;
    width: 100%
}

.bar {
    width: 14px;
    border-radius: 3px 3px 0 0;
    min-height: 1px;
    position: relative;
    transition: filter .2s
}

.forecast-bar {
    background: #e0eacb
}

.received-bar {
    background: #5c8957
}

.bar:hover {
    filter: brightness(.9)
}

.bar span {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    white-space: nowrap;
    background: #263e2a;
    color: white;
    padding: 3px 5px;
    border-radius: 4px;
    z-index: 1
}

.bar:hover span {
    display: block
}

.bar-column > small {
    color: #94a08e;
    padding: 7px 0 6px
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 15px 12px;
    flex-wrap: wrap
}

.chart-legend > span {
    display: flex;
    align-items: center;
    gap: 5px
}

.legend-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    flex-shrink: 0
}

.legend-dot.received {
    background: #5c8957
}

.legend-dot.forecast {
    background: #d9e6be
}

.bottom-grid {
    display: grid;
    grid-template-columns:minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 20px
}

.table-scroll {
    overflow: auto;
    width: 100%;
    scrollbar-width: thin
}

table {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
    text-align: left
}

thead {
    background: #fafbf8
}

th {
    font-weight: 500;
    letter-spacing: .2px;
    padding: 11px 18px;
    border-top: 1px solid #f0f3ec;
    border-bottom: 1px solid #edf0e8
}

td {
    padding: 15px 18px;
    border-bottom: 1px solid #eff2eb;
    color: #6e7c66
}

tr:last-child td {
    border-bottom: 0
}

tbody tr {
    transition: background .16s
}

tbody tr:hover {
    background: #fcfdf9
}

td > small, td > strong + small, td > span + small {
    display: block;
    font-size: 8px;
    color: #9aa592;
    margin-top: 4px
}

td strong {
    font-weight: 600;
    font-size: 10px;
    color: #4c5d45
}

.company-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    text-align: left;
    padding: 0;
    max-width: 100%;
    color: inherit
}

.company-cell > span:last-child {
    display: block;
    min-width: 0
}

.company-cell strong {
    font-size: 10px;
    color: #465740;
    font-weight: 600;
    display: block
}

.company-cell small {
    font-size: 8px;
    color: #9aa492;
    margin-top: 4px;
    display: block
}

.company-cell .avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 9px
}

button.company-cell:hover strong {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 3px
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 5px;
    line-height: 1.3;
    white-space: nowrap;
    background: #f0f2ed;
    color: #929d89;
    font-weight: 500
}

.badge > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor
}

.badge.success {
    background: #edf5e6;
    color: #73954f
}

.badge.warning {
    background: #fcf4e3;
    color: #bc9648
}

.badge.danger {
    background: #faeeeb;
    color: #bb7566
}

.badge.neutral {
    background: #f0f2ee;
    color: #8b9884
}

.table-actions {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end
}

.activity-list {
    padding: 0 21px 12px
}

.activity-item {
    display: flex;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f3eb
}

.activity-item:last-child {
    border-bottom: 0
}

.activity-icon {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #eff5e8;
    color: #89a56b;
    flex-shrink: 0
}

.activity-icon .icon {
    width: 14px;
    height: 14px
}

.activity-item strong {
    display: block;
    font-weight: 600;}

.activity-item p {
    margin-top: 3px;
    line-height: 1.6
}

.activity-item small {
    display: block;
    margin-top: 6px
}

.notice {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border: 1px solid #dfe7d5;
    background: #f0f5e9;
    border-radius: 9px;
    padding: 14px 17px;
    margin-bottom: 22px;
    font-size: 11px;
    line-height: 1.65
}

.notice .icon {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #8da574
}

.notice strong, .notice span {
    display: block
}

.notice strong {
    font-size: 12px;
    color: #536e46;
    margin-bottom: 3px
}

.notice.subtle {
    border-color: transparent;
    background: transparent;
    padding: 0 2px;
    margin-bottom: 0;}

.notice.warning {
    background: #fff7e9;
    color: #9b7b45;
    border-color: #ead8b7
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 33px;
    padding: 18px 0 23px;
    border-top: 1px solid var(--border);
    color: #a2af98
}

.table-toolbar {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    padding: 17px 21px
}

.search-field {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 390px;
    width: 100%;
    color: #a8b19c
}

.search-field .icon {
    width: 16px;
    height: 16px
}

.search-field input {
    padding: 6px 0;
    border: 0;
    background: none;
    font-size: 11px;
    color: #65765a;
    min-width: 0;
    width: 100%
}

.search-field input::placeholder {
    color: #a2ad98
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 48px 25px;
    min-height: 180px
}

.empty-state > .icon {
    width: 28px;
    height: 28px;
    color: #a8b998;
    margin-bottom: 4px
}

.empty-state strong {
    font-size: 14px;
    font-weight: 600;
    color: #5e7450
}

.empty-state p {
    font-size: 11px;
    color: #98a58c;
    max-width: 350px;
    line-height: 1.7
}

.empty-state .btn {
    margin-top: 7px
}

.plan-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 25px
}

.plan-card {
    background: white;
    border: 1px solid var(--border);
    padding: 25px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.plan-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px
}

.plan-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    background: #eef5e7;
    color: #789e5b
}

.plan-card h2 {
    font-size: 17px;
    font-weight: 600
}

.plan-price {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 12px 0
}

.plan-price small {
    font-size: 11px;
    font-weight: 400;
    color: #9ca68f;
    letter-spacing: 0;
    margin-left: 5px
}

.plan-card > p {
    color: #95a08a;
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 25px;
    flex: 1;}

.plan-feature {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    color: #7e906e;
    margin-bottom: 12px
}

.plan-feature .icon {
    width: 13px;
    height: 13px;
    color: #7a9e5c
}

.plan-card > .btn {
    margin-top: 16px
}

.equal-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 20px
}

.equal-grid .revenue-chart {
    height: 210px
}

.equal-grid .bars {
    height: 172px
}

.finance-lines {
    padding: 5px 23px 12px
}

.finance-lines > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    font-size: 11px;
    color: #899779
}

.finance-lines strong {
    color: #648150;
    font-size: 13px;
    font-weight: 600
}

.finance-lines .total-line {
    border-top: 1px solid var(--border);
    margin-top: 9px;
    padding-top: 15px;
    font-weight: 600
}

.projection-box {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 5px 23px 23px;
    background: #f2f6ed;
    padding: 13px 17px;
    border-radius: 8px;
    color: #82a165
}

.projection-box .icon {
    width: 27px;
    height: 27px
}

.projection-box strong {
    display: block;
    font-size: 20px;
    color: #64824f;
    font-weight: 600;
    letter-spacing: -.6px
}

.projection-box span {
    font-size: 9px;
    color: #9aa98b;
    display: block;
    margin-top: 3px
}

.payment-note {
    white-space: normal;
    max-width: 280px;
    display: block;
    font-size: 9px;
    overflow-wrap: anywhere
}

.partner-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px
}

.partner-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 30px
}

.partner-card h2 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 18px
}

.partner-card > p {
    font-size: 10px;
    margin-top: 5px
}

.partner-share {
    font-size: 48px;
    letter-spacing: -2px;
    font-weight: 500;
    line-height: 1.2;
    margin: 25px 0 16px;
    color: #58764b
}

.partner-share span {
    font-size: 23px;
    letter-spacing: 0;
    margin-left: 3px;
    color: #97ac82
}

.progress {
    height: 5px;
    background: #eff3e9;
    border-radius: 5px;
    overflow: hidden
}

.progress > span {
    display: block;
    background: #a3bd81;
    height: 100%;
    border-radius: 5px;
    transition: width .3s
}

.progress.purple > span {
    background: #b5a5d2
}

.progress.amber > span {
    background: #d2ba81
}

.partner-result {
    border-top: 1px solid var(--border);
    margin-top: 25px;
    padding-top: 18px
}

.partner-result span {
    display: block;
    font-size: 10px;
    color: #9aa98c
}

.partner-result strong {
    font-size: 25px;
    color: #5e7b4f;
    letter-spacing: -.5px;
    font-weight: 500;
    display: block;
    margin-top: 8px
}

.subtle-label {
    font-size: 9px;
    color: #a4b096
}

.client-summary {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 22px;
    gap: 20px;
    margin-bottom: 20px
}

.client-summary .company-cell strong {
    font-size: 13px
}

.client-summary .company-cell small {
    font-size: 10px
}

.client-summary .company-cell .avatar {
    width: 40px;
    height: 40px;
    font-size: 12px
}

.client-summary > div:last-child {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 10px;
    color: #a2af97
}

.donut-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px 20px;
    flex-wrap: wrap
}

.donut {
    width: 170px;
    position: relative;
    flex-shrink: 0
}

.donut svg {
    display: block;
    width: 100%
}

.donut > div {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    pointer-events: none
}

.donut strong {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.8px;
    color: #5b744c
}

.donut > div span {
    font-size: 8px;
    color: #a1ae94;
    margin-top: 2px
}

.donut-legend {
    width: 100%;
    min-width: 0
}

.donut-legend > div {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 7px 0;
    color: #99a68c
}

.donut-legend > div > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0
}

.donut-legend strong {
    margin-left: auto;
    font-weight: 600;
    color: #738b5d
}

.agent-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 22px
}

.agent-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    min-width: 0
}

.agent-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.agent-card h2 {
    font-weight: 600;
    margin-top: 17px;
    overflow-wrap: anywhere
}

.agent-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px
}

.agent-phone .icon {
    width: 14px;
    height: 14px
}

.agent-message {
    margin-top: 22px;
    min-height: 117px;
    border-radius: 8px;
    background: #f6f8f1;
    padding: 14px
}

.agent-message > span {
    font-size: 7px;
    letter-spacing: 1px;
    color: #a8b49a
}

.agent-message p {
    line-height: 1.8;
    margin-top: 8px;
    overflow-wrap: anywhere;
    white-space: pre-wrap
}

.agent-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    margin-top: 22px;
    padding-top: 17px
}

.agent-stats > div strong {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.5px;
    display: block;
    color: #789160
}

.agent-stats > div > span {
    font-size: 8px;
    color: #aab79a
}

.toggle-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    color: #92a480;
    background: none;
    padding: 6px 0
}

.toggle {
    display: inline-block;
    width: 30px;
    height: 17px;
    border-radius: 20px;
    background: #dce4d4;
    position: relative;
    transition: background .2s
}

.toggle::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: 3px;
    left: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px #344b2620;
    transition: transform .2s
}

.toggle.on {
    background: #7da267
}

.toggle.on::after {
    transform: translateX(13px)
}

.distribution-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 35px;
    border: 1px solid #dce7d2;
    background: linear-gradient(110deg, #eff5e8, #f9fbf6);
    border-radius: 12px;
    margin-bottom: 22px
}

.distribution-hero h2 {
    font-size: 25px;
    letter-spacing: -.6px;
    font-weight: 500;
    color: #4f7140
}

.distribution-hero p {
    max-width: 480px;
    line-height: 1.9;
    margin-top: 10px
}

.simulation-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 22px
}

.simulation-actions > span {
    font-size: 10px;
    color: #99ac88
}

.distribution-stat {
    min-width: 180px;
    text-align: center;
    color: #87a671;
    border-left: 1px solid #dfe8d4;
    padding: 10px 0 10px 40px
}

.distribution-stat > .icon {
    width: 30px;
    height: 30px;
    display: block;
    margin: auto
}

.distribution-stat strong {
    display: block;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -1px;
    color: #617f4d;
    margin: 7px 0
}

.distribution-stat > span {
    font-size: 9px
}

.round-robin {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 24px 25px;
    flex-wrap: wrap
}

.round-item {
    position: relative;
    min-width: 145px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 12px 16px;
    border: 1px solid #e6eddf;
    border-radius: 9px;
    background: #fafcf6;
    min-height: 182px
}

.round-item.next {
    border: 1px solid #aac18d;
    background: #f3f8eb;
    box-shadow: 0 0 0 3px #eff4e7
}

.sequence-number {
    position: absolute;
    top: 9px;
    left: 12px;
    font-size: 9px;
    color: #b4c1a6
}

.round-item strong {
    font-weight: 600;
    color: #7b9265;
    margin-top: 12px;
    overflow-wrap: anywhere
}

.round-item small {
    margin-top: 5px
}

.next-label, .waiting-label {
    font-size: 8px;
    padding: 4px 8px;
    border-radius: 5px;
    display: block;
    margin-top: 13px
}

.next-label {
    background: #e3eed6;
    color: #7b9a60
}

.waiting-label {
    color: #abb99b
}

.round-arrow {
    color: #b6c6a5
}

.round-arrow .icon {
    width: 17px;
    height: 17px
}

.cycle-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 9px;
    color: #a6b594;
    padding-top: 8px
}

.cycle-label .icon {
    width: 13px;
    height: 13px
}

.link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 45px 30px 35px;
    margin-bottom: 23px
}

.link-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: #eff5e6;
    color: #7c9c5d;
    border-radius: 18px;
    margin-bottom: 15px
}

.link-icon .icon {
    width: 31px;
    height: 31px
}

.link-card h2 {
    font-size: 25px;
    letter-spacing: -.6px;
    font-weight: 500;
    color: #66824f;
    margin: 18px 0 10px
}

.link-card > p {
    font-size: 12px;
    color: #9eaf8a;
    max-width: 440px;
    line-height: 1.8
}

.link-copy-box {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #f8faf5;
    border: 1px solid #e2ead9;
    border-radius: 8px;
    padding: 9px 10px 9px 20px;
    margin-top: 27px;
    width: 100%;
    max-width: 620px;
    justify-content: space-between;
    min-width: 0
}

.link-copy-box code {
    font-size: 12px;
    color: #7c9664;
    overflow-wrap: anywhere;
    min-width: 0;
    text-align: left
}

.link-copy-box .btn {
    flex-shrink: 0
}

.link-card > small {
    font-size: 9px;
    color: #b0bd9e;
    margin-top: 12px
}

.link-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
    border-top: 1px solid var(--border);
    padding-top: 25px;
    width: 100%;
    color: #a3b78d;
    flex-wrap: wrap
}

.link-flow > span {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 10px
}

.link-flow > .icon {
    width: 15px;
    height: 15px
}

.equal-grid .panel > .btn {
    margin: 0 24px 22px
}

.details-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px
}

.details-heading p {
    margin-top: 6px
}

.details-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 20px;
    background: #f7f9f3;
    padding: 20px;
    border-radius: 8px
}

.details-grid span {
    display: block;
    font-size: 10px;
    color: #9aaa8a;
    margin-bottom: 5px
}

.details-grid strong {
    font-size: 12px;
    font-weight: 500;
    color: #6f8758;
    overflow-wrap: anywhere
}

.section-heading {
    font-size: 13px;
    font-weight: 500;
    margin: 24px 0 8px
}

dialog {
    width: 520px;
    max-width: calc(100% - 32px);
    max-height: calc(100dvh - 50px);
    border: 1px solid #dfe7d5;
    border-radius: 14px;
    padding: 0;
    color: var(--ink);
    box-shadow: 0 25px 90px #0b251940;
    background: #fff;
    overflow: auto
}

dialog.wide-modal {
    width: 760px
}

dialog::backdrop {
    background: #0e261b66;
    backdrop-filter: blur(4px)
}

.modal-header {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 27px 20px;
    border-bottom: 1px solid var(--border);
    z-index: 3
}

.modal-header .eyebrow {
    font-size: 8px;
    color: #9dac8f
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.5px
}

.modal-body {
    padding: 25px 27px
}

.form-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 20px 16px
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0
}

.field > span {
    font-size: 11px;
    font-weight: 500
}

.field input, .field select, .field textarea, .manual-copy {
    background: #fcfdf9;
    border: 1px solid #dde6d3;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    min-width: 0;
    color: #657c51;
    width: 100%;
    min-height: 39px
}

.field input::placeholder, .field textarea::placeholder {
    color: #b7c4a6
}

.field input:focus, .field select:focus, .field textarea:focus {
    border-color: #9fb980;
    outline: 2px solid #dbe9cd;
    outline-offset: 0
}

.field input[readonly] {
    background: #f0f3e9;
    color: #9bac8b
}

.field textarea {
    resize: vertical;
    min-height: 106px;
    line-height: 1.8
}

.form-help {
    color: #a1b18f;
    font-size: 10px;
    line-height: 1.8;
    margin-top: -2px
}

.full {
    grid-column: 1/-1
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 21px;
    margin-top: 4px;
    flex-wrap: wrap
}

.form-error {
    grid-column: 1/-1;
    padding: 12px 15px;
    background: #fcf1e9;
    color: #b57856;
    border-radius: 6px;
    font-size: 11px
}

.form-context {
    padding: 12px;
    background: #f5f8ee;
    border-radius: 6px;
    font-size: 11px;
    color: #93a77c
}

.form-context strong {
    color: #749158;
    font-weight: 600
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    color: #8ba172;
    cursor: pointer
}

.checkbox-label input {
    accent-color: #638f49;
    width: 15px;
    height: 15px;
    flex-shrink: 0
}

.confirm-text {
    font-size: 12px;
    color: #92a37f;
    line-height: 1.9;
    margin-bottom: 22px
}

.prepared-url {
    padding: 17px;
    background: #f3f8ec;
    border: 1px solid #dfebd3;
    border-radius: 7px
}

.prepared-url > strong {
    font-size: 12px;
    color: #779c59;
    display: flex;
    gap: 7px;
    align-items: center
}

.prepared-url > strong .icon {
    width: 16px;
    height: 16px
}

.prepared-url > code {
    display: block;
    font-size: 9px;
    overflow-wrap: anywhere;
    max-height: 110px;
    overflow: auto;
    color: #a0b68a;
    line-height: 1.8;
    background: #fbfdf8;
    padding: 10px;
    border-radius: 5px;
    margin: 12px 0
}

.prepared-url > div {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.prepared-url .btn {
    font-size: 10px;
    padding: 8px 10px
}

.manual-copy {
    display: block;
    margin: 20px 0;
    height: 130px;
    resize: vertical
}

.clipboard-fallback {
    position: fixed;
    left: -9999px;
    top: 0
}

.toasts {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 390px;
    pointer-events: none
}

.toast {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 20px;
    border-radius: 9px;
    background: #234830;
    color: #e5f0da;
    border: 1px solid #537d45;
    box-shadow: 0 6px 25px #16361b25;
    animation: toast-in .2s ease-out;
    font-size: 11px;
    line-height: 1.6
}

.toast > .icon {
    width: 18px;
    height: 18px;
    color: #b2d494
}

.toast.error {
    background: #715a39;
    border-color: #b49c64;
    color: #fff5da
}

.toast.error > .icon {
    color: #e2cd91
}

.sidebar-overlay {
    display: none
}

@keyframes toast-in {
    from {
        transform: translateY(10px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@media (min-width: 1600px) {
    .metrics-grid.six {
        grid-template-columns:repeat(6, minmax(0, 1fr))
    }

    .metric {
        padding: 17px 16px
    }

    .donut-layout {
        flex-wrap: nowrap
    }

    .donut-legend {
        max-width: 200px
    }

    .line-chart {
        min-height: 215px
    }
}

@media (max-width: 1250px) {
    .sidebar {
        width: 220px;
        padding-left: 14px;
        padding-right: 14px
    }

    .main-shell {
        margin-left: 220px
    }

    .topbar {
        padding: 0 25px
    }

    main {
        padding: 27px 25px
    }

    .app-footer {
        margin: 0 25px
    }

    .chart-grid {
        grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr)
    }

    .bottom-grid {
        grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr)
    }

    .panel-header {
        padding: 18px
    }

    .plan-card, .agent-card {
        padding: 20px
    }

    .plan-price {
        font-size: 25px
    }

    .banner-art {
        right: 30px
    }

    .metrics-grid.four {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .plan-grid {
        gap: 15px
    }

    .partner-card {
        padding: 25px
    }

    .round-item {
        min-width: 130px
    }

    .agent-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 1000px) {
    .sidebar {
        width: 204px;
        padding-left: 10px;
        padding-right: 10px
    }

    .main-shell {
        margin-left: 204px
    }

    .nav-item {
        padding: 12px;
        font-size: 12px
    }

    .brand {
        font-size: 24px
    }

    .environment-box {
        padding: 10px
    }

    .environment-box select {
        font-size: 11px
    }

    .workspace-label, .nav-label {
        font-size: 8px;
        letter-spacing: 1.1px
    }

    main {
        padding: 25px 22px
    }

    .page-header p {
        font-size: 11px;
        max-width: 390px
    }

    .chart-grid, .bottom-grid {
        grid-template-columns:1fr
    }

    .bottom-grid > .panel:last-child {
        margin-top: 0
    }

    .chart-grid > .panel:last-child {
        margin-top: 0
    }

    .chart-grid .panel-header {
        padding: 21px
    }

    .chart-wrap {
        max-height: none
    }

    .line-chart {
        max-height: 260px
    }

    .donut-layout {
        flex-wrap: nowrap
    }

    .donut-legend {
        max-width: 260px
    }

    .metrics-grid {
        gap: 12px
    }

    .metric {
        padding: 14px
    }

    .metric-value {
        font-size: 24px
    }

    .plan-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .partner-grid {
        gap: 12px
    }

    .partner-card {
        padding: 20px
    }

    .partner-card > p {
        font-size: 9px
    }

    .partner-share {
        font-size: 40px
    }

    .partner-result strong {
        font-size: 21px
    }

    .partner-result span {
        font-size: 9px
    }

    .equal-grid {
        grid-template-columns:1fr
    }

    .distribution-hero {
        gap: 25px;
        padding: 28px
    }

    .distribution-hero h2 {
        font-size: 22px
    }

    .distribution-stat {
        min-width: 150px;
        padding-left: 20px
    }

    .link-copy-box {
        gap: 15px
    }

    .app-footer {
        margin: 0 22px
    }
}

@media (max-width: 760px) {
    .sidebar {
        width: 244px;
        transform: translateX(-100%);
        transition: transform .23s ease-out;
        padding-left: 18px;
        padding-right: 18px
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .sidebar-overlay.visible {
        display: block;
        position: fixed;
        inset: 0;
        background: #12251a6e;
        z-index: 29
    }

    .main-shell {
        margin-left: 0
    }

    .menu-button {
        display: inline-flex !important
    }

    .topbar {
        height: 65px;
        padding: 0 18px
    }

    .topbar-left {
        gap: 9px
    }

    .topbar-right {
        gap: 10px
    }

.topbar-right > .avatar {
        display: none
    }

    .breadcrumb span {
        margin: 0 7px
    }

    .breadcrumb {
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .demo-badge {
        font-size: 7px;
        padding: 4px 6px;
        gap: 5px
    }

    .page-header {
        gap: 15px;
        align-items: flex-start;
        margin-bottom: 22px
    }

    .page-header h1 {
        font-size: 26px
    }

    .page-header p {
        font-size: 11px;
        max-width: 330px
    }

    .page-header .eyebrow {
        font-size: 8px
    }

    .page-actions {
        padding-top: 13px
    }

    .page-actions .btn {
        font-size: 10px;
        padding: 9px 11px;
        min-height: 37px
    }

    .page-actions .btn .icon {
        width: 14px;
        height: 14px
    }

    main {
        padding: 26px 20px
    }

    .welcome-banner {
        padding: 25px;
        min-height: 185px
    }

    .welcome-banner h2 {
        font-size: 24px
    }

    .welcome-banner p {
        max-width: 300px;
        line-height: 1.8
    }

    .welcome-tag {
        font-size: 7px;
        letter-spacing: 1px
    }

    .banner-art {
        right: -45px;
        opacity: .5
    }

    .welcome-banner > div:first-child {
        max-width: 82%
    }

    .metrics-grid.six {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .metric-value {
        font-size: 23px
    }

    .app-footer {
        margin: 0 20px
    }

    .sidebar .workspace-label, .sidebar .nav-label {
        font-size: 9px
    }

    .sidebar .nav-item {
        font-size: 13px
    }

    .sidebar .environment-box select {
        font-size: 12px
    }

    .distribution-hero {
        padding: 25px
    }

    .link-copy-box code {
        font-size: 11px
    }

    .round-robin {
        padding: 10px 20px 25px
    }

    .link-card {
        padding: 35px 23px
    }

    .link-flow {
        gap: 13px
    }
}

@media (max-width: 520px) {
    main {
        padding: 23px 15px
    }

    .topbar {
        padding: 0 12px
    }

    .breadcrumb {
        max-width: 165px
    }

    .topbar-right .demo-badge {
        max-width: 155px
    }

    .page-header {
        flex-direction: column;
        gap: 14px
    }

    .page-actions {
        padding-top: 0;
        width: 100%;}

    .page-actions .btn {
        font-size: 11px
    }

    .page-header p {
        max-width: 100%;}

    .welcome-banner {
        padding: 23px 21px
    }

    .welcome-banner h2 {
        font-size: 21px
    }

    .welcome-banner p {
        font-size: 10px;
        max-width: 240px
    }

    .welcome-banner > div:first-child {
        max-width: 90%
    }

    .banner-art {
        right: -90px;
        opacity: .3
    }

    .welcome-tag {
        font-size: 6px;
        letter-spacing: .8px
    }

    .metrics-grid.six, .metrics-grid.three, .metrics-grid.four {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 10px
    }

    .metric {
        padding: 13px 12px
    }

    .metric-top {
        align-items: flex-start
    }

    .metric-icon {
        width: 23px;
        height: 23px;
        border-radius: 5px
    }

    .metric-icon .icon {
        width: 13px;
        height: 13px
    }

    .metric-value {
        font-size: 23px;
        margin: 7px 0
    }

    .metric-bottom {
        line-height: 1.7
    }

    .panel-header {
        padding: 18px 17px;
        gap: 8px
    }

    .period-label {
        padding: 4px;
        gap: 3px
    }

    .period-label select {
        max-width: 95px
    }

    .period-label > .icon {
        display: none
    }

    .chart-wrap {
        padding: 0 8px
    }

    .line-chart {
        min-height: 155px
    }

    .table-toolbar {
        padding: 14px 17px;
        gap: 12px;
        flex-wrap: wrap
    }

    .search-field {
        max-width: none
    }

    .search-field input {
        font-size: 10px
    }

    .plan-grid, .agent-grid, .partner-grid {
        grid-template-columns:1fr
    }

    .plan-card {
        padding: 25px
    }

    .plan-card > p {
        margin-bottom: 20px
    }

    .partner-card {
        padding: 25px
    }

    .partner-card .large-avatar {
        width: 43px;
        height: 43px;
        font-size: 14px
    }

    .partner-card h2 {
        margin-top: 13px
    }

    .partner-share {
        margin-top: 15px
    }

    .partner-result {
        margin-top: 20px
    }

    .notice {
        font-size: 10px;
        padding: 13px
    }

    .app-footer {
        flex-direction: column;
        gap: 5px;
        margin: 0 15px;
        padding: 17px 0;}

    .client-summary {
        flex-wrap: wrap;
        gap: 15px;
        padding: 16px
    }

    .client-summary > div:last-child {
        width: 100%;
        justify-content: space-between
    }

    .donut-layout {
        flex-wrap: wrap
    }

    .donut-legend {
        max-width: none
    }

    .donut {
        width: 180px
    }

    .agent-card {
        padding: 25px
    }

    .agent-message {
        min-height: 90px
    }

    .distribution-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 25px;
        gap: 25px
    }

    .distribution-stat {
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid #dfe8d4;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        min-width: 0
    }

    .distribution-stat > .icon {
        margin: 0;
        width: 24px;
        height: 24px
    }

    .distribution-stat strong {
        font-size: 26px;
        margin: 0
    }

    .distribution-stat > span {
        font-size: 8px;
        max-width: 85px;
        text-align: left
    }

    .distribution-hero h2 {
        font-size: 21px
    }

    .simulation-actions {
        gap: 12px;
        flex-wrap: wrap
    }

    .round-robin {
        gap: 12px
    }

    .round-item {
        min-width: calc(50% - 12px);
        flex: 1
    }

    .round-arrow {
        display: none
    }

    .link-card h2 {
        font-size: 23px
    }

    .link-card > p {
        font-size: 11px
    }

    .link-copy-box {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
        gap: 13px
    }

    .link-copy-box code {
        text-align: center;
        font-size: 11px
    }

    .link-card > small {
        font-size: 8px;
        line-height: 1.8
    }

    .link-flow {
        flex-direction: column;
        gap: 13px;
        margin-top: 25px
    }

    .link-flow > .icon {
        transform: rotate(90deg)
    }

    .subtle-label {
        display: none
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .modal-header {
        padding: 20px
    }

    .modal-body {
        padding: 22px 20px
    }

    .modal-header h2 {
        font-size: 18px
    }

    .form-actions {
        gap: 8px
    }

    .form-actions .btn {
        font-size: 10px;
        padding: 9px 12px
    }

    .details-grid {
        grid-template-columns:1fr;
        gap: 15px
    }

    .details-grid strong {
        font-size: 12px
    }

    .toasts {
        bottom: 15px;
        right: 15px;
        left: 15px;
        max-width: none
    }

    .toast {
        font-size: 10px;
        padding: 13px 16px
    }

    .revenue-chart {
        gap: 13px
    }

    .form-help {
        font-size: 10px
    }
}

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

/* Tipografia de leitura: mantida confortável também nas tabelas e notas. */
.page-header > div:first-child {
    min-width: 0
}

h1, h2, h3, .company-cell strong {
    overflow-wrap: anywhere
}

.metric-value {
    overflow-wrap: anywhere
}

.breadcrumb {
    font-size: 12px
}

.metric-top {
    font-size: 12px;
    color: #6f7e70
}

.metric-bottom {
    font-size: 10px;
    color: #82907d
}

.panel-header h2 {
    font-size: 14px
}

.panel-header p {
    font-size: 11px;
    color: #7e8b77
}

table {
    font-size: 12px
}

th {
    font-size: 10px;
    color: #7c8b70
}

td strong, .company-cell strong {
    font-size: 12px
}

td > small, td > strong + small, td > span + small, .company-cell small {
    font-size: 10px;
    color: #89967f
}

.badge {
    font-size: 9px
}

.activity-item strong {
    font-size: 11px;
    color: #5c6d50
}

.activity-item p {
    font-size: 10px;
    color: #87967a
}

.activity-item small {
    font-size: 9px;
    color: #99a58e
}

.chart-legend {
    font-size: 10px;
    color: #7f8f72
}

.bar-column > small {
    font-size: 10px
}

.donut-legend > div {
    font-size: 10px
}

.donut-legend strong {
    font-size: 11px
}

.notice.subtle {
    font-size: 10px;
    color: #8b9c7c
}

.app-footer {
    font-size: 9px
}

@media (max-width: 520px) {
    .breadcrumb {
        font-size: 10px
    }

    .metric-top {
        font-size: 10px
    }

    .metric-bottom {
        font-size: 9px
    }

    .panel-header h2 {
        font-size: 12px
    }

    .panel-header p {
        font-size: 10px
    }

    .chart-legend {
        font-size: 9px
    }

    .app-footer {
        font-size: 9px
    }
}

/* Login, autenticação e ajustes operacionais. Mesma ordem da antiga live.css. */
[hidden]{display:none!important}
.access-screen{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(ellipse at 15% 10%,#dde9d5,transparent 60%),#f6f8f6}
.access-card{width:100%;max-width:470px;background:#fff;border:1px solid #dee6d8;border-radius:18px;padding:42px;box-shadow:0 18px 70px #183b2710}
.access-logo{font-weight:700;letter-spacing:-1px;font-size:31px;color:#224c35;margin-bottom:35px}.access-logo span{color:#9cc26f}
.access-card h1{font-size:26px}.access-card>p{font-size:13px;color:#7c8b71;margin:17px 0 23px;line-height:1.8}.access-card .access-foot{font-size:10px;border-top:1px solid #e7ebe7;padding-top:20px;margin-top:27px}
#local-login{display:flex;flex-direction:column;gap:16px}#local-login small{font-size:10px;color:#8a967f}
.sidebar-bottom{padding-top:25px}.sidebar-profile{margin-top:15px}.sidebar-profile .icon-button{margin-left:auto;color:#bad0ad}.sidebar-profile>div{min-width:0}.sidebar-profile strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.page-actions{flex-wrap:wrap;justify-content:flex-end}.page-header p{line-height:1.7}.metric-top{min-height:25px}.agent-message p{font-size:12px;color:#728366}.round-item strong{font-size:12px}.round-item small{font-size:10px;color:#849477}.muted-block{font-size:12px;color:#7f8e74;line-height:1.8;padding:0 23px 22px}
.row-buttons{display:flex;gap:8px;flex-wrap:wrap}.company-cell small{max-width:240px;overflow:hidden;text-overflow:ellipsis}.table-scroll table{min-width:550px}
.loading{padding:50px;text-align:center;color:#85977a}
.checkbox-grid{display:grid;gap:10px;max-height:220px;overflow:auto;border:1px solid #dfe7d8;padding:15px;border-radius:7px}
.readonly-value{padding:12px;background:#f4f8ee;border:1px solid #e1e9d8;border-radius:7px;font-size:12px;color:#748b5e;overflow-wrap:anywhere}
.agent-card h2{font-size:17px}.agent-phone{color:#7b8e6c;font-size:12px}.distribution-hero p{font-size:12px;color:#788b67}
.activity-item strong{overflow-wrap:anywhere}.local-warning{background:#fbf1d9!important;color:#9f7b37!important}
.link-card code{user-select:all}.form-actions button:disabled{opacity:.55}.charge-balance{font-size:13px;color:#526f45;background:#f1f6e9;border-radius:8px;padding:13px}.period-label select{font-size:11px}.text-button{font-size:11px}
.notice{color:#728364}.field>span{color:#667d54}.field input,.field select,.field textarea{color:#4e6841}.field textarea{white-space:pre-wrap}.plan-card>p{overflow-wrap:anywhere}.partner-card>p{color:#7f9070}
@media(max-width:520px){.access-card{padding:30px 25px}.page-actions{justify-content:flex-start}.metrics-grid .metric-value{font-size:22px}.table-scroll table{min-width:610px}.form-actions{justify-content:stretch}.form-actions .btn{flex:1}.row-buttons .btn{font-size:10px}}
@media(max-width:760px){
 .topbar{gap:10px}.topbar-left{flex:1;min-width:0}.topbar-left .breadcrumb{flex:1;min-width:0}
 .topbar-right{flex:0 0 auto}.topbar .icon-button{flex-shrink:0}
}
.auth-form{display:flex;flex-direction:column;gap:16px;min-width:0}.auth-description{font-size:13px;line-height:1.7;color:#526f45;margin:16px 0 22px}.auth-form .btn{white-space:normal;min-height:44px}.auth-form .text-button{text-align:right;align-self:flex-end;min-height:30px}.auth-form .field{min-width:0}.auth-form input,.auth-form textarea{width:100%;min-width:0;box-sizing:border-box}.auth-form [role=alert]{overflow-wrap:anywhere}.auth-form h2{font-size:17px}.auth-form textarea{font-family:monospace;user-select:all}.totp-qr{max-width:230px;margin:auto;width:100%;background:white}.totp-qr svg{display:block;width:100%;height:auto}.otp-input{font-size:24px;letter-spacing:.25em;text-align:center}#auth-panel h1{font-size:24px}#local-development{margin-top:24px;font-size:12px}#local-development summary{cursor:pointer;margin-bottom:15px}.sidebar-bottom>.btn{width:100%;white-space:normal;margin-top:8px;font-size:11px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #4d7c32;outline-offset:3px}