/*
|--------------------------------------------------------------------------
| TaxAI Phase1 Design System
|--------------------------------------------------------------------------
|
| Version: 2266g7wh40
|
| This file defines shared Phase1 design tokens and common component rules.
| Existing page-specific CSS remains active during the migration period.
|
*/

/* -----------------------------------------------------------------------
   01. Design tokens
   ----------------------------------------------------------------------- */

:root {
    /* Brand */
    --taxai-color-brand-50: #eef4ff;
    --taxai-color-brand-100: #dce8ff;
    --taxai-color-brand-200: #bfd3ff;
    --taxai-color-brand-300: #91b3ff;
    --taxai-color-brand-400: #5f8cff;
    --taxai-color-brand-500: #3b6df2;
    --taxai-color-brand-600: #2856d9;
    --taxai-color-brand-700: #2246b0;
    --taxai-color-brand-800: #223d8a;
    --taxai-color-brand-900: #21366d;

    /* Neutral */
    --taxai-color-white: #ffffff;
    --taxai-color-neutral-25: #fcfcfd;
    --taxai-color-neutral-50: #f8fafc;
    --taxai-color-neutral-100: #f1f5f9;
    --taxai-color-neutral-150: #e9eef5;
    --taxai-color-neutral-200: #e2e8f0;
    --taxai-color-neutral-300: #cbd5e1;
    --taxai-color-neutral-400: #94a3b8;
    --taxai-color-neutral-500: #64748b;
    --taxai-color-neutral-600: #475569;
    --taxai-color-neutral-700: #334155;
    --taxai-color-neutral-800: #1e293b;
    --taxai-color-neutral-900: #0f172a;

    /* Semantic */
    --taxai-color-success-50: #ecfdf5;
    --taxai-color-success-100: #d1fae5;
    --taxai-color-success-600: #059669;
    --taxai-color-success-700: #047857;

    --taxai-color-warning-50: #fffbeb;
    --taxai-color-warning-100: #fef3c7;
    --taxai-color-warning-600: #d97706;
    --taxai-color-warning-700: #b45309;

    --taxai-color-danger-50: #fef2f2;
    --taxai-color-danger-100: #fee2e2;
    --taxai-color-danger-600: #dc2626;
    --taxai-color-danger-700: #b91c1c;

    --taxai-color-info-50: #eff6ff;
    --taxai-color-info-100: #dbeafe;
    --taxai-color-info-600: #2563eb;
    --taxai-color-info-700: #1d4ed8;

    /* Surfaces */
    --taxai-color-canvas: #f5f7fb;
    --taxai-color-surface: #ffffff;
    --taxai-color-surface-subtle: #f8fafc;
    --taxai-color-surface-muted: #f1f5f9;
    --taxai-color-overlay: rgba(15, 23, 42, 0.58);

    /* Text */
    --taxai-color-text: #182230;
    --taxai-color-text-strong: #101828;
    --taxai-color-text-muted: #667085;
    --taxai-color-text-subtle: #98a2b3;
    --taxai-color-text-inverse: #ffffff;
    --taxai-color-link: var(--taxai-color-brand-600);
    --taxai-color-link-hover: var(--taxai-color-brand-700);

    /* Borders */
    --taxai-color-border: #e4e7ec;
    --taxai-color-border-strong: #d0d5dd;
    --taxai-color-border-subtle: #eef2f6;
    --taxai-color-focus-ring: rgba(59, 109, 242, 0.22);

    /* Typography */
    --taxai-font-family:
        Inter,
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Meiryo",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --taxai-font-size-2xs: 0.6875rem;
    --taxai-font-size-xs: 0.75rem;
    --taxai-font-size-sm: 0.8125rem;
    --taxai-font-size-md: 0.875rem;
    --taxai-font-size-base: 0.9375rem;
    --taxai-font-size-lg: 1rem;
    --taxai-font-size-xl: 1.125rem;
    --taxai-font-size-2xl: 1.375rem;
    --taxai-font-size-3xl: 1.75rem;

    --taxai-line-height-tight: 1.25;
    --taxai-line-height-heading: 1.35;
    --taxai-line-height-body: 1.65;

    --taxai-font-weight-regular: 400;
    --taxai-font-weight-medium: 500;
    --taxai-font-weight-semibold: 600;
    --taxai-font-weight-bold: 700;

    --taxai-letter-spacing-tight: -0.025em;
    --taxai-letter-spacing-normal: 0;
    --taxai-letter-spacing-wide: 0.02em;

    /* Spacing */
    --taxai-space-0: 0;
    --taxai-space-1: 0.25rem;
    --taxai-space-2: 0.5rem;
    --taxai-space-3: 0.75rem;
    --taxai-space-4: 1rem;
    --taxai-space-5: 1.25rem;
    --taxai-space-6: 1.5rem;
    --taxai-space-7: 1.75rem;
    --taxai-space-8: 2rem;
    --taxai-space-10: 2.5rem;
    --taxai-space-12: 3rem;
    --taxai-space-16: 4rem;

    /* Page spacing */
    --taxai-page-inline: clamp(1rem, 2.2vw, 2rem);
    --taxai-page-block: clamp(1rem, 2vw, 1.75rem);
    --taxai-section-gap: clamp(1rem, 1.7vw, 1.5rem);
    --taxai-section-gap-compact: 0.875rem;
    --taxai-grid-gap: 1rem;
    --taxai-card-padding: clamp(1rem, 1.5vw, 1.375rem);
    --taxai-card-padding-compact: 0.875rem 1rem;

    /* Radius */
    --taxai-radius-xs: 0.375rem;
    --taxai-radius-sm: 0.5rem;
    --taxai-radius-md: 0.75rem;
    --taxai-radius-lg: 1rem;
    --taxai-radius-xl: 1.25rem;
    --taxai-radius-2xl: 1.5rem;
    --taxai-radius-pill: 9999px;

    /* Shadows */
    --taxai-shadow-xs:
        0 1px 2px rgba(16, 24, 40, 0.04);

    --taxai-shadow-sm:
        0 1px 3px rgba(16, 24, 40, 0.08),
        0 1px 2px rgba(16, 24, 40, 0.04);

    --taxai-shadow-md:
        0 4px 10px rgba(16, 24, 40, 0.06),
        0 1px 3px rgba(16, 24, 40, 0.04);

    --taxai-shadow-lg:
        0 12px 28px rgba(16, 24, 40, 0.09),
        0 3px 8px rgba(16, 24, 40, 0.05);

    --taxai-shadow-focus:
        0 0 0 3px var(--taxai-color-focus-ring);

    /* Motion */
    --taxai-duration-fast: 120ms;
    --taxai-duration-normal: 180ms;
    --taxai-duration-slow: 260ms;

    --taxai-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --taxai-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    --taxai-transition-fast:
        var(--taxai-duration-fast) var(--taxai-ease-standard);

    --taxai-transition:
        var(--taxai-duration-normal) var(--taxai-ease-standard);

    /* Component sizing */
    --taxai-control-height-sm: 2rem;
    --taxai-control-height-md: 2.5rem;
    --taxai-control-height-lg: 2.875rem;

    --taxai-content-max-width: 1600px;
    --taxai-table-row-height: 3.25rem;
    --taxai-header-height: 4rem;

    /* Layering */
    --taxai-z-dropdown: 100;
    --taxai-z-sticky: 200;
    --taxai-z-modal: 1000;
    --taxai-z-toast: 1200;
}

