/*
COPERNICUS CSS
Tabla de contenidos
1. Variables
2. Base
3. Login
4. Shell
5. Sidebar
6. Header
7. Buttons and Badges
8. Content Components
9. Tables and Forms
10. Debug and Modals
11. Dashboard
12. Admin
13. Sandbox Notice
14. Responsive
*/

/* 1. Variables */
:root {
    --cp-bg: #f5f2ec;
    --cp-surface: #fffdf8;
    --cp-surface-soft: #faf7f0;
    --cp-border: #ded8cc;
    --cp-border-strong: #c9c0b2;
    --cp-text: #24211d;
    --cp-muted: #746f68;
    --cp-muted-soft: #aaa39a;
    --cp-accent: #586f62;
    --cp-accent-soft: #dfe8df;
    --cp-orange: #d96f28;
    --cp-ai-orange: #d96f28;
    --cp-ai-orange-soft: #f6dfcf;
    --cp-warning: #b86532;
    --cp-warning-soft: #f5d7c3;
    --cp-danger: #8c3d38;
    --cp-danger-soft: #efd9d6;
    --cp-chocolate: #3b3028;
    --cp-chocolate-soft: #4a3c32;
    --cp-sidebar: #f0ebe2;
    --cp-sidebar-width: 292px;
    --cp-radius: 8px;
    --cp-shadow: 0 18px 55px rgba(35, 31, 26, 0.08);
    --cp-section-padding-x: 48px;
    --cp-section-padding-y: 34px;
    --cp-section-inner-padding-y: calc(9rem + 0.375rem);
    --cp-between-dark-section-padding-y: var(--cp-section-inner-padding-y);
    --cp-section-padding-x-mobile: 16px;
    --cp-section-padding-y-mobile: 18px;
    --cp-section-inner-padding-y-mobile: calc(1.5rem + 0.25rem);
    --cp-dark-content-padding-x-mobile: calc(1rem + 0.25rem);
    --cp-between-dark-section-padding-y-mobile: var(--cp-section-inner-padding-y-mobile);
    --cp-font-body: Arial, Helvetica, sans-serif;
    --cp-font-heading: Arial, Helvetica, sans-serif;
    --cp-font-paragraph: Arial, Helvetica, sans-serif;
    --cp-font-button: Arial, Helvetica, sans-serif;
    --cp-font-mono: "SFMono-Regular", "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace;
    --cp-size-body: calc(0.8125rem + 0.0625rem);
    --cp-size-p: calc(0.8125rem + 0.0625rem);
    --cp-size-small: calc(0.6875rem + 0rem);
    --cp-size-h1: calc(1.125rem + 0rem);
    --cp-size-h2: calc(0.9375rem + 0rem);
    --cp-size-h3: calc(0.9375rem + 0rem);
    --cp-size-button: calc(0.6875rem + 0rem);
    --cp-size-label: calc(0.625rem + 0rem);
    --cp-size-value: calc(1.125rem + 0rem);
    --cp-line-body: 1.5;
    --cp-line-heading: 1.22;
}

/* 2. Base */
html {
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scrollbar-color: rgba(88, 111, 98, 0.42) rgba(245, 242, 236, 0.62);
    scrollbar-width: thin;
}

body {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    font-family: var(--cp-font-body);
    font-size: var(--cp-size-body);
    line-height: var(--cp-line-body);
    background: var(--cp-bg);
    color: var(--cp-text);
}

body.cp-app-body {
    height: 100%;
    overflow: hidden;
}

.app-main::-webkit-scrollbar {
    width: 9px;
}

.app-main::-webkit-scrollbar-track {
    background: rgba(245, 242, 236, 0.8);
}

.app-main::-webkit-scrollbar-thumb {
    border: 2px solid rgba(245, 242, 236, 0.8);
    border-radius: 999px;
    background: rgba(88, 111, 98, 0.45);
}

.app-main::-webkit-scrollbar-thumb:hover {
    background: rgba(88, 111, 98, 0.62);
}

a {
    text-decoration: none;
}

h1,
h2,
h3 {
    font-family: var(--cp-font-heading);
    line-height: var(--cp-line-heading);
}

p {
    margin-top: 0;
    font-family: var(--cp-font-paragraph);
    font-size: var(--cp-size-p);
    line-height: var(--cp-line-body);
}

h1 {
    margin-bottom: 4px;
    font-size: var(--cp-size-h1);
    letter-spacing: 0;
}

h2 {
    margin-bottom: 16px;
    font-size: var(--cp-size-h2);
    letter-spacing: 0;
}

h3 {
    font-size: var(--cp-size-h3);
    letter-spacing: 0;
}

.small,
.muted {
    color: var(--cp-muted);
}

.small {
    font-size: 13px;
    font-size: var(--cp-size-small);
}

/* 3. Login */
.login-body {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 32px 24px;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 253, 248, 0.96), rgba(245, 242, 236, 0.72) 34%, rgba(240, 235, 226, 0.92) 100%);
}

.login-form {
    width: min(380px, 100%);
    display: grid;
    gap: 14px;
    align-self: center;
    padding: 30px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow);
    text-align: center;
}

.cp-solarsystem-mark {
    display: inline-grid;
    width: 58px;
    height: 58px;
    place-items: center;
    justify-self: center;
    margin-bottom: 2px;
}

.cp-solarsystem-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-form h2 {
    margin-bottom: 0;
    font-size: 22px;
}

.login-form small {
    color: var(--cp-muted);
    line-height: 1.35;
}

.login-form input,
.login-form button,
.login-form .notice {
    text-align: left;
}

.login-form button {
    text-align: center;
}

/* 4. Shell */
.app-shell {
    display: grid;
    grid-template-columns: var(--cp-sidebar-width) minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
}

.app-shell.is-sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr);
}

.app-main {
    min-width: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 20px 22px;
    scrollbar-color: rgba(88, 111, 98, 0.42) rgba(245, 242, 236, 0.62);
    scrollbar-width: thin;
}

