/*
 * TrimFlow UI v2
 * Camada visual unificada para portal do afiliado, painel administrativo
 * e consulta de agendamentos.
 */

:root {
    --tf-bg: #030c1c;
    --tf-bg-soft: #071326;
    --tf-panel: #0d192b;
    --tf-panel-strong: #111f34;
    --tf-panel-hover: #17263d;
    --tf-line: rgba(133, 158, 194, .2);
    --tf-line-strong: rgba(133, 158, 194, .34);
    --tf-text: #f4f7fc;
    --tf-muted: #91a2ba;
    --tf-accent: #ffffff;
    --tf-accent-deep: #dbe5f2;
    --tf-green: #69d69a;
    --tf-red: #ff8b82;
    --tf-radius: 20px;
    --tf-radius-small: 13px;
    --tf-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

/* Portal do afiliado */
.portal-affiliate-page {
    --ink: var(--tf-text);
    --paper: var(--tf-bg);
    --white: var(--tf-panel);
    --accent: var(--tf-accent);
    --muted: var(--tf-muted);
    --line: var(--tf-line);
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .1), transparent 28rem),
        radial-gradient(circle at 86% 90%, rgba(49, 105, 180, .18), transparent 34rem),
        var(--tf-bg);
    padding: 28px;
}

.portal-affiliate-page::before,
.portal-affiliate-page::after {
    display: none;
}

.portal-affiliate-page .affiliate-auth-card {
    background:
        radial-gradient(circle at 10% 0, rgba(255, 255, 255, .07), transparent 15rem),
        linear-gradient(145deg, rgba(17, 31, 52, .98), rgba(8, 19, 37, .98));
    border: 1px solid var(--tf-line);
    border-radius: 24px;
    box-shadow: var(--tf-shadow);
    color: var(--tf-text);
    max-width: 520px;
    padding: 30px;
}

.portal-affiliate-page .affiliate-auth-card.is-register {
    max-width: 760px;
}

.portal-affiliate-page .login-card::after {
    background: linear-gradient(90deg, transparent, var(--tf-accent), transparent);
}

.portal-affiliate-page .brand-dark {
    color: var(--tf-text);
    margin-bottom: 32px;
}

.portal-affiliate-page .auth-tabs {
    background: rgba(3, 12, 28, .56);
    border: 1px solid var(--tf-line);
    border-radius: 15px;
    gap: 7px;
    margin: 0 0 34px;
    padding: 7px;
}

.portal-affiliate-page .auth-tabs a {
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--tf-muted);
    min-height: 44px;
    padding: 13px;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.portal-affiliate-page .auth-tabs a + a {
    border-left-color: transparent;
}

.portal-affiliate-page .auth-tabs a:hover {
    color: var(--tf-text);
    transform: translateY(-1px);
}

.portal-affiliate-page .auth-tabs a.is-active {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    color: var(--tf-accent);
}

.portal-affiliate-page .eyebrow.dark {
    color: var(--tf-accent);
}

.portal-affiliate-page .login-card h1 {
    color: var(--tf-text);
}

.portal-affiliate-page .login-card > p,
.portal-affiliate-page .login-hint {
    color: var(--tf-muted);
}

.portal-affiliate-page .field span {
    color: #c6d0df;
}

.portal-affiliate-page .field input,
.portal-affiliate-page .field select {
    background: rgba(3, 12, 28, .72);
    border: 1px solid var(--tf-line-strong);
    color: var(--tf-text);
    color-scheme: dark;
}

.portal-affiliate-page .field input::placeholder {
    color: #65768f;
}

.portal-affiliate-page .field input:focus,
.portal-affiliate-page .field select:focus {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
    outline: 0;
}

.portal-affiliate-page .button-dark {
    background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-deep));
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(255, 255, 255, .12);
    color: #111827;
}

.portal-affiliate-page .button-dark:hover {
    box-shadow: 0 16px 34px rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

.portal-affiliate-page .login-payment-link {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .28);
    color: #ffffff;
}

/* Painel administrativo */
.admin-ui-v2.admin-page {
    --ink: var(--tf-text);
    --paper: var(--tf-bg-soft);
    --white: var(--tf-panel);
    --accent: var(--tf-accent);
    --muted: var(--tf-muted);
    --line: var(--tf-line);
    --green: var(--tf-green);
    --red: var(--tf-red);
    background:
        radial-gradient(circle at 100% 0, rgba(48, 98, 165, .16), transparent 34rem),
        var(--tf-bg);
    color: var(--tf-text);
}

