:root {
    --bg: #dfe6ee;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --text: #171c26;
    --muted: #667085;
    --border: #e4e8ef;
    --primary: #176b91;
    --primary-2: #0f526e;
    --success: #16784e;
    --warning: #996515;
    --danger: #b73939;
    --info: #326db5;
    --shadow: 0 10px 24px rgba(31, 42, 68, 0.08);
    --soft-shadow: 0 3px 12px rgba(31, 42, 68, 0.08);
}

/* WordPress-style blog section */
.wp-blog-page {
    background: #f6f8fb;
    color: #162033;
}

.wp-blog {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 36px 0 76px;
    color: #162033;
}

.wp-blog a {
    color: inherit;
}

.wp-blog-header {
    max-width: 860px;
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #dbe4ef;
}

.wp-blog-header > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 26px;
    color: #66758a;
    font-size: 14px;
}

.wp-blog-header > div:first-child span::before {
    content: "/";
    margin-right: 8px;
    color: #a7b1c2;
}

.wp-blog-breadcrumb {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}

.wp-blog-header h1 {
    margin: 12px 0 10px;
    color: #111827;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: 0;
}

.wp-blog-header p {
    max-width: 780px;
    margin: 0;
    color: #526176;
    font-size: 18px;
    line-height: 1.7;
}

.wp-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
    color: #66758a;
    font-size: 14px;
}

.wp-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wp-post-meta svg {
    width: 16px;
    height: 16px;
    color: #0f766e;
}

.wp-blog-archive,
.wp-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: start;
}

.wp-blog-grid {
    display: grid;
    gap: 22px;
}