.content-wrap {
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

/* 4.1 Motion */
.cp-reveal {
    opacity: 0;
    transform: translateY(10px);
}

.cp-motion-ready .cp-reveal {
    transition:
        opacity 460ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.cp-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .cp-reveal,
    .cp-motion-ready .cp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 5. Sidebar */
.sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    top: 0;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    padding: 12px 11px;
    border-right: 1px solid var(--cp-border);
    background: var(--cp-sidebar);
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

.sidebar__brand {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 4px 18px;
    border-bottom: 1px solid var(--cp-border);
}

.sidebar__mark {
    display: inline-flex;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fffdf8;
    color: var(--cp-text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(36, 33, 29, 0.08);
}

.sidebar__mark.has-client-logo {
    overflow: hidden;
    border: 0;
    background: #fffdf8;
}

.sidebar__mark.cp-sandbox-notice,
.sidebar__mark.has-client-logo.cp-sandbox-notice {
    border: 0;
    background: var(--cp-orange);
    color: #fffdf8;
}

.sidebar__mark.has-client-logo.cp-sandbox-notice img {
    padding: 6px;
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.92);
}

.sidebar__mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sidebar__title {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sidebar__title strong {
    font-size: 15px;
    letter-spacing: 0.08em;
}

.sidebar__title span {
    color: var(--cp-muted);
    font-size: 11px;
    line-height: 1.2;
}

.sidebar__toggle {
    position: absolute;
    top: 3px;
    right: 2px;
    width: 18px;
    min-height: 18px;
    margin-left: 0;
    padding: 0;
    border: 1px solid rgba(134, 118, 107, 0.12);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.3);
    color: var(--cp-muted);
    justify-content: center;
    opacity: 0.42;
    box-shadow: 0 6px 14px rgba(36, 33, 29, 0.04);
    transition:
        right 180ms ease,
        top 180ms ease,
        width 180ms ease,
        min-height 180ms ease,
        border-radius 180ms ease,
        background 180ms ease,
        color 180ms ease,
        opacity 180ms ease,
        box-shadow 180ms ease;
}

.sidebar__toggle:hover {
    background: rgba(255, 253, 248, 0.62);
    color: var(--cp-text);
    opacity: 0.74;
    box-shadow: 0 8px 18px rgba(36, 33, 29, 0.08);
}

.sidebar__toggle .sidebar__icon {
    display: none;
}

.sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 12px;
    border-bottom: 0;
    scrollbar-width: none;
}

.sidebar__nav::-webkit-scrollbar {
    display: none;
}

.sidebar__section {
    flex: 0 0 auto;
    margin-top: 12px;
}

.sidebar__section-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    padding: 5px 8px;
    border: 0;
    border-radius: var(--cp-radius);
    background: #86766b;
    color: #fff;
    font-family: var(--cp-font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sidebar__section-title:disabled {
    cursor: default;
    opacity: 1;
}

.sidebar__section-icon {
    display: inline-flex;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.92;
}

.sidebar__section-icon svg {
    width: 15px;
    height: 15px;
}

.sidebar__section-title.has-soft-dot-icon .sidebar__section-icon {
    color: rgba(255, 253, 248, 0.76);
    opacity: 1;
}

.sidebar__section-title.has-soft-dot-icon .sidebar__section-icon svg {
    width: 13px;
    height: 13px;
}

.sidebar__section.is-primary-orbit .sidebar__section-title {
    border-color: rgba(255, 253, 248, 0.32);
    background: rgba(255, 253, 248, 0.8);
    color: rgba(74, 66, 57, 0.8);
    box-shadow:
        inset 0 0 0 1px rgba(255, 253, 248, 0.18),
        0 8px 18px rgba(83, 49, 33, 0.045);
}

.sidebar__section.is-primary-orbit .sidebar__section-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border: 1px solid rgba(255, 253, 248, 0.38);
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.08);
    box-shadow:
        0 0 0 4px rgba(255, 253, 248, 0.08),
        0 0 18px rgba(255, 232, 190, 0.12);
    color: rgba(255, 253, 248, 0.9);
}

.sidebar__section.is-primary-orbit .sidebar__section-icon svg {
    width: 14px;
    height: 14px;
}

.sidebar__section.is-primary-orbit .sidebar__planet-dot {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    transform: translateY(1px);
    background: rgba(134, 118, 107, 0.8);
    box-shadow:
        0 0 0 4px rgba(134, 118, 107, 0.14),
        0 0 16px rgba(134, 118, 107, 0.18);
}

.sidebar__section-caret {
    font-size: 12px;
    line-height: 1;
    transition: transform 160ms ease;
}

.sidebar__section.is-collapsed .sidebar__section-caret {
    transform: rotate(-90deg);
}

.sidebar__section-body {
    display: grid;
}

.sidebar__section.is-collapsed .sidebar__section-body {
    display: none;
}

.sidebar__item-divider {
    display: block;
    height: 1px;
    margin: 7px 8px 9px;
    background: rgba(134, 118, 107, 0.24);
}

.sidebar__item {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: var(--cp-radius);
    color: var(--cp-text);
    font-family: var(--cp-font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sidebar__item:hover,
.sidebar__item.is-active {
    border-color: var(--cp-border-strong);
    background: var(--cp-surface);
}

.sidebar__item.is-planned {
    color: var(--cp-muted-soft);
    cursor: not-allowed;
}

.sidebar__item.is-demo {
    color: var(--cp-muted-soft);
}

.sidebar__item.is-demo .sidebar__icon {
    color: var(--cp-accent);
}

.sidebar__item.is-demo.is-active {
    color: var(--cp-muted);
}

.sidebar__item.is-ai {
    border-color: rgba(255, 253, 248, 0.48);
    background: rgba(255, 253, 248, 0.5);
}

.sidebar__item.is-ai .sidebar__icon {
    color: var(--cp-accent);
}

.sidebar__item.is-ai:hover,
.sidebar__item.is-ai.is-active {
    border-color: rgba(88, 111, 98, 0.28);
    background: rgba(255, 253, 248, 0.72);
    color: var(--cp-text);
}

.sidebar__item.is-focus-pulse {
    animation: cp-sidebar-focus-pulse 1.25s ease-in-out 3;
    border-color: rgba(88, 111, 98, 0.42);
    background: rgba(237, 245, 233, 0.92);
}

@keyframes cp-sidebar-focus-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(88, 111, 98, 0);
    }

    45% {
        box-shadow: 0 0 0 6px rgba(88, 111, 98, 0.12);
    }
}

.sidebar__item.is-tab-objectives-config .sidebar__icon {
    color: var(--cp-orange);
}

.sidebar__item.is-tab-ai-agents .sidebar__icon {
    color: #8a634b;
}

.sidebar__item.is-tab-ai-agents:hover .sidebar__icon,
.sidebar__item.is-tab-ai-agents.is-active .sidebar__icon {
    color: #6f4f3d;
}

.sidebar__item.is-icon-circle-dot .sidebar__icon {
    color: rgba(255, 253, 248, 0.72);
}

.sidebar__item.is-icon-circle-dot:hover .sidebar__icon,
.sidebar__item.is-icon-circle-dot.is-active .sidebar__icon {
    color: rgba(88, 111, 98, 0.78);
}

.sidebar__item.is-planned:hover {
    border-color: transparent;
    background: transparent;
}

.sidebar__icon,
.icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.sidebar__icon {
    opacity: 0.58;
}

.sidebar__item:hover .sidebar__icon,
.sidebar__item.is-active .sidebar__icon,
.sidebar__toggle:hover .sidebar__icon {
    opacity: 0.82;
}

.sidebar__icon svg,
.icon svg {
    width: 100%;
    height: 100%;
}

.cp-icon-svg--ai {
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--cp-ai-orange);
    color: #fffdf8;
    padding: 2px;
    box-shadow: 0 5px 14px rgba(217, 111, 40, 0.24);
}

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