.admin-ui-v2.admin-page .sidebar {
    background:
        radial-gradient(circle at 20% 0, rgba(255, 255, 255, .07), transparent 15rem),
        #061122;
    border: 0;
    border-right: 1px solid var(--tf-line);
    border-radius: 0;
    box-shadow: 18px 0 50px rgba(0, 0, 0, .2);
    padding: 28px 20px;
    width: 238px;
}

.admin-ui-v2 .sidebar-unit {
    border-color: var(--tf-line);
    margin-top: 36px;
    padding: 18px 10px;
}

.admin-ui-v2 .sidebar-unit small,
.admin-ui-v2 .sidebar-unit span {
    color: var(--tf-muted);
}

.admin-ui-v2 .sidebar nav {
    gap: 5px;
}

.admin-ui-v2 .sidebar nav a {
    border-radius: 12px;
    color: var(--tf-muted);
    padding: 12px;
}

.admin-ui-v2 .sidebar nav a.active,
.admin-ui-v2 .sidebar nav a:hover,
.admin-ui-v2.admin-theme-dark .sidebar nav a.active,
.admin-ui-v2.admin-theme-dark .sidebar nav a:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .28);
    color: var(--tf-accent);
    transform: translateX(3px);
}

.admin-ui-v2 .logout {
    border-color: var(--tf-line);
    color: var(--tf-muted);
}

.admin-ui-v2 .dashboard {
    margin-left: 238px;
    padding: 34px max(3vw, 28px) 60px;
}

.admin-ui-v2 .dashboard-header,
.admin-ui-v2.admin-theme-dark .dashboard-header {
    background:
        radial-gradient(circle at 8% 0, rgba(255, 255, 255, .07), transparent 18rem),
        linear-gradient(145deg, rgba(17, 31, 52, .98), rgba(8, 19, 37, .98));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow);
    padding: 24px;
}

.admin-ui-v2 .dashboard-header h1 {
    color: var(--tf-text);
}

.admin-ui-v2.admin-theme-dark .eyebrow.dark,
.admin-ui-v2 .eyebrow.dark {
    color: var(--tf-accent);
}

.admin-ui-v2 .stats article,
.admin-ui-v2.admin-theme-dark .stats article,
.admin-ui-v2 .schedule,
.admin-ui-v2.admin-theme-dark .schedule,
.admin-ui-v2 .settings-card,
.admin-ui-v2.admin-theme-dark .settings-card,
.admin-ui-v2 .client-card,
.admin-ui-v2.admin-theme-dark .client-card {
    background: linear-gradient(145deg, rgba(17, 31, 52, .96), rgba(8, 19, 37, .96));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.admin-ui-v2 .stats article::before {
    background: linear-gradient(90deg, var(--tf-accent), transparent);
}

.admin-ui-v2 .stats article:hover {
    border-color: rgba(255, 255, 255, .36);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .34);
}

.admin-ui-v2 .stats span,
.admin-ui-v2 .stats small,
.admin-ui-v2 .schedule-title p,
.admin-ui-v2 .calendar-legend span {
    color: var(--tf-muted);
}

.admin-ui-v2 .stats strong,
.admin-ui-v2 .schedule-title h2 {
    color: var(--tf-text);
}

.admin-ui-v2 .schedule-title,
.admin-ui-v2 .manual-form-heading {
    border-color: var(--tf-line);
}

.admin-ui-v2 .count-badge,
.admin-ui-v2.admin-theme-dark .count-badge {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .24);
    color: #ffffff;
}

.admin-ui-v2 .manual-appointment summary,
.admin-ui-v2.admin-theme-dark .manual-appointment summary,
.admin-ui-v2 .button-dark,
.admin-ui-v2.admin-theme-dark .button-dark {
    background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-deep));
    border-color: transparent;
    color: #111827;
}

.admin-ui-v2 .manual-appointment[open]::before {
    backdrop-filter: blur(8px);
    background: rgba(1, 7, 17, .76);
}

.admin-ui-v2 .manual-appointment-form,
.admin-ui-v2.admin-theme-dark .manual-appointment-form {
    background:
        radial-gradient(circle at 10% 0, rgba(255, 255, 255, .07), transparent 16rem),
        var(--tf-panel);
    border-color: var(--tf-line-strong);
    box-shadow: 0 35px 100px rgba(0, 0, 0, .7);
}

.admin-ui-v2 .manual-form-close {
    border-color: var(--tf-line-strong);
    color: var(--tf-text);
}

.admin-ui-v2 .manual-form-close:hover {
    background: var(--tf-panel-hover);
}

