/* Shared app surface. Loaded last so the existing module layouts stay intact. */
:root {
    --background-color: #f5f7fa;
    --sidebar-bg: #0b1524;
    --sidebar-text: #c5d2df;
    --sidebar-hover: #17283b;
    --text-color: #202c39;
    --text-primary: #142131;
    --text-secondary: #657486;
    --border-color: #dbe3ea;
    --card-shadow: rgba(15, 32, 48, .055);
    --primary-color: #136e91;
    --primary-strong: #105d7d;
    --primary-strong-hover: #0d4e69;
    --focus-ring: rgba(19, 110, 145, .22);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 3px rgba(15, 32, 48, .045);
    --shadow-md: 0 10px 28px rgba(15, 32, 48, .07);
}

body { letter-spacing: -.005em; }
::selection { background: #b8e8e4; color: #142131; }

/* The dark rail gives each product module a stable frame and a clear active state. */
.sidebar {
    background: #0b1524;
    color: #edf4fa;
    border-right: 1px solid #25364b;
    border-radius: 0;
    box-shadow: 8px 0 28px rgba(11, 21, 36, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.sidebar-header {
    min-height: 72px;
    padding: 18px 20px;
    border-color: #25364b;
}
.sidebar-logo { height: 30px; width: 30px; object-fit: contain; }
.sidebar-brand-name {
    color: #f4f8fc;
    font: 700 16px/1.2 var(--font-heading);
    letter-spacing: -.045em;
    white-space: nowrap;
}
.sidebar-close-btn { margin-left: auto; color: #9bb0c3; padding: 7px; }
.sidebar-close-btn:hover { background: #203249; color: #f4f8fc; }
.sidebar .menu-section-label {
    border-color: #25364b;
    color: #869db2;
    letter-spacing: .11em;
    font-size: 10px;
}
.sidebar .menu-divider { background: #25364b; }
.sidebar-header-store { border-color: #25364b; padding: 9px 16px 14px; }
.sidebar .menu-item-store {
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #32475e;
    border-radius: 10px;
    background: #142438;
    color: #e5eef6;
    text-align: left;
}
.sidebar .menu-item-store:hover { background: #1b3047; border-color: #52748b; }
.sidebar-menu { padding: 14px 12px; }
.sidebar .menu-item,
.sidebar button.menu-item {
    min-height: 42px;
    padding: 10px 13px;
    border-radius: 10px;
    color: #bdccda;
    font-weight: 540;
}
.sidebar .menu-item:hover {
    background: #192b3f;
    color: #fff;
    transform: none;
}
.sidebar .menu-item.active {
    background: #183c49;
    color: #b4f1e2;
    box-shadow: inset 0 0 0 1px rgba(96, 218, 190, .19);
    transform: none;
}
.sidebar .menu-item::before,
.sidebar .submenu-item::before { display: none; }
.sidebar .menu-item.active .menu-icon { stroke: #b4f1e2; }
.sidebar .submenu-arrow { color: #879fb4; }
.sidebar .submenu { margin-top: 2px; }
.sidebar .submenu-item,
.sidebar button.submenu-item {
    min-height: 38px;
    color: #a6bacd;
    border-radius: 8px;
}
.sidebar .submenu-item:hover,
.sidebar .submenu-item.active {
    background: #1a3440;
    color: #b4f1e2;
    transform: none;
}
.sidebar .help-center-btn {
    width: calc(100% - 24px);
    margin: 12px 12px;
    background: #142438;
    color: #c8d7e4;
    border-color: #2c435a;
    border-radius: 10px;
    box-shadow: none;
}
.sidebar .help-center-btn:hover { background: #1c3148; color: #fff; box-shadow: none; }
.sidebar-footer { border-color: #25364b; padding: 16px; }
.sidebar .user-name { color: #f0f6fb; }
.sidebar .user-email { color: #91a8bb; }
.sidebar .user-avatar { border: 2px solid #334f65; }
.sidebar .logout-button { border-color: #33475c; color: #c5d2df; }
.sidebar .logout-button:hover { background: #233146; color: #fff; border-color: #526b7d; }
.sidebar .store-dropdown {
    background: #102035;
    border-color: #40576d;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.sidebar .store-dropdown-search,
.sidebar .store-dropdown-option { background: #102035; color: #e4edf5; }
.sidebar .store-dropdown-project-header { background: #17293e; color: #e4edf5; }
.sidebar .store-dropdown-option:hover,
.sidebar .store-dropdown-project-header:hover { background: #20374b; color: #fff; }
.sidebar .store-dropdown-empty { color: #a6bacd; }
.sidebar.collapsed .sidebar-brand-name,
.sidebar.expanding .sidebar-brand-name { display: none; }

/* Content surfaces share spacing, shape and typography without changing behavior. */
.main-content {
    background: #f5f7fa;
    padding: clamp(22px, 2.7vw, 42px);
}
.content-section { max-width: 1660px; margin-inline: auto; }
.section-header { margin-bottom: 26px; }
.section-header h1 {
    font-family: var(--font-heading);
    font-weight: 750;
    letter-spacing: -.045em;
    background: none;
    color: #142131;
    -webkit-text-fill-color: currentColor;
}
.section-header--visual {
    min-height: 110px;
    padding: 24px 28px;
    gap: 9px;
    background: #fff;
    border-color: #dfe6ed;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.section-header--visual::after { opacity: .52; }
.section-header--visual p { color: #657486; }
.section-header--visual h2,
.section-header--visual .ac-header-title {
    color: #142131;
    font-family: var(--font-heading);
    letter-spacing: -.035em;
    background: none;
    -webkit-text-fill-color: currentColor;
}
.section-help-btn { border: 1px solid #dfe6ed; color: #617587; box-shadow: none; }
.section-help-btn:hover { color: #105d7d; border-color: #b8ccd8; box-shadow: none; transform: none; }
.feature-card,
.feature-toggle-card,
.billing-card,
.stripe-portal-card,
.invoice-history-container,
.billing-quick-info {
    background: #fff;
    border-color: #dfe6ed;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}
.feature-card:hover,
.feature-toggle-card:hover,
.billing-card:hover { border-color: #b4cbd3; box-shadow: var(--shadow-md); }
.btn-primary,
.btn-generate-images,
.btn-stripe-portal {
    background: #105d7d;
    border-radius: 10px;
    box-shadow: none;
}
.btn-primary:hover,
.btn-generate-images:hover,
.btn-stripe-portal:hover { background: #0d4e69; box-shadow: 0 5px 16px rgba(16, 93, 125, .18); }
.btn-secondary { border-color: #d5dfe8; border-radius: 10px; color: #243448; }
.btn-secondary:hover { background: #f6f9fb; border-color: #aebfcb; }
.segmented-tabs {
    background: #eaf0f4;
    border: 1px solid #dbe4eb;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.segmented-tab { border-radius: 9px; color: #536678; }
.segmented-tabs--blue .segmented-tab.active,
.segmented-tabs--green .segmented-tab.active {
    color: #142131;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 32, 48, .1);
}
.segmented-tabs--blue .segmented-tab.active .segmented-tab-icon,
.segmented-tabs--green .segmented-tab.active .segmented-tab-icon { background: #d9f4ed; color: #0c735b; }
.products-table thead { background: #f0f4f7; }
.products-table th { color: #526576; }
.products-table td { border-color: #e3eaf0; }
.products-table tbody tr:hover { background: #f8fbfc; }
.billing-info-value,
.invoice-amount { font-variant-numeric: tabular-nums; }

/* The empty chat state explains the next action and keeps all four tools visible. */
.chat-welcome { max-width: 680px; margin: 0 0 30px; }
.chat-welcome-label {
    display: inline-block;
    margin-bottom: 11px;
    color: #0e735d;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.chat-welcome h1 {
    color: #142131;
    font: 700 clamp(27px, 3vw, 40px)/1.14 var(--font-heading);
    letter-spacing: -.035em;
}
.chat-welcome p { margin-top: 11px; color: #647589; font-size: 15px; line-height: 1.55; }
.chat-feature-cards { max-width: 1050px; margin: 0 auto; padding: 18px 12px; }
.chat-feature-cards .feature-card-grid { gap: 14px; }
.chat-feature-cards .feature-card {
    background: #fff;
    border-color: #dfe6ed;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 22px;
}
.chat-feature-cards .feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.chat-feature-cards .feature-card p { color: #607184; font-size: 13px; }
.chat-feature-cards .feature-link { color: #105d7d; }
.chat-input-container {
    background: #fff;
    border: 1px solid #d6e1e9;
    box-shadow: 0 8px 28px rgba(15, 32, 48, .06);
    border-radius: 16px;
}
.chat-input-container:focus-within { border-color: #8bb8c4; box-shadow: 0 0 0 3px var(--focus-ring); }
.chat-input-container .input-field { border-color: #d7e1e9; }
.chat-message.assistant { border-left-color: #83d7c1; }
.chat-message.user { background: #e3f3f1; }

.login-screen { background: radial-gradient(circle at 20% 15%, #1c5261, transparent 34%), #0b1524; }
.login-card { border: 1px solid #dfe6ed; border-radius: 20px; box-shadow: 0 28px 70px rgba(0,0,0,.22); }

@media (max-width: 768px) {
    .main-content { padding: 80px 16px 22px; }
    .sidebar.collapsed .sidebar-brand-name { display: inline; }
    .chat-feature-cards { padding-inline: 0; }
    .chat-feature-cards .feature-card-grid { grid-template-columns: 1fr; }
    .section-header--visual { padding: 22px 20px; }
    .billing-quick-info { padding: 14px; }
}
@media (max-width: 480px) {
    .main-content { padding: 68px 16px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .content-section,
    .chat-message,
    .login-card { animation: none !important; }
    .chat-feature-cards .feature-card:hover { transform: none; }
}