.sidebar__pill {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--cp-surface-soft);
    color: var(--cp-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.sidebar__refresh-form {
    margin: 7px 0 0;
}

.sidebar__refresh-form button {
    width: 100%;
    text-align: left;
}

.sidebar__item--api {
    border-color: rgba(59, 48, 40, 0.44);
    background: #2f261f;
    color: var(--cp-surface);
    font-weight: 800;
}

.sidebar__item--api:hover {
    border-color: rgba(59, 48, 40, 0.74);
    background: #261e19;
    color: var(--cp-surface);
}

.sidebar__item--api .sidebar__pill {
    background: rgba(255, 253, 248, 0.16);
    color: var(--cp-surface);
}

.sidebar__system {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 0;
}

.sidebar__system-tools {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 8px 4px;
}

.sidebar__language {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidebar__item.sidebar__language--nav {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 3px;
    padding: 7px;
    color: var(--cp-text);
    font-size: 10px;
    letter-spacing: 0.05em;
}

.sidebar__system-help {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    padding-top: 13px;
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.sidebar__system-help:hover,
.sidebar__system-help.is-active {
    color: var(--cp-text);
}

.sidebar__language-flags {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.sidebar__language-flags button {
    width: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: 0;
    font-size: 16px;
    line-height: 1;
    opacity: 1;
}

.sidebar__language-flags button.is-active {
    background: transparent;
    opacity: 0.5;
}

.sidebar__system-status {
    display: grid;
    gap: 2px;
    padding: 6px 8px 0;
    border-top: 1px solid rgba(134, 118, 107, 0.18);
    color: var(--cp-muted);
    font-size: 10px;
    line-height: 1.25;
}

.sidebar__system-status strong {
    color: var(--cp-text);
    font-size: 11px;
    font-weight: 700;
}

.sidebar__system-action {
    width: 100%;
    background: transparent;
    text-align: left;
}

.cp-mobile-tabbar {
    display: none;
}

.cp-mobile-tabbar__item {
    display: inline-grid;
    min-width: 0;
    min-height: 44px;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 0;
    padding: 5px 10px;
    background: transparent;
    color: var(--cp-muted);
    font-family: var(--cp-font-button);
    font-size: 10px;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.cp-mobile-tabbar__item.is-active {
    color: var(--cp-text);
}

.cp-mobile-tabbar__icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
}

.cp-mobile-tabbar__icon svg {
    width: 18px;
    height: 18px;
}

.app-shell.is-sidebar-collapsed .sidebar {
    padding-inline: 10px;
}

.app-shell.is-sidebar-collapsed .sidebar__title,
.app-shell.is-sidebar-collapsed .sidebar__section-title,
.app-shell.is-sidebar-collapsed .sidebar__label,
.app-shell.is-sidebar-collapsed .sidebar__pill,
.app-shell.is-sidebar-collapsed .sidebar__language > span,
.app-shell.is-sidebar-collapsed .sidebar__system-help,
.app-shell.is-sidebar-collapsed .sidebar__system-status {
    display: none;
}

.app-shell.is-sidebar-collapsed .sidebar__brand {
    justify-content: center;
    padding-inline: 0;
}

.app-shell.is-sidebar-collapsed .sidebar__toggle {
    position: absolute;
    top: 50vh;
    right: -9px;
    z-index: 5;
    width: 20px;
    min-height: 54px;
    padding: 0;
    border: 1px solid rgba(134, 118, 107, 0.1);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.34);
    box-shadow: 0 10px 24px rgba(36, 33, 29, 0.08);
    opacity: 0.5;
    transform: translateY(-50%);
}

.app-shell.is-sidebar-collapsed .sidebar__toggle .sidebar__icon {
    display: none;
}

.app-shell.is-sidebar-collapsed .sidebar__toggle::before {
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    opacity: 0.72;
    transform: rotate(45deg);
}

.app-shell.is-sidebar-collapsed .sidebar__toggle:hover {
    background: rgba(255, 253, 248, 0.62);
    opacity: 0.82;
}

.app-shell.is-sidebar-collapsed .sidebar__mark {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
}

.app-shell.is-sidebar-collapsed .sidebar__item {
    justify-content: center;
}

/* 6. Header */
.topbar {
    display: none;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    padding: 0;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    border-color: transparent;
    background: transparent;
}

.topbar__menu-button {
    display: none;
}

/* 7. Buttons and Badges */
button,
.btn,
.btn-secondary,
.logout {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: var(--cp-radius);
    padding: 6px 9px;
    font-family: var(--cp-font-button);
    font-size: var(--cp-size-button);
    text-decoration: none;
}

.btn-primary,
button {
    background: var(--cp-text);
    color: var(--cp-surface);
}

.logout,
.btn-secondary {
    border-color: var(--cp-border-strong);
    background: transparent;
    color: var(--cp-text);
}

.cp-icon-action {
    position: relative;
    width: 30px;
    min-width: 30px;
    padding: 0;
}

.cp-icon-action::after {
    content: none;
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    z-index: 60;
    width: max-content;
    max-width: 190px;
    padding: 6px 8px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-text);
    color: var(--cp-surface);
    font-family: var(--cp-font-body);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.cp-icon-action:hover::after,
.cp-icon-action:focus::after {
    opacity: 0;
}

.btn-api-cost {
    border-color: rgba(143, 91, 52, 0.28);
    background: var(--cp-warning-soft);
    color: var(--cp-text);
}

.cost-badge,
.free-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.cost-badge {
    width: 15px;
    height: 15px;
    background: var(--cp-warning);
    color: #fff;
}

.free-badge {
    padding: 2px 7px;
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    text-transform: uppercase;
}

/* 8. Content Components */
.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.card,
.panel,
.notice {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}

.card {
    padding: 16px;
}

.panel {
    padding: 22px;
    margin-bottom: 16px;
}

.notice {
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--cp-surface-soft);
}

.notice.danger {
    border-color: rgba(140, 61, 56, 0.26);
    background: var(--cp-danger-soft);
}

.cp-system-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(88, 111, 98, 0.28);
    border-radius: var(--cp-radius);
    background: #edf5e9;
}

.cp-system-state__face {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    align-content: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(88, 111, 98, 0.14);
    color: var(--cp-accent);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.cp-system-state__face img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.cp-system-state strong,
.cp-system-state span {
    display: block;
}

.cp-system-state strong {
    font-size: 14px;
}

.cp-system-state span:not(.cp-system-state__face) {
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.cp-system-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: min(560px, calc(100vw - 24px));
    padding: 14px 16px;
    border: 1px solid rgba(88, 111, 98, 0.28);
    border-radius: var(--cp-radius);
    background: rgba(237, 245, 233, 0.98);
    box-shadow: 0 18px 48px rgba(36, 33, 29, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-50% - 10px));
    transition: opacity 160ms ease, transform 160ms ease;
}

.cp-system-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

body.is-cost-running .cp-system-toast {
    pointer-events: none;
}

.cp-system-veil {
    position: fixed;
    inset: 0;
    z-index: 998;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(245, 242, 236, 0.76);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(3px);
    transition: opacity 160ms ease;
}

body.is-cost-running .cp-system-veil {
    opacity: 1;
    pointer-events: auto;
}

.cp-system-veil__box {
    display: grid;
    justify-items: center;
    width: min(360px, 100%);
    gap: 10px;
    padding: 24px;
    border: 1px solid rgba(255, 253, 248, 0.78);
    border-radius: var(--cp-radius);
    background: rgba(255, 253, 248, 0.92);
    box-shadow:
        1px 1px 2px rgba(36, 33, 29, 0.12),
        -2px -2px 1px rgba(255, 253, 248, 0.54);
    text-align: center;
}

.cp-system-veil__loader {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(88, 111, 98, 0.18);
    border-top-color: var(--cp-orange);
    border-radius: 50%;
    animation: cp-system-spin 760ms linear infinite;
}

.cp-system-veil__box strong {
    font-size: 14px;
}

.cp-system-veil__box span:not(.cp-system-veil__loader) {
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.45;
}

@keyframes cp-system-spin {
    to {
        transform: rotate(360deg);
    }
}

.cp-system-toast.is-danger {
    border-color: rgba(185, 80, 65, 0.36);
    background: rgba(255, 242, 238, 0.98);
}

.cp-system-toast.is-warning {
    border-color: rgba(184, 101, 50, 0.34);
    background: rgba(250, 239, 229, 0.98);
}

.cp-system-toast strong,
.cp-system-toast span {
    display: block;
}

.cp-system-toast strong {
    font-size: 14px;
}

.cp-system-toast span:not(.cp-system-state__face) {
    color: var(--cp-muted);
    font-size: 13px;
}

.cp-system-toast__close {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    align-self: start;
    padding: 0;
    border: 1px solid rgba(88, 111, 98, 0.18);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.72);
    color: var(--cp-muted);
    font-size: 17px;
    line-height: 1;
}