/* -----------------------------------------------------------------------
   02. Foundation
   ----------------------------------------------------------------------- */

html {
    color-scheme: light;
}

body {
    font-family: var(--taxai-font-family);
    color: var(--taxai-color-text);
    background: var(--taxai-color-canvas);
    line-height: var(--taxai-line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

:where(
    .taxai-phase1,
    .taxai-phase1-page,
    [data-taxai-phase1],
    [class*="taxai-phase1-"]
) {
    font-family: var(--taxai-font-family);
}

:where(
    .taxai-phase1,
    .taxai-phase1-page,
    [data-taxai-phase1]
) *,
:where(
    .taxai-phase1,
    .taxai-phase1-page,
    [data-taxai-phase1]
) *::before,
:where(
    .taxai-phase1,
    .taxai-phase1-page,
    [data-taxai-phase1]
) *::after {
    box-sizing: border-box;
}

:where(
    .taxai-phase1,
    .taxai-phase1-page,
    [data-taxai-phase1]
) :focus-visible {
    outline: none;
    box-shadow: var(--taxai-shadow-focus);
}

:where(
    .taxai-phase1,
    .taxai-phase1-page,
    [data-taxai-phase1]
) a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

/* -----------------------------------------------------------------------
   03. Page and section rhythm
   ----------------------------------------------------------------------- */

.taxai-phase1-shell,
.taxai-phase1-page,
[data-taxai-phase1-page] {
    width: 100%;
    max-width: var(--taxai-content-max-width);
    margin-inline: auto;
}

.taxai-phase1-stack,
.taxai-page-stack,
[data-taxai-stack] {
    display: flex;
    flex-direction: column;
    gap: var(--taxai-section-gap);
}

.taxai-section,
.taxai-phase1-section,
[data-taxai-section] {
    margin-block: 0;
}

.taxai-section + .taxai-section,
.taxai-phase1-section + .taxai-phase1-section,
[data-taxai-section] + [data-taxai-section] {
    margin-top: var(--taxai-section-gap);
}

.taxai-section-header,
.taxai-card-header,
[data-taxai-section-header] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--taxai-space-4);
}