.wp-blog-card {
    display: grid;
    grid-template-columns: 282px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.wp-blog-card-image {
    display: block;
    min-height: 100%;
    background: #e7eef7;
}

.wp-blog-card-image img,
.wp-featured-image img,
.wp-post-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-blog-card-image img {
    aspect-ratio: 16 / 9;
}

.wp-blog-card-body {
    padding: 22px;
}

.wp-blog-category {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e8f7f2;
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.wp-blog-card h2 {
    margin: 12px 0 10px;
    color: #111827;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0;
}

.wp-blog-card h2 a,
.wp-blog-sidebar a,
.wp-read-more {
    text-decoration: none;
}

.wp-blog-card h2 a:hover,
.wp-blog-sidebar a:hover,
.wp-read-more:hover {
    color: #0f766e;
}

.wp-blog-card p {
    margin: 0;
    color: #55657b;
    font-size: 16px;
    line-height: 1.7;
}

.wp-read-more {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    color: #0f766e;
    font-weight: 800;
}

.wp-read-more::after {
    content: ">";
    margin-left: 8px;
}

.wp-blog-sidebar {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 16px;
}

.wp-blog-sidebar section {
    padding: 20px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.wp-blog-sidebar h2 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
}

.wp-blog-sidebar p,
.wp-blog-sidebar a {
    color: #55657b;
    font-size: 14px;
    line-height: 1.6;
}

.wp-blog-sidebar p {
    margin: 0;
}

.wp-blog-sidebar a {
    display: block;
    padding: 8px 0;
    border-top: 1px solid #eef2f7;
}

.wp-blog-sidebar h2 + a {
    border-top: 0;
}

.wp-blog-not-found {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: #7c2d12;
}

.wp-blog-not-found p {
    margin: 0 0 14px;
}

.wp-single-post {
    display: block;
}

.wp-featured-image,
.wp-post-figure {
    overflow: hidden;
    margin: 0 0 28px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
}

.wp-featured-image img,
.wp-post-figure img {
    aspect-ratio: 16 / 9;
}

.wp-featured-image figcaption,
.wp-post-figure figcaption {
    padding: 10px 14px;
    border-top: 1px solid #edf2f7;
    color: #66758a;
    font-size: 13px;
    line-height: 1.5;
}

.wp-post-layout {
    grid-template-columns: minmax(0, 760px) 300px;
    justify-content: space-between;
}

.wp-post-content {
    padding: 38px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.wp-post-content h2 {
    margin: 34px 0 14px;
    color: #111827;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: 0;
}

.wp-post-content h2:first-child {
    margin-top: 0;
}

.wp-post-content h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: 0;
}

.wp-post-content p,
.wp-post-content li {
    color: #334155;
    font-size: 17px;
    line-height: 1.82;
}

.wp-post-content p {
    margin: 0 0 18px;
}

.wp-post-content ul,
.wp-post-content ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

.wp-post-content li + li {
    margin-top: 10px;
}

.wp-post-table {
    overflow-x: auto;
    margin: 28px 0;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #ffffff;
}

.wp-post-table > div {
    display: grid;
    min-width: 720px;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.wp-post-table > div + div {
    border-top: 1px solid #edf2f7;
}

.wp-post-table strong,
.wp-post-table span {
    padding: 14px;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
}

.wp-post-table strong {
    background: #f1f5f9;
    color: #111827;
}

.wp-post-table strong + strong,
.wp-post-table span + span {
    border-left: 1px solid #edf2f7;
}

.wp-post-faq {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.wp-post-faq section {
    padding-top: 14px;
    border-top: 1px solid #edf2f7;
}

.wp-post-faq p {
    margin-bottom: 0;
}

.wp-post-cta {
    margin-top: 34px;
    padding: 24px;
    border: 1px solid #bae6d6;
    border-left: 4px solid #0f766e;
    border-radius: 8px;
    background: #f0fdfa;
}

.wp-post-cta h2 {
    margin: 0 0 10px;
    font-size: 24px;
}

.wp-post-cta p {
    margin-bottom: 16px;
}

.wp-post-bottom-tags,
.wp-post-social-footer {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #edf2f7;
}

.wp-post-bottom-tags strong {
    display: block;
    margin-bottom: 12px;
    color: #111827;
    font-size: 15px;
}

.wp-post-social-footer {
    padding: 24px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #f8fafc;
}

.wp-post-social-footer h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.wp-post-social-footer p {
    margin: 0 0 16px;
    color: #526176;
    font-size: 15px;
    line-height: 1.7;
}

.wp-social-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wp-social-button-row a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #cfe0ec;
    border-radius: 999px;
    background: #ffffff;
    color: #0f526e;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.wp-social-button-row a:hover {
    border-color: #0f766e;
    color: #0f766e;
}

.wp-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wp-tag-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    color: #526176;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1020px) {
    .wp-blog-archive,
    .wp-post-layout {
        grid-template-columns: 1fr;
    }

    .wp-blog-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .wp-blog {
        width: calc(100% - 24px);
        padding: 24px 0 56px;
    }

    .wp-blog-header h1 {
        font-size: 32px;
    }

    .wp-blog-header p {
        font-size: 16px;
    }

    .wp-blog-card {
        grid-template-columns: 1fr;
    }

    .wp-blog-card-body,
    .wp-blog-sidebar section,
    .wp-post-cta {
        padding: 18px;
    }

    .wp-post-content {
        padding: 22px;
    }

    .wp-post-content h2 {
        font-size: 24px;
    }

    .wp-post-content p,
    .wp-post-content li {
        font-size: 16px;
    }

    .wp-blog-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .wp-blog-header h1 {
        font-size: 28px;
    }

    .wp-blog-card h2 {
        font-size: 22px;
    }

    .wp-post-meta {
        gap: 8px 12px;
    }

    .wp-featured-image,
    .wp-post-figure {
        margin-bottom: 20px;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

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

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

.sidebar {
    position: relative;
    flex: 0 0 264px;
    width: 264px;
    min-height: 100vh;
    background: var(--surface);
    color: var(--text);
    border-right: 1px solid var(--border);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 20;
    transition: margin-left 180ms ease, transform 180ms ease;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 8px 0 14px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f2d74;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.brand-logo {
    display: block;
    width: min(100%, 188px);
    height: auto;
    object-fit: contain;
}

.brand strong,
.user-chip strong {
    display: block;
    font-size: 14px;
}

.brand small,
.user-chip small {
    color: var(--muted);
    display: block;
    font-size: 12px;
}

.nav {
    display: grid;
    gap: 6px;
}

.nav a,
.logout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    color: #4f5968;
    font-weight: 650;
}

.nav a.active,
.nav a:hover,
.logout-link:hover {
    background: #f1f4f8;
    color: var(--text);
}

.nav svg,
.logout-link svg,
.topbar svg,
.button svg,
.icon-button svg {
    width: 18px;
    height: 18px;
}

.sidebar-footer {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.sidebar-play-store {
    min-height: 70px;
    padding: 12px;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 26px rgba(31, 42, 68, 0.16);
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.sidebar-play-store:hover,
.sidebar-play-store:focus-visible {
    background: var(--primary-2);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(31, 42, 68, 0.2);
    outline: 0;
}

.sidebar-play-store-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-play-store svg {
    width: 18px;
    height: 18px;
}

.sidebar-play-store > span:nth-child(2) {
    min-width: 0;
}

.sidebar-play-store strong,
.sidebar-play-store small {
    display: block;
}

.sidebar-play-store strong {
    font-size: 14px;
    line-height: 1.2;
}

.sidebar-play-store small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.sidebar-play-store > svg:last-child {
    opacity: 0.72;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5f4ef;
    color: #12614e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    padding: 0 28px 28px;
    background: var(--surface);
    transition: margin-left 180ms ease;
}

body.sidebar-collapsed .sidebar {
    margin-left: -264px;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    margin: 0 -28px 22px;
    padding: 0 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.topbar h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.topbar p {
    margin: 4px 0 0;
    color: var(--muted);
}

.topbar-title {
    min-width: 0;
}

.topbar-billing-badge {
    margin-left: auto;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid #b9d8e6;
    border-radius: 999px;
    background: #eef8fb;
    color: #0f526e;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: var(--soft-shadow);
}

.topbar-billing-badge span {
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.topbar-billing-badge strong {
    font-size: 14px;
    line-height: 1;
    font-weight: 850;
}

.topbar-billing-badge.active {
    border-color: #9fd4b2;
    background: #eefaf3;
    color: var(--success);
}

.topbar-billing-badge.warning {
    border-color: #f3d08e;
    background: #fff8e6;
    color: var(--warning);
}

.topbar-billing-badge.danger {
    border-color: #efc0c0;
    background: #fff1f1;
    color: var(--danger);
}

.menu-toggle {
    display: inline-flex;
}

.grid {
    display: grid;
    gap: 16px;
}

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

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

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

.metric-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--soft-shadow);
}

.metric-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.metric-link:hover,
.metric-link:focus-visible,
.metric-link.active {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.metric-link.active {
    background: #eef6ff;
}

.metric span,
.metric small {
    color: var(--muted);
    font-size: 13px;
}

.metric strong {
    display: block;
    font-size: 28px;
    margin-top: 16px;
    letter-spacing: 0;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--soft-shadow);
}

.panel-header {
    min-height: 58px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-header h2 {
    margin: 0;
    font-size: 16px;
}

.panel-body {
    padding: 16px;
}

.actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.actions form {
    margin: 0;
}

.inline-confirm {
    min-width: 230px;
    padding: 10px;
    border: 1px solid #f0c1c1;
    border-radius: 8px;
    background: #fff7f7;
    display: grid;
    gap: 8px;
}

.inline-confirm strong {
    color: var(--danger);
}

.inline-confirm .muted {
    font-size: 12px;
    line-height: 1.4;
}

.button,
button.button {
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.button.dark {
    background: #121722;
    border-color: #121722;
    color: #fff;
}

.button.small {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
}

.button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.button.primary:hover {
    background: var(--primary-2);
}

.button:disabled,
button.button:disabled {
    opacity: 0.62;
    cursor: wait;
}

.button.danger {
    border-color: #f0c1c1;
    color: var(--danger);
}

.button.success {
    border-color: #bde8d4;
    color: var(--success);
}

.icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

th,
td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
}

.table-sort-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.table-sort-link:hover {
    color: var(--primary);
}

[data-team-page][aria-busy="true"] {
    pointer-events: none;
}

[data-team-page][aria-busy="true"] .table-wrap {
    opacity: 0.58;
}

[data-page-content].is-loading {
    pointer-events: none;
}

[data-page-content].is-loading > * {
    opacity: 0.62;
}

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

.pagination-bar {
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.muted {
    color: var(--muted);
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--muted);
    white-space: nowrap;
}

.badge.success {
    background: #e7f5ee;
    color: var(--success);
}

.badge.warning {
    background: #fff2d8;
    color: var(--warning);
}

.badge.danger {
    background: #fde8e8;
    color: var(--danger);
}

.badge.info {
    background: #e8f1fb;
    color: var(--info);
}

a.badge {
    text-decoration: none;
    cursor: pointer;
}

.duplicate-decision-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.duplicate-resolution {
    position: relative;
}

.duplicate-resolution > summary {
    list-style: none;
}

.duplicate-resolution > summary::-webkit-details-marker {
    display: none;
}

.duplicate-resolution[open] > summary {
    border-color: var(--primary);
    color: var(--primary);
}

.duplicate-resolution-form {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: min(560px, calc(100vw - 48px));
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    display: grid;
    gap: 10px;
}

.duplicate-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.duplicate-action-option {
    min-height: 70px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 4px;
    align-content: start;
}

.duplicate-action-option:has(input:checked) {
    border-color: var(--primary);
    background: #eef6ff;
}

.duplicate-action-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.duplicate-action-option strong {
    font-size: 13px;
    line-height: 1.2;
}

.duplicate-action-option small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.duplicate-resolution-fields {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    gap: 10px;
}

.duplicate-resolution-fields label {
    display: grid;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.duplicate-resolution-fields select,
.duplicate-resolution-fields textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 9px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: #fff;
}

.duplicate-resolution-fields textarea {
    resize: vertical;
    min-height: 58px;
}

.duplicate-resolution-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 820px) {
    .duplicate-resolution-form {
        position: fixed;
        inset: auto 12px 12px 12px;
        width: auto;
        max-height: calc(100vh - 24px);
        overflow: auto;
    }

    .duplicate-action-grid,
    .duplicate-resolution-fields {
        grid-template-columns: 1fr;
    }

    .duplicate-resolution-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

.member-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 210px;
}

.member-title strong {
    min-width: 0;
}

.readiness-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 360px;
}

.company-capacity-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(58px, 1fr));
    gap: 6px;
    min-width: 210px;
}

.company-capacity-mini span {
    min-height: 48px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.company-capacity-mini b,
.company-capacity-mini small {
    display: block;
}

.company-capacity-mini b {
    color: var(--text);
    font-size: 14px;
}

.company-capacity-mini small {
    color: var(--muted);
    font-size: 11px;
}

.signal-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 750;
    white-space: nowrap;
}

.status-signal {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
    background: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
}

.status-signal.active {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

.status-signal.online {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

.status-signal.available {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.status-signal.idle {
    background: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}

.status-signal.inactive {
    background: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.status-signal.offline {
    background: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.source-split {
    color: var(--muted);
    white-space: nowrap;
}

.source-split strong {
    color: var(--text);
}

.agent-drilldown-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 800;
}

.action-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.drilldown-kpis {
    display: grid;
    grid-template-columns: repeat(8, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.drilldown-kpis div {
    min-height: 76px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px;
}

.drilldown-kpis span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.drilldown-kpis strong {
    display: block;
    margin-top: 8px;
    font-size: 20px;
}

.detail-talk-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.detail-talk-filter span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.call-day-group {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.call-day-group + .call-day-group {
    margin-top: 12px;
}

.call-day-group summary {
    min-height: 48px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    background: #f3f6fa;
    color: var(--muted);
    font-weight: 750;
}

.call-day-group summary strong {
    color: var(--text);
    margin-right: auto;
}

.day-call-table table {
    min-width: 1080px;
}

.executive-report-hero .panel-header {
    align-items: flex-start;
}

.executive-report-filters {
    grid-template-columns: minmax(180px, 260px) minmax(220px, 1fr) minmax(180px, 270px);
}

.executive-range-tabs {
    gap: 8px;
    flex-wrap: wrap;
}

.executive-kpis {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.executive-trend-panel .panel-body {
    padding-top: 14px;
}

.executive-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.executive-day-card {
    min-height: 150px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.executive-day-card > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.executive-day-card strong {
    color: var(--text);
    font-size: 16px;
}

.executive-day-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.executive-day-bars {
    display: grid;
    gap: 8px;
}

.executive-day-bars span {
    height: 9px;
    border-radius: 999px;
    background: #e8eef5;
    overflow: hidden;
}

.executive-day-bars i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.executive-day-bars span + span i {
    background: #2f9e75;
}

.executive-day-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

@media (max-width: 900px) {
    .executive-report-filters,
    .executive-kpis {
        grid-template-columns: 1fr;
    }
}

.live-report-strip {
    min-height: 38px;
    margin-top: 14px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 750;
}

.realtime-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.realtime-kpi {
    min-height: 118px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.realtime-kpi span,
.realtime-kpi small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.realtime-kpi strong {
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0;
}

.report-live-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.report-live-filters .button {
    white-space: nowrap;
}

.filter-count {
    min-width: 22px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef3f8;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.button.primary .filter-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.realtime-agent-table {
    border: 1px solid var(--border);
    border-radius: 8px;
}

.realtime-agent-table table {
    min-width: 980px;
}

.realtime-agent-table th {
    background: #f3f6fa;
}

.agent-summary-cell {
    min-width: 230px;
}

.agent-meta-line,
.agent-under-line {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.agent-under-line {
    margin-top: 2px;
}

.agent-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.agent-search-box input {
    min-width: 0;
}

.agent-search-box .button {
    white-space: nowrap;
}

.agent-search-status {
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}

.report-compact-cell {
    min-width: 156px;
}

.report-action-cell {
    min-width: 132px;
}

.report-metric-stack {
    display: grid;
    gap: 8px;
}

.report-inline-metric {
    display: grid;
    gap: 2px;
}

.report-inline-metric strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
}

.report-inline-metric small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.color-significance .panel-body {
    padding-top: 14px;
}

.color-legend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: 10px 16px;
}

.color-legend-grid span {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.legend-chip {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
}

.legend-chip.info {
    background: var(--info);
    box-shadow: 0 0 0 3px rgba(50, 109, 181, 0.12);
}

.legend-chip.neutral {
    background: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.12);
}

.legend-chip.danger {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(183, 57, 57, 0.12);
}

.legend-chip.success {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(22, 120, 78, 0.12);
}

.role-tag {
    margin-left: auto;
    font-size: 11px;
    min-height: 22px;
    padding: 0 7px;
}

.alerts-filter-panel,
.alert-results-panel {
    scroll-margin-top: 16px;
}

.filters,
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.report-filters {
    grid-template-columns: minmax(190px, 230px) minmax(340px, 1fr) minmax(220px, 270px) minmax(128px, 150px);
    align-items: start;
}

.report-filters .field {
    align-self: start;
    align-content: start;
}

.report-filters input,
.report-filters select {
    min-height: 40px;
    height: 40px;
}

.report-date-field input[type="date"] {
    max-width: 230px;
}

.report-agent-field select {
    margin-top: 0;
}

.report-agent-field .agent-search-box .button {
    min-height: 40px;
}

.report-quick-field .actions {
    min-height: 40px;
    align-items: center;
    flex-wrap: nowrap;
}

.report-apply-field .button {
    width: 100%;
    min-height: 40px;
}

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

.field {
    display: grid;
    gap: 6px;
}

.password-field {
    position: relative;
}

.password-field input {
    position: relative;
    z-index: 1;
    padding-right: 84px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 3;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.password-toggle:hover {
    background: #f8fafc;
}

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

.payment-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.payment-alert-panel,
.payment-workbench,
#company-list,
#payment-history {
    margin-top: 16px;
}

.payment-alert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.payment-alert {
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.payment-alert strong,
.payment-alert span {
    display: block;
}

.payment-alert strong {
    margin-bottom: 4px;
    font-size: 13px;
}

.payment-alert span {
    color: var(--muted);
    font-size: 12px;
}

.payment-alert.warning {
    border-color: #f1d295;
    background: #fff9ec;
}

.payment-alert.danger {
    border-color: #efc0c0;
    background: #fff4f4;
}

.payment-profile-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.payment-profile-strip div,
.payment-control-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.payment-profile-strip div {
    min-height: 82px;
    padding: 12px;
}

.payment-profile-strip span,
.payment-profile-strip small,
.payment-control-card > span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.payment-profile-strip strong {
    display: block;
    margin: 4px 0 2px;
    overflow-wrap: anywhere;
}

.payment-workbench-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 14px;
    align-items: start;
}

.payment-control-card {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 8px;
    padding: 14px;
}

.payment-control-card .button {
    width: 100%;
    justify-content: center;
}

.payment-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.payment-edit-row input[readonly] {
    background: #f8fafc;
    color: var(--text);
    cursor: default;
}

.payment-edit-row input.is-editing {
    background: #fff;
}

.payment-edit-row .button {
    min-width: 72px;
    justify-content: center;
}

.payment-summary-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.payment-summary-card.full {
    grid-column: 1 / -1;
}

.payment-summary-card > span,
.payment-summary-card small,
.payment-summary-grid span {
    color: var(--muted);
    font-size: 12px;
}

.payment-summary-card > strong {
    font-size: 22px;
}

.payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.payment-summary-grid div {
    min-height: 70px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.payment-summary-grid strong,
.payment-summary-grid small {
    display: block;
    overflow-wrap: anywhere;
}

.payment-validity-card {
    display: grid;
    gap: 8px;
}

.payment-validity-display strong,
.payment-validity-display small {
    display: block;
}

.payment-validity-edit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.payment-validity-edit[hidden] {
    display: none;
}

.payment-validity-edit label,
.payment-validity-edit span {
    display: block;
}

.payment-validity-edit span {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
}

.payment-validity-card .button {
    width: fit-content;
}

.payment-company-users {
    padding: 0 16px 16px;
}

.payment-company-users-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin: 0 0 10px;
}

.payment-company-users-head strong,
.payment-company-users-head span {
    display: block;
}

.payment-company-users-head span {
    color: var(--muted);
    font-size: 12px;
}

.payment-filters {
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
}

.payment-status-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.payment-status-summary div {
    min-height: 78px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.payment-status-summary span,
.payment-status-summary small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.payment-status-summary strong {
    display: block;
    margin: 4px 0 2px;
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.payment-capacity-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 210px;
}

.payment-capacity-mini span {
    min-height: 48px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.payment-capacity-mini b,
.payment-capacity-mini small {
    display: block;
}

.payment-capacity-mini b {
    color: var(--text);
    font-size: 14px;
}

.payment-capacity-mini small {
    color: var(--muted);
    font-size: 11px;
}

.danger-text {
    color: var(--danger) !important;
    font-weight: 750;
}

.billing-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 16px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.billing-tabs a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 750;
}

.billing-tabs a:hover,
.billing-tabs a:focus-visible {
    border-color: var(--primary);
    color: var(--text);
}

.billing-company-hero {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2fr);
    gap: 14px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
}

.billing-company-summary h2 {
    margin: 10px 0 4px;
    font-size: 20px;
}

.billing-company-summary p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.billing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.billing-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.billing-mini-grid div,
.billing-command-card,
.billing-calculator-card,
.billing-ticket-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.billing-mini-grid div {
    min-height: 94px;
    padding: 12px;
}

.billing-mini-grid span,
.billing-mini-grid small,
.billing-command-card span,
.billing-command-card small,
.billing-calculator-card span,
.billing-calculator-card small,
.billing-ticket-card small {
    color: var(--muted);
    font-size: 12px;
}

.billing-mini-grid strong,
.billing-command-card strong,
.billing-ticket-amount strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
}

.billing-smart-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.billing-smart-strip span,
.billing-smart-strip small {
    color: var(--muted);
    font-size: 12px;
}

.billing-smart-strip strong {
    display: block;
    margin-top: 3px;
    font-size: 16px;
}

.billing-smart-strip.success {
    border-color: rgba(22, 120, 78, 0.28);
    background: #eefaf3;
}

.billing-smart-strip.warning {
    border-color: rgba(153, 101, 21, 0.3);
    background: #fff8e8;
}

.billing-smart-strip.danger {
    border-color: rgba(183, 57, 57, 0.28);
    background: #fff1f1;
}

.billing-command-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(180px, 0.8fr) minmax(220px, 0.9fr);
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.billing-command-card {
    min-height: 68px;
    padding: 11px 12px;
}

.billing-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-access-actions .button {
    width: fit-content;
}

.billing-details {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcfe;
}

.billing-details summary {
    min-height: 46px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 800;
}

.billing-details summary small {
    margin-left: 8px;
    color: var(--muted);
    font-weight: 600;
}

.billing-details .form-grid {
    padding: 0 14px 14px;
}

.billing-profile-view {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}

.billing-profile-view div {
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.billing-profile-view .full {
    grid-column: span 3;
}

.billing-profile-view span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.billing-profile-view strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.billing-profile-view .button {
    align-self: end;
    justify-content: center;
}

.billing-pay-box {
    max-width: 520px;
}

.billing-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 14px;
    align-items: start;
}

.billing-calculator-card {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.billing-calculator-card > strong {
    display: block;
    font-size: 26px;
    letter-spacing: 0;
}

.billing-calculator-card div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.billing-calculator-card p {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff1f1;
    color: var(--danger);
    font-size: 12px;
    font-weight: 750;
}

.billing-calculator-card p.warning {
    background: #fff8e8;
    color: var(--warning);
}

.billing-seat-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.billing-seat-presets button {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.billing-seat-presets button:hover,
.billing-seat-presets button:focus-visible {
    border-color: var(--primary);
    color: var(--text);
}

.billing-primary-actions .button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

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

.billing-ticket-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.8fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.billing-ticket-card strong {
    overflow-wrap: anywhere;
}

.billing-ticket-amount strong {
    margin-top: 0;
}

.billing-ticket-paid-form {
    margin: 0;
}

.billing-status-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fbfcfe;
}

.billing-status-summary div {
    min-height: 74px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.billing-status-summary span,
.billing-status-summary small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.billing-status-summary strong {
    display: block;
    margin: 5px 0 2px;
    font-size: 20px;
}

.billing-user-status-cell {
    min-width: 300px;
}

.billing-capacity-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.billing-capacity-line strong {
    font-size: 13px;
}

.billing-capacity-line span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.billing-capacity-bar {
    height: 8px;
    margin: 8px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.billing-capacity-bar span {
    display: block;
    width: var(--billing-usage, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #16a34a);
}

.billing-capacity-bar.over span {
    background: linear-gradient(90deg, #d97706, #dc2626);
}

.billing-capacity-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}

.billing-capacity-stats span {
    min-height: 46px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.billing-capacity-stats b,
.billing-capacity-stats small {
    display: block;
}

.billing-capacity-stats b {
    color: var(--text);
    font-size: 14px;
}

.billing-capacity-stats small {
    color: var(--muted);
    font-size: 11px;
}

.billing-capacity-warning {
    display: block;
    margin-bottom: 4px;
    color: var(--danger);
    font-size: 12px;
    font-weight: 750;
}

@media (max-width: 1100px) {
    .payment-kpis,
    .payment-profile-strip,
    .payment-summary-grid,
    .payment-status-summary,
    .payment-alert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payment-workbench-grid {
        grid-template-columns: 1fr;
    }

    .payment-control-card {
        position: static;
    }

    .billing-company-hero,
    .billing-payment-layout,
    .billing-command-grid {
        grid-template-columns: 1fr;
    }

    .billing-mini-grid,
    .billing-ticket-grid,
    .billing-status-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-calculator-card {
        position: static;
    }

    .billing-ticket-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .payment-kpis,
    .payment-profile-strip,
    .payment-summary-grid,
    .payment-status-summary,
    .payment-alert-grid {
        grid-template-columns: 1fr;
    }

    .payment-capacity-mini {
        min-width: 0;
    }

    .company-capacity-mini {
        min-width: 0;
    }

    .billing-tabs,
    .billing-smart-strip,
    .billing-ticket-card .actions {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-mini-grid,
    .billing-ticket-grid,
    .billing-status-summary {
        grid-template-columns: 1fr;
    }

    .billing-calculator-card > strong {
        font-size: 22px;
    }

    .billing-details summary small {
        display: block;
        margin: 2px 0 0;
    }

    .billing-profile-view,
    .billing-profile-view .full {
        grid-template-columns: 1fr;
        grid-column: auto;
    }
}
.form-section-title {
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.form-note {
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--muted);
    font-size: 13px;
}

.modal-open {
    overflow: hidden;
}

.team-chart-modal[hidden] {
    display: none;
}

.team-chart-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 28px;
}

.team-chart-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background: rgba(15, 23, 42, 0.44);
}

.team-chart-dialog {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100vw - 56px));
    max-height: calc(100vh - 56px);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.team-chart-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.team-chart-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.team-chart-body {
    padding: 18px;
    overflow: auto;
    display: grid;
    gap: 18px;
}

.org-company {
    min-width: 860px;
    display: grid;
    gap: 14px;
}

.org-company-node,
.org-person {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.org-company-node {
    padding: 14px;
    background: #f8fafc;
}

.org-company-node strong,
.org-person strong {
    display: block;
    color: var(--text);
}

.org-company-node span,
.org-person small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.org-node-icon,
.org-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex: 0 0 auto;
}

.org-manager-list {
    display: grid;
    gap: 14px;
}

.org-manager-branch {
    padding-left: 22px;
    border-left: 2px solid #dbe7f3;
    display: grid;
    gap: 12px;
}

.org-person {
    padding: 10px 12px;
}

.org-person.manager {
    max-width: 340px;
    background: #eef6fb;
}

.org-person.team-leader {
    max-width: 330px;
    background: #f4f8ff;
}

.org-person.executive {
    min-width: 230px;
}

.org-person.team-leader .org-avatar {
    background: #2563eb;
}

.org-person.executive .org-avatar {
    background: #0f766e;
}

.org-team-leader-list {
    margin-left: 34px;
    display: grid;
    gap: 12px;
}

.org-team-leader-branch {
    padding-left: 20px;
    border-left: 2px solid #e5edf7;
    display: grid;
    gap: 10px;
}

.org-executive-list {
    margin-left: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.org-executive-list.standalone {
    margin-left: 24px;
}

.org-manager-branch.unassigned {
    border-left-color: #f0c36a;
}

.org-person.muted-node {
    background: #fff8e8;
}

.org-person.muted-node .org-avatar {
    background: #ca8a04;
}

.org-empty {
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: #fbfdff;
    font-size: 13px;
}

label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    padding: 8px 10px;
    outline: none;
}

textarea {
    min-height: 88px;
    resize: vertical;
}

.brand-color-picker {
    display: grid;
    gap: 10px;
}

.brand-color-preview {
    min-height: 118px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 -42px 80px rgba(0, 0, 0, 0.18);
}

.brand-color-preview span {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.brand-color-controls {
    display: grid;
    gap: 10px;
}

.brand-color-native {
    min-height: 42px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
}

.brand-color-native input[type="color"] {
    width: 54px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.brand-color-presets {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.brand-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    min-height: 32px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), var(--soft-shadow);
    cursor: pointer;
}

.brand-color-swatch.active {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(23, 107, 145, 0.16);
}

.attachment-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.attachment-list-editor {
    display: grid;
    gap: 10px;
}

.attachment-editor-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) 42px;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.existing-attachment-row {
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) minmax(150px, 180px);
}

.attachment-description {
    grid-column: 1 / -2;
}

.attachment-description textarea {
    min-height: 170px;
    line-height: 1.5;
    resize: vertical;
}

.existing-attachment-row .attachment-description {
    grid-column: 1 / -1;
}

.file-chip {
    display: grid;
    gap: 4px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.file-chip strong,
.file-chip small {
    overflow-wrap: anywhere;
}

.file-chip small {
    color: var(--muted);
}

.upload-preview {
    margin-top: 8px;
    min-height: 78px;
    border: 1px dashed #c9d7e8;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.upload-preview-media {
    min-height: 78px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.upload-preview-media img,
.upload-preview-media video {
    width: 96px;
    height: 78px;
    object-fit: cover;
    background: #e8eef6;
}

.upload-preview-file {
    width: 96px;
    height: 78px;
    background: linear-gradient(135deg, rgba(23, 107, 145, 0.16), rgba(23, 107, 145, 0.06));
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.upload-preview-file i {
    width: 28px;
    height: 28px;
}

.upload-preview-copy {
    min-width: 0;
    padding: 8px 10px 8px 0;
}

.upload-preview-copy strong,
.upload-preview-copy small {
    display: block;
    overflow-wrap: anywhere;
}

.upload-preview-copy small {
    margin-top: 3px;
    color: var(--muted);
}

.attachment-remove {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
}

.attachment-summary {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    min-width: 240px;
}

.attachment-summary div {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.attachment-summary strong,
.attachment-summary small {
    display: block;
}

.attachment-summary strong {
    font-size: 13px;
}

.attachment-summary small {
    margin-top: 2px;
    color: var(--muted);
}

.attachment-preview-grid {
    min-width: 280px;
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
    gap: 8px;
}

.attachment-preview-card {
    min-width: 0;
    min-height: 82px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f8fafc;
    color: var(--text);
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.attachment-preview-card:hover,
.attachment-preview-card:focus-visible {
    border-color: rgba(23, 107, 145, 0.42);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    outline: 0;
}

.attachment-preview-thumb {
    min-width: 0;
    width: 82px;
    height: 82px;
    background: linear-gradient(135deg, #eaf4fb, #f8fafc);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.attachment-preview-thumb img,
.attachment-preview-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attachment-preview-thumb > i {
    width: 30px;
    height: 30px;
}

.attachment-play-badge {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.attachment-play-badge i {
    width: 16px;
    height: 16px;
}

.attachment-preview-info {
    min-width: 0;
    padding: 10px;
    display: grid;
    align-content: center;
}

.attachment-preview-info strong,
.attachment-preview-info small {
    display: block;
    overflow-wrap: anywhere;
}

.attachment-preview-info strong {
    font-size: 13px;
    line-height: 1.25;
}

.attachment-preview-info small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.attachment-preview-empty {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.content-preview-modal[hidden] {
    display: none;
}

.content-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    padding: 28px;
    background: rgba(15, 23, 42, 0.72);
    display: grid;
    align-items: center;
    justify-items: center;
}

.content-preview-dialog {
    width: min(960px, 100%);
    max-height: calc(100vh - 56px);
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) auto;
    overflow: hidden;
    position: relative;
}

.content-preview-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.content-preview-head h2 {
    margin: 8px 0 0;
    font-size: 20px;
    line-height: 1.2;
}

.content-preview-head p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.content-preview-frame {
    min-height: 320px;
    background: #0f172a;
    display: grid;
    align-items: center;
    justify-items: center;
}

.content-preview-frame img,
.content-preview-frame video {
    max-width: 100%;
    max-height: min(68vh, 640px);
    width: auto;
    height: auto;
    display: block;
}

.content-preview-frame iframe {
    width: 100%;
    height: min(68vh, 640px);
    min-height: 420px;
    border: 0;
    background: #fff;
}

.content-preview-fallback {
    padding: 28px;
    color: #fff;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.content-preview-fallback i {
    width: 44px;
    height: 44px;
}

.content-preview-actions {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 106, 143, 0.12);
}

.alert {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: #fff;
}

.alert.success {
    border-color: #b8e4cf;
    background: #ecf9f3;
    color: var(--success);
}

.alert.danger {
    border-color: #efc0c0;
    background: #fff0f0;
    color: var(--danger);
}

.alert.warning {
    border-color: #f4d58d;
    background: #fff8e6;
    color: #8a5a00;
}

.alert a {
    color: inherit;
    font-weight: 800;
}

.app-popup-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10050;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.app-popup {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    animation: appPopupIn 160ms ease-out;
}

.app-popup.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.app-popup.danger {
    border-color: #efc0c0;
    border-left-color: var(--danger);
}

.app-popup.warning {
    border-color: #f4d58d;
    border-left-color: #b77900;
}

.app-popup.success {
    border-color: #b8e4cf;
    border-left-color: var(--success);
}

.app-popup.info {
    border-left-color: var(--primary);
}

.app-popup-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f8fafc;
}

.app-popup-icon svg,
.app-popup-close svg {
    width: 18px;
    height: 18px;
}

.app-popup.danger .app-popup-icon {
    background: #fff0f0;
    color: var(--danger);
}

.app-popup.warning .app-popup-icon {
    background: #fff8e6;
    color: #8a5a00;
}

.app-popup.success .app-popup-icon {
    background: #ecf9f3;
    color: var(--success);
}

.app-popup-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.app-popup-copy strong {
    color: var(--text);
    font-size: 14px;
}

.app-popup-copy span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.app-popup-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.app-popup-close:hover,
.app-popup-close:focus-visible {
    background: #eef2f7;
    color: var(--text);
}

@keyframes appPopupIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .app-popup-stack {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
    background: linear-gradient(135deg, #f5f7fb 0%, #e8f1ef 100%);
}

.login-box {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 26px;
}

.login-box.register-box {
    width: min(720px, 100%);
}

.login-logo {
    display: block;
    width: min(100%, 230px);
    height: auto;
    margin: 0 auto 18px;
    object-fit: contain;
}

.login-box h1 {
    margin: 0 0 8px;
    font-size: 24px;
    text-align: center;
}

.login-box p {
    margin: 0 0 20px;
    color: var(--muted);
    text-align: center;
}

.login-box .login-policy-link {
    margin: 16px 0 0;
    font-size: 13px;
}

.login-policy-link a {
    color: var(--primary);
    font-weight: 800;
}

.login-policy-link a:hover {
    color: var(--primary-dark);
}

.login-company-link {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
}

.login-company-link a {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: #f8fbfd;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 850;
}

.login-company-link a:hover {
    border-color: var(--primary);
    background: #eef6fb;
    color: var(--primary-dark);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: #718096;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
}

.login-register-panel {
    padding: 16px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fbfd 0%, #eef6fb 100%);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    text-align: left;
}

.login-register-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.login-register-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.login-register-eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.login-register-panel strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
}

.login-register-panel span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.login-register-action {
    grid-column: 1 / -1;
    min-height: 38px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 850;
}

.login-register-action:hover {
    background: var(--primary);
    color: #fff;
}

.login-register-panel a,
.register-consent a {
    color: var(--primary);
    font-weight: 800;
}

.register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
    text-align: left;
}

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

.register-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.register-consent input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.register-trial-note {
    margin-top: 16px;
    padding: 13px 14px;
    border: 1px solid #bfe5d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    line-height: 1.5;
}

.register-switch {
    margin-top: 16px;
}

.register-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 720px) {
    .login-page {
        align-items: start;
        padding: 16px;
    }

    .login-box,
    .login-box.register-box {
        padding: 22px;
    }

    .register-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.timeline {
    display: grid;
    gap: 12px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.chart-bars {
    display: grid;
    gap: 12px;
}

.chart-bar {
    display: grid;
    grid-template-columns: 130px 1fr 52px;
    gap: 10px;
    align-items: center;
}

.bar-track {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--primary);
}

.dashboard-toolbar {
    min-height: 62px;
    border-bottom: 1px solid var(--border);
    margin: -22px -28px 26px;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fresh-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #15935f;
    font-weight: 750;
    padding: 0 10px;
    min-height: 34px;
}

.fresh-chip svg {
    width: 17px;
    height: 17px;
}

.live-updated {
    animation: livePulse 0.5s ease;
}

[data-reports-live-root] {
    position: relative;
}

[data-reports-live-root].is-loading {
    pointer-events: none;
}

[data-reports-live-root].is-loading::before {
    content: "Loading...";
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 10;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    font-size: 12px;
    font-weight: 800;
}

[data-reports-live-root].is-loading > * {
    opacity: 0.58;
}

[data-reports-filter-panel].is-loading .report-filters {
    pointer-events: none;
    opacity: 0.64;
}

[data-monitor-root] {
    position: relative;
}

[data-monitor-root].is-loading {
    pointer-events: none;
}

[data-monitor-root].is-loading::before {
    content: "Loading...";
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 10;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    font-size: 12px;
    font-weight: 800;
}

[data-monitor-root].is-loading > * {
    opacity: 0.58;
}

@keyframes livePulse {
    0% {
        background-color: rgba(35, 153, 213, 0.14);
    }
    100% {
        background-color: transparent;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.dashboard-main {
    display: grid;
    gap: 18px;
}

.dashboard-main .metric-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

.dashboard-main .metric {
    padding: 16px 18px;
}

.dashboard-main .metric strong {
    font-size: 24px;
    margin-top: 14px;
}

.dashboard-main .metric-top {
    gap: 8px;
}

.dashboard-main .metric-top span,
.dashboard-main .metric small {
    font-size: 12px;
}

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

.trend {
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.trend.good {
    background: #dff5eb;
    color: #126e4b;
}

.trend.info {
    background: #e8f1fb;
    color: #175d86;
}

.chart-panel .panel-header {
    border-bottom: 0;
    padding-bottom: 0;
}

.chart-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chart-help {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.chart-help svg {
    width: 17px;
    height: 17px;
}

.range-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #f7f9fc;
    color: #9aa4b2;
}

.range-tabs a,
.range-tabs span {
    min-width: 42px;
    min-height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 750;
    padding: 0 10px;
    color: inherit;
    cursor: pointer;
}

.range-tabs .active {
    background: #fff;
    color: var(--text);
    box-shadow: var(--soft-shadow);
}

.line-chart {
    min-height: 260px;
    padding: 22px 28px 18px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
    background:
        linear-gradient(to top, rgba(228, 232, 239, 0.7) 1px, transparent 1px) 0 0 / 100% 25%;
}

.trend-column {
    position: relative;
    height: 220px;
    display: grid;
    grid-template-rows: 1fr 22px;
    align-items: end;
    justify-items: center;
    gap: 8px;
}

.trend-bar {
    width: min(100%, 34px);
    min-height: 18px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #2399d5 0%, #0f5f84 100%);
    box-shadow: 0 10px 18px rgba(23, 107, 145, 0.16);
}

.trend-column small {
    color: #98a2b3;
    font-weight: 700;
}

.tooltip-target {
    position: relative;
}

.tooltip-target::after,
.tooltip-target::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.tooltip-target::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 6px);
    z-index: 30;
    width: max-content;
    max-width: min(310px, calc(100vw - 56px));
    padding: 10px 12px;
    border: 1px solid rgba(15, 82, 110, 0.18);
    border-radius: 8px;
    background: #101828;
    color: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

.tooltip-target::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 6px);
    z-index: 31;
    border: 6px solid transparent;
    border-top-color: #101828;
}

.tooltip-target:hover::after,
.tooltip-target:hover::before,
.tooltip-target:focus-visible::after,
.tooltip-target:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.trend-column:hover .trend-bar,
.trend-column:focus-visible .trend-bar {
    box-shadow: 0 14px 24px rgba(23, 107, 145, 0.26);
    filter: saturate(1.12);
}

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

.panel-header.compact {
    min-height: 54px;
    padding: 14px 16px;
}

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

.pipeline-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.pipeline-card span {
    display: block;
    width: 34px;
    height: 5px;
    border-radius: 999px;
    background: #2399d5;
    margin-bottom: 14px;
}

.pipeline-card:nth-child(2) span {
    background: #176b91;
}

.pipeline-card:nth-child(3) span {
    background: #0f526e;
}

.pipeline-card:nth-child(4) span {
    background: #c9d2de;
}

.pipeline-card strong {
    display: block;
    margin-bottom: 6px;
}

.pipeline-card p {
    margin: 0;
    color: var(--muted);
}

.chart-bars.modern {
    gap: 14px;
}

.performance-list {
    gap: 16px;
}

.performance-row {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 0 10px;
    border-bottom: 1px solid rgba(15, 82, 110, 0.08);
}

.performance-row:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.performance-main {
    min-width: 0;
}

.performance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.performance-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.performance-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.performance-link:hover,
.performance-link:focus-visible {
    color: var(--primary);
    border-bottom-color: rgba(35, 153, 213, 0.35);
    outline: none;
}

.performance-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.performance-breakdown {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
}

.performance-breakdown span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.performance-breakdown i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.performance-breakdown .dial i {
    background: #2399d5;
}

.performance-breakdown .talk i {
    background: #2ac08b;
}

.performance-breakdown .connect {
    color: #176b91;
}

.performance-track {
    display: block;
    width: clamp(180px, 68%, 320px);
    max-width: 100%;
    position: relative;
    height: 10px;
    margin-top: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(35, 153, 213, 0.06), rgba(38, 186, 136, 0.08)),
        var(--surface-2);
    box-shadow: inset 0 0 0 1px rgba(15, 82, 110, 0.06);
}

.performance-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
}

.performance-fill.dial {
    left: 0;
    background: linear-gradient(90deg, #2399d5 0%, #176b91 100%);
    box-shadow: 0 4px 10px rgba(23, 107, 145, 0.14);
}

.performance-fill.talk {
    background: linear-gradient(90deg, #2ac08b 0%, #16845f 100%);
    box-shadow: 0 4px 10px rgba(22, 132, 95, 0.14);
}

.loser-row .performance-activity {
    background: #fff6eb;
    color: #b45b12;
    box-shadow: inset 0 0 0 1px rgba(230, 147, 46, 0.16);
}

.loser-row .performance-breakdown .connect {
    color: #b45b12;
}

.loser-row .performance-fill.dial {
    background: linear-gradient(90deg, #f2a33b 0%, #cf6f1d 100%);
    box-shadow: 0 4px 10px rgba(207, 111, 29, 0.16);
}

.loser-row .performance-fill.talk {
    background: linear-gradient(90deg, #f0c66e 0%, #d89c25 100%);
    box-shadow: 0 4px 10px rgba(216, 156, 37, 0.16);
}

.performance-activity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #0f5f84;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(35, 153, 213, 0.12);
}

.dashboard-side {
    display: grid;
    gap: 18px;
}

.date-pill {
    min-height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 750;
    color: var(--muted);
    background: #fff;
}

.date-picker {
    min-height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: #fff;
    cursor: pointer;
}

.date-picker svg {
    width: 17px;
    height: 17px;
}

.date-picker input {
    width: 126px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.date-picker input:focus {
    border-color: transparent;
    box-shadow: none;
}

.agenda-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
}

.agenda-list div {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfe;
}

.agenda-list small {
    color: var(--muted);
    font-weight: 700;
}

.agenda-list strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
}

.schedule-list,
.activity-feed {
    padding: 14px;
    display: grid;
    gap: 10px;
}

.schedule-card {
    display: grid;
    gap: 3px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcfe;
}

.schedule-card span,
.schedule-card small {
    color: var(--muted);
}

.activity-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

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

.activity-item > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2399d5;
    margin-top: 5px;
}

.activity-item strong {
    text-transform: capitalize;
}

.activity-item p {
    margin: 2px 0;
    color: var(--muted);
}

.activity-item small {
    color: #98a2b3;
}

.empty.slim {
    padding: 16px;
}

.dashboard-table {
    margin-top: 20px;
}

.empty {
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

body.public-home {
    display: block;
    background: #eef3f8;
}

.home-header {
    min-height: 78px;
    padding: 0 40px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.home-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.home-brand img {
    width: 156px;
    height: auto;
    display: block;
}

.home-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.home-nav a {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    font-weight: 750;
}

.home-nav a:hover {
    background: #f1f4f8;
    color: var(--text);
}

.home-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-main {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.home-hero {
    min-height: calc(100vh - 78px);
    padding: 46px 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    align-items: center;
    gap: 34px;
}

.home-hero-copy {
    display: grid;
    gap: 18px;
}

.home-eyebrow,
.home-section-kicker,
.home-badge {
    color: var(--primary);
    font-weight: 850;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0;
}

.home-eyebrow {
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfe0ec;
    border-radius: 999px;
    background: #f8fbfd;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-eyebrow svg,
.home-feature-list svg,
.home-subscribe-actions svg,
.home-hero-actions svg {
    width: 18px;
    height: 18px;
}

.home-hero h1 {
    margin: 0;
    max-width: 760px;
    color: var(--text);
    font-size: 58px;
    line-height: 1.02;
    letter-spacing: 0;
}

.home-hero p,
.home-featured-content p,
.home-creator p,
.home-subscribe p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}

.home-search {
    min-height: 60px;
    max-width: 720px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.home-search svg {
    width: 22px;
    height: 22px;
    color: var(--muted);
    margin-left: 10px;
}

.home-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: 15px;
}

.home-hero-actions,
.home-feature-list,
.home-subscribe-actions,
.home-creator-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.home-hero-stage {
    display: flex;
    justify-content: center;
}

.home-player-card {
    width: min(100%, 520px);
    border: 1px solid #d8e2ed;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.home-player-top {
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}

.home-player-top strong {
    color: var(--text);
    margin-right: auto;
}

.home-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d92d20;
    box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.12);
}

.home-player-screen,
.home-featured-thumb,
.home-video-thumb {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(23, 107, 145, 0.92), rgba(22, 120, 78, 0.82)),
        url("logo-icon.png");
    background-size: auto, 140px;
    background-position: center;
    background-repeat: no-repeat;
}

.home-player-screen {
    min-height: 286px;
    display: grid;
    place-items: center;
}

.home-play-button,
.home-mini-play {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 32px rgba(20, 28, 38, 0.22);
}

.home-play-button.large {
    width: 78px;
    height: 78px;
}

.home-play-button svg,
.home-mini-play svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.home-video-overlay {
    position: absolute;
    right: 16px;
    bottom: 16px;
    min-width: 136px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--muted);
    box-shadow: var(--soft-shadow);
}

.home-video-overlay strong {
    display: block;
    color: var(--text);
    font-size: 30px;
    line-height: 1;
}

.home-player-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.home-player-stats span {
    padding: 14px;
    color: var(--muted);
    border-right: 1px solid var(--border);
}

.home-player-stats span:last-child {
    border-right: 0;
}

.home-player-stats strong {
    display: block;
    color: var(--text);
    font-size: 18px;
}

.home-categories {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 0 28px;
    scrollbar-width: thin;
}

.home-chip {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    font-weight: 800;
}

.home-chip.active,
.home-chip:hover {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
}

.home-section {
    padding: 28px 0;
}

.home-section-header {
    margin-bottom: 16px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.home-section-header h2,
.home-featured-content h3,
.home-creator h2,
.home-subscribe h2 {
    margin: 3px 0 0;
    color: var(--text);
    font-size: 31px;
    line-height: 1.18;
    letter-spacing: 0;
}

.home-featured-video {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
}

.home-featured-thumb {
    min-height: 340px;
    display: grid;
    place-items: center;
}

.home-duration,
.home-video-tag {
    position: absolute;
    border-radius: 6px;
    background: rgba(12, 18, 28, 0.88);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}

.home-duration {
    right: 12px;
    bottom: 12px;
    padding: 4px 7px;
}

.home-video-tag {
    left: 12px;
    top: 12px;
    padding: 5px 8px;
}

.home-featured-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.home-feature-list span {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 750;
}

.home-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-video-card {
    display: grid;
    gap: 12px;
}

.home-video-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: 1px solid rgba(20, 28, 38, 0.08);
    display: grid;
    place-items: center;
}

.home-video-thumb.tone-2 {
    background:
        linear-gradient(135deg, rgba(50, 109, 181, 0.92), rgba(153, 101, 21, 0.8)),
        url("logo-icon.png");
    background-size: auto, 128px;
    background-position: center;
    background-repeat: no-repeat;
}

.home-video-thumb.tone-3 {
    background:
        linear-gradient(135deg, rgba(22, 120, 78, 0.92), rgba(15, 82, 110, 0.84)),
        url("logo-icon.png");
    background-size: auto, 128px;
    background-position: center;
    background-repeat: no-repeat;
}

.home-video-thumb.tone-4 {
    background:
        linear-gradient(135deg, rgba(183, 57, 57, 0.9), rgba(23, 107, 145, 0.78)),
        url("logo-icon.png");
    background-size: auto, 128px;
    background-position: center;
    background-repeat: no-repeat;
}

.home-mini-play {
    width: 46px;
    height: 46px;
}

.home-mini-play svg {
    width: 20px;
    height: 20px;
}

.home-video-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
}

.home-channel-mark {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.home-video-info h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.35;
}

.home-video-info p,
.home-video-info small,
.home-playlist-card p,
.home-playlist-card small {
    margin: 2px 0 0;
    color: var(--muted);
}

.home-playlist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-playlist-card {
    min-height: 160px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.home-playlist-card strong {
    color: var(--text);
    font-size: 18px;
}

.home-playlist-stack {
    height: 96px;
    position: relative;
}

.home-playlist-stack span {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: #d9e6ef;
    border: 1px solid #c4d4df;
}

.home-playlist-stack span:nth-child(2) {
    transform: translate(8px, 8px);
    background: #c9dbe8;
}

.home-playlist-stack span:nth-child(3) {
    transform: translate(16px, 16px);
    background: var(--primary);
}

.home-creator,
.home-subscribe {
    margin: 28px 0;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--soft-shadow);
}

.home-creator {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}

.home-creator-avatar {
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: #eef3f8;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.home-creator-avatar img {
    width: 78px;
    height: auto;
}

.home-creator-stats {
    margin-top: 16px;
}

.home-creator-stats span {
    min-height: 54px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f5f8fb;
    color: var(--muted);
}

.home-creator-stats strong {
    display: block;
    color: var(--text);
}

.home-subscribe {
    background: #111827;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.home-subscribe h2 {
    color: #fff;
}

.home-subscribe p {
    color: #cbd5e1;
}

.home-subscribe .home-section-kicker {
    color: #8bd4f0;
}

.home-subscribe .button:not(.primary) {
    background: #fff;
    color: var(--text);
    border-color: #fff;
}

.home-footer {
    min-height: 80px;
    padding: 20px 40px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.home-footer nav {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 750;
}

.home-footer a:hover {
    color: var(--text);
}

@media (max-width: 1100px) {
    .realtime-kpis,
    .color-legend-grid,
    .drilldown-kpis,
    .metric-row,
    .dashboard-main .metric-row,
    .dashboard-lower,
    .grid.four,
    .grid.three,
    .filters,
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .report-date-field input[type="date"] {
        max-width: none;
    }

    .home-header {
        padding-inline: 24px;
    }

    .home-hero,
    .home-featured-video,
    .home-creator {
        grid-template-columns: 1fr;
    }

    .home-hero {
        min-height: 0;
        padding-top: 34px;
    }

    .home-video-grid,
    .home-playlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body {
        display: block;
    }

    .home-header {
        min-height: auto;
        padding: 14px 16px;
        align-items: flex-start;
        flex-direction: column;
    }

    .home-brand img {
        width: 138px;
    }

    .home-nav {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .home-header-actions {
        width: 100%;
    }

    .home-header-actions .button {
        flex: 1;
    }

    .home-main {
        width: calc(100% - 28px);
    }

    .home-hero h1 {
        font-size: 38px;
    }

    .home-search {
        border-radius: 14px;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .home-search .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .home-player-stats,
    .home-video-grid,
    .home-playlist-grid {
        grid-template-columns: 1fr;
    }

    .home-player-stats span {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .home-player-stats span:last-child {
        border-bottom: 0;
    }

    .home-section-header,
    .home-subscribe,
    .home-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-featured-content,
    .home-creator,
    .home-subscribe {
        padding: 20px;
    }

    .home-playlist-card {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .home-playlist-stack {
        height: 80px;
    }

    .home-subscribe-actions,
    .home-subscribe-actions .button {
        width: 100%;
    }

    .home-footer {
        padding: 18px 16px;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        margin-left: 0;
        transform: translateX(-100%);
    }

    body.menu-open .sidebar {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
        padding: 0 16px 18px;
    }

    body.sidebar-collapsed .main {
        margin-left: 0;
    }

    body.sidebar-collapsed .sidebar {
        margin-left: 0;
        transform: translateX(-100%);
    }

    .topbar {
        flex-wrap: wrap;
        margin: 0 -16px 18px;
        padding: 0 16px;
    }

    .topbar-billing-badge {
        width: auto;
        flex: 0 0 calc(100% - 52px);
        margin-left: 52px;
        justify-content: space-between;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .metric-row,
    .realtime-kpis,
    .color-legend-grid,
    .drilldown-kpis,
    .dashboard-main .metric-row,
    .dashboard-lower,
    .agenda-list,
    .grid.two,
    .grid.three,
    .grid.four,
    .filters,
    .form-grid,
    .form-grid.two {
        grid-template-columns: 1fr;
    }

    .report-filters {
        grid-template-columns: 1fr;
    }

    .report-quick-field .actions {
        flex-wrap: wrap;
    }

    .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-chart-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .team-chart-header {
        align-items: flex-start;
        padding: 14px;
    }

    .team-chart-body {
        padding: 14px;
    }

    .org-company {
        min-width: 720px;
    }

    .timeline-item,
    .chart-bar {
        grid-template-columns: 1fr;
    }

    .dashboard-toolbar {
        align-items: flex-start;
        flex-direction: column;
        margin: -18px -16px 18px;
        padding: 12px 16px;
    }

    .attachment-header,
    .attachment-editor-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .attachment-description,
    .attachment-remove {
        grid-column: auto;
        grid-row: auto;
    }

    .attachment-header {
        flex-direction: column;
    }

    .line-chart {
        gap: 8px;
        padding-inline: 14px;
    }
}

/* TDO CRM public landing page */
html.public-page {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html.public-page {
        scroll-behavior: auto;
    }

    .tdo-live-pill i,
    .tdo-preview-main.is-refreshing .tdo-preview-metrics div,
    .tdo-preview-main.is-refreshing .tdo-status-list article:first-child {
        animation: none;
    }
}

body.tdo-home {
    background: #f1f5f9;
    color: var(--text);
}

html.public-page,
body.public-home {
    max-width: 100%;
    overflow-x: hidden;
}

.public-home main [id] {
    scroll-margin-top: 104px;
}

.tdo-site-header {
    min-height: 76px;
    padding: 0 clamp(18px, 4vw, 56px);
    border-bottom: 1px solid rgba(199, 210, 224, 0.78);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.tdo-site-header > * {
    min-width: 0;
}

.tdo-site-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.tdo-site-brand img {
    width: 158px;
    height: auto;
    display: block;
}

.tdo-site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.tdo-site-nav a {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    font-weight: 750;
    white-space: nowrap;
}

.tdo-site-nav a:hover {
    background: #f1f5f9;
    color: var(--text);
}

.tdo-site-nav a.active {
    background: #e9f3fa;
    color: var(--primary);
}

.tdo-site-actions,
.tdo-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tdo-store-header-link {
    border-color: #cfe6d9;
    background: #ecf7f1;
    color: var(--success);
    font-weight: 850;
}

.tdo-store-header-link:hover,
.tdo-store-header-link:focus-visible {
    border-color: #bde8d4;
    background: #e0f2e8;
    outline: 0;
}

.tdo-hero {
    padding: 64px clamp(18px, 4vw, 56px) 44px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(203, 213, 225, 0.8);
}

.tdo-hero-inner,
.tdo-section,
.tdo-metric-strip,
.tdo-final-cta,
.tdo-footer {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.tdo-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    align-items: center;
    gap: 42px;
}

.tdo-hero-copy {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.tdo-kicker {
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cfe0ec;
    border-radius: 999px;
    background: #f8fbfd;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.tdo-kicker svg,
.tdo-hero-actions svg,
.tdo-feature-card svg,
.tdo-buy-cards svg,
.tdo-security-list svg {
    width: 18px;
    height: 18px;
}

.tdo-hero h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: 0.98;
    letter-spacing: 0;
}

.tdo-hero p,
.tdo-section-copy p,
.tdo-problem-grid p,
.tdo-feature-card p,
.tdo-workflow-grid p,
.tdo-role-grid p,
.tdo-pricing-card p,
.tdo-buy-panel p,
.tdo-security p,
.tdo-final-cta p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.68;
}

.tdo-hero p {
    max-width: 650px;
    font-size: 18px;
}

.tdo-play-badge {
    width: fit-content;
    max-width: 100%;
    min-height: 70px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    box-shadow: 0 16px 36px rgba(31, 42, 68, 0.18);
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.tdo-play-badge:hover,
.tdo-play-badge:focus-visible {
    background: var(--primary-2);
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(31, 42, 68, 0.22);
    outline: 0;
}

.tdo-play-badge small,
.tdo-play-badge strong {
    display: block;
}

.tdo-play-badge small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.tdo-play-badge strong {
    margin-top: 2px;
    font-size: 18px;
    line-height: 1.2;
}

.tdo-play-badge svg {
    width: 18px;
    height: 18px;
}

.tdo-play-mark {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tdo-proof-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.tdo-proof-row span {
    min-height: 66px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--muted);
    box-shadow: var(--soft-shadow);
}

.tdo-proof-row strong {
    display: block;
    color: var(--text);
    font-size: 18px;
}

.tdo-product-visual {
    min-width: 0;
}

.tdo-product-window {
    max-width: 100%;
    border: 1px solid #d5e0ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(31, 42, 68, 0.18);
    overflow: hidden;
}

.tdo-window-bar {
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.tdo-window-bar span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d92d20;
}

.tdo-window-bar span:nth-child(2) {
    background: #f59e0b;
}

.tdo-window-bar span:nth-child(3) {
    background: #16a34a;
    margin-right: 6px;
}

.tdo-window-bar strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
}

.tdo-dashboard-preview {
    min-height: 430px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    background: #f4f7fb;
}

.tdo-dashboard-preview aside {
    padding: 18px 12px;
    background: #ffffff;
    border-right: 1px solid var(--border);
    display: grid;
    align-content: start;
    gap: 9px;
}

.tdo-dashboard-preview aside img {
    width: 46px;
    height: auto;
    margin: 0 auto 10px;
}

.tdo-dashboard-preview aside span,
.tdo-dashboard-preview aside button {
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.tdo-dashboard-preview aside span.active,
.tdo-dashboard-preview aside button.active {
    background: #e9f3fa;
    color: var(--primary);
}

.tdo-dashboard-preview aside button:hover,
.tdo-dashboard-preview aside button:focus-visible {
    background: #f1f5f9;
    color: var(--text);
    outline: 0;
}

.tdo-dashboard-preview aside button.active:hover,
.tdo-dashboard-preview aside button.active:focus-visible {
    background: #e9f3fa;
    color: var(--primary);
}

.tdo-preview-main {
    min-width: 0;
    padding: 18px;
    display: grid;
    gap: 14px;
}

.tdo-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tdo-preview-head small {
    color: var(--muted);
    display: block;
}

.tdo-preview-head strong {
    color: var(--text);
    font-size: 22px;
    overflow-wrap: anywhere;
}

.tdo-live-pill {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e7f7ef;
    color: var(--success);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 850;
}

.tdo-live-pill i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(22, 120, 78, 0.14);
    animation: tdoLivePulse 1800ms ease-in-out infinite;
}

.tdo-preview-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.tdo-filter-preview {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tdo-filter-preview span,
.tdo-filter-preview button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.tdo-filter-preview span.active,
.tdo-filter-preview button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.tdo-filter-preview button:hover,
.tdo-filter-preview button:focus-visible {
    transform: translateY(-1px);
    border-color: #bed2e2;
    color: var(--text);
    outline: 0;
}

.tdo-filter-preview button.active:hover,
.tdo-filter-preview button.active:focus-visible {
    color: #fff;
    border-color: var(--primary);
}

.tdo-preview-metrics div,
.tdo-status-list div,
.tdo-status-list article {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.tdo-preview-metrics div {
    min-width: 0;
    min-height: 92px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tdo-preview-metrics span,
.tdo-status-list small {
    color: var(--muted);
    font-size: 12px;
}

.tdo-preview-metrics strong {
    color: var(--text);
    font-size: 28px;
    line-height: 1;
}

.tdo-status-list {
    display: grid;
    gap: 10px;
}

.tdo-status-list div,
.tdo-status-list article {
    min-height: 58px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: center;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.tdo-status-list .status-signal {
    grid-row: span 2;
}

.tdo-status-list strong {
    color: var(--text);
}

.tdo-status-list small {
    display: block;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tdo-preview-row > div {
    min-width: 0;
}

.tdo-status-list article:hover {
    transform: translateY(-1px);
    border-color: #c8d8e6;
    box-shadow: 0 10px 22px rgba(31, 42, 68, 0.1);
}

.tdo-preview-row.is-connected {
    border-color: #bde8d4;
    background: #f5fbf8;
}

.tdo-preview-action {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #bde8d4;
    border-radius: 999px;
    background: #ecf7f1;
    color: var(--success);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

.tdo-preview-action:hover,
.tdo-preview-action:focus-visible {
    background: var(--success);
    color: #fff;
    outline: 0;
}

.tdo-preview-action.is-done,
.tdo-preview-action:disabled {
    cursor: default;
    background: #e7f7ef;
    color: var(--success);
    opacity: 0.78;
}

.tdo-preview-main.is-refreshing .tdo-preview-metrics div {
    animation: tdoMetricPulse 520ms ease;
}

.tdo-preview-main.is-refreshing .tdo-status-list article:first-child {
    animation: tdoPreviewRise 520ms ease;
}

@keyframes tdoLivePulse {
    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(22, 120, 78, 0.14);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(22, 120, 78, 0.06);
    }
}

@keyframes tdoMetricPulse {
    0% {
        transform: translateY(0);
        border-color: var(--border);
    }

    45% {
        transform: translateY(-2px);
        border-color: #bed2e2;
    }

    100% {
        transform: translateY(0);
        border-color: var(--border);
    }
}

@keyframes tdoPreviewRise {
    0% {
        transform: translateY(8px);
        opacity: 0.55;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.tdo-metric-strip {
    width: min(1180px, calc(100% - 36px));
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tdo-metric-strip div {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.tdo-metric-strip strong {
    display: block;
    color: var(--primary);
    font-size: 30px;
    line-height: 1;
}

.tdo-metric-strip span {
    margin-top: 10px;
    color: var(--muted);
    display: block;
    line-height: 1.45;
}

.tdo-section {
    padding: 58px clamp(18px, 4vw, 56px);
}

.tdo-section-copy {
    max-width: 760px;
    display: grid;
    gap: 10px;
}

.tdo-section-copy.centered {
    margin: 0 auto 24px;
    text-align: center;
    justify-items: center;
}

.tdo-section-copy h2,
.tdo-final-cta h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(31px, 3vw, 44px);
    line-height: 1.08;
    letter-spacing: 0;
}

.tdo-problem-grid,
.tdo-feature-grid,
.tdo-workflow-grid,
.tdo-role-grid,
.tdo-pricing-grid,
.tdo-buy-cards,
.tdo-command-grid,
.tdo-experience-grid {
    display: grid;
    gap: 16px;
}

.tdo-problem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
}

.tdo-problem-grid article,
.tdo-feature-card,
.tdo-workflow-grid article,
.tdo-role-grid article,
.tdo-buy-cards article {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.tdo-problem-grid article {
    min-height: 210px;
    padding: 22px;
}

.tdo-problem-grid svg {
    width: 28px;
    height: 28px;
    color: var(--danger);
}

.tdo-problem-grid h3,
.tdo-feature-card h3,
.tdo-workflow-grid h3,
.tdo-role-grid h3,
.tdo-pricing-card h3,
.tdo-buy-cards h3 {
    margin: 14px 0 8px;
    color: var(--text);
    font-size: 19px;
    line-height: 1.28;
}

.tdo-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tdo-feature-card {
    min-height: 260px;
    padding: 20px;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.tdo-feature-card:hover {
    transform: translateY(-3px);
    border-color: #bed2e2;
    box-shadow: 0 14px 30px rgba(31, 42, 68, 0.11);
}

.tdo-feature-card > span {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #e9f3fa;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tdo-workflow {
    background: #dfe8f0;
    border-block: 1px solid #cbd8e4;
    width: 100%;
    max-width: none;
}

.tdo-workflow > * {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}

.tdo-workflow-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 24px;
}

.tdo-workflow-grid article {
    min-height: 220px;
    padding: 20px;
    position: relative;
}

.tdo-workflow-grid article > span {
    color: var(--primary);
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

.tdo-role-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tdo-role-grid article {
    min-height: 190px;
    padding: 20px;
    border-top: 4px solid var(--primary);
}

.tdo-command-section {
    padding-top: 70px;
}

.tdo-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
}

.tdo-command-grid article {
    min-height: 420px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tdo-command-media {
    min-height: 160px;
    padding: 18px;
    border-radius: 12px;
    background: #eaf3f8;
    border: 1px solid #d1e1eb;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: var(--primary);
}

.tdo-command-media.mobile {
    background: #ecf7f1;
    border-color: #cfe6d9;
    color: var(--success);
}

.tdo-command-media span {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--soft-shadow);
}

.tdo-command-media svg {
    width: 28px;
    height: 28px;
}

.tdo-command-media strong {
    font-size: 18px;
}

.tdo-command-grid h3,
.tdo-experience-grid h3 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    line-height: 1.24;
}

.tdo-command-grid p,
.tdo-experience-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.tdo-command-grid ul {
    margin: auto 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
}

.tdo-command-grid li {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f7fafc;
    color: var(--muted);
    font-weight: 750;
}

.tdo-command-store {
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #bde8d4;
    border-radius: 12px;
    background: #ecf7f1;
    color: var(--success);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-weight: 850;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.tdo-command-store:hover,
.tdo-command-store:focus-visible {
    transform: translateY(-1px);
    border-color: #9cd8bd;
    box-shadow: 0 12px 24px rgba(31, 42, 68, 0.1);
    outline: 0;
}

.tdo-command-store span {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tdo-command-store strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tdo-command-store svg {
    width: 18px;
    height: 18px;
}

.tdo-experience-section {
    padding-top: 42px;
}

.tdo-experience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tdo-experience-grid article {
    min-height: 180px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    position: relative;
    overflow: hidden;
}

.tdo-experience-grid article::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--primary);
}

.tdo-pricing-section {
    width: 100%;
    max-width: none;
    background: #f7fafc;
    border-block: 1px solid #d7e2ec;
}

.tdo-pricing-section > * {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}

.tdo-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
}

.tdo-pricing-card {
    min-height: 520px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tdo-pricing-card.featured {
    border-color: #9bc8dd;
    box-shadow: 0 18px 46px rgba(23, 107, 145, 0.14);
}

.tdo-pricing-card.soon {
    background: #fbfcfe;
}

.tdo-pricing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.tdo-pricing-head > svg {
    width: 30px;
    height: 30px;
    color: var(--primary);
    flex: 0 0 auto;
}

.tdo-pricing-card.soon .tdo-pricing-head > svg {
    color: var(--warning);
}

.tdo-pricing-badge {
    width: fit-content;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e9f7ef;
    color: var(--success);
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.tdo-pricing-badge.soon {
    background: #fff7e8;
    color: var(--warning);
}

.tdo-pricing-card h3 {
    margin-top: 12px;
}

.tdo-pricing-price {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tdo-pricing-price strong {
    color: #111827;
    font-size: clamp(42px, 5vw, 58px);
    line-height: 0.95;
    letter-spacing: 0;
}

.tdo-pricing-price span {
    padding-bottom: 6px;
    color: var(--muted);
    font-weight: 800;
}

.tdo-pricing-card ul {
    margin: 2px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
    list-style: none;
}

.tdo-pricing-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #4f5968;
    line-height: 1.5;
    font-weight: 650;
}

.tdo-pricing-card li svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--success);
    flex: 0 0 auto;
}

.tdo-pricing-card.soon li svg {
    color: var(--primary);
}

.tdo-pricing-card .button {
    width: fit-content;
    margin-top: auto;
}

.tdo-disabled-button,
.tdo-disabled-button:hover {
    border-color: #d7dde6;
    background: #eef2f6;
    color: #667085;
    cursor: default;
}

.tdo-buy-panel {
    padding: 30px;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 24px;
}

.tdo-buy-panel h2,
.tdo-final-cta h2 {
    color: #fff;
}

.tdo-buy-panel p {
    color: #cbd5e1;
}

.tdo-buy-panel .tdo-kicker,
.tdo-final-cta .tdo-kicker {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #8bd4f0;
}

.tdo-buy-cards {
    grid-template-columns: 1fr;
}

.tdo-buy-cards article {
    padding: 18px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.tdo-buy-cards svg,
.tdo-buy-cards h3 {
    color: #fff;
}

.tdo-buy-cards p {
    color: #cbd5e1;
}

.tdo-security {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
    gap: 24px;
    align-items: center;
}

.tdo-security-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tdo-security-list span {
    min-height: 72px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-weight: 750;
}

.tdo-security-list svg {
    color: var(--success);
    flex: 0 0 auto;
}

.tdo-comparison-section {
    padding-top: 30px;
}

.tdo-comparison-table {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
}

.tdo-comparison-table > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tdo-comparison-table > div + div {
    border-top: 1px solid var(--border);
}

.tdo-comparison-table span {
    min-height: 68px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    color: var(--muted);
    line-height: 1.45;
}

.tdo-comparison-table span + span {
    border-left: 1px solid var(--border);
    color: var(--text);
    font-weight: 750;
}

.tdo-comparison-table .head span {
    min-height: 48px;
    background: #f4f7fb;
    color: var(--text);
    font-weight: 900;
}

.tdo-final-cta {
    margin-bottom: 48px;
    padding: 42px clamp(22px, 5vw, 54px);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(23, 107, 145, 0.95), rgba(15, 82, 110, 0.95)),
        url("logo-icon.png");
    background-size: auto, 180px;
    background-repeat: no-repeat;
    background-position: right 32px center;
    color: #fff;
    display: grid;
    justify-items: start;
    gap: 16px;
    overflow: hidden;
    position: relative;
}

.tdo-final-cta > * {
    min-width: 0;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.tdo-footer {
    padding: 34px clamp(22px, 4vw, 40px) 22px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background:
        radial-gradient(circle at 18% 42%, rgba(14, 116, 144, 0.16), transparent 28%),
        radial-gradient(circle at 93% 12%, rgba(59, 130, 246, 0.16), transparent 28%),
        repeating-radial-gradient(circle at 95% 12%, rgba(125, 211, 252, 0.08) 0 1px, transparent 1px 9px),
        linear-gradient(135deg, #05070b 0%, #0b1220 52%, #020617 100%);
    display: block;
    color: #cbd5e1;
    box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    position: relative;
}

.tdo-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(125, 211, 252, 0.07), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%);
    opacity: 0.9;
}

.tdo-footer > * {
    position: relative;
    z-index: 1;
}

.tdo-footer-main {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) repeat(4, minmax(112px, 0.68fr)) minmax(250px, 1.25fr);
    gap: 28px;
    align-items: start;
}

.tdo-footer-brand {
    display: grid;
    justify-items: start;
    gap: 16px;
    min-width: 0;
}

.tdo-footer-logo {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid rgba(226, 232, 240, 0.82);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 16px 28px rgba(2, 6, 23, 0.28);
    overflow: hidden;
}

.tdo-footer-logo img {
    width: 206px;
    height: auto;
    display: block;
}

.tdo-footer-brand p,
.tdo-footer-connect p {
    margin: 0;
    color: #aebbd0;
    font-size: 14px;
    line-height: 1.58;
}

.tdo-powered-by {
    min-height: 56px;
    padding: 10px 18px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 64, 175, 0.22)),
        rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
    align-content: center;
    line-height: 1.15;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.24);
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.tdo-powered-by span,
.tdo-powered-by small {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.tdo-powered-by strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
}

.tdo-powered-by small {
    color: #7dd3fc;
}

.tdo-powered-by:hover {
    border-color: rgba(125, 211, 252, 0.62);
    background:
        linear-gradient(135deg, rgba(30, 64, 175, 0.34), rgba(14, 165, 233, 0.18)),
        rgba(255, 255, 255, 0.06);
    color: #ffffff;
    transform: translateY(-1px);
}

.tdo-social-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.tdo-footer-group,
.tdo-footer-connect {
    min-width: 0;
}

.tdo-footer-title {
    color: #ffffff;
    display: block;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.tdo-footer-title + span {
    width: 28px;
    height: 2px;
    margin: 10px 0 16px;
    border-radius: 999px;
    background: #60a5fa;
    display: block;
}

.tdo-footer-links {
    display: grid;
    gap: 12px;
    font-weight: 750;
}

.tdo-footer-links a {
    width: fit-content;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.25;
    transition: color 160ms ease, transform 160ms ease;
}

.tdo-footer-links a:hover {
    transform: translateX(2px);
}

.tdo-social-links a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #e5edf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.tdo-social-links svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.tdo-social-links a:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
}

.tdo-social-links .linkedin:hover {
    background: #0a66c2;
    border-color: #0a66c2;
}

.tdo-social-links .instagram:hover {
    background: #c13584;
    border-color: #c13584;
}

.tdo-social-links .youtube:hover {
    background: #ff0000;
    border-color: #ff0000;
}

.tdo-social-links .facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.tdo-footer a:hover {
    color: #ffffff;
}

.tdo-footer .tdo-powered-by:hover {
    color: #ffffff;
}

.tdo-footer .tdo-social-links a:hover {
    color: #fff;
}

.tdo-footer-connect {
    padding-left: 28px;
    border-left: 1px solid rgba(148, 163, 184, 0.26);
}

.tdo-footer-subscribe {
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    border: 1px solid rgba(226, 232, 240, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.78);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    overflow: hidden;
}

.tdo-footer-subscribe input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
}

.tdo-footer-subscribe input::placeholder {
    color: #8ea0b8;
}

.tdo-footer-subscribe button {
    width: 38px;
    height: 38px;
    margin-right: 5px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.tdo-footer-subscribe button:hover {
    transform: translateX(1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.32);
}

.tdo-footer-subscribe svg,
.tdo-footer-contact svg,
.tdo-footer-badges svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    flex: 0 0 auto;
}

.tdo-footer-contact {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.tdo-footer-contact a {
    width: fit-content;
    color: #e5edf8;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 760;
}

.tdo-footer-bottom {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #cbd5e1;
    font-size: 13px;
}

.tdo-footer-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 18px;
}

.tdo-footer-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e5edf8;
    white-space: nowrap;
}

.tdo-footer-flag {
    width: 24px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
    display: inline-grid;
    overflow: hidden;
}

.tdo-footer-flag span:nth-child(1) {
    background: #ff9933;
}

.tdo-footer-flag span:nth-child(2) {
    background: #ffffff;
}

.tdo-footer-flag span:nth-child(3) {
    background: #138808;
}

.tdo-policy-hero {
    padding: 70px clamp(18px, 4vw, 56px) 38px;
    background:
        linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
    border-bottom: 1px solid rgba(203, 213, 225, 0.78);
}

.tdo-policy-hero > div {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.tdo-policy-hero h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: 0;
}

.tdo-policy-hero p {
    margin: 0;
    max-width: 780px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.68;
}

.tdo-policy-updated {
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    font-weight: 800;
}

.tdo-policy-layout {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 36px 0 60px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.tdo-policy-index {
    position: sticky;
    top: 96px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    display: grid;
    gap: 6px;
}

.tdo-policy-index a {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--muted);
    display: flex;
    align-items: center;
    font-weight: 750;
}

.tdo-policy-index a:hover {
    background: #f1f5f9;
    color: var(--text);
}

.tdo-policy-content {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
}

.tdo-policy-content section {
    padding: 28px;
}

.tdo-policy-content section + section {
    border-top: 1px solid var(--border);
}

.tdo-policy-content h2 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0;
}

.tdo-policy-content p,
.tdo-policy-content li {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.tdo-policy-content p {
    margin: 0;
}

.tdo-policy-content p + p {
    margin-top: 12px;
}

.tdo-policy-content ul {
    margin: 12px 0 0;
    padding-left: 20px;
}

.tdo-policy-content li + li {
    margin-top: 8px;
}

.tdo-policy-content strong {
    color: var(--text);
}

.tdo-blog {
    background: #f1f5f9;
}

.tdo-blog-hero {
    padding: 48px clamp(18px, 4vw, 56px) 34px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.78);
    background:
        linear-gradient(180deg, #ffffff 0%, #eef5f8 100%);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: 34px;
    align-items: center;
}

.tdo-blog-hero > *,
.tdo-blog-summary,
.tdo-blog-layout {
    min-width: 0;
}

.tdo-blog-hero-copy {
    display: grid;
    gap: 18px;
}

.tdo-blog-hero h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1.06;
    letter-spacing: 0;
}

.tdo-blog-hero p {
    margin: 0;
    max-width: 720px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.72;
}

.tdo-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tdo-blog-meta span {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
}

.tdo-blog-meta svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
}

.tdo-blog-hero-media,
.tdo-blog-wide-graphic {
    margin: 0;
    border: 1px solid #d6e2ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(31, 42, 68, 0.16);
    overflow: hidden;
}

.tdo-blog-hero-media img,
.tdo-blog-wide-graphic img {
    width: 100%;
    height: auto;
    display: block;
}

.tdo-blog-hero-media figcaption,
.tdo-blog-wide-graphic figcaption {
    padding: 11px 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.tdo-blog-summary {
    width: min(1180px, calc(100% - 36px));
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tdo-blog-summary div {
    min-height: 94px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.tdo-blog-summary strong,
.tdo-blog-summary span {
    display: block;
}

.tdo-blog-summary strong {
    color: var(--primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.tdo-blog-summary span {
    margin-top: 8px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.tdo-blog-layout {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 30px 0 64px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.tdo-blog-index {
    position: sticky;
    top: 96px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    display: grid;
    gap: 6px;
}

.tdo-blog-index strong {
    padding: 0 10px 6px;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.tdo-blog-index a {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--muted);
    display: flex;
    align-items: center;
    font-weight: 750;
}

.tdo-blog-index a:hover {
    background: #f1f5f9;
    color: var(--text);
}

.tdo-blog-content {
    display: grid;
    gap: 18px;
}

.tdo-blog-content > section,
.tdo-blog-cta {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.tdo-blog-content h2 {
    margin: 0 0 12px;
    color: #111827;
    font-size: clamp(25px, 2.2vw, 34px);
    line-height: 1.16;
    letter-spacing: 0;
}

.tdo-blog-content h3 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.28;
}

.tdo-blog-content p,
.tdo-blog-content li,
.tdo-blog-table span {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.78;
}

.tdo-blog-content p {
    margin: 0;
}

.tdo-blog-content p + p {
    margin-top: 12px;
}

.tdo-blog-benefit-grid {
    margin: 18px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tdo-blog-benefit-grid article {
    min-height: 190px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fbfd;
}

.tdo-blog-benefit-grid span {
    width: fit-content;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e9f3fa;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tdo-blog-benefit-grid h3,
.tdo-blog-benefit-grid p {
    margin-top: 12px;
}

.tdo-blog-step-list {
    display: grid;
    gap: 12px;
}

.tdo-blog-step-list article {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
}

.tdo-blog-step-list article > span {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.tdo-blog-check-list,
.tdo-blog-number-list {
    margin: 14px 0 0;
    padding-left: 22px;
}

.tdo-blog-check-list li + li,
.tdo-blog-number-list li + li {
    margin-top: 9px;
}

.tdo-blog-check-list strong {
    color: var(--text);
}

.tdo-blog-table {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.tdo-blog-table > div {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr 1fr;
}

.tdo-blog-table > div + div {
    border-top: 1px solid var(--border);
}

.tdo-blog-table strong,
.tdo-blog-table span {
    min-width: 0;
    padding: 14px;
}

.tdo-blog-table strong {
    background: #eef5f8;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
}

.tdo-blog-table span + span,
.tdo-blog-table strong + strong {
    border-left: 1px solid var(--border);
}

.tdo-blog-faq {
    display: grid;
    gap: 12px;
}

.tdo-blog-faq article {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.tdo-blog-faq p {
    margin-top: 8px;
}

.tdo-blog-cta {
    background:
        linear-gradient(135deg, rgba(23, 107, 145, 0.98), rgba(22, 120, 78, 0.95));
    color: #fff;
}

.tdo-blog-cta h2 {
    color: #fff;
}

.tdo-blog-cta p {
    color: rgba(255, 255, 255, 0.84);
}

.tdo-blog-cta .tdo-kicker {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.tdo-blog-cta .button {
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .tdo-blog-hero,
    .tdo-blog-layout {
        grid-template-columns: 1fr;
    }

    .tdo-blog-index {
        position: static;
    }
}

@media (max-width: 760px) {
    .tdo-blog-hero {
        padding: 24px 14px 28px;
    }

    .tdo-blog-hero h1 {
        font-size: 34px;
        line-height: 1.12;
    }

    .tdo-blog-hero p,
    .tdo-blog-content p,
    .tdo-blog-content li,
    .tdo-blog-table span {
        font-size: 15px;
    }

    .tdo-blog-summary,
    .tdo-blog-layout {
        width: calc(100% - 28px);
        grid-template-columns: 1fr;
    }

    .tdo-blog-benefit-grid,
    .tdo-blog-table > div {
        grid-template-columns: 1fr;
    }

    .tdo-blog-content > section,
    .tdo-blog-cta {
        padding: 20px;
    }

    .tdo-blog-table span + span,
    .tdo-blog-table strong + strong {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .tdo-blog-step-list article {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .tdo-hero-inner,
    .tdo-buy-panel,
    .tdo-security {
        grid-template-columns: 1fr;
    }

    .tdo-feature-grid,
    .tdo-workflow-grid,
    .tdo-role-grid,
    .tdo-pricing-grid,
    .tdo-command-grid,
    .tdo-experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tdo-product-visual {
        order: -1;
    }

    .tdo-footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tdo-footer-brand,
    .tdo-footer-connect {
        grid-column: span 3;
    }

    .tdo-footer-connect {
        padding-left: 0;
        padding-top: 22px;
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.24);
    }
}

@media (max-width: 760px) {
    .public-home main [id] {
        scroll-margin-top: 156px;
    }

    .tdo-site-header {
        min-height: auto;
        padding: 14px 16px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .tdo-site-brand img {
        width: 138px;
    }

    .tdo-site-nav {
        margin-left: 0;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .tdo-site-actions .button,
    .tdo-hero-actions .button {
        flex: 1;
    }

    .tdo-hero {
        padding-top: 26px;
    }

    .tdo-dashboard-preview {
        grid-template-columns: 1fr;
    }

    .tdo-dashboard-preview aside {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .tdo-dashboard-preview aside img {
        display: none;
    }

    .tdo-status-list div,
    .tdo-status-list article {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .tdo-preview-action {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .tdo-preview-metrics,
    .tdo-metric-strip,
    .tdo-problem-grid,
    .tdo-feature-grid,
    .tdo-workflow-grid,
    .tdo-role-grid,
    .tdo-pricing-grid,
    .tdo-security-list,
    .tdo-command-grid,
    .tdo-experience-grid,
    .tdo-comparison-table > div {
        grid-template-columns: 1fr;
    }

    .tdo-command-grid article {
        min-height: 0;
    }

    .tdo-comparison-table span + span {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .tdo-buy-panel {
        padding: 22px;
    }

    .tdo-final-cta {
        margin-inline: 18px;
        background-position: right -50px center;
    }

    .tdo-policy-layout {
        width: calc(100% - 28px);
        grid-template-columns: 1fr;
    }

    .tdo-policy-index {
        position: static;
    }

    .tdo-policy-content section {
        padding: 20px;
    }

    .tdo-footer {
        padding: 20px 18px 24px;
    }

    .tdo-footer-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .tdo-powered-by {
        width: 100%;
        border-radius: 16px;
        justify-items: start;
    }
}

@media (max-width: 900px) {
    .tdo-site-header {
        min-height: auto;
        padding: 14px 18px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .tdo-site-brand {
        justify-content: flex-start;
    }

    .tdo-site-nav {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tdo-site-nav::-webkit-scrollbar {
        display: none;
    }

    .tdo-site-nav a {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .tdo-site-actions {
        width: 100%;
    }

    .tdo-site-actions .button {
        min-height: 40px;
    }

    .tdo-hero {
        padding: 34px 18px 38px;
    }

    .tdo-hero-inner {
        gap: 30px;
    }

    .tdo-product-visual {
        order: 0;
    }
}

@media (max-width: 760px) {
    body.tdo-home {
        font-size: 14px;
    }

    .tdo-site-header {
        padding: 12px 14px;
        gap: 10px;
    }

    .tdo-site-brand img {
        width: 132px;
    }

    .tdo-site-nav {
        gap: 6px;
    }

    .tdo-site-nav a {
        min-height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }

    .tdo-site-actions .button {
        width: 100%;
        flex: 1 1 100%;
    }

    .tdo-hero {
        padding: 22px 14px 32px;
    }

    .tdo-hero h1 {
        font-size: 38px;
        line-height: 1.04;
    }

    .tdo-hero p {
        font-size: 16px;
        line-height: 1.6;
    }

    .tdo-hero-actions {
        width: 100%;
        align-items: stretch;
    }

    .tdo-hero-actions .button {
        min-height: 42px;
    }

    .tdo-play-badge {
        width: 100%;
    }

    .tdo-proof-row {
        grid-template-columns: 1fr;
    }

    .tdo-proof-row span {
        min-height: 0;
    }

    .tdo-product-window {
        border-radius: 12px;
    }

    .tdo-window-bar {
        min-height: 42px;
        padding: 0 12px;
    }

    .tdo-dashboard-preview {
        min-height: 0;
    }

    .tdo-dashboard-preview aside {
        padding: 10px;
        gap: 6px;
    }

    .tdo-dashboard-preview aside button {
        min-height: 34px;
        padding: 0 6px;
        justify-content: center;
        font-size: 12px;
    }

    .tdo-preview-main {
        padding: 12px;
        gap: 12px;
    }

    .tdo-preview-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .tdo-preview-head strong {
        font-size: 20px;
    }

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

    .tdo-preview-metrics div {
        min-height: 78px;
        padding: 10px;
    }

    .tdo-preview-metrics strong {
        font-size: 24px;
    }

    .tdo-metric-strip {
        width: calc(100% - 28px);
        gap: 10px;
    }

    .tdo-metric-strip div {
        min-height: 0;
        padding: 16px;
    }

    .tdo-section {
        padding: 38px 14px;
    }

    .tdo-section-copy h2,
    .tdo-final-cta h2 {
        font-size: 30px;
        line-height: 1.12;
    }

    .tdo-problem-grid article,
    .tdo-feature-card,
    .tdo-workflow-grid article,
    .tdo-role-grid article,
    .tdo-experience-grid article {
        min-height: 0;
        padding: 18px;
    }

    .tdo-command-section {
        padding-top: 42px;
    }

    .tdo-command-grid article {
        padding: 18px;
    }

    .tdo-command-media {
        min-height: 120px;
        align-items: flex-start;
        flex-direction: column;
    }

    .tdo-workflow > *,
    .tdo-pricing-section > * {
        width: calc(100% - 28px);
    }

    .tdo-pricing-card {
        min-height: 0;
        padding: 20px;
    }

    .tdo-pricing-head {
        gap: 12px;
    }

    .tdo-pricing-price strong {
        font-size: 40px;
    }

    .tdo-buy-panel {
        grid-template-columns: 1fr;
        padding: 20px 18px;
        border-radius: 12px;
    }

    .tdo-security {
        gap: 18px;
    }

    .tdo-security-list span {
        min-height: 0;
    }

    .tdo-final-cta {
        width: calc(100% - 28px);
        margin: 0 14px 36px;
        padding: 26px 18px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(23, 107, 145, 0.97), rgba(15, 82, 110, 0.97));
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .tdo-final-cta .tdo-hero-actions {
        width: 100%;
        margin-top: 2px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tdo-final-cta .tdo-hero-actions .button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        flex: none;
    }

    .attachment-preview-grid {
        min-width: 220px;
        grid-template-columns: 1fr;
    }

    .content-preview-modal {
        padding: 12px;
    }

    .content-preview-dialog {
        max-height: calc(100vh - 24px);
    }

    .content-preview-head {
        padding: 14px;
    }

    .content-preview-frame iframe {
        min-height: 320px;
    }

    .tdo-footer {
        width: calc(100% - 28px);
        padding: 26px 18px 24px;
        border-radius: 16px 16px 0 0;
        text-align: center;
    }

    .tdo-footer-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tdo-footer-brand {
        width: 100%;
        grid-column: auto;
        justify-items: center;
        gap: 12px;
        text-align: center;
    }

    .tdo-footer-brand p,
    .tdo-footer-connect p {
        max-width: 320px;
        font-size: 13px;
    }

    .tdo-powered-by {
        width: min(100%, 314px);
        justify-items: center;
        text-align: center;
    }

    .tdo-social-links {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .tdo-footer-group {
        padding: 16px;
        border: 1px solid rgba(226, 232, 240, 0.1);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
    }

    .tdo-footer-title + span {
        margin-right: auto;
        margin-left: auto;
    }

    .tdo-footer-links {
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 10px 12px;
        font-size: 13px;
    }

    .tdo-footer-links a {
        min-height: 32px;
        padding: 6px 8px;
        border: 1px solid rgba(226, 232, 240, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tdo-footer-links a:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(150px, 100%);
    }

    .tdo-footer-connect {
        grid-column: auto;
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.24);
    }

    .tdo-footer-subscribe,
    .tdo-footer-contact a {
        margin-right: auto;
        margin-left: auto;
    }

    .tdo-footer-bottom {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .tdo-footer-badges {
        justify-content: center;
        gap: 12px;
    }
}

@media (max-width: 560px) {
    .public-home main [id] {
        scroll-margin-top: 220px;
    }

    .tdo-site-nav {
        overflow-x: visible;
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .tdo-site-nav a {
        flex: 1 1 calc(33.333% - 6px);
        justify-content: center;
        padding: 0 8px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .public-home main [id] {
        scroll-margin-top: 220px;
    }

    .tdo-hero h1 {
        font-size: 32px;
    }

    .tdo-kicker {
        max-width: 100%;
        min-height: 32px;
        font-size: 11px;
    }

    .tdo-final-cta .tdo-kicker {
        width: 100%;
        height: auto;
        padding: 8px 10px;
        justify-content: flex-start;
        line-height: 1.2;
        white-space: normal;
    }

    .tdo-hero-actions {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .tdo-hero-actions .button {
        width: 100%;
        flex: 0 0 auto;
    }

    .tdo-dashboard-preview aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tdo-filter-preview {
        padding-bottom: 6px;
    }

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

    .tdo-status-list article {
        padding: 10px;
    }

    .tdo-section-copy h2,
    .tdo-final-cta h2 {
        font-size: 26px;
        line-height: 1.16;
        overflow-wrap: anywhere;
    }

    .tdo-pricing-price strong {
        font-size: 34px;
    }

    .tdo-comparison-table span {
        padding: 14px;
    }

    .upload-preview-media {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .upload-preview-media img,
    .upload-preview-media video,
    .upload-preview-file {
        width: 82px;
        height: 72px;
    }

    .attachment-preview-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .attachment-preview-thumb {
        width: 74px;
        height: 74px;
    }

    .content-preview-head {
        flex-direction: column;
    }

    .content-preview-head .icon-button {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .tdo-footer-brand img {
        width: 120px;
    }

    .tdo-footer-logo img {
        width: 168px;
    }

    .tdo-social-links a {
        width: 36px;
        height: 36px;
    }

    .tdo-footer-links {
        width: 100%;
        gap: 10px;
    }

    .tdo-footer-links a {
        min-width: 0;
        text-align: center;
    }
}