.cp-system-toast__close:hover {
    border-color: rgba(88, 111, 98, 0.32);
    color: var(--cp-text);
}

.cp-demo-notice {
    border-color: rgba(134, 118, 107, 0.28);
    background: var(--cp-surface-soft);
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

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

.cp-sticky-savebar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 4px -4px 0;
    padding: 12px;
    border: 1px solid rgba(88, 111, 98, 0.26);
    border-radius: var(--cp-radius);
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 -10px 34px rgba(36, 33, 29, 0.08);
    backdrop-filter: blur(10px);
}

.cp-sticky-savebar__note {
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.cp-inline-password-fallback {
    display: grid;
    gap: 5px;
    min-width: min(100%, 260px);
    margin: 0;
    color: var(--cp-muted);
    font-size: 11px;
    font-weight: 700;
}

.cp-inline-password-fallback input {
    min-height: 38px;
}

body.has-cost-modal .cp-inline-password-fallback {
    display: none;
}

.label {
    color: var(--cp-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.value {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

/* 9. Tables and Forms */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cp-surface);
}

th,
td {
    padding: 10px;
    border-bottom: 1px solid #eee8dd;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

th {
    color: var(--cp-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cp-meta-panel {
    padding: 16px;
}

.cp-meta-panel h2 {
    margin-bottom: 4px;
    font-size: 20px;
    line-height: 1.15;
}

.cp-meta-panel > .muted {
    max-width: 680px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.35;
}

.cp-meta-table {
    font-size: 12px;
}

.cp-meta-table th,
.cp-meta-table td {
    padding: 7px 8px;
    font-size: 12px;
    line-height: 1.25;
}

.cp-meta-table th {
    font-size: 10px;
    letter-spacing: 0.04em;
}

.cp-meta-table td:nth-child(n+3),
.cp-meta-table th:nth-child(n+3) {
    text-align: right;
    white-space: nowrap;
}

.cp-meta-table--ads td:nth-child(n+3),
.cp-meta-table--ads th:nth-child(n+3) {
    white-space: normal;
}

.cp-meta-table--ads {
    table-layout: fixed;
    width: 100%;
}

.cp-meta-table--ads th:nth-child(1) {
    width: 34%;
}

.cp-meta-table--ads th:nth-child(2) {
    width: 14%;
}

.cp-meta-table--ads th:nth-child(3) {
    width: 14%;
}

.cp-meta-table--ads th:nth-child(4) {
    width: 20%;
}

.cp-meta-table--ads th:nth-child(5) {
    width: 18%;
}

.cp-meta-table--ads .cp-meta-col-url,
.cp-meta-table--ads .cp-meta-url-cell {
    text-align: left;
}

.cp-meta-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid rgba(83, 49, 33, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--cp-text);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.cp-meta-link:hover {
    border-color: rgba(83, 49, 33, 0.3);
    color: var(--cp-text);
}

.cp-meta-data-state {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    color: var(--cp-muted);
    font-size: 11px;
    font-weight: 800;
}

.cp-meta-data-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(83, 49, 33, 0.72);
}

input,
textarea,
select {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: #fff;
    color: var(--cp-text);
    font-size: 15px;
}

select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.75L6 6.25l4.5-4.5' fill='none' stroke='rgba(40,35,31,0.5)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

textarea {
    min-height: 120px;
}

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

/* 10. Debug and Modals */
.debug-table {
    width: 100%;
    border-collapse: collapse;
}

.debug-table td {
    overflow-wrap: anywhere;
    padding: 9px 8px;
    border-bottom: 1px solid var(--cp-border);
    color: var(--cp-text);
    font-size: var(--cp-size-small);
    vertical-align: top;
}

.debug-table td:first-child {
    width: 38%;
    color: var(--cp-muted);
    font-weight: 800;
}

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

.cp-debug-variable-grid div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface-soft);
}

.cp-debug-variable-grid strong {
    overflow-wrap: anywhere;
    font-size: var(--cp-size-small);
}

.cp-debug-variable-grid span {
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.help-modal {
    display: none;
}

.cost-modal,
.cost-modal.open {
    display: none;
}

.help-modal.open {
    display: block;
}

.cost-modal.open {
    display: block;
}

.help-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(36, 33, 29, .28);
}

.cost-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36, 33, 29, 0.24);
    z-index: 45;
}

.help-modal-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(520px, 100vw);
    overflow: auto;
    padding: 22px;
    border-left: 1px solid var(--cp-border);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow);
}

.cost-modal__box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(520px, calc(100vw - 32px));
    transform: translate(-50%, -50%);
    padding: 18px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow);
    z-index: 46;
}

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

.cost-modal__head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cp-border);
}

.help-modal-body {
    display: grid;
    gap: 14px;
    padding-top: 16px;
}

.cost-modal__body {
    display: grid;
    gap: 12px;
    padding-top: 14px;
}

.cost-modal.is-submitting .cost-modal__box {
    opacity: .72;
    pointer-events: none;
}

body.is-cost-running {
    cursor: progress;
}

body.is-cost-running .sidebar__refresh-form button[aria-busy="true"] {
    opacity: .78;
    cursor: progress;
}

.help-grid {
    display: grid;
    gap: 12px;
}

.cp-help-page {
    display: grid;
    gap: 14px;
    text-align: left;
}

.cp-help-page .cp-page-head {
    align-items: flex-start;
}

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

.cp-contact-page {
    gap: 14px;
}

.cp-contact-console {
    display: grid;
    gap: 12px;
}

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

.cp-contact-console__grid > div {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(222, 216, 204, 0.78);
    border-radius: var(--cp-radius);
    background: var(--cp-surface-soft);
}

.cp-contact-console__grid span {
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cp-contact-console__grid strong {
    color: var(--cp-text);
    font-size: 14px;
    line-height: 1.22;
}

.cp-contact-console__grid p {
    margin: 0;
    color: var(--cp-muted);
    font-size: 12px;
    line-height: 1.42;
}

.cp-faq-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}

.cp-faq-nav a {
    padding: 7px 10px;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface-soft);
    color: var(--cp-text);
    font-size: var(--cp-size-small);
    font-weight: 800;
}