.taxai-section-heading,
.taxai-card-title,
[data-taxai-section-title] {
    margin: 0;
    color: var(--taxai-color-text-strong);
    font-size: var(--taxai-font-size-lg);
    font-weight: var(--taxai-font-weight-semibold);
    line-height: var(--taxai-line-height-heading);
    letter-spacing: var(--taxai-letter-spacing-tight);
}

.taxai-section-description,
.taxai-card-description,
[data-taxai-section-description] {
    margin: var(--taxai-space-1) 0 0;
    color: var(--taxai-color-text-muted);
    font-size: var(--taxai-font-size-sm);
}

/* -----------------------------------------------------------------------
   04. Cards
   ----------------------------------------------------------------------- */

.taxai-card,
.taxai-panel,
.taxai-phase1-card,
[data-taxai-card] {
    position: relative;
    background: var(--taxai-color-surface);
    border: 1px solid var(--taxai-color-border);
    border-radius: var(--taxai-radius-lg);
    box-shadow: var(--taxai-shadow-xs);
}

.taxai-card,
.taxai-phase1-card,
[data-taxai-card] {
    padding: var(--taxai-card-padding);
}

.taxai-card--compact,
.taxai-card-compact,
[data-taxai-card="compact"] {
    padding: var(--taxai-card-padding-compact);
}

.taxai-card--interactive,
.taxai-card-link,
[data-taxai-card-interactive] {
    transition:
        border-color var(--taxai-transition),
        box-shadow var(--taxai-transition),
        transform var(--taxai-transition);
}

.taxai-card--interactive:hover,
.taxai-card-link:hover,
[data-taxai-card-interactive]:hover {
    border-color: var(--taxai-color-border-strong);
    box-shadow: var(--taxai-shadow-md);
    transform: translateY(-1px);
}

/* -----------------------------------------------------------------------
   05. Hero
   ----------------------------------------------------------------------- */

.taxai-hero,
.taxai-phase1-hero,
[data-taxai-hero] {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(59, 109, 242, 0.10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--taxai-color-surface) 0%,
            var(--taxai-color-neutral-50) 100%
        );
    border: 1px solid var(--taxai-color-border);
    border-radius: var(--taxai-radius-xl);
    box-shadow: var(--taxai-shadow-sm);
}

.taxai-hero-title,
[data-taxai-hero-title] {
    margin: 0;
    color: var(--taxai-color-text-strong);
    font-size: clamp(1.35rem, 2.2vw, var(--taxai-font-size-3xl));
    font-weight: var(--taxai-font-weight-bold);
    line-height: var(--taxai-line-height-tight);
    letter-spacing: var(--taxai-letter-spacing-tight);
}

.taxai-hero-description,
[data-taxai-hero-description] {
    max-width: 52rem;
    margin: var(--taxai-space-2) 0 0;
    color: var(--taxai-color-text-muted);
    font-size: var(--taxai-font-size-md);
}

/* -----------------------------------------------------------------------
   06. KPI
   ----------------------------------------------------------------------- */

.taxai-kpi-grid,
.taxai-metrics-grid,
[data-taxai-kpi-grid] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--taxai-grid-gap);
}

.taxai-kpi-card,
.taxai-metric-card,
[data-taxai-kpi] {
    min-width: 0;
    padding: var(--taxai-card-padding);
    background: var(--taxai-color-surface);
    border: 1px solid var(--taxai-color-border);
    border-radius: var(--taxai-radius-lg);
    box-shadow: var(--taxai-shadow-xs);
}

.taxai-kpi-label,
.taxai-metric-label,
[data-taxai-kpi-label] {
    color: var(--taxai-color-text-muted);
    font-size: var(--taxai-font-size-xs);
    font-weight: var(--taxai-font-weight-semibold);
    letter-spacing: var(--taxai-letter-spacing-wide);
}

