@layer workspace {
    /*=========================
     Table of Contents
  =========================*/
    /*
     121   Workspace Page Grids
     124   Dashboard Home
     132   My Event
     166   Workspace Page
     215   Card
     257   Lists
     271   Progress
     305   Checklist
     340   Event Card
     432   Event Actions
     470   Event Resources
     533   Event Location
     575   Event Tips
     583   Tablet
     600   Intermediate (Tablet)
     655   Mobile
     687   Page Header
     694   Action Card
     719   Action Card Icon
     729   Action Card Text
     746   Action Card Variants
     765   Card
     778   workspace Messages
     885   Icon Badge
     905   Icon Badge
     912   Icon Circle
     919   Icon Sizes
     931   Stat Card
     995   Variants
     1033  Icon variants
     1071  Filter
     1141  WS PAGE TOOLBAR
     1181  WS LIST
     1203  Table — grid pai compartilhado
     1211  Header
     1228  Item
     1245  Section
     1262  List helpers
     1377  Plan Card
     1575  Media Object
     1606  Avatar
     1644  Badge
     1667  Stack
     1677  Meta
     1692  List Group
     1705  Helpers
     1713  Box
     1728  Highlight
     1762  Highlight States
     1780  Actions
     1790  Badge States
     1820  MOBILE
     1936  Modal
     2010  Event Template
     2013  Create Event Header
     2069  Create Event Step
     2095  Templates
     2265  Create Event Footer
     2310  Create Event Form
     2331  Create Event Input
     2383  Disabled Input
     2409  Step 2 — Notice Box
     2442  Step 2 — Slug Status
     2462  Step 3 — Review
     2595  Danger Box
     2658  Mobile
     2681  Field
     2733  Navigation Box
     2796  Primary Box
     2880  Membership Box
     2886  Membership Banner
     2982  Membership Status
     3055  Empty State
     3085  Mobile Empty State
     3095  Gift Steps
     3146  Gift Card Mobile
     3169  Panel List
     3285  Notifications
     3295  Header
     3320  List
     3330  Item
     3349  Unread
     3357  Icon
     3376  Content
     3433  Action
     3451  Footer
     3458  Mobile
     3472  SPOT banner
     3483  HEADER
     3520  DESCRIPTION
     3530  CONTENT
     3623  SPOT banner placeholder
     3659  Tour — compartilhado editor + dashboard
     3833  PIX settings chip (2026-07-08)
     3913  Central de Ajuda
     4690  Payment Modal
     4711  Plan Card
     4778  Feature Grid
     4809  Payment Method Select
     4889  Coupon
     4941  Security Note
     4971  Payment Footer
     4979  Payment Step Header
     5024  Payment Method Option (static recap)
     5035  Payment Form
     5116  Payment Installments
     5147  Payment Pix QR
     5186  Payment Order Summary
     5229  Payment Waiting / Processing
     5303  Payment Result (success/failure)
     5451  Toast (compartilhado editor/dashboard)
     5486  Tooltip
  */

    /*=========================
   Workspace Page Grids
=========================*/
    /*=========================
   Dashboard Home
=========================*/
    .workspace-dashboard {
        display: grid;
        gap: var(--space-6);
    }

    /*=========================
   My Event
=========================*/
    .workspace-my-event {
        display: grid;
        gap: var(--space-6);
    }

    .workspace-my-event-hero {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) 1fr minmax(280px, 1fr);
        gap: var(--space-6);
    }

    .event-overview {
        grid-column: span 2;
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    .event-overview-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding-top: var(--space-12);
    }

    .workspace-my-event-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    /*=========================
   Workspace Page
=========================*/
    .page-header {
        margin-bottom: var(--space-10);
        border-bottom: none !important;
        padding-bottom: 0;
    }

    .page-title-divider {
        display: flex;
        align-items: center;
        gap: 18px;
        width: 100%;
    }

    .page-title-divider>span {
        flex: 1;
        height: 1px;
        background: var(--border-color);
    }

    .page-title {
        color: var(--primary);
        white-space: nowrap;
    }

    .page-title .icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-title h1 {
        font-size: 17px;
        font-weight: 600;
        margin: 0;
        color: var(--primary);
    }

    .page-header-subtitle {
        margin-top: var(--space-2);
        text-align: center;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /*=========================
   Card
=========================*/
    .ws-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 300px;
        padding: var(--space-6);
        border: 1px solid var(--border-color);
        border-radius: 18px;
        background: var(--surface);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    }

    .ws-card-header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-5);
        margin-bottom: var(--space-5);
    }

    .ws-card-title {
        color: var(--text);
        font-size: var(--text-xl);
        font-weight: 700;
    }

    .ws-card-description {
        margin-top: var(--space-1);
        color: var(--text-muted);
        font-size: var(--font-size-sm);
    }

    .ws-card-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-5);
    }

    /*=========================
   Lists
=========================*/
    .ws-list {
        display: grid;
        gap: var(--space-3);
    }

    .ws-list-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    /*=========================
   Progress
=========================*/
    .ws-progress {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        margin: var(--space-3) 0;
    }

    .ws-progress-track {
        flex: 1;
        overflow: hidden;
        height: 1rem;
        border-radius: var(--radius-full);
        background: var(--background);
    }

    .ws-progress-bar {
        width: var(--progress, 0%);
        height: 100%;
        border-radius: inherit;
        background: var(--primary);
        transition: width var(--motion-hover);
    }

    .ws-progress-value {
        flex-shrink: 0;
        color: var(--primary);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    /*=========================
   Checklist
=========================*/
    .ws-checklist {
        display: grid;
        gap: var(--space-4);
        margin: var(--space-4) 0;
    }

    .ws-check-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        color: var(--text);
        font-size: var(--font-size-sm);
    }

    .ws-check-status {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        background: var(--primary-10);
    }

    .ws-check-item.is-complete .ws-check-status {
        border-color: var(--success);
        background: var(--success);
        color: white;
    }

    /*=========================
   Event Card
=========================*/
    .event-card {
        overflow: hidden;
        width: 100%;
        padding: 0;
    }

    .event-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-4);
    }

    .event-card-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .event-card-title {
        font-size: var(--font-size-lg);
        font-weight: 700;
    }

    .event-card-info {
        display: grid;
        color: var(--text-muted);
        font-size: var(--font-size-sm);
    }

    .event-card-status {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-4);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
    }

    .event-overview-meta .event-card-status {
        margin-top: 0;
    }

    .event-card-status.is-published {
        background: var(--surface-success-10);
        color: var(--success);
    }

    .event-card-status.is-draft {
        background: var(--surface-warning-10);
        color: var(--warning);
    }

    .event-card-status-dot {
        width: 7px;
        height: 7px;
        border-radius: var(--radius-full);
        flex-shrink: 0;
    }

    .event-card-status.is-published .event-card-status-dot {
        background: var(--success);
        box-shadow: 0 0 0 3px rgb(var(--surface-success-rgb) / 0.6);
        animation: status-pulse 2.5s ease-in-out infinite;
    }

    .event-card-status.is-draft .event-card-status-dot {
        background: var(--warning);
    }

    @keyframes status-pulse {

        0%,
        100% {
            box-shadow: 0 0 0 3px rgb(var(--surface-success-rgb) / 0.6);
        }

        50% {
            box-shadow: 0 0 0 5px rgb(var(--surface-success-rgb) / 0.2);
        }
    }

    .event-card-actions {
        display: grid;
        gap: var(--space-2);
    }

    /*=========================
   Event Actions
=========================*/
    .event-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .event-action {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 3.5rem;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--background);
        color: var(--text);
        text-decoration: none;
        transition:
            background var(--motion-hover),
            border-color var(--motion-hover);
    }

    .event-action:hover {
        background: var(--surface-hover);
    }

    .event-action-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
    }

    /*=========================
   Event Resources
=========================*/
    .event-resources {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .event-resource {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 7rem;
        padding: var(--space-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
        transition:
            background var(--motion-hover),
            border-color var(--motion-hover),
            transform var(--motion-hover),
            box-shadow var(--motion-hover);
    }

    .event-resource-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .event-resource-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: var(--radius-md);
        background: var(--surface-muted);
        color: var(--muted);
        font-size: 1.25rem;
    }

    .event-resource-status {
        font-size: 1.25rem;
        color: var(--muted);
    }

    .event-resource strong {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
    }

    .event-resource small {
        display: block;
        color: var(--muted);
        font-size: var(--text-xs);
        line-height: 1.35;
    }

    /*=========================
   Event Location
=========================*/
    .event-location {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .event-location-map iframe {
        display: block;
        width: 100%;
        height: 180px;
        border: 0;
    }

    .event-location-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--border);
    }

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

    .event-location-kind {
        display: inline-flex;
        width: fit-content;
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, transparent);
        padding: 2px 8px;
        border-radius: var(--radius-full);
    }

    /*=========================
   Event Tips
=========================*/
    .event-tips-list {
        display: grid;
        gap: var(--space-3);
    }

    /*=========================
   Tablet
=========================*/
    @media (max-width: 1200px) {
        .workspace-my-event-hero {
            grid-template-columns: 1fr;
        }

        .workspace-my-event-content {
            grid-template-columns: 1fr 1fr;
        }

        .workspace-my-event-content>*:last-child {
            grid-column: span 2;
        }
    }

    /*=========================
   Intermediate (Tablet)
=========================*/
    @media (min-width: 769px) and (max-width: 1024px) {
        .workspace-my-event-content {
            grid-template-columns: 1fr;
        }

        .workspace-my-event-content>*:last-child {
            grid-column: auto;
        }

        .spot-banner-content {
            grid-template-columns: 1fr;
        }

        .spot-banner-image {
            display: none;
        }

        .spot-banner-title {
            font-size: var(--text-2xl);
        }

        .spot-banner-button {
            width: 100%;
        }

        /* ws-list — card layout em tablet (espelha mobile) */
        .ws-list-table {
            display: block;
        }

        .ws-list-header {
            display: none;
        }

        .ws-list-item {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
            padding: var(--space-4);
        }

        .ws-list-section::before {
            display: block;
        }

        .ws-list-section-actions {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }
    }

    /*=========================
   Mobile
=========================*/
    @media (max-width: 768px) {

        .workspace-dashboard,
        .workspace-my-event {
            gap: var(--space-3);
        }

        .workspace-my-event-hero,
        .workspace-my-event-content,
        .event-actions {
            grid-template-columns: 1fr;
        }

        .workspace-my-event-hero>*,
        .workspace-my-event-content>* {
            grid-column: auto !important;
        }

        .ws-card {
            padding: var(--space-4);
        }

        .ws-plan-hero,
        .ws-surface-header {
            margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
        }

    }

    /*=========================
   Page Header
=========================*/
    .page-header {
        border-bottom: var(--border-width) solid var(--border-color);
    }

    /*=========================
   Action Card
=========================*/
    .action-card {
        min-height: 72px;
        min-width: 180px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-3);
        padding: var(--space-3);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
        text-align: left;
        transition: var(--motion-hover);
    }

    .action-card:hover {
        transform: translateY(-2px);
        border-color: var(--primary-100);
        box-shadow: var(--shadow-sm);
    }

    /*=========================
   Action Card Icon
=========================*/
    .action-card .icon {
        flex: 0 0 auto;
        color: var(--primary-100);
        font-size: 24px;
        line-height: 1;
    }

    /*=========================
   Action Card Text
=========================*/
    .action-card strong {
        display: block;
        color: var(--text);
        font-size: var(--text-sm);
        line-height: var(--leading-tight);
    }

    .action-card small {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-xs);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Action Card Variants