.cp-faq-nav a:hover {
    border-color: var(--cp-border-strong);
    background: #edf5e9;
}

.cp-faq-list {
    display: grid;
    gap: 10px;
}

.cp-faq-item {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}

.cp-faq-item summary {
    padding: 13px 14px;
    color: var(--cp-text);
    font-weight: 900;
    cursor: pointer;
}

.cp-faq-item div {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
}

.cp-faq-item p,
.cp-faq-item ol {
    margin-bottom: 0;
}

/* 11. Dashboard */
.cp-dashboard {
    display: grid;
    gap: 18px;
}

.cp-page-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}

.cp-page-head h2 {
    margin-bottom: 6px;
    font-family: var(--cp-font-mono);
    font-size: var(--cp-size-h2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cp-page-head p {
    max-width: 540px;
    margin-bottom: 0;
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

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

.cp-dashboard-hero .cp-page-actions {
    display: flex;
    min-height: 100%;
    align-self: stretch;
    padding-left: 14px;
    border-left: 1px solid rgba(134, 118, 107, 0.38);
    align-items: stretch;
    justify-content: stretch;
}

.cp-status-levers {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 7px;
    align-items: stretch;
    width: 100%;
    min-width: 132px;
    height: 100%;
    min-height: 128px;
    padding: 9px 10px 8px;
    border: 1px solid rgba(134, 118, 107, 0.16);
    border-radius: var(--cp-radius);
    background: linear-gradient(135deg, rgba(250, 247, 240, 0.92), rgba(223, 232, 223, 0.36));
    box-shadow: inset 0 1px 0 rgba(255, 253, 248, 0.72);
}

.cp-tour-inline-actions {
    display: flex;
    gap: 5px;
    justify-self: end;
    min-width: 0;
}

.cp-tour-inline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(88, 111, 98, 0.2);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.56);
    color: rgba(59, 48, 40, 0.72);
    font-family: var(--cp-font-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
    white-space: nowrap;
}

.cp-tour-inline-button:hover,
.cp-tour-inline-button:focus-visible {
    background: rgba(255, 253, 248, 0.9);
    color: var(--cp-text);
    outline: 2px solid rgba(217, 111, 40, 0.22);
    outline-offset: 2px;
}

.cp-tour-inline-button.is-hidden {
    display: none;
}

.cp-status-levers__meter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(74px, 1fr) 5px;
    gap: 5px 8px;
    align-items: end;
    min-height: 92px;
}

.cp-status-lever {
    position: relative;
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
}

.cp-status-lever i {
    position: relative;
    display: block;
    width: 4px;
    height: 72px;
    border-radius: 999px;
    background: rgba(88, 111, 98, 0.16);
}

.cp-status-lever i::after {
    position: absolute;
    left: 50%;
    width: 14px;
    height: 14px;
    content: "";
    transform: translateX(-50%);
    border: 1px solid rgba(255, 253, 248, 0.72);
    border-radius: 50%;
    background: rgba(217, 111, 40, 0.58);
    box-shadow: 0 4px 16px rgba(217, 111, 40, 0.16);
}

.cp-status-lever.is-high i::after {
    top: 2px;
    background: rgba(88, 111, 98, 0.62);
    box-shadow: 0 4px 16px rgba(88, 111, 98, 0.16);
}

.cp-status-lever.is-mid i::after {
    top: 29px;
}

.cp-status-lever.is-low i::after {
    top: 56px;
    background: rgba(184, 101, 50, 0.5);
}

.cp-status-lever small {
    max-width: 54px;
    overflow: hidden;
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: 8px;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.cp-status-levers__meter b {
    grid-column: 1 / -1;
    display: block;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(88, 111, 98, 0.24), rgba(217, 111, 40, 0.22), rgba(109, 134, 168, 0.22));
}

.cp-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(240px, 0.65fr) minmax(520px, 1.35fr) auto;
    align-items: start;
}

.cp-page-head--status {
    display: grid;
    grid-template-columns: minmax(240px, 0.66fr) minmax(440px, 1.34fr) auto;
    align-items: start;
}

.cp-page-head__copy {
    min-width: 0;
}

.cp-page-head__status {
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid rgba(134, 118, 107, 0.38);
}

.cp-dashboard-hero__copy {
    min-width: 0;
}

.cp-dashboard-hero-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    margin-top: -6px;
    padding-bottom: 2px;
}

.cp-dashboard-hero__status {
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid rgba(134, 118, 107, 0.38);
}