.taxai-kpi-value,
.taxai-metric-value,
[data-taxai-kpi-value] {
    margin-top: var(--taxai-space-2);
    color: var(--taxai-color-text-strong);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: var(--taxai-font-weight-bold);
    line-height: var(--taxai-line-height-tight);
    letter-spacing: var(--taxai-letter-spacing-tight);
}

.taxai-kpi-meta,
.taxai-metric-meta,
[data-taxai-kpi-meta] {
    margin-top: var(--taxai-space-2);
    color: var(--taxai-color-text-muted);
    font-size: var(--taxai-font-size-xs);
}

/* -----------------------------------------------------------------------
   07. Buttons and controls
   ----------------------------------------------------------------------- */

.taxai-btn,
.taxai-button,
[data-taxai-button] {
    display: inline-flex;
    min-height: var(--taxai-control-height-md);
    align-items: center;
    justify-content: center;
    gap: var(--taxai-space-2);
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--taxai-radius-md);
    font-family: inherit;
    font-size: var(--taxai-font-size-sm);
    font-weight: var(--taxai-font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--taxai-transition-fast),
        border-color var(--taxai-transition-fast),
        color var(--taxai-transition-fast),
        box-shadow var(--taxai-transition-fast),
        transform var(--taxai-transition-fast);
}

.taxai-btn:hover,
.taxai-button:hover,
[data-taxai-button]:hover {
    text-decoration: none;
}

.taxai-btn:active,
.taxai-button:active,
[data-taxai-button]:active {
    transform: translateY(1px);
}

.taxai-btn-primary,
.taxai-button--primary,
[data-taxai-button="primary"] {
    color: var(--taxai-color-text-inverse);
    background: var(--taxai-color-brand-600);
    border-color: var(--taxai-color-brand-600);
    box-shadow: var(--taxai-shadow-xs);
}

.taxai-btn-primary:hover,
.taxai-button--primary:hover,
[data-taxai-button="primary"]:hover {
    background: var(--taxai-color-brand-700);
    border-color: var(--taxai-color-brand-700);
    box-shadow: var(--taxai-shadow-sm);
}

.taxai-btn-secondary,
.taxai-button--secondary,
[data-taxai-button="secondary"] {
    color: var(--taxai-color-neutral-700);
    background: var(--taxai-color-surface);
    border-color: var(--taxai-color-border-strong);
}

.taxai-btn-secondary:hover,
.taxai-button--secondary:hover,
[data-taxai-button="secondary"]:hover {
    color: var(--taxai-color-neutral-900);
    background: var(--taxai-color-neutral-50);
    border-color: var(--taxai-color-neutral-400);
}

.taxai-btn-danger,
.taxai-button--danger,
[data-taxai-button="danger"] {
    color: var(--taxai-color-danger-700);
    background: var(--taxai-color-danger-50);
    border-color: var(--taxai-color-danger-100);
}

.taxai-btn-row,
.taxai-actions,
[data-taxai-actions] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--taxai-space-2);
}

:where(
    .taxai-input,
    .taxai-select,
    .taxai-textarea,
    [data-taxai-control]
) {
    width: 100%;
    min-height: var(--taxai-control-height-md);
    color: var(--taxai-color-text);
    background: var(--taxai-color-surface);
    border: 1px solid var(--taxai-color-border-strong);
    border-radius: var(--taxai-radius-md);
    font-family: inherit;
    font-size: var(--taxai-font-size-sm);
    transition:
        border-color var(--taxai-transition-fast),
        box-shadow var(--taxai-transition-fast);
}

:where(
    .taxai-input,
    .taxai-select,
    [data-taxai-control]
) {
    padding: 0.5rem 0.75rem;
}

.taxai-textarea {
    min-height: 6rem;
    padding: 0.625rem 0.75rem;
    resize: vertical;
}

:where(
    .taxai-input,
    .taxai-select,
    .taxai-textarea,
    [data-taxai-control]
):focus {
    border-color: var(--taxai-color-brand-500);
    outline: none;
    box-shadow: var(--taxai-shadow-focus);
}

/* -----------------------------------------------------------------------
   08. Badges and status
   ----------------------------------------------------------------------- */