=========================*/
    .action-card-danger:hover {
        border-color: var(--danger-100);
    }

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

    .action-card-warning:hover {
        border-color: var(--warning-100);
    }

    .action-card-warning .icon {
        color: var(--warning-100);
    }

    /*=========================
   Card
=========================*/
    .card {
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        padding: var(--space-5);
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    /*=========================
   workspace Messages
=========================*/
    .workspace-messages {
        position: fixed;
        top: var(--space-6);
        left: 50%;
        transform: translateX(-50%);
        z-index: var(--z-toast);
        width: 420px;
        max-width: calc(100% - var(--space-8));
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        pointer-events: none;
    }

    .workspace-message {
        pointer-events: auto;
        min-height: 56px;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--surface-glass);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        animation: workspace-message-enter var(--motion-enter);
    }

    .workspace-message-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    .workspace-message-text {
        flex: 1;
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    .workspace-message-success .workspace-message-icon {
        background: var(--success-10);
        color: var(--success-100);
    }

    .workspace-message-error .workspace-message-icon {
        background: var(--danger-10);
        color: var(--danger-100);
    }

    .workspace-message-warning .workspace-message-icon {
        background: var(--warning-10);
        color: var(--warning-100);
    }

    .workspace-message-info .workspace-message-icon {
        background: var(--info-10);
        color: var(--info-100);
    }

    .workspace-message-close {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        color: var(--text-muted);
        transition: var(--motion-hover);
    }

    .workspace-message-close:hover {
        background: var(--surface);
        color: var(--text);
    }

    @keyframes workspace-message-enter {
        from {
            opacity: 0;
            transform: translateY(-12px) scale(0.96);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @media (max-width: 640px) {
        .workspace-messages {
            top: var(--space-4);
            width: calc(100% - var(--space-8));
        }
    }

    /*=========================
   Icon Badge
=========================*/
    .icon-badge,
    .icon-circle {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--primary-gradient);
        color: var(--white);
    }

    .icon-badge .icon,
    .icon-circle .icon {
        font-size: var(--text-3xl);
    }

    /*=========================
   Icon Badge
=========================*/
    .icon-badge {
        border-radius: var(--radius-xl);
    }

    /*=========================
   Icon Circle
=========================*/
    .icon-circle {
        border-radius: var(--radius-full);
    }

    /*=========================
   Icon Sizes
=========================*/
    .icon-sm {
        width: 40px;
        height: 40px;
    }

    .icon-sm .icon {
        font-size: var(--text-xl);
    }

    /*=========================
   Stat Card
=========================*/
    .ws-stat {
        min-height: 82px;
        min-width: 250px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        border: none !important;
        flex: 1;
    }

    .ws-stat-header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .ws-stat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);
        background: var(--surface-muted);
    }

    .ws-stat-icon .material-symbols-rounded {
        font-size: 26px;
        font-weight: 500;
    }

    .ws-stat-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .ws-stat-label {
        margin: 0;
        color: var(--text-muted);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .ws-stat-value {
        margin-top: var(--space-1);
        color: var(--text);
        font-size: 20px;
        font-weight: 800;
        line-height: 1.2;
    }

    .ws-stat-action {
        margin-left: auto;
        flex-shrink: 0;
    }

    /*=========================
   Variants
=========================*/
    .ws-stat-primary {
        background: var(--primary-10);
        color: var(--primary);
    }

    .ws-stat-secondary {
        background: var(--secondary-10);
        color: var(--secondary);
    }

    .ws-stat-success {
        background: var(--success-10);
        color: var(--success);
    }

    .ws-stat-warning {
        background: var(--warning-10);
        color: var(--warning);
    }

    .ws-stat-danger {
        background: var(--danger-10);
        color: var(--danger);
    }

    .ws-stat-info {
        background: var(--info-10);
        color: var(--info);
    }

    .ws-stat-accent {
        background: var(--accent-10);
        color: var(--accent);
    }

    /*=========================
   Icon variants
=========================*/
    .ws-stat-icon-primary {
        background: var(--primary-10);
        color: var(--primary);
    }

    .ws-stat-icon-secondary {
        background: var(--secondary-10);
        color: var(--secondary);
    }

    .ws-stat-icon-success {
        background: var(--success-10);
        color: var(--success);
    }

    .ws-stat-icon-warning {
        background: var(--warning-10);
        color: var(--warning);
    }

    .ws-stat-icon-danger {
        background: var(--danger-10);
        color: var(--danger);
    }

    .ws-stat-icon-info {
        background: var(--info-10);
        color: var(--info);
    }

    .ws-stat-icon-accent {
        background: var(--accent-10);
        color: var(--accent);
    }

    /*=========================
   Filter
=========================*/
    .filter {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .filter-search {
        flex: 1;
        min-width: 200px;
    }

    .filter-options {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .filter-buttons {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .filter-select {
        min-width: 160px;
    }

    .filter-option.active {
        background: var(--primary);
        color: var(--white);
        border-color: var(--primary) !important;
    }

    .filter-option.active:hover {
        background: var(--primary-90);
    }

    .filter input[type="text"],
    .filter select {
        min-height: 2.375rem;
        height: 2.375rem;
        padding-block: 0;
    }

    @media (max-width: 640px) {
        .filter {
            flex-direction: column;
            align-items: stretch;
        }

        .filter-search,
        .filter-options,
        .filter-buttons,
        .filter-select {
            width: 100%;
        }

        .filter .btn {
            width: 100%;
        }
    }

    /*=========================
   WS PAGE TOOLBAR
=========================*/
    /* Tabs + page actions row */
    .ws-page-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .ws-page-count {
        font-size: var(--text-sm);
        color: var(--text-muted);
    }

    .ws-page-toolbar-tabs {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .ws-page-toolbar-actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    @media (max-width: 640px) {
        .ws-page-toolbar {
            flex-direction: column;
            align-items: stretch;
        }

        .ws-page-toolbar-actions .btn {
            width: 100%;
            justify-content: center;
        }
    }

    /*=========================
   WS LIST
=========================*/
    /* Base collection */
    .ws-list {
        --columns: 1fr;
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    /* Filter integrated — no own card inside ws-list */
    .ws-list>.filter {
        border-radius: 0;
        border: none;
        border-bottom: var(--border-width) solid var(--border-color);
        background: var(--surface-hover);
    }

    /*=========================
   Table — grid pai compartilhado
=========================*/
    .ws-list-table {
        display: grid;
        grid-template-columns: var(--columns);
    }

    /*=========================
   Header
=========================*/
    .ws-list-header {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-5);
        background: var(--surface-hover);
        border-bottom: var(--border-width) solid var(--border-color);
        color: var(--dark);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    /*=========================
   Item
=========================*/
    .ws-list-item {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-5);
        border-bottom: var(--border-width) solid var(--border-color);
    }

    .ws-list-item:last-child {
        border-bottom: none;
    }

    /*=========================
   Section
=========================*/
    .ws-list-section {
        min-width: 0;
        overflow: hidden;
    }

    .ws-list-section::before {
        display: none;
        content: attr(data-label);
        margin-bottom: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
    }

    /*=========================
   List helpers
=========================*/
    .ws-list-section-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding-top: var(--space-4);
    }

    .ws-surface-header {
        background: var(--surface-hover);
        margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
        padding: var(--space-5);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: var(--border-width) solid var(--border-color);
    }

    .ws-institution-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    @media (max-width: 768px) {
        .ws-institution-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Stacked, compact buttons (btn-sm) — keeps 2 side-by-side actions from
     overflowing the table's narrow "Actions" column. */
    .ws-list-section-actions .ws-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .ws-message-bubble {
        padding: var(--space-3);
        background: var(--background);
        border-radius: var(--radius-md);
    }

    .ws-message-status {
        margin-top: var(--space-2);
    }

    .ws-list-amount-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .ws-list-amount {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
    }

    .ws-list-amount.is-success {
        background: var(--success-10);
        color: var(--success);
    }

    .ws-list-amount .icon {
        font-size: var(--text-md);
    }

    .ws-list-text-preview {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        line-height: var(--leading-relaxed);
    }

    .ws-media-meta {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        margin-top: var(--space-2);
    }

    .ws-meta-item {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .ws-meta-item .icon {
        font-size: var(--text-sm);
    }

    .ws-feature-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--background);
        border-radius: var(--radius-lg);
    }

    /*=========================
   Plan Card
=========================*/
    .ws-plan-card {
        overflow: hidden;
        display: grid;
        grid-template-columns: 280px 1fr;
        padding: 0;
    }

    .ws-plan-hero {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-6);
        background: var(--primary-gradient);
        color: var(--white);
    }

    .ws-plan-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .ws-plan-hero .ws-avatar {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .ws-plan-hero .ws-badge.is-success {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .ws-plan-hero .ws-media-text {
        color: rgba(255, 255, 255, 0.75);
    }

    .ws-plan-price-block {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .ws-plan-price {
        font-size: 2rem;
        font-weight: var(--font-bold);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .ws-plan-price-label {
        font-size: var(--text-sm);
        opacity: 0.75;
    }

    .ws-plan-name {
        font-size: var(--text-lg);
        font-weight: var(--font-semibold);
        color: var(--white);
    }

    .ws-plan-cta {
        margin-top: auto;
    }

    .ws-plan-cta {
        display: flex;
        justify-content: flex-end;
    }

    .ws-plan-cta .btn {
        width: fit-content;
        padding-block: var(--space-3);
        padding-inline: var(--space-6);
    }

    .ws-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-4);
        padding: var(--space-8) var(--space-6);
        text-align: center;
    }

    .ws-placeholder-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .ws-account-grid {
        display: grid;
        grid-template-columns: 7fr 3fr;
        gap: var(--space-6);
    }

    @media (max-width: 768px) {
        .ws-account-grid {
            grid-template-columns: 1fr;
        }
    }

    .ws-contact-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding-right: var(--space-4);
    }

    .ws-contact-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .ws-contact-link {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        overflow: hidden;
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-decoration: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: color var(--motion-hover);
    }

    .ws-contact-link:hover {
        color: var(--primary);
    }

    .ws-contact-link .icon {
        font-size: var(--text-md);
        flex-shrink: 0;
    }

    .ws-copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 1.75rem;
        height: 1.75rem;
        border: none;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        transition:
            background var(--motion-hover),
            color var(--motion-hover);
    }

    .ws-copy-btn:hover {
        background: var(--surface-hover);
        color: var(--primary);
    }

    .ws-copy-btn .icon {
        font-size: var(--text-md);
    }

    /* Responsive — mobile */
    @media (max-width: 768px) {
        .ws-list-table {
            display: block;
        }

        .ws-list-header {
            display: none;
        }

        .ws-list-item {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
            padding: var(--space-4);
        }

        .ws-list-section::before {
            display: block;
        }

        .ws-list-section-actions {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }
    }

    /*=========================
   Media Object
=========================*/
    .ws-media {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        min-width: 0;
    }

    .ws-media-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

    .ws-media-title {
        color: var(--text);
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
    }

    .ws-media-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /*=========================
   Avatar
=========================*/
    .ws-avatar {
        width: 5rem;
        height: 5rem;
        min-width: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
        text-transform: uppercase;
    }

    .ws-avatar-sm {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
        flex-shrink: 0;
    }

    .ws-avatar-secondary {
        background: var(--secondary-10);
        color: var(--secondary);
    }

    /*=========================
   Badge
=========================*/
    .ws-badge {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    .ws-badge.is-success {
        background: var(--success-10);
        color: var(--success);
    }

    .ws-badge.is-warning {
        background: var(--warning-10);
        color: var(--warning);
    }

    /*=========================
   Stack
=========================*/
    .ws-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    /*=========================
   Meta
=========================*/
    .ws-meta {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .ws-meta .icon {
        font-size: var(--text-lg);
    }

    /*=========================
   List Group
=========================*/
    .ws-list-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .ws-list-group-item {
        min-width: 0;
    }

    /*=========================
   Helpers
=========================*/
    .ws-text-muted {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /*=========================
   Box
=========================*/
    /* Message / Notes / Content blocks */
    .ws-box {
        padding: var(--space-5);
        margin-right: var(--space-5);
        background: var(--background);
        border-radius: var(--radius-lg);
        color: var(--text);
        font-size: var(--text-sm);
        line-height: 1.5;
        overflow-wrap: break-word;
    }

    /*=========================
   Highlight
=========================*/
    /* Important values / summaries */
    .ws-highlight {
        display: inline-flex;
        align-items: center;
        gap: var(--space-4);
        width: fit-content;
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        font-size: var(--text-sm);
    }

    .ws-highlight>.icon {
        font-size: var(--text-2xl);
    }

    .ws-highlight-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .ws-highlight-label {
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    .ws-highlight-value {
        font-size: var(--text-base);
        font-weight: var(--font-bold);
    }

    /*=========================
   Highlight States
=========================*/
    .ws-highlight.is-success {
        background: var(--success-10);
        color: var(--success);
    }

    .ws-highlight.is-warning {
        background: var(--warning-10);
        color: var(--warning);
    }

    .ws-highlight.is-primary {
        background: var(--primary-10);
        color: var(--primary);
    }

    /*=========================
   Actions
=========================*/
    .ws-actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-2);
    }

    /*=========================
   Badge States
=========================*/
    .ws-badge.is-success {
        background: var(--success-10);
        color: var(--success);
    }

    .ws-badge.is-warning {
        background: var(--warning-10);
        color: var(--warning);
    }

    .ws-badge.is-danger {
        background: var(--danger-10);
        color: var(--danger);
    }

    .ws-badge.is-primary {
        background: var(--primary-10);
        color: var(--primary);
    }

    @media (max-width: 900px) {
        .ws-actions {
            justify-content: flex-start;
            flex-wrap: wrap;
        }
    }

    /*=========================
   MOBILE
=========================*/
    @media (max-width: 900px) {
        .ws-list {
            gap: var(--space-4);
            background: transparent;
            border: none;
            overflow: visible;
        }

        .ws-list-header {
            display: none;
        }

        .ws-list-body {
            gap: var(--space-4);
        }

        .ws-list-item {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-5);
            padding: var(--space-5);
            background: var(--surface);
            border: var(--border-width) solid var(--border-color);
            border-radius: var(--radius-xl);
        }

        .ws-list-item:last-child {
            border: var(--border-width) solid var(--border-color);
        }

        .ws-list-section:not(:first-child) {
            padding-top: var(--space-4);
            border-top: 1px solid var(--border-color);
        }

        .ws-list-section::before {
            display: block;
        }

        .ws-media {
            align-items: flex-start;
        }

        .ws-avatar {
            width: 4rem;
            height: 4rem;
            min-width: 4rem;
            font-size: var(--text-xl);
        }

        .ws-media-title {
            font-size: var(--text-base);
        }

        .ws-stack {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    }

    .ws-table-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-4) 0;
    }

    .ws-table-count {
        font-size: var(--text-sm);
        color: var(--text-muted);
    }

    .ws-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
    }

    .ws-page-btn {
        height: 3.2rem;
        min-width: 3.2rem;
        padding: 0 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background: var(--surface);
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-decoration: none;
    }

    .ws-page-btn.active {
        background: var(--primary);
        color: white;
        font-weight: var(--font-bold);
    }

    @media (max-width: 600px) {
        .ws-table-footer {
            flex-direction: column;
            gap: var(--space-3);
        }

        .ws-pagination {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    /*=========================
   Modal
=========================*/
    .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-6);
        background: rgb(var(--black-rgb) / 0.45);
        backdrop-filter: blur(8px);
    }

    .modal {
        width: 100%;
        max-width: 760px;
        max-height: calc(100vh - 80px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--background);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-modal);
        box-shadow: var(--shadow-lg);
    }

    .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-6);
        border-bottom: var(--border-width) solid var(--border-color);
    }

    .modal-body {
        flex: 1;
        overflow: auto;
        padding: var(--space-6);
    }

    .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-6);
        border-top: var(--border-width) solid var(--border-color);
    }

    .modal-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: var(--radius-sm);
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text-muted);
        transition:
            background var(--transition-fast),
            color var(--transition-fast);
    }

    .modal-close:hover {
        background: color-mix(in srgb, var(--surface), var(--foreground) 8%);
        color: var(--text);
    }

    /*=========================
   Event Template
=========================*/
    /*=========================
   Create Event Header
=========================*/
    .create-event-header {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .create-event-header-icon {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-xl);
        background: var(--primary-gradient);
        color: var(--white);
        box-shadow: var(--shadow-sm);
    }

    .create-event-header-icon .icon {
        font-size: 28px;
    }

    .create-event-header-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .create-event-header-badge {
        width: fit-content;
        padding: 2px var(--space-2);
        border-radius: var(--radius-full);
        background: var(--primary-10);
        color: var(--primary-100);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
    }

    .create-event-header-content h2 {
        margin: 0;
        color: var(--text);
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
        line-height: var(--leading-tight);
    }

    .create-event-header-content p {
        margin: 0;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /*=========================
   Create Event Step
=========================*/
    .create-event-step {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    .create-event-step-header {
        max-width: auto;
    }

    .create-event-step-header h3 {
        margin: 0;
        color: var(--text);
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
    }

    .create-event-step-header p {
        margin-top: var(--space-2);
        color: var(--text-muted);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Templates
=========================*/
    .create-event-template-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .create-event-template-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-5);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
        text-align: left;
        transition: var(--motion-hover);
    }

    /* Real theme thumbnail — replaces the generic icon when
       `EventTemplate.thumbnail` is set (see `event_templates_seed.py`).
       `.create-event-template-icon` still exists only as a fallback for
       cases with no thumbnail registered. */
    .create-event-template-thumb {
        width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: var(--surface-200);
    }

    .create-event-template-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .create-event-template-card:hover {
        transform: translateY(-2px);
        border-color: var(--primary-100);
        box-shadow: var(--shadow-sm);
    }

    .create-event-template-card.active {
        background: var(--primary-10);
        border-color: var(--primary-100);
    }

    .create-event-template-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-xl);
        background: var(--primary-gradient);
        color: var(--white);
    }

    .create-event-template-icon .icon {
        font-size: 26px;
    }

    .create-event-template-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .create-event-template-content strong {
        color: var(--text);
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
    }

    .create-event-template-content small {
        color: var(--text-muted);
        line-height: var(--leading-relaxed);
    }

    .create-event-template-check {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        background: var(--primary-100);
        color: var(--white);
        opacity: 0;
        transform: scale(0.8);
        transition: var(--motion-hover);
    }

    .create-event-template-card.active .create-event-template-check {
        opacity: 1;
        transform: scale(1);
    }

    /* Same breakpoint as the public template picker
       (static/css/sites/theme-preview.css) — this grid is used in both
       the creation wizard and the editor's theme-switch modal. */
    @media (max-width: 640px) {
        .create-event-template-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Event type selector — 2 fixed options (Bar Mitzvah, Bat Mitzvah)
   instead of free text, in step 2 of the creation wizard. Same visual
   language as `.create-event-template-card` (active state in
   --primary-10/--primary-100), just more compact — no icon/description,
   since it's just a short label per option. */
    .create-event-type-options {
        display: flex;
        gap: var(--space-3);
    }

    .create-event-type-option {
        flex: 1;
        padding: var(--space-3) var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
        text-align: center;
        font-weight: var(--font-semibold);
        color: var(--text);
        transition: var(--motion-hover);
    }

    .create-event-type-option:hover {
        transform: translateY(-2px);
        border-color: var(--primary-100);
        box-shadow: var(--shadow-sm);
    }

    .create-event-type-option.active {
        background: var(--primary-10);
        border-color: var(--primary-100);
    }

    .create-event-preview-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        margin-top: var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--text-secondary);
        text-decoration: none;
        transition: color var(--motion-hover);
    }

    .create-event-preview-link .icon {
        font-size: 15px;
    }

    .create-event-preview-link:hover {
        color: var(--primary);
    }

    /*=========================
   Create Event Footer
=========================*/
    .create-event-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
        padding: var(--space-5) var(--space-6);
        border-top: var(--border-width) solid var(--border-color);
    }

    .create-event-progress {
        min-width: 180px;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .create-event-progress span {
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
    }

    .create-event-progress-bar {
        height: 6px;
        overflow: hidden;
        border-radius: var(--radius-full);
        background: var(--surface);
    }

    .create-event-progress-bar div {
        width: 25%;
        height: 100%;
        border-radius: inherit;
        background: var(--primary-gradient);
    }

    .create-event-actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    @media (max-width: 640px) {
        .create-event-footer {
            flex-wrap: wrap;
        }

        .create-event-progress {
            min-width: 0;
            flex: 1 1 100%;
        }

        .create-event-actions {
            flex: 1 1 100%;
            justify-content: space-between;
        }
    }

    /*=========================
   Create Event Form
=========================*/
    .create-event-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .create-event-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .create-event-field label {
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
    }

    /*=========================
   Create Event Input
=========================*/
    .create-event-input {
        height: 56px;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-inline: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }

    .create-event-input input {
        flex: 1;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        color: var(--text);
        font-size: var(--text-md);
        font-family: inherit;
    }

    .create-event-input input:focus,
    .create-event-input input:focus-visible,
    .create-event-input input:active {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .create-event-input .icon {
        flex-shrink: 0;
        color: var(--text-muted);
    }

    .create-event-field textarea {
        min-height: 120px;
        resize: none;
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--text);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Disabled Input
=========================*/
    .create-event-input.disabled {
        opacity: 0.75;
        cursor: not-allowed;
    }

    .create-event-input.disabled input {
        cursor: not-allowed;
        color: var(--text-muted);
    }

    .create-event-actions-right {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .create-event-review-row-sub {
        display: block;
        font-size: var(--text-sm);
        color: var(--text-muted);
        margin-top: 2px;
    }

    /*=========================
   Step 2 — Notice Box
=========================*/
    .create-event-notice {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        background: var(--warning-10, rgba(234, 179, 8, 0.08));
        border: 1px solid var(--warning-30, rgba(234, 179, 8, 0.2));
    }

    .create-event-notice .icon {
        font-size: 18px;
        color: var(--warning-100, #ca8a04);
        flex-shrink: 0;
        margin-top: 1px;
    }

    .create-event-notice p {
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: var(--leading-relaxed);
        margin: 0;
    }

    .create-event-notice p strong {
        color: var(--text);
        font-weight: var(--font-semibold);
    }

    /*=========================
   Step 2 — Slug Status
=========================*/
    .create-slug-status {
        font-size: 20px;
        flex-shrink: 0;
    }

    .create-slug-status.checking {
        color: var(--text-muted);
    }

    .create-slug-status.available {
        color: var(--success-100);
    }

    .create-slug-status.taken {
        color: var(--danger-100);
    }

    /*=========================
   Step 3 — Review
=========================*/
    .create-event-review {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    .create-event-review-card {
        width: 100%;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-color);
        background: var(--surface);
        overflow: hidden;
    }

    .create-event-review-name {
        padding: var(--space-6) var(--space-6) var(--space-5);
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
        line-height: var(--leading-tight);
        color: var(--text);
        border-bottom: 1px solid var(--border-color);
    }

    .create-event-review-details {
        padding: var(--space-2) 0;
    }

    .create-event-review-row {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-6);
    }

    .create-event-review-row-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        background: var(--surface-2);
        flex-shrink: 0;
    }

    .create-event-review-row-icon .icon {
        font-size: 18px;
        color: var(--text-muted);
    }

    .create-event-review-row-icon--primary {
        background: var(--primary-10);
    }

    .create-event-review-row-icon--primary .icon {
        color: var(--primary);
    }

    .create-event-review-row-icon--success {
        background: var(--success-10);
    }

    .create-event-review-row-icon--success .icon {
        color: var(--success);
    }

    .create-event-review-row-icon--info {
        background: var(--info-10, #e0f2fe);
    }

    .create-event-review-row-icon--info .icon {
        color: var(--info, #0284c7);
    }

    .create-event-review-row-icon--warning {
        background: var(--warning-10, #fff7ed);
    }

    .create-event-review-row-icon--warning .icon {
        color: var(--warning, #ea580c);
    }

    .create-event-review-row-icon--muted {
        background: var(--surface-2);
    }

    .create-event-review-row-icon--muted .icon {
        color: var(--text-muted);
    }

    .create-event-review-row-label {
        display: block;
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--text-muted);
        margin-bottom: 2px;
    }

    .create-event-review-row-value {
        display: block;
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: var(--text);
    }

    .create-event-review-divider {
        height: 1px;
        background: var(--border-color);
        margin: 0 var(--space-6);
    }

    .create-event-review-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
    }

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

    .icon.spin {
        display: inline-block;
        animation: spin 0.8s linear infinite;
    }

    /*=========================
   Danger Box
=========================*/
    /* Critical actions / warnings */
    .ws-danger-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
        padding: var(--space-6);
        border: var(--border-width) solid var(--danger-100);
        border-radius: var(--radius-xl);
        background: var(--danger-10);
    }

    .ws-danger-box-content {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .ws-danger-box-icon {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-xl);
        background: var(--danger-10);
        color: var(--danger-100);
    }

    .ws-danger-box-icon .icon {
        font-size: 28px;
    }

    .ws-danger-box-text {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .ws-danger-box-text strong {
        color: var(--text);
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
    }

    .ws-danger-box-text p {
        max-width: 620px;
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }

    .ws-danger-box-actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-shrink: 0;
    }

    /*=========================
   Mobile
=========================*/
    @media (max-width: 768px) {
        .ws-danger-box {
            flex-direction: column;
            align-items: stretch;
        }

        .ws-danger-box-content {
            align-items: flex-start;
        }

        .ws-danger-box-actions {
            width: 100%;
            flex-direction: column;
        }

        .ws-danger-box-actions>* {
            width: 100%;
        }
    }

    /*=========================
   Field
=========================*/
    /* Data display / Account info */
    .ws-field {
        min-height: 76px;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }

    .ws-field-icon {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        background: var(--background);
        color: var(--text-muted);
    }

    .ws-field-icon .icon {
        font-size: 22px;
    }

    .ws-field-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

    .ws-field-content span {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .ws-field-content strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    /*=========================
   Navigation Box
=========================*/
    /* Internal links / Settings navigation */
    .ws-nav-box {
        min-height: 86px;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
        color: var(--text);
        text-decoration: none;
        transition: var(--motion-hover);
    }

    .ws-nav-box:hover {
        transform: translateY(-2px);
        border-color: var(--primary-100);
        box-shadow: var(--shadow-sm);
    }

    .ws-nav-box-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-xl);
        background: var(--primary-gradient);
        color: var(--white);
    }

    .ws-nav-box-icon .icon {
        font-size: 26px;
    }

    .ws-nav-box-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .ws-nav-box-content strong {
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    .ws-nav-box-content small {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .ws-nav-box-arrow {
        color: var(--primary);
        font-size: 24px;
    }

    /*=========================
   Primary Box
=========================*/
    /* Featured content / Subscription */
    .ws-primary-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
        padding: var(--space-6);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
    }

    .ws-primary-box-content {
        display: flex;
        align-items: center;
        gap: var(--space-5);
    }

    .ws-primary-box-icon {
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-xl);
        background: var(--primary-gradient);
        color: var(--white);
    }

    .ws-primary-box-icon .icon {
        font-size: 34px;
    }

    .ws-primary-box-info {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .ws-primary-box-badge {
        width: fit-content;
        padding: 2px var(--space-2);
        border-radius: var(--radius-full);
        background: var(--primary-10);
        color: var(--primary-100);
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
        text-transform: uppercase;
    }

    .ws-primary-box-info strong {
        color: var(--text);
        font-size: var(--text-3xl);
        font-weight: var(--font-bold);
    }

    .ws-primary-box-info p {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .ws-primary-box-action {
        flex-shrink: 0;
    }

    @media (max-width: 768px) {
        .ws-primary-box {
            flex-direction: column;
            align-items: stretch;
        }

        .ws-primary-box-content {
            align-items: flex-start;
        }

        .ws-primary-box-action {
            width: 100%;
        }
    }

    /*=========================
   Membership Box
=========================*/
    /* Subscription highlight */
    @media (max-width: 768px) {}

    /*=========================
   Membership Banner
=========================*/
    /* Subscription CTA */
    .ws-membership-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
        padding: var(--space-8);
        border-radius: var(--radius-xl);
        background: linear-gradient(135deg, var(--primary-10), var(--primary-0));
    }

    .ws-membership-banner-content {
        display: flex;
        align-items: center;
        gap: var(--space-5);
    }

    .ws-membership-banner-icon {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-full);
        background: var(--primary-gradient);
        color: var(--white);
    }

    .ws-membership-banner-icon .icon {
        font-size: 42px;
    }

    .ws-membership-banner-info {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .ws-membership-banner-info span {
        width: fit-content;
        padding: 2px var(--space-2);
        border-radius: var(--radius-full);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
    }

    .ws-membership-banner-info strong {
        color: var(--text);
        font-size: var(--text-3xl);
        font-weight: var(--font-bold);
    }

    .ws-membership-banner-info p {
        color: var(--text-muted);
        line-height: var(--leading-relaxed);
    }

    .ws-membership-banner-info small {
        color: var(--primary);
        font-weight: var(--font-semibold);
    }

    .ws-membership-banner-checkout {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-3);
    }

    .ws-membership-banner-checkout>strong {
        color: var(--primary);
        font-size: var(--text-5xl);
        font-weight: var(--font-bold);
    }

    .ws-membership-banner-checkout small {
        color: var(--text-muted);
    }

    @media (max-width: 768px) {
        .ws-membership-banner {
            flex-direction: column;
            align-items: stretch;
        }

        .ws-membership-banner-checkout {
            align-items: flex-start;
        }
    }

    /*=========================
   Membership Status
=========================*/
    /* Current subscription */
    .ws-membership-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
        padding: var(--space-5);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
    }

    .ws-membership-status-content {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .ws-membership-status-icon {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-xl);
        background: var(--background);
        color: var(--primary-100);
    }

    .ws-membership-status-icon .icon {
        font-size: 28px;
    }

    .ws-membership-status-content span {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--primary-100);
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
    }

    .ws-membership-status-content strong {
        display: block;
        color: var(--text);
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
    }

    .ws-membership-status-content p {
        margin-top: var(--space-1);
        color: var(--text-muted);
        font-size: var(--text-sm);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    @media (max-width: 768px) {
        .ws-membership-status {
            flex-direction: column;
            align-items: stretch;
        }

        .ws-membership-status-content {
            align-items: flex-start;
        }
    }

    /*=========================
   Empty State
=========================*/
    .empty-state {
        width: 100%;
        min-height: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-5);
        padding: var(--space-12);
        border: var(--border-width-lg) dashed var(--border-color);
        border-radius: var(--radius-2xl);
        background: var(--surface-glass);
        text-align: center;
    }

    .empty-state h1 {
        max-width: 520px;
        font-size: var(--text-4xl);
        line-height: var(--leading-tight);
    }

    .empty-state p {
        max-width: 460px;
        color: var(--text-muted);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Mobile Empty State
=========================*/
    @media (max-width: 768px) {
        .empty-state {
            min-height: 420px;
            padding: var(--space-6);
        }
    }

    /*=========================
   Gift Steps
=========================*/
    .workspace-gift-card-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }

    .workspace-gift-card-step {
        min-height: 170px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-4);
        padding: var(--space-5);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
        transition: var(--motion-hover);
    }

    .workspace-gift-card-step.active {
        border-color: var(--primary-100);
        background: var(--primary-10);
    }

    .workspace-gift-card-step-number {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        background: var(--primary-gradient);
        color: var(--white);
        font-weight: var(--font-bold);
    }

    .workspace-gift-card-step strong {
        display: block;
        margin-bottom: var(--space-2);
        color: var(--text);
        font-size: var(--text-md);
    }

    .workspace-gift-card-step small {
        color: var(--text-muted);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Gift Card Mobile
=========================*/
    @media (max-width: 1024px) {
        .workspace-gift-card-steps {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 640px) {
        .workspace-gift-card {
            padding: var(--space-5);
        }

        .workspace-gift-card-header {
            flex-direction: column;
        }

        .workspace-gift-card-steps {
            grid-template-columns: 1fr;
        }
    }

    /*=========================
   Panel List
=========================*/
    /* Card with header + items + actions */
    .ws-panel-list {
        min-height: 320px;
        display: flex;
        flex-direction: column;
    }

    .ws-panel-list-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        margin-bottom: var(--space-5);
    }

    .ws-panel-list-title {
        color: var(--text);
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
    }

    .ws-panel-list-description {
        margin-top: var(--space-1);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .ws-panel-list-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .ws-panel-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding-bottom: var(--space-4);
        border-bottom: var(--border-width) solid var(--border-color);
    }

    .ws-panel-list-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .ws-panel-list-info {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-width: 0;
    }

    .ws-panel-list-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-lg);
        background: var(--primary-10);
        color: var(--primary);
    }

    .ws-panel-list-icon .icon {
        font-size: 22px;
    }

    .ws-panel-list-text {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .ws-panel-list-text strong {
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    .ws-panel-list-text small {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .ws-panel-list-value {
        flex-shrink: 0;
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    .ws-panel-list-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: var(--space-5);
    }

    .ws-panel-list-value.is-success {
        color: var(--success);
    }

    .ws-panel-list-value.is-danger {
        color: var(--danger);
    }

    .ws-panel-list-value.is-warning {
        color: var(--warning);
    }

    /*=========================
   Notifications
=========================*/
    .ws-notifications {
        overflow: hidden;
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
    }

    /*=========================
   Header
=========================*/
    .ws-notifications-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-5);
        background: var(--surface-muted);
        border-bottom: var(--border-width) solid var(--border-color);
    }

    .ws-notifications-header strong {
        color: var(--text);
        font-size: var(--text-lg);
        font-weight: var(--font-bold);
    }

    .ws-notifications-header small {
        display: block;
        margin-top: var(--space-1);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /*=========================
   List
=========================*/
    .ws-notifications-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    /*=========================
   Item
=========================*/
    .ws-notification {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--background);
        transition: var(--motion-hover);
    }

    .ws-notification:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    /*=========================
   Unread
=========================*/
    .ws-notification.is-unread {
        background: var(--primary-10);
        border-color: var(--primary-30);
    }

    /*=========================
   Icon
=========================*/
    .ws-notification-icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-xl);
        background: var(--primary-gradient);
        color: var(--white);
    }

    .ws-notification-icon .icon {
        font-size: 30px;
    }

    /*=========================
   Content
=========================*/
    .ws-notification-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .ws-notification-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .ws-notification-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .ws-notification-title strong {
        color: var(--text);
        font-size: var(--text-md);
        font-weight: var(--font-bold);
    }

    .ws-notification-source {
        padding: 2px var(--space-2);
        border-radius: var(--radius-full);
        background: var(--surface);
        color: var(--primary);
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
    }

    .ws-notification-date {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .ws-notification-date .icon {
        font-size: 16px;
    }

    .ws-notification-message {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Action
=========================*/
    .ws-notification-action {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-1);
        color: var(--primary);
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
    }

    .ws-notification-action .icon {
        font-size: 18px;
    }

    /*=========================
   Footer
=========================*/
    .ws-notifications .ws-table-footer {
        padding: var(--space-4);
    }

    /*=========================
   Mobile
=========================*/
    @media (max-width: 768px) {
        .ws-notification {
            align-items: flex-start;
        }

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

    /*=========================
   SPOT banner
=========================*/
    .spot-banner {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        overflow: hidden;
    }

    /*=========================
   HEADER
=========================*/
    .spot-banner-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .spot-banner-badge {
        flex-shrink: 0;
        white-space: nowrap;
        width: fit-content;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
    }

    .spot-banner-title {
        font-size: var(--text-3xl);
        line-height: var(--leading-tight);
        font-weight: var(--font-bold);
        color: var(--text);
    }

    .spot-banner-title span {
        display: block;
        color: var(--primary);
    }

    /*=========================
   DESCRIPTION
=========================*/
    .spot-banner-text {
        margin: 0;
        font-size: var(--text-lg);
        line-height: var(--leading-relaxed);
        color: var(--text-muted);
    }

    /*=========================
   CONTENT
=========================*/
    .spot-banner-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: var(--space-8);
        flex: 1;
    }

    .spot-banner-column {
        align-self: end;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .spot-banner-items {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .spot-banner-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
        color: var(--text);
    }

    .spot-banner-item .icon {
        width: 2.5rem;
        height: 2.5rem;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background: var(--primary-10);
        color: var(--primary);
    }

    .spot-banner-button {
        width: fit-content;
    }

    .spot-banner-image {
        align-self: end;
        position: relative;
        width: 100%;
    }

    .spot-banner-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--primary-10);
        border-radius: var(--radius-2xl);
        transform: translate(10px, 10px);
    }

    .spot-banner-image img {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        height: 210px;
        object-fit: cover;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow);
    }

    @media (max-width: 768px) {
        .spot-banner-content {
            grid-template-columns: 1fr;
        }

        .spot-banner-image {
            display: none;
        }

        .spot-banner-title {
            font-size: var(--text-2xl);
        }

        .spot-banner-button {
            width: 100%;
        }
    }

    /*=========================
   SPOT banner placeholder
=========================*/
    .spot-banner-placeholder {
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: var(--space-4);
    }

    .spot-banner-placeholder-icon {
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-2xl);
    }

    .spot-banner-placeholder-title {
        margin: 0;
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
        color: var(--text);
    }

    .spot-banner-placeholder-text {
        margin: 0;
        max-width: 22rem;
        font-size: var(--text-base);
        color: var(--text-muted);
    }

    /*=========================
   Tour — compartilhado editor + dashboard
=========================*/
    #tour-overlay {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: none;
    }

    #tour-overlay.tour--center {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.72);
    }

    #tour-overlay.tour--focus {
        display: block;
        background: transparent;
        pointer-events: none;
    }

    #tour-spotlight {
        position: fixed;
        display: none;
        border-radius: 10px;
        background: transparent;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
        z-index: 9001;
        pointer-events: all;
        cursor: default;
        transition:
            top 0.25s ease,
            left 0.25s ease,
            width 0.25s ease,
            height 0.25s ease;
    }

    #tour-card {
        position: fixed;
        z-index: 9002;
        width: 300px;
        background: var(--surface-raised, #1e2230);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
        pointer-events: all;
        animation: tourCardIn 0.2s ease;
    }

    .tour--center #tour-card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    @keyframes tourCardIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .tour-dots {
        display: flex;
        gap: 6px;
        margin-bottom: 16px;
    }

    .tour-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border-color);
        transition:
            background 0.2s,
            width 0.2s;
    }

    .tour-dot--active {
        width: 18px;
        border-radius: 3px;
        background: var(--primary);
    }

    .tour-heading {
        font-size: 24px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 12px;
        line-height: 1.3;
    }

    .tour-desc {
        font-size: 17px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.65;
        margin: 0 0 20px;
    }

    .tour-desc strong {
        color: #ffffff;
        font-weight: 600;
    }

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

    .tour-nav {
        display: flex;
        gap: 8px;
    }

    .tour-skip {
        background: none;
        border: none;
        padding: 0;
        font-size: 12px;
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.15s;
    }

    .tour-skip:hover {
        color: var(--text-default);
    }

    .tour-back {
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
        cursor: pointer;
        transition:
            border-color 0.15s,
            color 0.15s;
    }

    .tour-back:hover {
        border-color: var(--text-muted);
        color: var(--text-default);
    }

    .tour-next {
        background: var(--primary);
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        transition: opacity 0.15s;
    }

    .tour-next:hover {
        opacity: 0.85;
    }

    /*=========================
   PIX settings chip (2026-07-08)
=========================*/
    /* Own identity (not a `.badge`) — greenish tone evoking PIX, without
     copying the brand. Icon + text (type/key) + 2 compact actions. */
    .pix-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);
        background: rgb(50 188 173 / 0.12);
        border: 1px solid rgb(50 188 173 / 0.35);
    }

    .pix-chip-icon {
        color: #1f8f81;
        font-size: 1.125rem;
    }

    .pix-chip-text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .pix-chip-label {
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .pix-chip-key {
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: var(--text);
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pix-chip-action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: var(--radius-full);
        border: none;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        flex-shrink: 0;
        transition:
            background 0.15s ease,
            color 0.15s ease;
    }

    .pix-chip-action .icon {
        font-size: 1rem;
    }

    .pix-chip-action:hover {
        background: rgb(50 188 173 / 0.2);
        color: #1f8f81;
    }

    .pix-chip-action--danger:hover {
        background: rgb(var(--danger-rgb) / 0.15);
        color: var(--danger);
    }

    .pix-settings-error {
        font-size: var(--text-sm);
        color: var(--danger);
    }

    /*=========================
   Central de Ajuda
=========================*/
    .ws-help-layout {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: var(--space-6);
        align-items: start;
    }

    .ws-help-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        padding: var(--space-5);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        position: sticky;
        top: var(--space-6);
    }

    .ws-help-sidebar-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .ws-help-sidebar-title {
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
        color: var(--foreground);
    }

    .ws-help-sidebar-title.is-accent {
        padding-left: var(--space-3);
        border-left: 3px solid var(--secondary);
    }

    .ws-help-sidebar-list {
        margin-top: var(--space-2);
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .ws-help-sidebar-link {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        color: var(--text-muted);
        transition: color var(--motion-hover);
    }

    .ws-help-sidebar-link:hover {
        color: var(--primary);
    }

    .ws-help-sidebar-link.is-active {
        background: var(--primary);
        color: var(--white);
        font-weight: var(--font-medium);
    }

    .ws-help-sidebar-empty {
        font-size: var(--text-sm);
        color: var(--text-muted);
        padding: var(--space-2) var(--space-3);
    }

    .ws-help-sidebar-faq-link {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        background: var(--primary-10);
        color: var(--primary);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    .ws-help-sidebar-faq-link.is-active {
        background: var(--primary);
        color: var(--white);
    }

    .ws-help-sidebar-faq-arrow {
        margin-left: auto;
    }

    .ws-help-sidebar-support-link {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        background: var(--secondary-10);
        color: var(--secondary);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    .ws-help-sidebar-support-link.is-active {
        background: var(--secondary);
        color: var(--white);
    }

    .ws-help-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        min-width: 0;
    }

    .ws-help-page {
        display: flex;
        flex-direction: column;
        gap: var(--space-10);
    }

    .ws-help-home {
        display: flex;
        flex-direction: column;
        gap: var(--space-10);
    }

    .ws-help-search {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
    }

    .ws-help-search .icon {
        color: var(--text-muted);
    }

    .ws-help-search input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: var(--text-base);
        color: var(--text);
    }

    .ws-help-search-clear {
        display: flex;
        color: var(--text-muted);
    }

    .ws-help-search-btn {
        flex: 0 0 auto;
    }

    .ws-help-hero {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-8) var(--space-6);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        text-align: center;
    }

    .ws-help-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgb(var(--dark-rgb) / 0.08) 1px, transparent 1px);
        background-size: 18px 18px;
        pointer-events: none;
    }

    .ws-help-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(260px 260px at 0% 0%, rgb(var(--primary-rgb) / 0.07), transparent 70%),
            radial-gradient(260px 260px at 100% 100%, rgb(var(--secondary-rgb) / 0.07), transparent 70%);
        pointer-events: none;
    }

    .ws-help-hero>* {
        position: relative;
        z-index: var(--z-base);
    }

    .ws-help-hero-title {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .ws-help-hero-title .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--radius-lg);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-xl);
    }

    .ws-help-hero-title h1 {
        font-size: var(--text-2xl);
        color: var(--foreground);
    }

    .ws-help-hero-description {
        color: var(--text-muted);
        font-size: var(--text-base);
    }

    .ws-help-hero-search {
        max-width: 640px;
        margin: 0 auto;
        width: 100%;
        padding: var(--space-5) var(--space-6);
    }

    .ws-help-hero-search .icon {
        font-size: var(--text-xl);
    }

    .ws-help-hero-search input {
        font-size: var(--text-lg);
    }

    .ws-help-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .ws-help-section-card {
        padding: var(--space-5);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
    }

    .ws-help-section-title.is-accent {
        padding-left: var(--space-3);
        border-left: 3px solid var(--secondary);
    }

    .ws-help-section-title.is-subtle {
        font-size: var(--text-sm);
        font-weight: var(--font-regular);
        font-style: italic;
        color: var(--text-muted);
    }

    .ws-help-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .ws-help-section-title {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: var(--foreground);
    }

    .ws-help-section-title .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: var(--radius-lg);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-lg);
    }

    .ws-help-see-all {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--primary);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
    }

    .ws-help-see-all:hover {
        color: var(--primary-dark, var(--primary));
    }

    .ws-help-category-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .ws-help-category-card {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-5);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        transition: border-color var(--motion-hover), transform var(--motion-hover);
    }

    .ws-help-category-card:hover {
        border-color: var(--primary-40);
        transform: translateY(-2px);
    }

    .ws-help-category-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-lg);
        background: var(--primary-10);
        color: var(--primary);
    }

    .ws-help-category-card-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .ws-help-category-card-body strong {
        color: var(--text);
        font-size: var(--text-base);
    }

    .ws-help-category-card-body span {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .ws-help-category-card-arrow {
        margin-left: auto;
        color: var(--text-muted);
    }

    .ws-help-faq-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .ws-help-faq-cta-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--space-5);
        align-items: start;
    }

    .ws-help-faq-column {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        min-width: 0;
    }

    .ws-help-cta-column {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        min-width: 0;
    }

    .ws-help-support-channels {
        min-width: 0;
    }

    .ws-help-support-channel {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--surface-hover);
        border-radius: var(--radius-md);
        color: var(--text);
        font-size: var(--text-sm);
        transition: background var(--motion-hover);
    }

    .ws-help-support-channel:hover {
        background: var(--primary-10);
    }

    .ws-help-support-channel .icon {
        color: var(--primary);
    }

    .ws-help-support-sent {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-4);
        text-align: center;
    }

    .ws-help-support-sent-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: var(--radius-full);
        background: var(--success-10);
        color: var(--success);
        font-size: var(--text-2xl);
    }

    .ws-help-support-sent strong {
        color: var(--text);
        font-size: var(--text-lg);
    }

    .ws-help-support-sent p {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .ws-help-my-requests {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .ws-help-my-request-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--surface-hover);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        color: var(--text);
    }

    .ws-help-my-request-item span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ws-help-cta {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-6);
        background: var(--secondary-10);
        border-radius: var(--radius-lg);
    }

    .ws-help-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgb(var(--secondary-rgb) / 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgb(var(--secondary-rgb) / 0.08) 1px, transparent 1px);
        background-size: 32px 32px;
        pointer-events: none;
    }

    .ws-help-cta>* {
        position: relative;
        z-index: var(--z-base);
    }

    .ws-help-cta-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: var(--radius-full);
        background: var(--surface);
        color: var(--secondary);
        font-size: var(--text-xl);
    }

    .ws-help-cta-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .ws-help-cta-body strong {
        color: var(--text);
        font-size: var(--text-base);
    }

    .ws-help-cta-body p {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .ws-help-cta .btn {
        width: 100%;
    }

    .ws-help-faq-item {
        padding: var(--space-4) var(--space-5);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
    }

    .ws-help-faq-item summary {
        cursor: pointer;
        font-weight: var(--font-medium);
        color: var(--text);
        list-style: none;
    }

    .ws-help-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .ws-help-faq-item summary::before {
        content: "+";
        display: inline-block;
        width: 1.25rem;
        color: var(--primary);
        font-weight: var(--font-bold);
    }

    .ws-help-faq-item[open] summary::before {
        content: "−";
    }

    .ws-help-faq-item p {
        margin: var(--space-3) 0 0;
        padding-left: 1.25rem;
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    .ws-help-article-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--space-4);
    }

    .ws-help-article-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-5);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        transition: border-color var(--motion-hover), transform var(--motion-hover);
    }

    .ws-help-article-card:hover {
        border-color: var(--primary-40);
        transform: translateY(-2px);
    }

    .ws-help-article-card strong {
        color: var(--text);
        font-size: var(--text-base);
    }

    .ws-help-article-card p {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    .ws-help-article-card-category {
        align-self: flex-start;
        padding: 2px 10px;
        border-radius: var(--radius-full);
        background: var(--primary-10);
        color: var(--primary);
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
    }

    .ws-help-article-tag {
        display: inline-flex;
        align-items: center;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-md);
        background: var(--surface-hover);
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
    }

    .ws-help-back {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin-bottom: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .ws-help-back:hover {
        color: var(--primary);
    }

    .ws-help-article-body {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-8);
    }

    .ws-help-article-body h1 {
        font-size: var(--text-2xl);
        color: var(--foreground);
    }

    .ws-help-article-tags {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    /* Article body typography moved to workspace/articles.css — dedicated
       stylesheet for Article.content, since that HTML is either seeded
       (help_center_seed.py) or authored via the backoffice CKEditor5 +
       bleach sanitizer (shared/html/sanitizer.py), both of which only
       allow plain semantic tags, no custom classes. */

    @media (max-width: 900px) {
        .ws-help-layout {
            grid-template-columns: 1fr;
        }

        .ws-help-sidebar {
            position: static;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .ws-help-faq-cta-layout {
            grid-template-columns: 1fr;
        }

        .ws-help-category-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 600px) {
        .ws-help-category-grid {
            grid-template-columns: 1fr;
        }

        .ws-help-search {
            flex-wrap: wrap;
        }

        .ws-help-search-btn {
            flex: 1 1 100%;
        }

        .ws-help-section-header {
            flex-wrap: wrap;
            align-items: flex-start;
            gap: var(--space-2);
        }
    }

    /*=========================
   Payment Modal
=========================*/
    .payment-modal {
        max-width: 32rem;
    }

    .payment-modal-header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-6);
    }

    .payment-modal-body {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        padding: var(--space-6);
    }

    /*=========================
   Plan Card
=========================*/
    .payment-plan-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .payment-plan-badge {
        width: fit-content;
        padding: 2px var(--space-2);
        border-radius: var(--radius-full);
        background: var(--primary-10);
        color: var(--primary-100);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        text-transform: uppercase;
    }

    .payment-plan-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .payment-plan-heading-content h3 {
        margin: 0;
        color: var(--text);
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
    }

    .payment-plan-heading-content p {
        margin-top: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }

    .payment-plan-price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
        text-align: right;
    }

    .payment-plan-price-value {
        color: var(--primary-100);
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
        white-space: nowrap;
    }

    .payment-plan-price-label {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .payment-plan-price-discount {
        color: var(--success);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
    }

    /*=========================
   Feature Grid
=========================*/
    .payment-feature-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .payment-feature {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
    }

    .payment-feature strong {
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    .payment-feature small {
        color: var(--text-muted);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Payment Method Select
=========================*/
    .payment-method-select {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .payment-method-select > label {
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
    }

    .payment-method-option {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
        text-align: left;
        transition: var(--motion-hover);
    }

    .payment-method-option:hover {
        border-color: var(--primary-100);
    }

    .payment-method-option.active {
        background: var(--primary-10);
        border-color: var(--primary-100);
    }

    .payment-method-option-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .payment-method-option-content strong {
        color: var(--text);
        font-size: var(--text-md);
        font-weight: var(--font-bold);
    }

    .payment-method-option-content small {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .payment-method-option-check {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-full);
        background: var(--primary-100);
        color: var(--white);
    }

    .payment-method-option-price {
        flex-shrink: 0;
        color: var(--text);
        font-size: var(--text-md);
        font-weight: var(--font-bold);
        white-space: nowrap;
    }

    .payment-method-option-chevron {
        flex-shrink: 0;
        color: var(--text-muted);
    }

    /*=========================
   Coupon
=========================*/
    .payment-coupon-input {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .payment-coupon-input input {
        flex: 1;
        height: 2.375rem;
        padding: 0 var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--text);
        font-size: var(--text-sm);
        text-transform: uppercase;
    }

    .payment-coupon-applied {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border: var(--border-width) solid var(--success);
        border-radius: var(--radius-lg);
        background: var(--success-10);
        color: var(--success);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
    }

    .payment-coupon-applied .icon {
        font-size: var(--text-lg);
    }

    .payment-coupon-remove {
        margin-left: auto;
        color: var(--text-muted);
        font-size: var(--text-xs);
        text-decoration: underline;
    }

    .payment-coupon-error {
        margin: 0;
        padding-top: var(--space-1);
        color: var(--danger);
        font-size: var(--text-xs);
    }

    /*=========================
   Security Note
=========================*/
    .payment-security-note {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding-top: var(--space-2);
        color: var(--text-muted);
    }

    .payment-security-note .icon {
        font-size: var(--text-lg);
    }

    .payment-security-note p {
        flex: 1;
        margin: 0;
        font-size: var(--text-xs);
    }

    .payment-security-badge {
        padding: 2px var(--space-2);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-sm);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--text-muted);
    }

    /*=========================
   Payment Footer
=========================*/
    .payment-modal-footer {
        padding: var(--space-5) var(--space-6);
        border-top: var(--border-width) solid var(--border-color);
    }

    /*=========================
   Payment Step Header
=========================*/
    .payment-step-header {
        flex: 1;
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .payment-step-number {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        background: var(--primary-100);
        color: var(--white);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
    }

    .payment-step-header-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .payment-step-header-content h2 {
        margin: 0;
        color: var(--text);
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
    }

    .payment-step-header-content p {
        margin: 0;
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }

    /*=========================
   Payment Method Option (static recap)
=========================*/
    .payment-method-option--static {
        cursor: default;
    }

    .payment-method-option--static:hover {
        border-color: var(--primary-100);
    }

    /*=========================
   Payment Form
=========================*/
    .payment-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .payment-form-row {
        display: flex;
        gap: var(--space-4);
    }

    .payment-form-row .payment-form-field {
        flex: 1;
    }

    .payment-form-field--wide {
        flex: 3;
    }

    .payment-form-field--narrow {
        flex: 1;
    }

    .payment-form-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .payment-form-field label {
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
    }

    .payment-form-hint {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .payment-form-input {
        height: 56px;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-inline: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }

    .payment-form-input input {
        flex: 1;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        color: var(--text);
        font-size: var(--text-md);
        font-family: inherit;
    }

    .payment-form-input input:focus,
    .payment-form-input input:focus-visible,
    .payment-form-input input:active {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .payment-form-card-icon {
        flex-shrink: 0;
        color: var(--text-muted);
    }

    /*=========================
   Payment Installments
=========================*/
    .payment-installments-options {
        display: flex;
        gap: var(--space-3);
    }

    .payment-installments-option {
        flex: 1;
        padding: var(--space-3) var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--text);
        font-size: var(--text-sm);
        text-align: center;
        transition: var(--motion-hover);
    }

    .payment-installments-option:hover {
        border-color: var(--primary-100);
    }

    .payment-installments-option.active {
        background: var(--primary-10);
        border-color: var(--primary-100);
        color: var(--primary-100);
        font-weight: var(--font-semibold);
    }

    /*=========================
   Payment Pix QR
=========================*/
    .payment-qr-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        text-align: center;
    }

    .payment-qr-image {
        width: 200px;
        height: 200px;
        padding: var(--space-3);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--white);
    }

    .payment-qr-copy {
        width: 100%;
    }

    .payment-qr-cancel {
        padding: 0;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-decoration: underline;
        cursor: pointer;
    }

    .payment-qr-cancel:disabled {
        opacity: 0.6;
        cursor: default;
    }

    /*=========================
   Payment Order Summary
=========================*/
    .payment-order-summary {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-xl);
        background: var(--surface);
    }

    .payment-order-summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--text);
        font-size: var(--text-sm);
    }

    .payment-order-summary-divider {
        height: 1px;
        background: var(--border-color);
    }

    .payment-order-summary-total {
        font-size: var(--text-md);
        font-weight: var(--font-bold);
    }

    .payment-installments-note {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .payment-installments-note .icon {
        font-size: var(--text-lg);
    }

    /*=========================
   Payment Waiting / Processing
=========================*/
    .payment-spinner-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-6) 0;
    }

    .payment-spinner {
        width: 64px;
        height: 64px;
        border: 4px solid var(--primary-10);
        border-top-color: var(--primary-100);
        border-radius: var(--radius-full);
        animation: spin 1s linear infinite;
    }

    .payment-waiting-text {
        margin: 0;
        color: var(--text);
        font-size: var(--text-sm);
        text-align: center;
    }

    .payment-waiting-subtext {
        margin: 0;
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-align: center;
    }

    .payment-note {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
        background: var(--surface);
        border: var(--border-width) solid var(--border-color);
    }

    .payment-note strong {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
    }

    .payment-note p {
        margin: 0;
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }

    .payment-note-link {
        display: inline;
        padding: 0;
        color: var(--primary-100);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        text-decoration: underline;
    }

    .payment-note--danger {
        background: var(--danger-10);
        border-color: rgb(var(--danger-rgb) / 0.3);
    }

    .payment-note--danger p {
        color: var(--danger);
    }

    /*=========================
   Payment Result (success/failure)
=========================*/
    .payment-result-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        text-align: center;
        padding: var(--space-8) var(--space-6) var(--space-6);
    }

    .payment-result-icon-wrap {
        position: relative;
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--space-2);
    }

    .payment-result-halo {
        position: absolute;
        inset: 0;
        border-radius: var(--radius-full);
    }

    .payment-result-halo--success {
        background: var(--success-10);
        animation: payment-result-pulse 2.4s ease-in-out infinite;
    }

    .payment-result-halo--danger {
        background: var(--danger-10);
    }

    @keyframes payment-result-pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.08);
            opacity: 0.7;
        }
    }

    .payment-result-icon {
        position: relative;
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        color: var(--white);
        box-shadow: 0 8px 20px -6px rgb(var(--success-rgb) / 0.5);
    }

    .payment-result-icon .icon {
        font-size: 28px;
        font-weight: var(--font-bold);
    }

    .payment-result-icon--success {
        background: var(--success);
    }

    .payment-result-icon--danger {
        background: var(--danger);
        box-shadow: 0 8px 20px -6px rgb(var(--danger-rgb) / 0.5);
    }

    .payment-result-sparkle {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: var(--radius-xs);
        background: var(--secondary);
    }

    .payment-result-sparkle--1 {
        top: -2px;
        left: 6px;
        transform: rotate(20deg);
        animation: payment-result-sparkle 1.8s ease-in-out infinite;
    }

    .payment-result-sparkle--2 {
        top: 30%;
        right: -6px;
        background: var(--warning);
        transform: rotate(-15deg);
        animation: payment-result-sparkle 1.8s ease-in-out 0.3s infinite;
    }

    .payment-result-sparkle--3 {
        bottom: 4px;
        left: -4px;
        background: var(--success-50);
        transform: rotate(10deg);
        animation: payment-result-sparkle 1.8s ease-in-out 0.6s infinite;
    }

    @keyframes payment-result-sparkle {
        0%, 100% {
            opacity: 0.4;
            transform: scale(0.8);
        }
        50% {
            opacity: 1;
            transform: scale(1.15);
        }
    }

    .payment-result-title {
        margin: 0;
        color: var(--text);
        font-size: var(--text-2xl);
        font-weight: var(--font-bold);
    }

    .payment-result-description {
        margin: 0;
        color: var(--text-muted);
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        max-width: 30ch;
    }

    .payment-result-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
        margin-top: var(--space-2);
    }

    .payment-result-actions--row {
        flex-direction: row;
    }

    .payment-result-actions--row .btn {
        flex: 1;
    }

    /*=========================
   Toast (compartilhado editor/dashboard)
=========================*/
    .editor-toast {
        position: fixed;
        bottom: var(--space-6);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-lg);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        white-space: nowrap;
        z-index: 9999;
        pointer-events: none;
        box-shadow: var(--shadow-lg);
    }

    .editor-toast.is-success {
        background: #1a7f4b;
        color: #ffffff;
    }

    .editor-toast.is-error {
        background: #c0392b;
        color: #ffffff;
    }

    .editor-toast .icon {
        font-size: 18px;
    }

    /*=========================
     Tooltip
  =========================*/
    /* Native title="" has a slow, browser-controlled delay (~1s in
       Chrome) with no way to speed it up. A plain CSS ::after tooltip
       (position:absolute) was tried first, but gets clipped
       unpredictably depending on the ancestor chain — same class of
       issue already documented on .editor-rail-label, which needed
       position:fixed + x-teleport="body" to escape it reliably. This
       mirrors that proven pattern: one shared element teleported to
       <body> (components/tooltip.html), positioned via
       getBoundingClientRect() on hover (showWsTooltip/hideWsTooltip,
       tooltip.js) instead of pure CSS. */
    .ws-tooltip {
        position: fixed;
        transform: translateX(-50%);
        z-index: 1200;
        background: var(--text-900, #111);
        color: #fff;
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        padding: 4px 10px;
        border-radius: var(--radius-md);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.1s ease;
    }

    .ws-tooltip.is-visible {
        opacity: 1;
        transition-delay: 0.15s;
    }

}