.cp-quick-status-list {
    column-count: 2;
    column-gap: 18px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.cp-quick-status-list li {
    display: block;
    break-inside: avoid;
    min-width: 0;
    margin: 0 0 7px;
    padding: 0 0 7px;
    border-bottom: 1px solid rgba(222, 216, 204, 0.68);
}

.cp-quick-status-list li:last-child {
    margin-bottom: 0;
}

.cp-quick-status-list span,
.cp-quick-status-list strong,
.cp-quick-status-list small {
    font-family: var(--cp-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cp-quick-status-list span {
    color: var(--cp-muted);
}

.cp-quick-status-list strong {
    color: var(--cp-text);
}

.cp-quick-status-list small {
    color: var(--cp-muted-soft);
    line-height: 1.25;
}

.cp-eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(223, 232, 223, 0.72);
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: var(--cp-size-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cp-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: var(--cp-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cp-section-label.compact {
    margin-bottom: 12px;
}

.cp-source-chip {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border: 1px solid rgba(134, 118, 107, 0.22);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.72);
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.cp-info-chip {
    position: relative;
    width: 17px;
    min-height: 17px;
    padding: 0;
    border-radius: 50%;
    border-color: var(--cp-border);
    background: transparent;
    color: var(--cp-muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.cp-info-chip::after {
    content: none;
    position: absolute;
    left: 0;
    right: auto;
    bottom: auto;
    top: calc(100% + 8px);
    width: min(310px, 78vw);
    padding: 10px 11px;
    border-radius: var(--cp-radius);
    background: var(--cp-text);
    color: var(--cp-surface);
    font-size: 12px;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity .16s ease, transform .16s ease;
    z-index: 120;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.cp-info-chip.is-tooltip-left::after {
    right: 0;
    left: auto;
    transform: translateY(-3px);
}

.cp-info-chip:hover::after,
.cp-info-chip:focus::after {
    opacity: 0;
}

.cp-tooltip {
    --bs-tooltip-max-width: min(330px, calc(100vw - 28px));
    --bs-tooltip-bg: var(--cp-text);
    --bs-tooltip-color: var(--cp-surface);
    --bs-tooltip-border-radius: var(--cp-radius);
    --bs-tooltip-padding-x: 11px;
    --bs-tooltip-padding-y: 10px;
    --bs-tooltip-font-size: 12px;
    --bs-tooltip-opacity: 1;
    z-index: 2000;
}

.cp-tooltip .tooltip-inner {
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 26px rgba(40, 35, 31, 0.18);
    line-height: 1.38;
    text-align: left;
}

.cp-floating-tooltip {
    position: fixed;
    z-index: 3000;
    width: max-content;
    max-width: min(330px, calc(100vw - 28px));
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--cp-radius);
    background: var(--cp-text);
    box-shadow: 0 12px 26px rgba(40, 35, 31, 0.18);
    color: var(--cp-surface);
    font-family: var(--cp-font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.38;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.cp-floating-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cp-admin-guide {
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    z-index: 1045;
    width: min(92vw, 520px);
    max-width: 520px;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    border-left: 1px solid var(--cp-border);
    background: var(--cp-surface);
    color: var(--cp-text);
    box-shadow: -18px 0 48px rgba(36, 33, 29, 0.14);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.24s ease, visibility 0.24s ease;
}

.cp-admin-guide.show,
.cp-admin-guide.showing {
    visibility: visible;
    transform: translateX(0);
}

.cp-admin-guide.hiding {
    visibility: visible;
    transform: translateX(100%);
}

.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(36, 33, 29, 0.28);
}

.offcanvas-backdrop.fade {
    opacity: 0;
}

.offcanvas-backdrop.show {
    opacity: 1;
}

.cp-admin-guide .offcanvas-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    min-height: 92px;
    padding: 22px 56px 18px 22px;
    border-bottom: 1px solid var(--cp-border);
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(245, 242, 236, 0.92));
}

.cp-admin-guide .offcanvas-title {
    margin: 0;
    color: var(--cp-text);
    font-size: 21px;
    line-height: 1.12;
    letter-spacing: 0;
}

.cp-admin-guide .offcanvas-header .cp-eyebrow,
.cp-admin-guide .offcanvas-header small {
    display: block;
    margin-bottom: 6px;
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: var(--cp-size-label);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cp-admin-guide .btn-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cp-border);
    border-radius: 50%;
    background:
        linear-gradient(45deg, transparent 45%, rgba(67, 56, 43, 0.62) 46% 54%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(67, 56, 43, 0.62) 46% 54%, transparent 55%),
        rgba(255, 253, 248, 0.78);
    background-size: 12px 12px, 12px 12px, auto;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.72;
}

.cp-admin-guide .btn-close:hover,
.cp-admin-guide .btn-close:focus-visible {
    opacity: 1;
    background:
        linear-gradient(45deg, transparent 45%, rgba(67, 56, 43, 0.76) 46% 54%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(67, 56, 43, 0.76) 46% 54%, transparent 55%),
        var(--cp-surface);
    background-size: 12px 12px, 12px 12px, auto;
    background-position: center;
    background-repeat: no-repeat;
}

.cp-admin-guide .offcanvas-body {
    display: grid;
    gap: 14px;
    padding: 18px 22px calc(28px + env(safe-area-inset-bottom));
}

.cp-admin-guide .offcanvas-body h3 {
    margin: 10px 0 4px;
    font-size: 15px;
}

.cp-admin-guide .offcanvas-body p,
.cp-admin-guide .offcanvas-body li {
    color: var(--cp-muted);
    font-size: var(--cp-size-p);
    line-height: var(--cp-line-body);
}

.cp-admin-guide .offcanvas-body ol,
.cp-admin-guide .offcanvas-body ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.cp-page-subnav {
    position: sticky;
    top: 10px;
    z-index: 12;
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    padding: 7px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: rgba(255, 253, 248, 0.92);
    box-shadow: var(--cp-shadow-soft);
    backdrop-filter: blur(12px);
    overflow-x: auto;
}

.cp-page-subnav a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 7px;
    min-width: 136px;
    min-height: 46px;
    padding: 8px 9px;
    border: 1px solid rgba(221, 214, 203, 0.85);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--cp-text);
    text-decoration: none;
}

.cp-page-subnav a:hover,
.cp-page-subnav a:focus-visible {
    border-color: rgba(88, 111, 98, 0.32);
    background: rgba(237, 245, 233, 0.78);
}

.cp-page-subnav small {
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--cp-muted-soft);
    font-size: 10px;
    font-weight: 900;
}

.cp-page-subnav strong {
    align-self: end;
    font-size: var(--cp-size-small);
    line-height: 1.2;
}

.cp-page-subnav span {
    color: var(--cp-muted);
    font-size: 10px;
    line-height: 1.35;
}

.cp-page-subnav + .notice,
.cp-page-subnav + .panel,
.cp-page-subnav + section {
    margin-top: 0;
}

.cp-page-accordion-section {
    margin-bottom: 14px;
    scroll-margin-top: 110px;
}

.cp-page-accordion-section[open] {
    display: grid;
    gap: 12px;
}

.cp-page-accordion-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-soft);
    cursor: pointer;
}

.cp-page-accordion-summary::marker {
    content: "";
}

.cp-page-accordion-summary::-webkit-details-marker {
    display: none;
}

.cp-page-accordion-summary::after {
    content: "›";
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    color: var(--cp-muted);
    font-size: 18px;
    line-height: 1;
    background: var(--cp-surface-soft);
    transition: transform 160ms ease, border-color 160ms ease;
}

.cp-page-accordion-section[open] > .cp-page-accordion-summary {
    border-color: rgba(88, 111, 98, 0.3);
    background: rgba(232, 247, 239, 0.42);
}

.cp-page-accordion-section[open] > .cp-page-accordion-summary::after {
    border-color: rgba(88, 111, 98, 0.32);
    transform: rotate(90deg);
}

.cp-page-accordion-summary > span {
    color: var(--cp-muted-soft);
    font-size: 12px;
    font-weight: 900;
}

.cp-page-accordion-summary strong,
.cp-page-accordion-summary small {
    display: block;
}

.cp-page-accordion-summary strong {
    color: var(--cp-text);
    font-size: var(--cp-size-h3);
    line-height: 1.15;
}

.cp-page-accordion-summary small {
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
    line-height: 1.35;
}

.cp-page-accordion-section > .panel {
    margin-bottom: 0;
}

.cp-dashboard [id] {
    scroll-margin-top: 110px;
}

.cp-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cp-metric-list {
    display: grid;
    gap: 9px;
    margin: 0;
}

.cp-metric-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(222, 216, 204, 0.72);
}