.admin-ui-v2 .field input,
.admin-ui-v2 .field textarea,
.admin-ui-v2 .field select,
.admin-ui-v2 .date-filter input,
.admin-ui-v2 .schedule-row input[type="time"],
.admin-ui-v2.admin-theme-dark .field input,
.admin-ui-v2.admin-theme-dark .field textarea,
.admin-ui-v2.admin-theme-dark .field select,
.admin-ui-v2.admin-theme-dark .date-filter input,
.admin-ui-v2.admin-theme-dark .schedule-row input[type="time"] {
    background: #081426;
    border-color: var(--tf-line-strong);
    color: var(--tf-text);
    color-scheme: dark;
}

.admin-ui-v2 .field input::placeholder,
.admin-ui-v2 .field textarea::placeholder,
.admin-ui-v2.admin-theme-dark .field input::placeholder,
.admin-ui-v2.admin-theme-dark .field textarea::placeholder {
    color: #65768f;
}

.admin-ui-v2 .field input:focus,
.admin-ui-v2 .field textarea:focus,
.admin-ui-v2 .field select:focus,
.admin-ui-v2 .date-filter input:focus {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
}

.admin-ui-v2 .schedule-calendar,
.admin-ui-v2.admin-theme-dark .schedule-calendar {
    border-color: var(--tf-line);
    border-radius: 15px;
    overflow: hidden;
}

.admin-ui-v2 .calendar-head,
.admin-ui-v2 .calendar-time,
.admin-ui-v2 .calendar-cell,
.admin-ui-v2.admin-theme-dark .calendar-head,
.admin-ui-v2.admin-theme-dark .calendar-time,
.admin-ui-v2.admin-theme-dark .calendar-cell {
    border-color: var(--tf-line);
}

.admin-ui-v2 .calendar-head,
.admin-ui-v2.admin-theme-dark .calendar-head {
    background: #071224;
    color: var(--tf-accent);
}

.admin-ui-v2 .calendar-time,
.admin-ui-v2.admin-theme-dark .calendar-time {
    background: #091528;
    color: var(--tf-text);
}

.admin-ui-v2 .calendar-cell,
.admin-ui-v2.admin-theme-dark .calendar-cell,
.admin-ui-v2.admin-theme-dark .legend-free {
    background: #0a1628;
}

.admin-ui-v2 .calendar-cell-free:hover,
.admin-ui-v2 .calendar-cell-free:focus-visible,
.admin-ui-v2.admin-theme-dark .calendar-cell-free:hover,
.admin-ui-v2.admin-theme-dark .calendar-cell-free:focus-visible {
    background: #132239;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
    color: var(--tf-accent);
}

.admin-ui-v2 .calendar-cell-occupied,
.admin-ui-v2.admin-theme-dark .calendar-cell-occupied,
.admin-ui-v2.admin-theme-dark .legend-occupied {
    background: rgba(105, 214, 154, .11);
    border-color: rgba(105, 214, 154, .34) !important;
}

.admin-ui-v2 .calendar-cell-blocked,
.admin-ui-v2.admin-theme-dark .calendar-cell-blocked,
.admin-ui-v2.admin-theme-dark .legend-blocked {
    background: #111e31;
    color: var(--tf-muted);
}

.admin-ui-v2.admin-theme-dark .report-row strong,
.admin-ui-v2.admin-theme-dark .receipt-link a,
.admin-ui-v2.admin-theme-dark .client-card a,
.admin-ui-v2.admin-theme-dark .phone-link {
    color: var(--tf-accent);
}

/* Consulta do cliente */
.customer-portal-page {
    --ink: var(--tf-text);
    --paper: var(--tf-bg);
    --white: var(--tf-panel);
    --accent: var(--tf-accent);
    --muted: var(--tf-muted);
    --line: var(--tf-line);
    background:
        radial-gradient(circle at 82% 0, rgba(48, 98, 165, .17), transparent 34rem),
        var(--tf-bg);
    color: var(--tf-text);
}

.customer-portal-page .site-header {
    background: rgba(3, 12, 28, .9);
    border-bottom: 1px solid var(--tf-line);
}

.customer-portal-page .customer-page {
    max-width: 920px;
    padding-top: 52px;
}

.customer-journey-bar {
    background:
        radial-gradient(circle at 12% 0, rgba(255, 255, 255, .08), transparent 18rem),
        linear-gradient(145deg, rgba(17, 31, 52, .98), rgba(8, 19, 37, .98));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow);
    margin-bottom: 30px;
    padding: 10px;
}

.customer-journey-bar .booking-tabs {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    position: static;
}

.customer-journey-bar .booking-tabs a {
    border: 1px solid transparent;
    min-height: 44px;
}