.taxai-badge,
.taxai-chip,
.taxai-status,
[data-taxai-badge] {
    display: inline-flex;
    min-height: 1.625rem;
    align-items: center;
    justify-content: center;
    gap: var(--taxai-space-1);
    padding: 0.25rem 0.625rem;
    color: var(--taxai-color-neutral-700);
    background: var(--taxai-color-neutral-100);
    border: 1px solid var(--taxai-color-neutral-200);
    border-radius: var(--taxai-radius-pill);
    font-size: var(--taxai-font-size-xs);
    font-weight: var(--taxai-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.taxai-badge-success,
.taxai-status-success,
[data-taxai-status="success"] {
    color: var(--taxai-color-success-700);
    background: var(--taxai-color-success-50);
    border-color: var(--taxai-color-success-100);
}

.taxai-badge-warning,
.taxai-status-warning,
[data-taxai-status="warning"] {
    color: var(--taxai-color-warning-700);
    background: var(--taxai-color-warning-50);
    border-color: var(--taxai-color-warning-100);
}

.taxai-badge-danger,
.taxai-status-danger,
[data-taxai-status="danger"] {
    color: var(--taxai-color-danger-700);
    background: var(--taxai-color-danger-50);
    border-color: var(--taxai-color-danger-100);
}

.taxai-badge-info,
.taxai-status-info,
[data-taxai-status="info"] {
    color: var(--taxai-color-info-700);
    background: var(--taxai-color-info-50);
    border-color: var(--taxai-color-info-100);
}

/* -----------------------------------------------------------------------
   09. Workflow
   ----------------------------------------------------------------------- */

.taxai-workflow,
.taxai-workflow-grid,
[data-taxai-workflow] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--taxai-grid-gap);
}

.taxai-workflow-step,
[data-taxai-workflow-step] {
    position: relative;
    min-width: 0;
    padding: var(--taxai-card-padding);
    background: var(--taxai-color-surface);
    border: 1px solid var(--taxai-color-border);
    border-radius: var(--taxai-radius-lg);
    box-shadow: var(--taxai-shadow-xs);
    transition:
        border-color var(--taxai-transition),
        box-shadow var(--taxai-transition),
        transform var(--taxai-transition);
}

.taxai-workflow-step:hover,
[data-taxai-workflow-step]:hover {
    border-color: var(--taxai-color-brand-200);
    box-shadow: var(--taxai-shadow-md);
    transform: translateY(-1px);
}

.taxai-workflow-step-number,
[data-taxai-workflow-number] {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    color: var(--taxai-color-brand-700);
    background: var(--taxai-color-brand-50);
    border: 1px solid var(--taxai-color-brand-100);
    border-radius: var(--taxai-radius-pill);
    font-size: var(--taxai-font-size-xs);
    font-weight: var(--taxai-font-weight-bold);
}

.taxai-workflow-step-title,
[data-taxai-workflow-title] {
    margin: var(--taxai-space-3) 0 0;
    color: var(--taxai-color-text-strong);
    font-size: var(--taxai-font-size-md);
    font-weight: var(--taxai-font-weight-semibold);
    line-height: var(--taxai-line-height-heading);
}

.taxai-workflow-step-description,
[data-taxai-workflow-description] {
    margin: var(--taxai-space-1) 0 0;
    color: var(--taxai-color-text-muted);
    font-size: var(--taxai-font-size-xs);
}

/* -----------------------------------------------------------------------
   10. Tables
   ----------------------------------------------------------------------- */

.taxai-table-wrap,
.taxai-table-container,
[data-taxai-table-wrap] {
    overflow-x: auto;
    background: var(--taxai-color-surface);
    border: 1px solid var(--taxai-color-border);
    border-radius: var(--taxai-radius-lg);
    box-shadow: var(--taxai-shadow-xs);
    -webkit-overflow-scrolling: touch;
}

.taxai-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--taxai-color-text);
    font-size: var(--taxai-font-size-sm);
}

.taxai-table th {
    padding: 0.75rem 1rem;
    color: var(--taxai-color-text-muted);
    background: var(--taxai-color-neutral-50);
    border-bottom: 1px solid var(--taxai-color-border);
    font-size: var(--taxai-font-size-xs);
    font-weight: var(--taxai-font-weight-semibold);
    letter-spacing: var(--taxai-letter-spacing-wide);
    text-align: left;
    white-space: nowrap;
}

.taxai-table td {
    min-height: var(--taxai-table-row-height);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--taxai-color-border-subtle);
    vertical-align: middle;
}

.taxai-table tbody tr:last-child td {
    border-bottom: 0;
}