.cp-metric-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cp-metric-list dt {
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.cp-metric-list dd {
    margin: 0;
    color: var(--cp-text);
    font-weight: 900;
    text-align: right;
}

.cp-flow-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.cp-flow-list li {
    padding-left: 3px;
    line-height: 1.45;
}

.cp-status-grid,
.cp-feature-grid,
.cp-action-grid,
.cp-connector-grid,
.cp-home-data-grid,
.cp-data-flow {
    display: grid;
    gap: 12px;
}

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

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

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

.cp-connector-grid,
.cp-home-data-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp-status-card,
.cp-feature-card,
.cp-action-card,
.cp-home-data-card,
.cp-data-flow__step {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    color: var(--cp-text);
    text-decoration: none;
}

.cp-status-card .label,
.cp-status-card p,
.cp-feature-card p,
.cp-action-card span:not(.icon),
.cp-home-data-card small,
.cp-data-flow__step span {
    margin: 0;
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
    line-height: 1.4;
}

.cp-status-card .value {
    color: var(--cp-text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

.cp-feature-card h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.cp-action-card {
    align-content: start;
    min-height: 128px;
    border-color: rgba(88, 111, 98, 0.22);
    background: rgba(255, 253, 248, 0.72);
}

.cp-action-card:hover,
.cp-action-card:focus-visible {
    border-color: rgba(88, 111, 98, 0.36);
    background: rgba(237, 245, 233, 0.78);
    color: var(--cp-text);
}

.cp-action-card.is-primary {
    border-color: rgba(88, 111, 98, 0.36);
    background: rgba(237, 245, 233, 0.88);
}

.cp-action-card.is-disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.cp-action-card .icon,
.cp-home-data-card .icon {
    width: 20px;
    height: 20px;
    color: var(--cp-accent);
}

.cp-action-card strong,
.cp-home-data-card strong,
.cp-data-flow__step strong {
    color: var(--cp-text);
    font-size: 14px;
    line-height: 1.2;
}

.cp-home-data-panel__head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cp-company-objectives-panel {
    display: grid;
    gap: 14px;
}

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

.cp-company-objectives-card {
    display: grid;
    gap: 10px;
    min-height: 100%;
    padding: 14px;
    border: 1px solid rgba(222, 216, 204, 0.82);
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface-soft);
}

.cp-company-objectives-card__head {
    display: grid;
    gap: 4px;
}

.cp-company-objectives-card__head strong {
    color: var(--cp-text);
    font-size: var(--cp-size-small);
    line-height: 1.2;
}

.cp-company-objectives-card__head span {
    color: var(--cp-muted);
    font-family: var(--cp-font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cp-company-objectives-card p,
.cp-company-objectives-card small,
.cp-company-objectives-card ol {
    margin: 0;
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
    line-height: 1.45;
}

.cp-company-objectives-card ol {
    display: grid;
    gap: 5px;
    padding-left: 17px;
}

.cp-company-objectives-card__bar {
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: rgba(222, 216, 204, 0.72);
}

.cp-company-objectives-card__bar span {
    display: block;
    width: var(--cp-bar-value, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--cp-accent);
}

.cp-company-objectives-card.is-good,
.cp-company-objectives-card.is-ok {
    border-color: rgba(88, 111, 98, 0.26);
    background: rgba(237, 245, 233, 0.72);
}

.cp-company-objectives-card.is-warning,
.cp-company-objectives-card.is-alert {
    border-color: rgba(184, 101, 50, 0.24);
    background: rgba(245, 215, 195, 0.38);
}

.cp-company-objectives-card.is-danger,
.cp-company-objectives-card.is-error {
    border-color: rgba(140, 61, 56, 0.22);
    background: rgba(239, 217, 214, 0.38);
}

.cp-home-data-card.is-ready {
    border-color: rgba(88, 111, 98, 0.28);
    background: rgba(237, 245, 233, 0.7);
}

.cp-home-data-card.is-pending {
    background: var(--cp-surface-soft);
}

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

.cp-data-flow__step {
    position: relative;
}

.cp-data-flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 8px;
    height: 1px;
    background: var(--cp-border);
}

.cp-prompt-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    list-style: none;
}

.cp-prompt-flow li {
    position: relative;
    padding: 12px;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface-soft);
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.cp-prompt-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    z-index: 2;
    width: 10px;
    height: 2px;
    background: var(--cp-border);
}

.cp-decision-card {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.cp-ai-slider {
    display: grid;
    gap: 10px;
}

.cp-ai-slider__controls {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.cp-slider-arrow {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
}

.cp-ai-slider__track {
    display: grid;
    grid-auto-columns: minmax(310px, 32%);
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}

.cp-ai-slide {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    scroll-snap-align: start;
}

.cp-ai-slide h3 {
    margin: 0;
    font-size: 15px;
}

.cp-ai-slide pre {
    max-height: 220px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.45;
}

.cp-ai-agent-textarea {
    min-height: 180px;
}

.cp-ai-agent-builder {
    border-color: rgba(88, 111, 98, 0.32);
    background: #edf5e9;
}

.cp-ai-agent-builder__intro {
    display: grid;
    gap: 3px;
    padding: 11px;
    border: 1px solid rgba(88, 111, 98, 0.22);
    border-radius: var(--cp-radius);
    background: rgba(255, 253, 248, 0.76);
}

.cp-ai-agent-builder__intro strong {
    font-size: 14px;
}

.cp-ai-agent-builder__intro span {
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.cp-ai-brand-grid,
.cp-ai-brand-textgrid,
.cp-ai-agent-grid {
    display: grid;
    gap: 10px;
}

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

.cp-ai-brand-textgrid,
.cp-ai-agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cp-ai-brand-grid label,
.cp-ai-brand-textgrid label,
.cp-ai-agent-grid label {
    display: grid;
    gap: 5px;
    min-width: 0;
    margin: 0;
    color: var(--cp-muted);
    font-size: var(--cp-size-label);
    font-weight: 800;
    text-transform: uppercase;
}

.cp-ai-brand-textgrid textarea,
.cp-ai-agent-grid textarea {
    min-height: 150px;
    text-transform: none;
}

.cp-ai-build-toggle {
    display: inline-flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    margin: 12px 0 0;
    padding: 9px 11px;
    border: 1px solid rgba(88, 111, 98, 0.26);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.72);
    color: var(--cp-accent);
    font-size: var(--cp-size-small);
    font-weight: 800;
}

.cp-ai-generated-agent {
    border-color: rgba(88, 111, 98, 0.24);
}

.cp-ai-prompts-config,
.cp-ai-prompt-config-list {
    display: grid;
    gap: 12px;
}

.cp-ai-prompt-config-department {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface-soft);
}

.cp-ai-prompt-config-department summary {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    cursor: pointer;
}

.cp-ai-prompt-config-department summary span {
    color: var(--cp-text);
    font-weight: 900;
}

.cp-ai-prompt-config-department summary small {
    color: var(--cp-muted);
    font-size: var(--cp-size-small);
}

.cp-ai-prompt-config-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 12px;
}

.cp-ai-prompt-config-base {
    display: grid;
    gap: 10px;
    margin: 0 12px 12px;
    padding: 12px;
    border: 1px solid rgba(88, 111, 98, 0.14);
    border-radius: var(--cp-radius);
    background: rgba(237, 245, 233, 0.42);
}

.cp-ai-prompt-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
}

.cp-ai-prompt-config-base .cp-ai-prompt-config-grid {
    padding: 0;
}

.cp-ai-prompt-config-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    color: var(--cp-muted);
    font-size: var(--cp-size-label);
    font-weight: 800;
    text-transform: uppercase;
}

.cp-ai-prompt-config-card.is-base {
    border-color: rgba(88, 111, 98, 0.16);
    background: rgba(255, 253, 248, 0.72);
}

.cp-ai-prompt-config-card__head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(134, 118, 107, 0.16);
}

.cp-ai-prompt-config-card__head strong {
    color: var(--cp-text);
    font-size: 12px;
}

