/**
     * ============================================
     * Mail Task UI Design System (v1.0)
     * ============================================
     */
    :root {
        /* ========== プライマリーカラー (後方互換: Standard Trust へリダイレクト) ========== */
        --primary-blue: var(--color-primary);
        --primary-blue-hover: var(--color-primary-hover);
        --primary-blue-light: var(--color-primary-soft);
        
        /* ========== レイアウトカラー ========== */
        --bg-sidebar: #001529;              /* ダークサファイアブルー */
        --bg-header: #FFFFFF;
        --bg-body: #F3F4F6;
        --bg-primary: #FFFFFF;
        --bg-hover: #F9FAFB;
        
        /* ========== テキストカラー ========== */
        --text-primary: #1F2937;
        --text-secondary: #5F6368;
        --text-tertiary: #9CA3AF;
        --text-placeholder: #D1D5DB;
        --text-sidebar-main: #FFFFFF;
        --text-sidebar-sub: #FFFFFF;
        
        /* ========== ボーダーカラー ========== */
        --border-light: #E5E7EB;
        
        /* ========== ステータスカラー ========== */
        --status-success-bg: #E6F4EA;
        --status-success-text: #137333;
        --status-warning-bg: #FEF7E0;
        --status-warning-text: #B06000;
        --status-info-bg: #E8F0FE;
        --status-info-text: #1967D2;
        --status-neutral-bg: #F1F3F4;
        --status-neutral-text: #5F6368;
        --status-danger-bg: #FEE2E2;
        --status-danger-text: #DC2626;

        /* ========== シャドウ定義 ========== */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

        /* ========== Standard Trust トークン ========== */
        /* Brand */
        --color-primary: #00796B;
        --color-primary-light: #4DB6AC;
        --color-primary-soft: #E0F2F1;
        --color-primary-hover-soft: #B2DFDB;
        --color-primary-hover: #00695C;
        --color-on-primary: #FFFFFF;

        /* Background / Surface */
        --color-bg: #F8FAFC;
        --color-surface: #FFFFFF;

        /* Text */
        --color-text-main: #1E293B;
        --color-text-sub: #64748B;
        --color-text-muted: #94A3B8;

        /* Border */
        --color-border: #E2E8F0;
        --color-border-muted: #CBD5E1;

        /* Status */
        --color-success-text: #15803D;
        --color-success-bg: #F0FDF4;
        --color-warning-text: #C2410C;
        --color-warning-bg: #FFF7ED;
        --color-danger-text: #DC2626;
        --color-danger-bg: #FEE2E2;
        --color-danger-hover: #B91C1C;

        /* Neutral */
        --color-neutral-text: #64748B;
        --color-neutral-bg: #F1F5F9;

        /* ========== 企業アイコン ========== */
        --company-icon-bg: #e0e7ff;
        --company-icon-text: #4f46e5;

        /* ========== React互換エイリアス ========== */
        /* ページ固有CSSが短縮名を使う場合に解決するためのエイリアス */
        --primary-color: var(--color-primary);
        --primary: var(--color-primary);
        --danger: var(--color-danger-text);
        --danger-color: var(--color-danger-text);
        --error: var(--color-danger-text);
        --error-color: var(--color-danger-text);
        --error-bg: var(--color-danger-bg);
        --success: var(--status-success-text);
        --success-color: var(--status-success-text);
        --success-bg: var(--status-success-bg);
        --warning: var(--status-warning-text);
        --warning-bg: var(--status-warning-bg);
        --info: var(--status-info-text);
        --info-bg: var(--status-info-bg);
        --bg-secondary: var(--bg-hover);
        --card-bg: var(--bg-primary);
        --border-color: var(--color-border);
        --color-bg-secondary: var(--bg-hover);
        --color-bg-hover: var(--bg-hover);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: var(--color-text-main);
        background-color: var(--color-bg);
        overflow: hidden;
    }

    a {
        color: var(--color-primary);
        text-decoration: none;
    }
    a:hover {
        color: var(--color-primary-hover);
    }

    button, input {
        border: none;
        background: none;
        outline: none;
    }

    /* ========== プレースホルダー色（グローバル） ========== */
    input::placeholder,
    textarea::placeholder {
        color: var(--text-placeholder);
        opacity: 1;
    }

    /* ========== レイアウト構造 ========== */
    .app-container {
        display: flex;
        height: 100vh;
    }

    /* ========== サイドバー ========== */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 240px;
        height: 100vh;
        background-color: var(--color-surface);
        border-right: 1px solid var(--color-border);
        z-index: 20;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .sidebar-header {
        height: 52px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-border);
    }

    /* ========== サイドバーロゴ ========== */
    .sidebar-logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-decoration: none;
    }

    .sidebar-logo {
        max-width: 180px;
        max-height: 36px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* 折りたたみ時：ロゴを非表示 */
    .sidebar.collapsed .sidebar-logo-link {
        display: none;
    }

    .sidebar-app {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sidebar-app-icon {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-on-primary);
        font-size: 16px;
        flex-shrink: 0;
    }

    .sidebar-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-text-main);
    }

    .sidebar-subtitle {
        font-size: 11px;
        color: var(--color-text-sub);
        margin-top: 2px;
    }

    .sidebar-user {
        margin: 8px 12px 4px;
        padding: 8px 10px;
        border-radius: 8px;
        background: var(--color-bg);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sidebar-user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .sidebar-user-main {
        min-width: 0;
    }

    .sidebar-user-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-user-email {
        font-size: 11px;
        color: var(--color-text-sub);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-body {
        flex: 1;
        overflow-y: auto;
        margin-top: 4px;
    }

    .divider {
        height: 1px;
        background: var(--color-border);
        margin: 8px 0 10px;
    }

    .nav-section {
        margin-bottom: 10px;
    }

    .nav-section-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--color-text-muted);
        padding: 4px 12px;
        margin-bottom: 4px;
        letter-spacing: 0.05em;
    }

    .nav-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        margin: 0 8px;
        border-radius: 8px;
        color: var(--color-text-main);
        text-decoration: none;
        transition: all 0.2s;
    }
    /* サイドバー disabled リンク */
    .nav-item.disabled {
        pointer-events: none;
        color: #9ca3af !important;
        cursor: not-allowed;
    }
    .nav-item.disabled .nav-item-icon {
        stroke: #9ca3af;
    }

    .nav-item:hover {
        background-color: var(--color-bg);
        color: var(--color-text-main);
    }

    .nav-item.active {
        background-color: var(--color-primary-soft);
        color: var(--color-primary);
        font-weight: 600;
    }

    .nav-item-icon {
        margin-right: 12px;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .nav-item-sub {
        padding-left: 32px;  /* サブメニュー用のインデント */
    }

    .nav-item-badge {
        margin-left: auto;
        background-color: var(--color-primary);
        color: white;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
    }

    .nav-item.active .nav-item-badge {
        background-color: var(--color-primary);
        color: white;
    }

    .nav-item-incomplete {
        margin-left: auto;
        background-color: #f59e0b;
        color: white;
        font-size: 10px;
        font-weight: 600;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-footer {
        padding: 8px 12px 12px;
        border-top: 1px solid var(--color-border);
        margin-top: 4px;
    }

    .logout-button {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 10px;
        border-radius: 6px;
        background: var(--color-bg);
        color: var(--color-text-sub);
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        border: 1px solid var(--color-border);
        transition: background 0.1s, color 0.1s;
    }

    .logout-button:hover {
        background: var(--color-border);
        color: var(--color-text-main);
    }

    /* ========== メインコンテンツエリア ========== */
    .main-content {
        margin-left: 240px;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        background-color: var(--color-bg);
    }

    /* ========== ヘッダー ========== */
    .header {
        position: sticky;
        top: 0;
        height: 52px;
        background-color: var(--bg-header);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
        z-index: 30;
        display: flex;
        align-items: center;
        padding: 0 24px;
        gap: 16px;
    }

    .header-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-text-main);
        margin: 0;
    }

    .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .header-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-sub);
        cursor: pointer;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    .header-icon:hover {
        background-color: var(--bg-hover);
    }

    .header-inquiry-link {
        cursor: pointer;
        text-decoration: none;
        padding: 6px 14px;
        background: var(--color-primary-soft);
        color: var(--color-primary-hover);
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .header-inquiry-link:hover {
        background: var(--color-primary-light);
        color: var(--color-primary-hover);
    }

    .header-inquiry-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--color-primary-light);
    }

    /* ========== ヘッダー内ユーザー情報 ========== */
    .header-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background-color 0.2s;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    .header-user:hover {
        background-color: var(--bg-hover);
    }

    .header-user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .header-user-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .header-user-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--color-text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-user-email {
        font-size: 11px;
        color: var(--color-text-sub);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ========== コンテンツスクロール領域 ========== */
    .content-scroller {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
    }

    /* ========== ページタイトル ========== */
    .page-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--color-text-main);
        margin-bottom: 24px;
        display: none;
        align-items: center;
        gap: 8px;
    }

    .page-title svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .page-description {
        font-size: 14px;
        color: var(--color-text-sub);
        margin-top: 4px;
        display: none; /* すべての画面でサブタイトルを非表示 */
    }

    /* ========== カード ========== */
    .card {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 6px;
        box-shadow: var(--shadow-sm);
        padding: 16px;
        margin-bottom: 16px;
    }

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-main);
    }

    .card-form {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        box-shadow: var(--shadow-md);
        padding: 40px;
        margin-bottom: 16px;
    }

    /* ========== ボタン ========== */
    .btn {
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s;
        text-decoration: none;
        border: none;
    }

    .btn-primary {
        background-color: var(--color-primary);
        color: var(--color-on-primary);
        box-shadow: var(--shadow-md);
    }

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

    .btn-secondary {
        background-color: var(--color-surface);
        color: var(--color-text-main);
        border: 1px solid var(--color-border);
    }

    .btn-secondary:hover {
        background-color: var(--bg-hover);
    }

    /* ========== トグルスイッチ共通スタイル ========== */
    .realtime-sync-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: 12px;
    }

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 26px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-border-muted);
        transition: 0.3s;
        border-radius: 26px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

    .toggle-switch input:checked + .toggle-slider {
        background-color: var(--color-primary);
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(24px);
    }

    .toggle-switch input:disabled + .toggle-slider {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .toggle-label {
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-main);
        user-select: none;
    }

    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: var(--status-neutral-bg);
        color: var(--status-neutral-text);
    }

    .btn-sm {
        height: 24px;
        padding: 0 12px;
        font-size: 12px;
    }

    .btn-lg {
        height: 40px;
        padding: 0 20px;
        font-size: 14px;
    }

    .btn-danger {
        background-color: var(--color-danger-text);
        color: var(--color-on-primary);
    }

    .btn-danger:hover {
        background-color: var(--color-danger-hover);
    }

    .btn-outline {
        background-color: transparent;
        color: var(--color-text-main);
        border: 1px solid var(--color-border);
    }

    .btn-outline:hover:not(:disabled) {
        background-color: var(--bg-hover);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .btn-ghost {
        background-color: transparent;
        color: var(--color-text-main);
    }

    .btn-ghost:hover {
        background-color: var(--bg-hover);
    }

    /* ========== ボタングループ ========== */
    .btn-group {
        display: inline-flex;
        gap: 0;
        border-radius: 4px;
        overflow: hidden;
    }

    .btn-group .btn {
        border-radius: 0;
        margin: 0;
    }

    .btn-group .btn:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .btn-group .btn:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .btn-group .btn.active {
        background-color: var(--color-primary);
        color: var(--color-on-primary);
    }

    /* ========== トグルボタン ========== */
    .btn-toggle {
        width: 48px;
        height: 24px;
        background-color: var(--status-neutral-bg);
        border-radius: 24px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.3s;
        padding: 0;
        border: none;
    }

    .btn-toggle::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: var(--color-surface);
        top: 3px;
        left: 3px;
        transition: left 0.3s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .btn-toggle.active {
        background-color: var(--color-primary);
    }

    .btn-toggle.active::after {
        left: 27px;
    }

    /* ========== 新規作成ボタン ========== */
    .btn-new-deal {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        background: var(--color-primary);
        color: var(--color-on-primary);
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: var(--shadow-md);
    }

    .btn-new-deal:hover {
        background: var(--color-primary-hover);
        box-shadow: var(--shadow-lg);
        transform: translateY(-1px);
    }

    .btn-new-deal .plus-icon {
        font-size: 18px;
        font-weight: 400;
    }

    .table-container {
        overflow-x: auto;
    }

    /* ========== テーブルラッパー ========== */
    .table-wrapper {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    /* ========== データテーブル（Clean & Professional） ========== */
    .data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        color: var(--text-primary);
        font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    .data-table th,
    .data-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-light);
        vertical-align: middle;
    }

    .data-table th {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        text-align: left;
        background: var(--bg-primary);
        white-space: nowrap;
    }

    .data-table th a {
        color: inherit;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .data-table th a:hover {
        color: var(--text-primary);
    }

    .data-table td .cell-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
    }

    .data-table tbody tr {
        transition: background-color 0.15s;
    }

    .data-table tbody tr:hover {
        background: var(--bg-hover);
    }

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* 会社/案件セル */
    .company-cell {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .company-logo {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: var(--bg-hover);
        border: 1px solid var(--border-light);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .cell-stack {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* テーブル内リンク（会社名・案件名用） */
    .table-link-name {
        color: var(--text-primary);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.15s;
    }

    .table-link-name:hover,
    .table-link-name:focus-visible {
        color: var(--primary-blue);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* ステータスチップ */
    .status-chip {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        border: none;
    }

    /* 担当者セル */
    .assignee {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .assignee-avatar {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: var(--bg-hover);
        color: var(--text-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        flex-shrink: 0;
    }

    /* 数値・日付 */
    .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .subtext {
        font-size: 12px;
        color: var(--text-tertiary);
    }

    /* ========== 角丸テーブル ========== */
    .table-rounded {
        border-radius: 6px;
        overflow: hidden;
    }

    .table-rounded .data-table {
        border-radius: 6px;
    }

    /* ========== テーブル内リンク ========== */
    .table-link {
        color: var(--color-primary);
        text-decoration: underline;
        transition: color 0.2s;
    }

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

    /* ========== ステータスバッジ ========== */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
    }

    .badge-success {
        background-color: var(--status-success-bg);
        color: var(--status-success-text);
    }

    .badge-warning {
        background-color: var(--status-warning-bg);
        color: var(--status-warning-text);
    }

    .badge-info {
        background-color: var(--status-info-bg);
        color: var(--status-info-text);
    }

    .badge-neutral {
        background-color: var(--status-neutral-bg);
        color: var(--status-neutral-text);
    }

    .badge-danger {
        background: var(--color-danger-bg);
        color: var(--color-danger-text);
    }

    /* ========== フォーム ========== */
    .form-group {
        margin-bottom: 16px;
    }

    .form-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-sub);
        margin-bottom: 4px;
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        font-size: 13px;
        font-family: inherit;
        background: var(--color-surface);
        color: var(--color-text-main);
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.1);
    }

    /* 入力前グレー効果（オプション） */
    .form-input.placeholder-gray:placeholder-shown {
        background: var(--bg-hover);
    }

    .form-input.placeholder-gray:placeholder-shown:focus {
        background: var(--color-surface);
    }

    /* ========== セクションラベル ========== */
    .section-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--color-text-sub);
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    /* ========== ページヘッダー（CRM/Mailer互換） ========== */
    .page-header-crm,
    .page-header-mailer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 0 16px 0;
        background: transparent;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 16px;
    }

    .page-header-crm .header-left,
    .page-header-mailer .header-left {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .page-header-crm .page-title,
    .page-header-mailer .page-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--color-text-main);
        margin: 0;
        display: none;
        align-items: center;
        gap: 8px;
    }

    .page-header-crm .page-description,
    .page-header-mailer .page-description {
        font-size: 14px;
        color: var(--color-text-sub);
        margin: 0;
        display: none; /* すべての画面でサブタイトルを非表示 */
    }

    .page-header-crm .header-right,
    .page-header-mailer .header-right {
        display: flex;
        align-items: center;
    }

    .page-body {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    /* ========== ビュートグルボタン（ボタン型） ========== */
    .view-toggle-group {
        display: inline-flex;
        gap: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        padding: 4px;
    }

    .view-toggle-btn {
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 500;
        background: transparent;
        border: none;
        border-radius: 4px;
        color: var(--color-text-sub);
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    /* active と hover の背景が同じだと選択状態が分かりづらいので、active は薄青で強調 */
    .view-toggle-btn:hover:not(.active) {
        background: var(--bg-hover);
    }

    .view-toggle-btn.active,
    .view-toggle-btn[aria-pressed="true"],
    .view-toggle-btn[aria-current="true"],
    .view-toggle-btn[aria-current="page"] {
        background: var(--color-primary-soft);
        color: var(--color-primary);
        font-weight: 600;
        box-shadow: var(--shadow-sm);
    }

    .view-toggle-btn:focus-visible {
        outline: 2px solid rgba(0, 121, 107, 0.35);
        outline-offset: 2px;
    }

    /* ========== タブナビゲーション（タブ型） ========== */
    .tab-navigation {
        display: flex;
        gap: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .tab-item {
        padding: 12px 20px;
        font-size: 13px;
        font-weight: 500;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--color-text-sub);
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .tab-item:hover {
        color: var(--color-text-main);
        background: var(--bg-hover);
    }

    .tab-item.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        font-weight: 600;
    }

    /* ========== ページネーション（Jinja2テーブル用） ========== */
    /* .table-rounded 内のみに適用。React Paginationは common.css のスタイルを使用 */
    .table-rounded .pagination,
    .table-rounded .forms-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        border-top: 1px solid var(--color-border);
        background-color: var(--bg-hover);
    }

    .table-rounded .pagination-info {
        font-size: 11px;
        color: var(--color-text-sub);
    }

    .pagination-buttons {
        display: flex;
        gap: 4px;
    }

    .pagination-btn {
        padding: 4px 12px;
        border-radius: 4px;
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        color: var(--color-text-sub);
        font-size: 11px;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
    }

    .pagination-btn:hover:not(:disabled) {
        background-color: var(--bg-hover);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: var(--status-neutral-bg);
        color: var(--status-neutral-text);
    }

    /* ========== ユーティリティ ========== */
    .text-primary {
        color: var(--color-text-main);
    }

    .text-secondary {
        color: var(--color-text-sub);
    }

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

    .flex {
        display: flex;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .gap-8 {
        gap: 8px;
    }

    .gap-12 {
        gap: 12px;
    }

    .gap-16 {
        gap: 16px;
    }

    /* ========== Toast通知 ========== */
    .toast-container {
        position: fixed;
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2000;
        display: flex;
        flex-direction: column;
        gap: 12px;
        pointer-events: none;
        width: min(600px, calc(100vw - 32px));
    }

    .toast {
        --toast-bg: var(--bg-primary);
        --toast-text: var(--text-primary);
        --toast-border: var(--border-light);
        width: 100%;
        padding: 16px 20px;
        border-radius: 8px;
        border: 1px solid var(--toast-border);
        border-left-width: 4px;
        background: var(--toast-bg);
        color: var(--toast-text);
        box-shadow: var(--shadow-lg);
        font-size: 15px;
        font-weight: 500;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    .toast-icon {
        font-size: 18px;
        line-height: 1.2;
        color: currentColor;
        flex-shrink: 0;
    }

    .toast-message {
        flex: 1;
    }

    .toast-success {
        --toast-bg: var(--status-success-bg);
        --toast-text: var(--status-success-text);
        --toast-border: var(--status-success-text);
    }

    .toast-error {
        --toast-bg: var(--status-danger-bg);
        --toast-text: var(--status-danger-text);
        --toast-border: var(--status-danger-text);
    }

    .toast-warning {
        --toast-bg: var(--status-warning-bg);
        --toast-text: var(--status-warning-text);
        --toast-border: var(--status-warning-text);
    }

    .toast-info {
        --toast-bg: var(--status-info-bg);
        --toast-text: var(--status-info-text);
        --toast-border: var(--status-info-text);
    }

    @media (max-width: 640px) {
        .toast-container {
            top: 16px;
            width: calc(100vw - 24px);
        }

        .toast {
            padding: 14px 16px;
            font-size: 14px;
        }
    }

    /* ========== ユーザーモーダル ========== */
    .user-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .user-modal-overlay.show {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding-top: 60px;
        padding-right: 24px;
    }

    .user-modal {
        background: var(--color-surface);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        min-width: 280px;
        max-width: 320px;
        overflow: hidden;
        animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .user-modal-header {
        padding: 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .user-modal-user {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .user-modal-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .user-modal-info {
        flex: 1;
        min-width: 0;
    }

    .user-modal-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-main);
        margin-bottom: 4px;
    }

    .user-modal-email {
        font-size: 12px;
        color: var(--color-text-sub);
    }

    .user-modal-body {
        padding: 8px;
    }

    .user-modal-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 4px;
        text-decoration: none;
        color: var(--color-text-main);
        transition: background-color 0.2s;
        cursor: pointer;
    }

    .user-modal-item:hover {
        background-color: var(--bg-hover);
    }

    .user-modal-item-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .user-modal-item-icon svg {
        width: 18px;
        height: 18px;
    }

    .user-modal-item-text {
        flex: 1;
        font-size: 13px;
    }

    .user-modal-logout {
        color: var(--color-danger-text);
    }

    .user-modal-logout:hover {
        background-color: var(--color-danger-bg);
    }

    /* 設定モーダル（ユーザーモーダルと同じスタイル） */
    .settings-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 100;
        align-items: flex-start;
        justify-content: flex-end;
        padding-top: 60px;
        padding-right: 24px;
    }

    .settings-modal-overlay.show {
        display: flex;
    }

    .settings-modal {
        background: var(--color-surface);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        min-width: 280px;
        max-width: 320px;
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    }

    .settings-modal-overlay.show .settings-modal {
        transform: translateY(0);
        opacity: 1;
    }

    .settings-modal-header {
        padding: 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .settings-modal-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-main);
    }

    .settings-modal-body {
        padding: 8px;
    }

    .settings-modal-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 4px;
        text-decoration: none;
        color: var(--color-text-main);
        transition: background-color 0.2s;
    }

    .settings-modal-item:hover {
        background-color: var(--bg-hover);
    }

    .settings-modal-item-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .settings-modal-item-icon svg {
        width: 18px;
        height: 18px;
    }

    .settings-modal-item-text {
        flex: 1;
        font-size: 13px;
    }

    /* ========== サイドバー折りたたみ機能 ========== */
    .sidebar-footer {
        position: relative;
    }

    .sidebar-toggle {
        position: absolute;
        bottom: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.2s ease;
        z-index: 10;
        color: var(--color-text-sub);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        font-size: 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .sidebar-toggle:hover {
        background: var(--color-border);
        border-color: var(--color-border-muted);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .sidebar-toggle:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .sidebar {
        transition: width 0.3s ease;
    }

    .sidebar.collapsed {
        width: 64px;
    }

    .sidebar.collapsed .sidebar-header {
        justify-content: center;
        padding: 0 8px;
    }

    .sidebar.collapsed .sidebar-app > div:not(.sidebar-app-icon) {
        display: none;
    }

    .sidebar.collapsed .sidebar-user {
        justify-content: center;
        padding: 8px;
    }

    .sidebar.collapsed .sidebar-user-main {
        display: none;
    }

    .sidebar.collapsed .nav-section-title {
        display: none;
    }

    .sidebar.collapsed .nav-item {
        justify-content: center;
        padding: 10px;
    }

    .sidebar.collapsed .nav-item-text {
        display: none;
    }

    .sidebar.collapsed .nav-item-icon {
        margin-right: 0;
    }

    .sidebar.collapsed .nav-item-icon {
        margin-right: 0;
    }

    .sidebar.collapsed .sidebar-footer {
        padding: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sidebar.collapsed .logout-button {
        padding: 8px;
        justify-content: center;
        width: auto;
        min-width: 36px;
    }

    .sidebar.collapsed .logout-button > span:last-child {
        display: none;
    }

    .sidebar.collapsed .sidebar-toggle {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 8px;
    }

    .main-content.sidebar-collapsed {
        margin-left: 64px;
    }
    /* ========== メール詳細モーダル - iframe隔離用スタイル ========== */
    .email-detail-body-text {
        white-space: pre-wrap;
        word-break: break-word;
    }
    .email-detail-body-html-wrapper {
        border: 1px solid var(--color-border);
        border-radius: 4px;
        overflow: hidden;
        max-height: 400px;
    }

    .email-detail-body-html-iframe {
        width: 100%;
        height: 400px;
        border: none;
        display: block;
        background: var(--color-surface);
    }