.customer-journey-bar .booking-tabs a.is-active {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .36);
    box-shadow: none;
    color: var(--tf-accent);
}

.customer-journey-bar .booking-tabs a > span {
    border-radius: 7px;
    border-width: 1px;
}

.customer-portal-page .customer-heading {
    border: 0;
    margin-bottom: 28px;
    padding: 0;
}

.customer-portal-page .customer-heading h1 {
    color: var(--tf-text);
}

.customer-portal-page .customer-heading p {
    color: var(--tf-muted);
}

.customer-portal-page .customer-search,
.customer-portal-page .customer-results {
    background: linear-gradient(145deg, rgba(17, 31, 52, .96), rgba(8, 19, 37, .96));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.customer-portal-page .field span {
    color: #c6d0df;
}

.customer-portal-page .field input {
    background: #081426;
    border-color: var(--tf-line-strong);
    border-radius: var(--tf-radius-small);
    color: var(--tf-text);
    color-scheme: dark;
}

.customer-portal-page .field input::placeholder {
    color: #65768f;
}

.customer-portal-page .field input:focus {
    border-color: var(--tf-accent);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
}

.customer-portal-page .button-dark {
    background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-deep));
    border-color: transparent;
    border-radius: var(--tf-radius-small);
    color: #111827;
}

.customer-portal-page .schedule-title {
    border-color: var(--tf-line);
}

.customer-portal-page .text-link {
    border-color: var(--tf-accent);
    color: var(--tf-accent);
}

.customer-portal-page .customer-appointment {
    background: rgba(7, 18, 36, .66);
    border: 1px solid var(--tf-line);
    border-radius: 15px;
    margin-top: 12px;
    padding: 22px;
    transition: border-color .2s ease, transform .2s ease;
}

.customer-portal-page .customer-appointment:hover {
    border-color: rgba(255, 255, 255, .32);
    transform: translateY(-2px);
}

.customer-portal-page .customer-date span {
    color: var(--tf-accent);
}

.customer-portal-page .customer-service p,
.customer-portal-page .customer-status-help {
    color: var(--tf-muted);
}

.customer-portal-page .customer-status-help {
    border-color: var(--tf-line);
}

.customer-portal-page footer {
    background: #020816;
    border-top: 1px solid var(--tf-line);
}

/* Identidade masculina: azul-marinho e branco */
.booking-modern:not(.theme-feminine) {
    --booking-accent: #ffffff;
}

.booking-modern:not(.theme-feminine) .booking-journey-bar {
    background:
        radial-gradient(circle at 12% 0, rgba(255, 255, 255, .1), transparent 18rem),
        linear-gradient(145deg, rgba(17, 31, 52, .98), rgba(8, 19, 37, .98));
}

.booking-modern:not(.theme-feminine) .booking-tabs a.is-active {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .38);
    color: #ffffff;
}

.booking-modern:not(.theme-feminine) .booking-progress button.is-active {
    color: #ffffff;
}