.cp-ai-prompt-config-card__head div {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cp-ai-prompt-config-card textarea {
    min-height: 128px;
    text-transform: none;
}

.cp-order-action {
    min-height: 27px;
    padding: 5px 7px;
    gap: 4px;
    font-size: 10px;
}

.cp-order-action .icon,
.cp-icon-action .icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

.cp-icon-action--danger {
    color: var(--cp-danger);
}

@media (max-width: 980px) {
    body.cp-app-body {
        overflow: hidden;
    }

    .app-shell {
        position: relative;
        display: block;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        background: var(--cp-bg);
        --cp-mobile-menu-width: min(86vw, 340px);
    }

    .app-main {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 12px 14px calc(86px + env(safe-area-inset-bottom));
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .content-wrap {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .app-shell:not(.is-sidebar-collapsed) .app-main,
    .app-shell.is-sidebar-open .app-main {
        transform: translateX(var(--cp-mobile-menu-width));
    }

    .sidebar {
        position: fixed;
        z-index: 1200;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--cp-mobile-menu-width);
        height: 100vh;
        height: 100dvh;
        padding: 14px 12px calc(88px + env(safe-area-inset-bottom));
        border-right: 1px solid var(--cp-border);
        box-shadow: 22px 0 60px rgba(36, 33, 29, 0.16);
        transform: translateX(calc(-1 * var(--cp-mobile-menu-width)));
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .app-shell:not(.is-sidebar-collapsed) .sidebar,
    .app-shell.is-sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar__brand {
        padding: 8px 4px 14px;
    }

    .sidebar__mark {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .sidebar__title {
        display: grid;
    }

    .sidebar__section-title {
        display: flex;
    }

    .sidebar__label,
    .sidebar__pill,
    .sidebar__language > span {
        display: inline-flex;
    }

    .sidebar__system-status {
        display: grid;
    }

    .sidebar__nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 14px;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar__toggle {
        width: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 50%;
    }

    .sidebar__toggle .sidebar__icon {
        display: inline-grid;
    }

    .sidebar__item {
        min-height: 42px;
        margin-bottom: 4px;
        padding: 9px 10px;
    }

    .app-shell.is-sidebar-collapsed .sidebar {
        padding: 14px 12px calc(88px + env(safe-area-inset-bottom));
    }

    .app-shell.is-sidebar-collapsed .sidebar__title {
        display: grid;
    }

    .app-shell.is-sidebar-collapsed .sidebar__section-title {
        display: flex;
    }

    .app-shell.is-sidebar-collapsed .sidebar__label,
    .app-shell.is-sidebar-collapsed .sidebar__pill,
    .app-shell.is-sidebar-collapsed .sidebar__language > span {
        display: inline-flex;
    }

    .app-shell.is-sidebar-collapsed .sidebar__system-status {
        display: grid;
    }

    .app-shell.is-sidebar-collapsed .sidebar__brand {
        justify-content: flex-start;
        padding: 8px 4px 14px;
    }

    .app-shell.is-sidebar-collapsed .sidebar__toggle {
        position: static;
        width: 38px;
        min-height: 38px;
        border-radius: 50%;
        opacity: 1;
        transform: none;
    }

    .app-shell.is-sidebar-collapsed .sidebar__toggle::before {
        display: none;
    }

    .app-shell.is-sidebar-collapsed .sidebar__toggle .sidebar__icon {
        display: inline-grid;
    }

    .app-shell.is-sidebar-collapsed .sidebar__mark {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .app-shell.is-sidebar-collapsed .sidebar__item {
        justify-content: flex-start;
    }

    .sidebar-backdrop {
        display: none;
    }

    .cp-mobile-tabbar {
        position: fixed;
        z-index: 1300;
        right: 14px;
        bottom: 12px;
        left: 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        border: 1px solid rgba(134, 118, 107, 0.24);
        border-radius: 22px;
        background: rgba(255, 253, 248, 0.92);
        box-shadow: 0 16px 44px rgba(36, 33, 29, 0.16);
        backdrop-filter: blur(14px);
    }

    .cp-mobile-tabbar__item {
        min-height: 50px;
        border-radius: 16px;
        color: var(--cp-muted);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    .cp-mobile-tabbar__item.is-active,
    .cp-mobile-tabbar__item[aria-expanded="true"] {
        background: var(--cp-accent-soft);
        color: var(--cp-text);
    }

    .topbar {
        display: none;
    }

    .topbar__menu-button {
        display: none;
    }

    .cp-dashboard,
    .panel,
    .card,
    .cp-module-frame,
    .cp-meta-panel,
    .cp-company-objectives-panel,
    .cp-business-control {
        max-width: 100%;
    }

    table {
        min-width: 720px;
    }

    .cp-meta-table,
    .table,
    table {
        width: 100%;
    }

    .panel:has(table),
    .cp-meta-panel:has(table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cp-action-grid,
    .cp-feature-grid {
        grid-template-columns: 1fr;
    }

    .cp-status-grid,
    .cp-connector-grid,
    .cp-home-data-grid,
    .cp-data-flow,
    .cp-two-column,
    .cp-ai-brand-grid,
    .cp-ai-brand-textgrid,
    .cp-ai-agent-grid,
    .cp-ai-prompt-config-grid {
        grid-template-columns: 1fr;
    }

    .cp-data-flow__step:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -7px;
        left: 30px;
        width: 2px;
        height: 10px;
    }

    .cp-prompt-flow li,
    .cp-prompt-flow li:first-child,
    .cp-prompt-flow li:last-child {
        border: 1px solid var(--cp-border);
        border-radius: var(--cp-radius);
    }

    .cp-prompt-flow {
        gap: 10px;
    }

    .cp-prompt-flow li:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -7px;
        left: 30px;
        width: 2px;
        height: 10px;
    }

    .cp-decision-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .cp-business-control {
        grid-template-columns: 1fr;
    }

    .cp-period-tabs {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cp-period-filter {
        grid-template-columns: 1fr;
    }

    .cp-ai-slider__controls {
        justify-content: flex-start;
    }

    .cp-ai-slider__track {
        grid-auto-columns: minmax(270px, 88%);
    }

    .cp-demo-department {
        display: none;
    }

    .cp-dark-section {
        padding: var(--cp-section-padding-y-mobile) 0;
    }

    .cp-dark-section__inner {
        width: min(100%, 1180px);
        padding-block: var(--cp-section-inner-padding-y-mobile);
    }

    .cp-between-dark-section {
        padding-block: var(--cp-between-dark-section-padding-y-mobile);
    }

    .cp-dark-section .cp-section-label,
    .cp-dark-section .cp-action-grid,
    .cp-dark-section .cp-connector-grid {
        padding-inline: var(--cp-dark-content-padding-x-mobile);
    }

    .cp-home-data-panel__head {
        align-items: flex-start;
    }

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

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

@media (max-width: 620px) {
    :root {
        --cp-size-body: 1rem;
        --cp-size-p: 1.0625rem;
        --cp-line-body: 1.62;
    }

    html,
    body {
        font-size: 16px;
    }

    p {
        font-size: var(--cp-size-p);
        line-height: var(--cp-line-body);
    }

    .cp-company-objectives-grid {
        grid-template-columns: 1fr;
    }

    .cp-info-chip::after,
    .cp-info-chip.is-tooltip-left::after {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 14px;
        left: 12px;
        width: auto;
        max-width: none;
        transform: translateY(8px);
    }

    .cp-info-chip:hover::after,
    .cp-info-chip:focus::after {
        transform: translateY(0);
    }

    .cp-quick-status-list {
        column-count: 1;
    }

    .cp-quick-status-list li:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .cp-ai-recommendation__head {
        display: grid;
    }

    .cp-ai-recommendation__date {
        min-width: 0;
        text-align: left;
    }

}