.taxai-table tbody tr {
    transition: background-color var(--taxai-transition-fast);
}

.taxai-table tbody tr:hover {
    background: var(--taxai-color-neutral-25);
}

/* -----------------------------------------------------------------------
   11. Tabs
   ----------------------------------------------------------------------- */

.taxai-tabs,
.taxai-tab-list,
[data-taxai-tabs] {
    display: flex;
    gap: var(--taxai-space-1);
    overflow-x: auto;
    padding: var(--taxai-space-1);
    background: var(--taxai-color-neutral-100);
    border-radius: var(--taxai-radius-md);
    scrollbar-width: thin;
}

.taxai-tab,
[data-taxai-tab] {
    display: inline-flex;
    min-height: 2.125rem;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    color: var(--taxai-color-text-muted);
    border: 0;
    border-radius: var(--taxai-radius-sm);
    font-size: var(--taxai-font-size-sm);
    font-weight: var(--taxai-font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--taxai-transition-fast),
        background-color var(--taxai-transition-fast),
        box-shadow var(--taxai-transition-fast);
}

.taxai-tab:hover,
[data-taxai-tab]:hover {
    color: var(--taxai-color-text);
    background: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

.taxai-tab.active,
.taxai-tab.is-active,
[data-taxai-tab][aria-selected="true"],
[data-taxai-tab].active {
    color: var(--taxai-color-text-strong);
    background: var(--taxai-color-surface);
    box-shadow: var(--taxai-shadow-xs);
}

/* -----------------------------------------------------------------------
   12. Utilities
   ----------------------------------------------------------------------- */

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

.taxai-text-subtle {
    color: var(--taxai-color-text-subtle);
}

.taxai-divider {
    height: 1px;
    margin-block: var(--taxai-space-4);
    background: var(--taxai-color-border-subtle);
    border: 0;
}

.taxai-empty-state {
    padding: var(--taxai-space-10) var(--taxai-space-6);
    color: var(--taxai-color-text-muted);
    text-align: center;
}

.taxai-skeleton {
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            var(--taxai-color-neutral-100) 25%,
            var(--taxai-color-neutral-50) 50%,
            var(--taxai-color-neutral-100) 75%
        );
    background-size: 200% 100%;
    border-radius: var(--taxai-radius-sm);
    animation: taxai-skeleton-loading 1.4s ease infinite;
}

@keyframes taxai-skeleton-loading {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* -----------------------------------------------------------------------
   13. Responsive behavior
   ----------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .taxai-kpi-grid,
    .taxai-metrics-grid,
    [data-taxai-kpi-grid],
    .taxai-workflow,
    .taxai-workflow-grid,
    [data-taxai-workflow] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    :root {
        --taxai-card-padding: 1rem;
        --taxai-section-gap: 1rem;
        --taxai-grid-gap: 0.75rem;
    }

    .taxai-kpi-grid,
    .taxai-metrics-grid,
    [data-taxai-kpi-grid],
    .taxai-workflow,
    .taxai-workflow-grid,
    [data-taxai-workflow] {
        grid-template-columns: minmax(0, 1fr);
    }

    .taxai-section-header,
    .taxai-card-header,
    [data-taxai-section-header] {
        flex-direction: column;
        align-items: stretch;
    }

    .taxai-btn-row,
    .taxai-actions,
    [data-taxai-actions] {
        align-items: stretch;
    }

    .taxai-btn-row > .taxai-btn,
    .taxai-actions > .taxai-btn {
        flex: 1 1 auto;
    }

    .taxai-hero,
    .taxai-phase1-hero,
    [data-taxai-hero] {
        border-radius: var(--taxai-radius-lg);
    }
}

/* -----------------------------------------------------------------------
   14. Accessibility
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --taxai-color-border: #c5cad3;
        --taxai-color-border-strong: #8d96a5;
        --taxai-color-text-muted: #4b5565;
    }
}

/* 2266g7wh47b_add_responsive_table_label_shared_rule_only:begin */
@media (max-width: 640px) {
    .taxai-account-master-table td::before,
    .taxai-clients-table td::before {
        color: #8994a6;
        content: attr(data-label);
        font-size: 10px;
        font-weight: 800;
    }
}
/* 2266g7wh47b_add_responsive_table_label_shared_rule_only:end */

/* 2266g7wh47g shared page direct children contract */
.taxai-page-direct-children > * {
    box-sizing: border-box;
    justify-self: stretch;
    max-width: none;
    min-width: 0;
    width: 100%;
}