.booking-modern:not(.theme-feminine) .booking-progress button.is-active > span,
.booking-modern:not(.theme-feminine) .booking-progress button.is-complete > span {
    background: linear-gradient(135deg, #ffffff, #dbe5f2);
    color: #071426;
}

.booking-modern:not(.theme-feminine) .booking-progress button.is-complete + i {
    background: linear-gradient(90deg, #ffffff, #7f93ad);
}

.booking-modern:not(.theme-feminine) .booking-next,
.booking-modern:not(.theme-feminine) .booking-submit {
    background: linear-gradient(135deg, #ffffff, #dbe5f2);
    box-shadow: 0 10px 24px rgba(255, 255, 255, .12);
    color: #071426;
}

.booking-modern:not(.theme-feminine) .service-check,
.booking-modern:not(.theme-feminine) .slot input:checked + span {
    background: #ffffff;
    border-color: #ffffff;
    color: #071426;
}

/* Administração da plataforma */
.platform-admin-page {
    --ink: var(--tf-text);
    --paper: var(--tf-bg);
    --white: var(--tf-panel);
    --accent: #ffffff;
    --muted: var(--tf-muted);
    --line: var(--tf-line);
    --green: var(--tf-green);
    --red: var(--tf-red);
    background:
        radial-gradient(circle at 88% 0, rgba(49, 105, 180, .17), transparent 34rem),
        var(--tf-bg);
    color: var(--tf-text);
    min-height: 100vh;
}

.platform-admin-page .site-header {
    background: rgba(3, 12, 28, .92);
    border-bottom: 1px solid var(--tf-line);
    height: 78px;
    padding: 0 max(4vw, 28px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.platform-admin-page .header-links {
    gap: 8px;
}

.platform-admin-page .admin-link {
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--tf-muted);
    font-size: 11px;
    padding: 10px 12px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.platform-admin-page .admin-link:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

.platform-admin-page .affiliate-management {
    max-width: 1260px;
    padding-top: 54px;
}

.platform-admin-page .customer-heading {
    background:
        radial-gradient(circle at 8% 0, rgba(255, 255, 255, .07), transparent 18rem),
        linear-gradient(145deg, rgba(17, 31, 52, .98), rgba(8, 19, 37, .98));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow);
    margin-bottom: 28px;
    padding: 28px;
}

.platform-admin-page .customer-heading h1 {
    color: var(--tf-text);
    font-size: clamp(38px, 5vw, 62px);
}

.platform-admin-page .customer-heading p,
.platform-admin-page .schedule-title p {
    color: var(--tf-muted);
}

.platform-admin-page .eyebrow.dark {
    color: #ffffff;
}

.platform-admin-page .affiliate-list-card {
    background: linear-gradient(145deg, rgba(17, 31, 52, .97), rgba(8, 19, 37, .97));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    padding: 28px;
}

.platform-admin-page .schedule-title {
    border-color: var(--tf-line);
}

.platform-admin-page .schedule-title h2,
.platform-admin-page .affiliate-list h3,
.platform-admin-page .access-card-header h3,
.platform-admin-page .access-metric strong {
    color: var(--tf-text);
}

.platform-admin-page .affiliate-list {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.platform-admin-page .affiliate-list article,
.platform-admin-page .access-card {
    background: rgba(7, 18, 36, .72);
    border: 1px solid var(--tf-line);
    border-radius: 16px;
    padding: 22px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.platform-admin-page .affiliate-list article:hover,
.platform-admin-page .access-card:hover {
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
    transform: translateY(-2px);
}

.platform-admin-page .affiliate-list article:last-child {
    border-bottom: 1px solid var(--tf-line);
}

.platform-admin-page .affiliate-list p,
.platform-admin-page .affiliate-list small,
.platform-admin-page .access-card-header p,
.platform-admin-page .access-card-header small {
    color: var(--tf-muted);
}

.platform-admin-page .affiliate-booking-link {
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--tf-line);
    border-radius: 12px;
}

.platform-admin-page .affiliate-booking-link span,
.platform-admin-page .access-metric span,
.platform-admin-page .access-checkout span {
    color: var(--tf-muted);
}

.platform-admin-page .affiliate-booking-link a,
.platform-admin-page .access-checkout a {
    color: #ffffff;
}

.platform-admin-page .copy-link-button,
.platform-admin-page .button-dark {
    background: linear-gradient(135deg, #ffffff, #dbe5f2);
    border: 0;
    border-radius: 10px;
    color: #071426;
}

.platform-admin-page .button-danger {
    background: #8e3244;
    border-color: #a9475a;
    border-radius: 10px;
    color: #ffffff;
}

.platform-admin-page .affiliate-pin-form {
    border-color: var(--tf-line);
}

.platform-admin-page .field > span {
    color: #c8d3e3;
}

.platform-admin-page .field input,
.platform-admin-page .field textarea,
.platform-admin-page .field select {
    background: #081426;
    border-color: var(--tf-line-strong);
    border-radius: var(--tf-radius-small);
    color: var(--tf-text);
    color-scheme: dark;
}

.platform-admin-page .field input::placeholder,
.platform-admin-page .field textarea::placeholder {
    color: #65768f;
}

.platform-admin-page .field input:focus,
.platform-admin-page .field textarea:focus,
.platform-admin-page .field select:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .09);
}

.platform-admin-page .access-heading {
    align-items: center;
}

.platform-admin-page .integration-status {
    background: rgba(7, 18, 36, .62);
    border-color: var(--tf-line);
    border-radius: 14px;
}

.platform-admin-page .integration-status span,
.platform-admin-page .integration-status small {
    color: var(--tf-muted);
}

.platform-admin-page .plan-summary {
    background: rgba(255, 255, 255, .06);
    border-color: var(--tf-line);
    border-radius: 999px;
    color: #dce5f2;
}

.platform-admin-page .access-list {
    margin-top: 20px;
}

.platform-admin-page .access-payment-grid {
    gap: 12px;
}

.platform-admin-page .access-metric,
.platform-admin-page .access-checkout {
    background: #081426;
    border-color: var(--tf-line);
    border-radius: 12px;
}

.platform-admin-page .access-metric small {
    color: var(--tf-muted);
}

.platform-admin-page .copy-payment-link {
    color: #b9c8dd;
}

.platform-admin-page .alert {
    background: rgba(255, 255, 255, .07);
    border-color: var(--tf-line-strong);
    border-radius: 13px;
    color: #dce5f2;
}

.platform-admin-page .alert-success {
    background: rgba(105, 214, 154, .1);
    border-color: rgba(105, 214, 154, .3);
    color: #9ce6bd;
}

.platform-admin-page .alert-error {
    background: rgba(255, 139, 130, .1);
    border-color: rgba(255, 139, 130, .3);
    color: #ffaaa3;
}

.platform-login-page .login-card {
    background:
        radial-gradient(circle at 10% 0, rgba(255, 255, 255, .07), transparent 15rem),
        linear-gradient(145deg, rgba(17, 31, 52, .98), rgba(8, 19, 37, .98));
    border: 1px solid var(--tf-line);
    color: var(--tf-text);
}

.platform-login-page .brand-dark,
.platform-login-page .login-card h1 {
    color: var(--tf-text);
}

.platform-login-page .login-card > p,
.platform-login-page .login-hint {
    color: var(--tf-muted);
}

.platform-login-page .field > span {
    color: #c8d3e3;
}

.platform-login-page .field input {
    background: #081426;
    border-color: var(--tf-line-strong);
    border-radius: var(--tf-radius-small);
    color: var(--tf-text);
}

.platform-login-page .button-dark {
    background: linear-gradient(135deg, #ffffff, #dbe5f2);
    border-radius: var(--tf-radius-small);
    color: #071426;
}

/* Planos e pagamentos */
.payment-ui-v2 {
    --ink: var(--tf-text);
    --paper: var(--tf-bg);
    --white: var(--tf-panel);
    --accent: #ffffff;
    --muted: var(--tf-muted);
    --line: var(--tf-line);
    --green: var(--tf-green);
    --red: var(--tf-red);
    background:
        radial-gradient(circle at 90% 0, rgba(49, 105, 180, .18), transparent 36rem),
        var(--tf-bg);
    color: var(--tf-text);
}

.payment-ui-v2 .payment-topbar {
    background: rgba(3, 12, 28, .9);
    border: 1px solid var(--tf-line);
    border-radius: 0 0 18px 18px;
    max-width: none;
    padding-left: max(4vw, 28px);
    padding-right: max(4vw, 28px);
}

.payment-ui-v2 .brand-dark {
    color: var(--tf-text);
}

.payment-ui-v2 .payment-back-link {
    border: 1px solid var(--tf-line);
    border-radius: 10px;
    color: var(--tf-muted);
    padding: 10px 12px;
}

.payment-ui-v2 .payment-back-link:hover {
    border-color: rgba(255, 255, 255, .3);
    color: #ffffff;
}

.payment-ui-v2 .payment-dashboard {
    max-width: 1320px;
    padding-top: 42px;
}

.payment-ui-v2 .payment-dashboard-heading {
    background:
        radial-gradient(circle at 8% 0, rgba(255, 255, 255, .07), transparent 18rem),
        linear-gradient(145deg, rgba(17, 31, 52, .98), rgba(8, 19, 37, .98));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow);
    padding: 28px;
}

.payment-ui-v2 .payment-dashboard-heading h1,
.payment-ui-v2 .payment-account-chip strong {
    color: var(--tf-text);
}

.payment-ui-v2 .payment-dashboard-heading p,
.payment-ui-v2 .payment-account-chip span,
.payment-ui-v2 .payment-account-chip small {
    color: var(--tf-muted);
}

.payment-ui-v2 .eyebrow.dark {
    color: #ffffff;
}

.payment-ui-v2 .payment-account-chip {
    border-color: var(--tf-line);
}

.payment-ui-v2 .payment-status-panel,
.payment-ui-v2 .payment-plans-section,
.payment-ui-v2 .payment-history {
    background: linear-gradient(145deg, rgba(17, 31, 52, .97), rgba(8, 19, 37, .97));
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .27);
}

.payment-ui-v2 .payment-status-panel {
    overflow: hidden;
}

.payment-ui-v2 .payment-status-metric {
    border-color: var(--tf-line);
}

.payment-ui-v2 .payment-status-main small,
.payment-ui-v2 .payment-status-metric small,
.payment-ui-v2 .payment-section-title > small {
    color: var(--tf-muted);
}

.payment-ui-v2 .payment-status-main strong,
.payment-ui-v2 .payment-status-metric strong,
.payment-ui-v2 .payment-section-title h2 {
    color: var(--tf-text);
}

.payment-ui-v2 .payment-status-dot {
    border-color: rgba(255, 255, 255, .18);
}

.payment-ui-v2 .payment-status-dot.is-pending {
    background: #ffffff;
}

.payment-ui-v2 .payment-panel-link {
    background: #ffffff;
    border-radius: 10px;
    color: #071426;
}

.payment-ui-v2 .payment-dashboard-grid {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.payment-ui-v2 .payment-plans-section,
.payment-ui-v2 .payment-history {
    padding: 28px;
}

.payment-ui-v2 .payment-section-title span {
    color: #ffffff;
}

.payment-swipe-hint {
    color: var(--tf-muted);
    display: none;
    font-size: 10px;
    margin: -12px 0 16px;
}

.payment-ui-v2 .payment-plan-option {
    background: rgba(7, 18, 36, .72);
    border-color: var(--tf-line);
    border-radius: 17px;
    color: var(--tf-text);
    min-width: 0;
}

.payment-ui-v2 .payment-plan-option:hover {
    border-color: rgba(255, 255, 255, .32);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}

.payment-ui-v2 .payment-plan-option.is-selected {
    background: linear-gradient(145deg, rgba(25, 44, 70, .96), rgba(9, 23, 43, .96));
    border-color: rgba(255, 255, 255, .48);
    box-shadow: inset 4px 0 0 #ffffff, 0 18px 40px rgba(0, 0, 0, .2);
}

.payment-ui-v2 .payment-plan-check {
    border-color: var(--tf-line-strong);
}

.payment-ui-v2 .payment-plan-option.is-selected .payment-plan-check {
    background: #ffffff;
    border-color: #ffffff;
    color: #071426;
}

.payment-ui-v2 .payment-plan-tag {
    color: #dbe5f2;
}

.payment-ui-v2 .payment-plan-head h3,
.payment-ui-v2 .payment-plan-price {
    color: var(--tf-text);
}

.payment-ui-v2 .payment-plan-head p,
.payment-ui-v2 .payment-plan-price > span small,
.payment-ui-v2 .payment-plan-features span {
    color: var(--tf-muted);
}

.payment-ui-v2 .payment-plan-features {
    border-color: var(--tf-line);
}

.payment-ui-v2 .payment-plan-note {
    background: #081426;
    border: 1px solid var(--tf-line);
    border-radius: 13px;
}

.payment-ui-v2 .payment-plan-note p {
    color: var(--tf-muted);
}

.payment-ui-v2 .payment-checkout-card {
    background:
        radial-gradient(circle at 12% 0, rgba(255, 255, 255, .08), transparent 17rem),
        linear-gradient(145deg, #111f34, #071426);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .34);
    color: var(--tf-text);
    top: 20px;
}

.payment-ui-v2 .payment-checkout-card .eyebrow {
    color: #ffffff;
}

.payment-ui-v2 .payment-checkout-row,
.payment-ui-v2 .payment-checkout-total,
.payment-ui-v2 .payment-provider {
    border-color: var(--tf-line);
}

.payment-ui-v2 .payment-checkout-row > span,
.payment-ui-v2 .payment-checkout-total > span,
.payment-ui-v2 .payment-provider span,
.payment-ui-v2 .payment-provider small {
    color: var(--tf-muted);
}

.payment-ui-v2 .payment-checkout-total small {
    color: #ffffff;
}

.payment-ui-v2 .payment-checkout-button {
    background: linear-gradient(135deg, #ffffff, #dbe5f2);
    border-radius: 11px;
    color: #071426;
}

.payment-ui-v2 .payment-unavailable {
    background: rgba(255, 139, 130, .1);
    border: 1px solid rgba(255, 139, 130, .3);
    border-radius: 11px;
    color: #ffaaa3;
}

.payment-ui-v2 .payment-history-empty {
    background: rgba(7, 18, 36, .54);
    border-color: var(--tf-line);
    border-radius: 13px;
    color: var(--tf-muted);
}

.payment-ui-v2 .payment-history-empty strong {
    color: var(--tf-text);
}

.payment-ui-v2 .payment-history-list article {
    border-color: var(--tf-line);
}

.payment-ui-v2 .payment-history-icon {
    background: rgba(105, 214, 154, .12);
}

.payment-ui-v2 .alert {
    border-radius: 13px;
}

@media (max-width: 900px) {
    .admin-ui-v2.admin-page .sidebar {
        border-bottom: 1px solid var(--tf-line);
        border-right: 0;
        width: auto;
    }

    .admin-ui-v2 .dashboard {
        margin-left: 0;
        padding: 24px 18px 50px;
    }

    .platform-admin-page .access-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .platform-admin-page .integration-status {
        min-width: 0;
    }

    .platform-admin-page .access-payment-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .payment-ui-v2 .payment-checkout-card {
        position: static;
    }
}

@media (max-width: 620px) {
    .portal-affiliate-page {
        padding: 14px;
    }

    .portal-affiliate-page .affiliate-auth-card {
        border-radius: 19px;
        padding: 24px 18px;
    }

    .portal-affiliate-page .auth-register-grid {
        grid-template-columns: 1fr;
    }

    .portal-affiliate-page .auth-register-grid .auth-field-wide {
        grid-column: auto;
    }

    .admin-ui-v2 .dashboard-header {
        padding: 19px;
    }

    .customer-portal-page .customer-page {
        padding: 28px 14px 60px;
    }

    .customer-portal-page .customer-heading h1 {
        font-size: 38px;
    }

    .customer-portal-page .customer-search,
    .customer-portal-page .customer-results {
        padding: 18px;
    }

    .customer-portal-page .customer-search-form {
        grid-template-columns: 1fr;
    }

    .customer-portal-page .customer-appointment {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .customer-portal-page .customer-status-help {
        border-left: 0;
        border-top: 1px solid var(--tf-line);
        padding: 14px 0 0;
    }

    .platform-admin-page .site-header {
        align-items: flex-start;
        gap: 14px;
        height: auto;
        padding: 18px;
    }

    .platform-admin-page .header-links {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .platform-admin-page .admin-link {
        padding: 7px 8px;
    }

    .platform-admin-page .affiliate-management {
        padding: 28px 14px 60px;
    }

    .platform-admin-page .customer-heading,
    .platform-admin-page .affiliate-list-card {
        padding: 18px;
    }

    .platform-admin-page .customer-heading h1 {
        font-size: 38px;
    }

    .platform-admin-page .access-payment-grid {
        grid-template-columns: 1fr;
    }

    .payment-ui-v2 .payment-topbar {
        padding: 18px;
    }

    .payment-ui-v2 .payment-topbar .brand small {
        display: none;
    }

    .payment-ui-v2 .payment-back-link {
        font-size: 10px;
    }

    .payment-ui-v2 .payment-dashboard {
        padding: 24px 14px 60px;
    }

    .payment-ui-v2 .payment-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .payment-ui-v2 .payment-dashboard-heading h1 {
        font-size: 40px;
    }

    .payment-ui-v2 .payment-account-chip {
        border-left: 0;
        border-top: 1px solid var(--tf-line);
        min-width: 0;
        padding: 16px 0 0;
        width: 100%;
    }

    .payment-ui-v2 .payment-status-panel {
        grid-template-columns: 1fr 1fr;
    }

    .payment-ui-v2 .payment-status-main,
    .payment-ui-v2 .payment-status-metric {
        border-bottom: 1px solid var(--tf-line);
        min-height: 82px;
        padding: 16px;
    }

    .payment-ui-v2 .payment-status-metric {
        border-left: 1px solid var(--tf-line);
    }

    .payment-ui-v2 .payment-panel-link {
        grid-column: 1 / -1;
        margin: 12px;
        text-align: center;
    }

    .payment-ui-v2 .payment-plans-section,
    .payment-ui-v2 .payment-history,
    .payment-ui-v2 .payment-checkout-card {
        padding: 20px;
    }

    .payment-ui-v2 .payment-section-title {
        align-items: flex-start;
    }

    .payment-swipe-hint {
        display: block;
    }

    .payment-ui-v2 .payment-plan-options {
        display: flex;
        gap: 12px;
        margin-left: -20px;
        margin-right: -20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 4px 20px 18px;
        scroll-padding-left: 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .payment-ui-v2 .payment-plan-options::-webkit-scrollbar {
        display: none;
    }

    .payment-ui-v2 .payment-plan-option {
        flex: 0 0 calc(100vw - 56px);
        max-width: 430px;
        min-height: 470px;
        padding: 20px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .payment-ui-v2 .payment-plan-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .payment-ui-v2 .payment-plan-features {
        grid-template-columns: 1fr;
    }

    .payment-ui-v2 .payment-plan-note {
        grid-template-columns: 1fr;
    }

    .payment-ui-v2 .payment-history-list article {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .payment-ui-v2 .payment-history-list article > .payment-history-status,
    .payment-ui-v2 .payment-history-list article > strong {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-affiliate-page *,
    .admin-ui-v2 *,
    .customer-portal-page * {
        scroll-behavior: auto;
    }
}