/*
 * merufy メインスタイルシート
 * Tailwind CSS + Ubie Vitalsデザインシステム統合
 * 12言語対応・RTL対応・レスポンシブデザイン
 * 詳細設計書準拠・ハードコード完全排除
 *
 * Note: Tailwind CSS CLI でビルド（@layer/@apply 対応）
 */

/* Tailwind CSS ディレクティブ - CLI ビルドで処理 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================
   MERUFY カラーパレット（システム共通）
   Starbucks Green Base - オールグリーン系統一
   ============================================ */
:root {
  /* Typography Tokens */
  --font-family-primary: 'Noto Sans', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --font-family-japanese: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-family-korean: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-family-chinese: 'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-family-arabic: 'Noto Sans Arabic', 'Tahoma', sans-serif;

  /* ===== Primary Green (Starbucks Green Base) ===== */
  --green-900: #1e3932;  /* 最も暗い - ヘッダー、フッター背景 */
  --green-800: #00704a;  /* Starbucks公式グリーン - プライマリボタン */
  --green-700: #008248;  /* ホバー状態 */
  --green-600: #00a862;  /* アクティブ/選択状態 */
  --green-500: #00b76a;  /* アクセント */
  --green-400: #4dc591;  /* 中間トーン */
  --green-300: #7ed4a9;  /* サブ要素 */
  --green-200: #b8e6cc;  /* 薄い背景 */
  --green-100: #d4f1e0;  /* 非常に薄い背景 */
  --green-50:  #eaf8f0;  /* 最も薄い - カード背景 */

  /* ===== Neutral (Green-tinted) ===== */
  --neutral-900: #1e3932;  /* テキスト（最も暗い） */
  --neutral-800: #2d4a42;  /* 見出しテキスト */
  --neutral-700: #3c5b52;  /* サブテキスト */
  --neutral-600: #4b6c62;  /* プレースホルダー */
  --neutral-500: #6b8a7f;  /* ボーダー（暗め） */
  --neutral-400: #8aa89d;  /* ボーダー */
  --neutral-300: #b3c9c0;  /* 薄いボーダー */
  --neutral-200: #d6e4de;  /* 背景（薄め） */
  --neutral-100: #e8f0ec;  /* 背景 */
  --neutral-50:  #f4f8f6;  /* 最も薄い背景 */

  /* ===== Semantic Colors ===== */
  --color-primary: var(--neutral-800);
  --color-primary-hover: var(--neutral-700);
  --color-primary-active: var(--neutral-900);
  --color-primary-light: var(--neutral-100);
  --color-secondary: var(--neutral-600);
  --color-secondary-hover: var(--neutral-700);
  --color-success: var(--neutral-800);
  --color-success-light: var(--neutral-100);
  --color-warning: #5c8a4a;
  --color-warning-light: #e8f4d9;
  --color-danger: #8b4a4a;
  --color-danger-light: #f5e8e8;
  --color-info: #3d7a6a;
  --color-info-light: #e0f0ec;
  --color-selected: var(--neutral-700);
  --color-selected-light: var(--neutral-100);
  --color-selected-hover: var(--neutral-800);

  /* ===== Backgrounds ===== */
  --bg-primary: #ffffff;
  --bg-secondary: var(--neutral-50);
  --bg-tertiary: var(--neutral-50);
  --bg-dark: var(--neutral-900);
  --bg-accent: var(--neutral-800);

  /* ===== Text Colors ===== */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-on-dark: #ffffff;
  --text-on-accent: #ffffff;

  /* ===== Border Colors ===== */
  --border-light: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-dark: var(--neutral-400);
  --border-focus: var(--neutral-800);

  /* ===== Gradients ===== */
  --gradient-hero: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 50%, var(--neutral-700) 100%);
  --gradient-hero-mobile: linear-gradient(180deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
  --gradient-accent: linear-gradient(45deg, var(--neutral-800), var(--neutral-600));
  --gradient-light: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
  --gradient-dark: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 50%, var(--neutral-700) 100%);
  --gradient-text: linear-gradient(45deg, var(--neutral-800), var(--neutral-600));
  --gradient-text-dark: linear-gradient(45deg, var(--neutral-400), var(--neutral-300));

  /* ===== Shadows (Green-tinted) ===== */
  --shadow-sm: 0 1px 2px 0 rgba(30, 57, 50, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(30, 57, 50, 0.1), 0 2px 4px -1px rgba(30, 57, 50, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(30, 57, 50, 0.1), 0 4px 6px -2px rgba(30, 57, 50, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(30, 57, 50, 0.1), 0 10px 10px -5px rgba(30, 57, 50, 0.04);
  --shadow-card: 0 4px 12px rgba(30, 57, 50, 0.12);
  --shadow-card-hover: 0 20px 40px rgba(30, 57, 50, 0.15);

  /* ===== Legacy Aliases (互換性維持) ===== */
  --color-white: #ffffff;
  --color-gray-50: var(--neutral-50);
  --color-gray-100: var(--neutral-100);
  --color-gray-200: var(--neutral-200);
  --color-gray-300: var(--neutral-300);
  --color-gray-400: var(--neutral-400);
  --color-gray-500: var(--neutral-500);
  --color-gray-600: var(--neutral-600);
  --color-gray-700: var(--neutral-700);
  --color-gray-800: var(--neutral-800);
  --color-gray-900: var(--neutral-900);

  /* Spacing Tokens */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */

  /* Radius Tokens */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */

  /* Z-Index System */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ===== Dark Mode Overrides (無効化 - サイトは明示的なダークモード切替なし) ===== */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: var(--neutral-900);
    --bg-secondary: var(--neutral-800);
    --bg-tertiary: var(--neutral-700);
    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-200);
    --text-muted: var(--neutral-400);
    --border-light: var(--neutral-700);
    --border-default: var(--neutral-600);
    --gradient-hero: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 50%, var(--neutral-700) 100%);
    --gradient-text: linear-gradient(45deg, var(--neutral-400), var(--neutral-300));
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

/* Base Styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-family-primary);
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: var(--color-gray-50);
  }

  /* Language-specific Font Families */
  html[lang="ja"] body {
    font-family: var(--font-family-japanese);
  }

  html[lang="ko"] body {
    font-family: var(--font-family-korean);
  }

  html[lang="zh-cn"] body {
    font-family: var(--font-family-chinese);
  }

  html[lang="ar"] body,
  html[lang="fa"] body {
    font-family: var(--font-family-arabic);
    direction: rtl;
  }

  /* RTL Layout Support */
  [dir="rtl"] {
    direction: rtl;
    text-align: right;
  }

  [dir="rtl"] .ltr-only {
    direction: ltr;
    text-align: left;
  }

  /* Heading Styles */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
  }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1.25rem; }
  h6 { font-size: 1rem; }

  /* Link Styles */
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
  }

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

  a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Form Elements */
  input, textarea, select {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Focus Management for Accessibility */
  *:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  button:focus,
  [role="button"]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* Component Styles */
@layer components {
  /* Button Components */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md border border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    background-color: var(--neutral-800) !important;
    color: #ffffff !important;
  }
  .btn-primary:hover {
    background-color: var(--neutral-700) !important;
  }
  .btn-primary:focus {
    --tw-ring-color: var(--neutral-600);
  }

  .btn-secondary {
    background-color: var(--neutral-100);
    color: var(--neutral-800);
  }
  .btn-secondary:hover {
    background-color: var(--neutral-200);
  }
  .btn-secondary:focus {
    --tw-ring-color: var(--neutral-400);
  }

  .btn-success {
    background-color: var(--neutral-800);
    color: white;
  }
  .btn-success:hover {
    background-color: var(--neutral-700);
  }
  .btn-success:focus {
    --tw-ring-color: var(--neutral-500);
  }

  .btn-warning {
    background-color: #5c8a4a;
    color: white;
  }
  .btn-warning:hover {
    background-color: #4a7a3a;
  }
  .btn-warning:focus {
    --tw-ring-color: #6b9a5a;
  }

  .btn-danger {
    background-color: #8b4a4a;
    color: white;
  }
  .btn-danger:hover {
    background-color: #7a3a3a;
  }
  .btn-danger:focus {
    --tw-ring-color: #9b5a5a;
  }

  .btn-outline {
    @apply bg-transparent border-2;
    border-color: var(--neutral-800);
    color: var(--neutral-800);
  }
  .btn-outline:hover {
    background-color: var(--neutral-50);
  }

  .btn-sm {
    @apply px-3 py-1 text-xs;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  /* Card Components */
  .card {
    @apply bg-white rounded-lg overflow-hidden;
    border: 1px solid var(--neutral-300);
    box-shadow: var(--shadow-card);
  }

  .card-filled {
    background: var(--neutral-50);
    border-color: var(--neutral-200);
  }

  .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-900);
  }

  .card-header {
    padding: 16px;
    background: var(--neutral-800) !important;
    background-color: var(--neutral-800) !important;
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
  }

  /* card-filledでもヘッダーはテンプレート通りのダーク背景を強制する */
  .card.card-filled > .card-header {
    background: var(--neutral-800) !important;
    background-color: var(--neutral-800) !important;
    color: #ffffff !important;
    border-color: var(--neutral-700) !important;
  }

  .card-header .card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    color: #ffffff !important;
  }

  .card-header a {
    color: inherit;
  }

  .card-body {
    padding: 16px;
    color: var(--text-primary);
  }

  .card-footer {
    @apply px-6 py-4 border-t;
    border-color: var(--neutral-200);
    background: var(--neutral-50);
  }

  /* Form Components */
  .form-group {
    @apply mb-4;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .form-control {
    @apply block w-full px-3 py-2 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none;
    border-color: var(--neutral-300);
    color: var(--text-primary);
  }

  .form-control:focus {
    border-color: var(--neutral-700);
    box-shadow: 0 0 0 2px var(--neutral-100);
  }

  .form-control:invalid {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
  }

  .form-error {
    @apply mt-1 text-sm text-red-600;
  }

  .form-help {
    @apply mt-1 text-sm text-gray-500;
  }

  /* Alert Components */
  .alert {
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-50);
    color: var(--neutral-900);
  }

  .alert-success {
    background: #e8f0ec !important;
    border-color: #d6e4de !important;
    border-left: 4px solid #3d6856 !important;
    color: #1e3932 !important;
  }

  .alert-warning {
    background: #e8f4d9 !important;
    border-color: #d6e4de !important;
    border-left: 4px solid #5c8a4a !important;
    color: #1e3932 !important;
  }

  .alert-danger {
    background: #f5e8e8 !important;
    border-color: #d6e4de !important;
    border-left: 4px solid #8b4a4a !important;
    color: #1e3932 !important;
  }

  .alert-info {
    background: #e0f0ec !important;
    border-color: #d6e4de !important;
    border-left: 4px solid #3d7a6a !important;
    color: #1e3932 !important;
  }

  .alert .alert-icon {
    @apply w-5 h-5 flex-shrink-0;
    color: var(--neutral-700);
  }

  .alert-success .alert-icon { color: var(--color-success); }
  .alert-info .alert-icon { color: var(--color-info); }
  .alert-warning .alert-icon { color: var(--color-warning); }
  .alert-danger .alert-icon { color: var(--color-danger); }

  /* Navigation Components */
  .nav-link {
    @apply block px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
  }

  .nav-link-active {
    @apply text-sm font-medium;
    background: var(--neutral-100);
    color: var(--neutral-800);
  }

  .nav-link:hover {
    @apply bg-gray-100 text-gray-900;
  }

  /* Layout Components */
  .container {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .container-sm {
    @apply w-full max-w-3xl mx-auto px-4 sm:px-6;
  }

  /* Loading Spinner */
  .spinner {
    @apply inline-block w-4 h-4 border-2 rounded-full animate-spin;
    border-color: var(--neutral-300);
    border-top-color: var(--neutral-700);
  }

  .spinner-lg {
    @apply w-8 h-8;
  }

  /* Modal Components */
  .modal-backdrop {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 transition-opacity;
    z-index: var(--z-modal-backdrop);
  }

  .modal {
    @apply fixed inset-0 z-10 overflow-y-auto;
    z-index: var(--z-modal);
  }

  .modal-dialog {
    @apply flex min-h-full items-center justify-center p-4;
  }

  .modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full;
  }

  .modal-header {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .modal-body {
    @apply px-6 py-4;
  }

  .modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex justify-end space-x-2;
  }

  /* Coin Page Components */
  .coin-balance-card {
    @apply bg-gradient-to-r from-yellow-400 to-orange-500 text-white rounded-2xl p-8 shadow-2xl;
  }

  .coin-balance-amount {
    @apply text-6xl font-black mb-2;
    /* Inline effect retained */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .coin-icon {
    @apply inline-block w-8 h-8 bg-yellow-300 rounded-full mr-2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3Cpath d='M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .reward-card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border-2 border-transparent hover:border-yellow-400 transform hover:-translate-y-1;
  }

  .reward-card.featured {
    @apply border-yellow-400 bg-yellow-50;
  }

  .reward-card .reward-image {
    @apply w-full h-48 object-cover;
  }

  .reward-badge {
    @apply absolute top-4 right-4 px-3 py-1 text-xs font-semibold rounded-full;
  }

  .reward-badge.featured {
    @apply bg-yellow-500 text-white;
  }

  .reward-badge.limited {
    @apply bg-red-500 text-white;
  }

  .coin-cost {
    @apply flex items-center text-2xl font-bold text-yellow-600;
  }

  .transaction-item {
    @apply flex items-center justify-between p-4 bg-white rounded-lg border hover:shadow-md transition-shadow duration-200;
  }

  .transaction-icon {
    @apply w-10 h-10 rounded-full flex items-center justify-center mr-4;
  }

  .transaction-icon.earned {
    @apply bg-green-100 text-green-600;
  }

  .transaction-icon.spent {
    @apply bg-red-100 text-red-600;
  }

  .transaction-icon.bonus {
    @apply bg-blue-100 text-blue-600;
  }

  .stats-card {
    @apply bg-white rounded-xl p-6 shadow-lg;
  }

  .stats-number {
    @apply text-3xl font-bold text-gray-900 mb-2;
  }

  .stats-label {
    @apply text-gray-600 text-sm;
  }

  .earning-rule {
    @apply flex items-center justify-between p-4 bg-blue-50 rounded-lg border border-blue-200;
  }

  .filter-tabs {
    @apply flex space-x-1 bg-gray-100 rounded-lg p-1;
  }

  .filter-tab {
    @apply px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 cursor-pointer;
  }

  .filter-tab.active {
    @apply bg-white text-blue-600 shadow-sm;
  }

  .filter-tab:not(.active) {
    @apply text-gray-600 hover:text-gray-900;
  }

  .pagination-controls {
    @apply flex items-center justify-between mt-8;
  }

  .empty-state {
    @apply text-center py-16;
  }

  .empty-state-icon {
    @apply mx-auto w-24 h-24 text-gray-300 mb-4;
  }

  /* Page-scoped modal tweaks to avoid global override */
  #redeem-modal {
    @apply flex items-center justify-center p-4;
  }

  #redeem-modal .modal-content {
    @apply rounded-2xl shadow-2xl max-w-lg w-full max-h-screen overflow-y-auto;
  }

  .loading-spinner {
    @apply animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full;
  }

  /* Admin Users Page Components */
  .user-status-active { @apply bg-green-100 text-green-800; }
/* Admin Dashboard Page Components */
@layer components {
  .stat-card { @apply bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-6 border border-indigo-100; }
  .status-normal { @apply bg-green-500; }
  .status-warning { @apply bg-yellow-500; }
  .status-critical { @apply bg-red-500; }
  .trend-btn.active { @apply bg-indigo-600 text-white; }
}

/* Admin Security Page Components */
@layer components {
  .security-level-low { @apply bg-green-100 text-green-800 border-green-200; }
  .security-level-medium { @apply bg-yellow-100 text-yellow-800 border-yellow-200; }
  .security-level-high { @apply bg-red-100 text-red-800 border-red-200; }
  .security-level-critical { @apply bg-red-200 text-red-900 border-red-300; }

  .threat-indicator { @apply inline-flex items-center justify-center w-3 h-3 rounded-full; }

  .auth-status-success { @apply bg-green-100 text-green-800; }
  .auth-status-failed { @apply bg-red-100 text-red-800; }
  .auth-status-blocked { @apply bg-gray-100 text-gray-800; }

  .security-metric { @apply text-center p-4 border border-gray-200 rounded-lg; }
  .firewall-rule { @apply bg-gray-50 border border-gray-200 rounded-lg p-4 hover:bg-gray-100 transition-colors; }
}

/* Admin Settings Page Components */
@layer components {
  .setting-category-badge { @apply inline-block px-2 py-1 text-xs font-medium rounded-full; }
  .category-mail_processing { @apply bg-blue-100 text-blue-800; }
  .category-classification { @apply bg-green-100 text-green-800; }
  .category-security { @apply bg-red-100 text-red-800; }
  .category-advertising { @apply bg-purple-100 text-purple-800; }
  .category-multilang { @apply bg-yellow-100 text-yellow-800; }
  .category-performance { @apply bg-orange-100 text-orange-800; }
  .category-billing { @apply bg-indigo-100 text-indigo-800; }
  .category-sync { @apply bg-pink-100 text-pink-800; }
  .category-polling { @apply bg-teal-100 text-teal-800; }
  .category-notification { @apply bg-cyan-100 text-cyan-800; }
  .category-user_benefits { @apply bg-lime-100 text-lime-800; }

  .setting-row:hover { @apply bg-gray-50; }
}

/* Admin Announcements Page Components */
@layer components {
  .stat-card { @apply bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-6 border border-indigo-100; }
  .status-active { @apply bg-green-500; }
  .status-inactive { @apply bg-red-500; }
  .status-draft { @apply bg-yellow-500; }

  .priority-high { @apply bg-red-100 text-red-800; }
  .priority-medium { @apply bg-yellow-100 text-yellow-800; }
  .priority-low { @apply bg-green-100 text-green-800; }

  .target-all { @apply bg-blue-100 text-blue-800; }
  .target-free { @apply bg-gray-100 text-gray-800; }
  .target-paid { @apply bg-purple-100 text-purple-800; }
  .target-business { @apply bg-indigo-100 text-indigo-800; }

  .btn-primary-alt { @apply bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition-colors; }
  .btn-secondary-alt { @apply bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-md font-medium transition-colors; }
  .btn-danger-alt { @apply bg-red-600 hover:bg-red-700 text-white px-3 py-1 text-sm rounded-md font-medium transition-colors; }

  .form-input { @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500; }
  .form-textarea { @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500; }
  .form-select { @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500; }

  .modal-content { @apply bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto; }
}

/* Admin Devices Page Components */
@layer components {
  .device-status-trusted { @apply bg-green-100 text-green-800 border-green-200; }
  .device-status-pending { @apply bg-yellow-100 text-yellow-800 border-yellow-200; }
  .device-status-suspicious { @apply bg-orange-100 text-orange-800 border-orange-200; }
  .device-status-blocked { @apply bg-red-100 text-red-800 border-red-200; }
  .device-status-expired { @apply bg-gray-100 text-gray-800 border-gray-200; }

  .block-attempts-low { @apply bg-green-50 text-green-700; }
  .block-attempts-medium { @apply bg-yellow-50 text-yellow-700; }
  .block-attempts-high { @apply bg-red-50 text-red-700; }

  .device-metric { @apply text-center p-4 border border-gray-200 rounded-lg; }
  .device-row { @apply hover:bg-gray-50 transition-colors border-b border-gray-200; }
  .action-button { @apply px-3 py-1 text-sm rounded-md border transition-colors; }
  .unblock-button { @apply bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100; }
  .reset-button { @apply bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100; }
}

/* Admin Server Monitoring Page Components */
@layer components {
  .server-status-normal { @apply bg-green-100 text-green-800 border-green-200; }
  .server-status-warning { @apply bg-yellow-100 text-yellow-800 border-yellow-200; }
  .server-status-critical { @apply bg-red-100 text-red-800 border-red-200; }
  .server-status-offline { @apply bg-gray-100 text-gray-800 border-gray-200; }

  .metric-good { @apply text-green-600; }
  .metric-warning { @apply text-yellow-600; }
  .metric-critical { @apply text-red-600; }

  .server-card { @apply border-l-4 bg-white rounded-r-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-200; }
  .progress-bar { @apply w-full bg-gray-200 rounded-full h-2.5; }
  .progress-fill { @apply h-2.5 rounded-full transition-all duration-300; }
}

/* Admin System Logs Page Components */
@layer components {
  .log-level-info { @apply bg-blue-100 text-blue-800; }
  .log-level-warning { @apply bg-yellow-100 text-yellow-800; }
  .log-level-error { @apply bg-red-100 text-red-800; }
  .log-level-debug { @apply bg-gray-100 text-gray-800; }
  .log-level-critical { @apply bg-red-200 text-red-900; }

  .log-category-auth { @apply bg-purple-100 text-purple-800; }
  .log-category-system { @apply bg-green-100 text-green-800; }
  .log-category-user { @apply bg-blue-100 text-blue-800; }
  .log-category-security { @apply bg-red-100 text-red-800; }
  .log-category-email { @apply bg-indigo-100 text-indigo-800; }

  .log-entry { @apply border-l-4 pl-4 py-3 mb-2 bg-gray-50 rounded-r-lg; }
  .log-entry.info { @apply border-blue-400; }
  .log-entry.warning { @apply border-yellow-400; }
  .log-entry.error { @apply border-red-400; }
  .log-entry.debug { @apply border-gray-400; }
  .log-entry.critical { @apply border-red-600; }
}
  .user-status-inactive { @apply bg-gray-100 text-gray-800; }
  .user-status-suspended { @apply bg-red-100 text-red-800; }

  .plan-free { @apply bg-blue-100 text-blue-800; }
  .plan-paid { @apply bg-green-100 text-green-800; }

  .action-btn { @apply px-3 py-1 text-sm rounded-lg font-medium transition-colors; }
  .action-btn-primary { @apply bg-blue-600 text-white hover:bg-blue-700; }
  .action-btn-danger { @apply bg-red-600 text-white hover:bg-red-700; }
  .action-btn-warning { @apply bg-yellow-600 text-white hover:bg-yellow-700; }
}

/* Utility Classes */
@layer utilities {
  /* RTL Support Utilities */
  .rtl-space-x-reverse > * + * {
    --tw-space-x-reverse: 1;
  }

  .rtl-divide-x-reverse > * + * {
    --tw-divide-x-reverse: 1;
  }

  /* Text Direction Utilities */
  .text-direction-ltr {
    direction: ltr;
    text-align: left;
  }

  .text-direction-rtl {
    direction: rtl;
    text-align: right;
  }

  /* Language-specific Utilities */
  .lang-ja {
    font-family: var(--font-family-japanese);
  }

  .lang-ko {
    font-family: var(--font-family-korean);
  }

  .lang-zh {
    font-family: var(--font-family-chinese);
  }

  .lang-ar {
    font-family: var(--font-family-arabic);
  }

  /* Accessibility Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .focus-visible:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* High Contrast Mode Support */
  @media (prefers-contrast: high) {
    .card {
      @apply border-2 border-gray-800;
    }

    .btn {
      @apply border-2;
    }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Dark Mode Support (Future Enhancement - 無効化) */
  /*
  @media (prefers-color-scheme: dark) {
    :root {
      --color-gray-50: #1F2937;
      --color-gray-800: #F9FAFB;
    }
  }
  */
}

/* Print Styles */
@media print {
  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* Admin Analytics Page Components & Common Dashboard Components */
@layer components {
  /* Metric Cards - 統一デザイン */
  .metric-card {
    background: #f4f8f6 !important;
    border: 1px solid #d6e4de !important;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(30, 57, 50, 0.1);
    transition: all 0.2s;
    color: #1e3932;
  }

  .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 57, 50, 0.15);
  }

  .metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e3932;
    line-height: 1.2;
  }

  .metric-label {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    color: #4b6c62;
  }

  .metric-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f0ec;
    color: #2d4a42;
    border: 1px solid #d6e4de;
    box-shadow: 0 2px 4px rgba(30, 57, 50, 0.08);
  }

  .metric-icon.is-strong {
    background: #d6e4de;
    color: #1e3932;
    border-color: #b3c9c0;
  }

  .metric-icon.is-soft {
    background: #f4f8f6;
    color: #3c5b52;
    border-color: #e8f0ec;
  }

  /* Quick Actions - 統一デザイン */
  .quick-action {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    background: #e8f0ec;
    color: #2d4a42;
    border: 1px solid #d6e4de;
    box-shadow: 0 2px 4px rgba(30, 57, 50, 0.08);
  }

  .quick-action svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .quick-action:hover {
    transform: translateY(-2px);
    background: #d6e4de;
    color: #1e3932;
    box-shadow: 0 4px 8px rgba(30, 57, 50, 0.12);
  }

  /* Progress Bar - 統一デザイン */
  .progress-bar {
    position: relative;
    height: 8px;
    background: #e8f0ec;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #d6e4de;
  }

  .progress-segment {
    width: 0;
    height: 100%;
    border-radius: 100px;
    transition: width 0.3s ease;
  }

  .progress-segment[data-progress-key="classified"] {
    background: #3c5b52;
  }

  .progress-segment[data-progress-key="archive"] {
    background: #6b8a7f;
  }

  .progress-segment[data-progress-key="spam"] {
    background: #8aa89d;
  }

  .progress-segment[data-progress-key="unclassified"] {
    background: #b3c9c0;
  }

  /* Status Indicators - 統一デザイン */
  .status-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
  }

  .status-indicator.online {
    background: #3c5b52;
  }

  .status-indicator.offline {
    background: #8aa89d;
  }

  .status-indicator.syncing {
    background: #6b8a7f;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Status Cards - 統一デザイン */
  .status-card {
    display: flex;
    align-items: center;
    justify-between;
    padding: 1rem;
    border-radius: 8px;
    background: #f4f8f6 !important;
    border: 1px solid #d6e4de !important;
    box-shadow: 0 1px 3px rgba(30, 57, 50, 0.08);
    transition: all 0.2s;
  }

  .status-card:hover {
    box-shadow: 0 2px 6px rgba(30, 57, 50, 0.12);
  }

  .status-card.accent {
    background: #e8f0ec !important;
    border-color: #b3c9c0 !important;
  }

  .status-card.subtle {
    background: #f4f8f6 !important;
    border-color: #e8f0ec !important;
  }

  /* Status Chips - 統一デザイン */
  .status-chip {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background: #2d4a42;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(30, 57, 50, 0.1);
  }

  .status-chip.accent {
    background: #3c5b52;
  }

  .status-chip.subtle {
    background: #6b8a7f;
    color: #ffffff;
  }

  /* Chart & Analytics Components */
  .chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 0;
    color: #4b6c62;
  }

  .chart-container { @apply relative h-64 w-full; }
  .chart-container-lg { @apply relative h-96 w-full; }
  .stat-item { @apply flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0; }

  .trend-up { @apply text-green-600; }
  .trend-down { @apply text-red-600; }
  .trend-neutral { @apply text-gray-600; }

  .performance-good { @apply bg-green-100 text-green-800; }
  .performance-warning { @apply bg-yellow-100 text-yellow-800; }
  .performance-critical { @apply bg-red-100 text-red-800; }

  .filter-tabs { @apply border-b border-gray-200; }
  .filter-tab { @apply inline-block px-4 py-2 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer; }
  .filter-tab.active { @apply border-blue-500 text-blue-600; }

  .data-table { @apply min-w-full divide-y divide-gray-200; }
  .data-table th { @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider; }
  .data-table td { @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900; }
}

/* Animation Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Custom Animation Classes */
.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-slideInUp {
  animation: slideInUp 0.3s ease-out;
}

.animate-slideInDown {
  animation: slideInDown 0.3s ease-out;
}

/* Mobile-specific Styles */
@media (max-width: 768px) {
  .container {
    @apply px-3;
  }

  .modal-content {
    @apply mx-4 max-w-none;
  }

  .card {
    @apply rounded-none border-x-0;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
}

/* Mobile Layout Components - Unified Design System */
@media (max-width: 768px) {
  /* Mobile CSS Variables */
  :root {
    --mobile-header-height: 56px;
    --mobile-bottom-nav-height: 60px;
    --mobile-safe-area-top: env(safe-area-inset-top);
    --mobile-safe-area-bottom: env(safe-area-inset-bottom);
  }

  /* Mobile Container */
  .mobile-container {
    max-width: 100vw;
    padding: 0 16px;
    margin: 0 auto;
  }

  /* Mobile Header */
  .mobile-header {
    height: var(--mobile-header-height);
    padding-top: var(--mobile-safe-area-top);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    box-shadow: var(--shadow-md);
  }

  /* Mobile Content Area */
  .mobile-content {
    margin-top: calc(var(--mobile-header-height) + var(--mobile-safe-area-top));
    margin-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
    min-height: calc(100vh - var(--mobile-header-height) - var(--mobile-bottom-nav-height) - var(--mobile-safe-area-top) - var(--mobile-safe-area-bottom));
  }

  /* Mobile Bottom Navigation */
  .mobile-bottom-nav {
    height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
    padding-bottom: var(--mobile-safe-area-bottom);
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
  }
}

/* Tablet-specific Styles */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    @apply px-4;
  }
}

/* Desktop-specific Styles */
@media (min-width: 1024px) {
  .container {
    @apply px-6;
  }
}

/* ============================================================================
 * RTL言語完全対応（アラビア語・ペルシア語）
 * 設計書準拠12言語のうちar、faに対応
 * ============================================================================ */

/* RTL Base Layout */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

/* RTL Layout Components */
[dir="rtl"] .modal-footer {
  @apply flex justify-start space-x-reverse space-x-2;
}

[dir="rtl"] .breadcrumb ol {
  @apply flex-row-reverse;
}

[dir="rtl"] .nav-link {
  @apply text-right;
}

/* RTL Form Components */
[dir="rtl"] .form-control {
  @apply text-right;
}

[dir="rtl"] .form-label {
  @apply text-right;
}

[dir="rtl"] .checkbox-wrapper,
[dir="rtl"] .radio-wrapper {
  @apply flex-row-reverse;
}

[dir="rtl"] .checkbox-wrapper input,
[dir="rtl"] .radio-wrapper input {
  @apply ml-2 mr-0;
}

/* RTL Table Components */
[dir="rtl"] table {
  direction: rtl;
}

[dir="rtl"] th {
  @apply text-right;
}

[dir="rtl"] td {
  @apply text-right;
}

[dir="rtl"] .table-actions {
  @apply text-left;
}

/* RTL Navigation & Menu */
[dir="rtl"] .dropdown-menu {
  @apply left-auto right-0;
}

[dir="rtl"] .dropdown-menu-left {
  @apply left-0 right-auto;
}

[dir="rtl"] .menu-icon {
  @apply ml-0 mr-2;
}

[dir="rtl"] .menu-text {
  @apply text-right;
}

/* RTL Card & Content Layout */
[dir="rtl"] .card-actions {
  @apply justify-start flex-row-reverse;
}

[dir="rtl"] .icon-text {
  @apply flex-row-reverse;
}

[dir="rtl"] .icon-text .icon {
  @apply ml-2 mr-0;
}

/* RTL Pagination */
[dir="rtl"] .pagination {
  @apply flex-row-reverse;
}

[dir="rtl"] .pagination-prev {
  @apply order-last;
}

[dir="rtl"] .pagination-next {
  @apply order-first;
}

/* RTL Alert positioning */
[dir="rtl"] .alert .alert-icon {
  @apply ml-2 mr-0;
}

[dir="rtl"] .alert .close-button {
  @apply left-4 right-auto;
}

/* RTL Badge positioning */
[dir="rtl"] .badge {
  @apply left-auto right-0;
}

/* RTL Float utilities */
[dir="rtl"] .float-left {
  float: right;
}

[dir="rtl"] .float-right {
  float: left;
}

/* RTL Margin & Padding adjustments - using direct CSS to avoid circular dependency */
[dir="rtl"] .ml-2 {
  margin-left: 0;
  margin-right: 0.5rem;
}

[dir="rtl"] .mr-2 {
  margin-right: 0;
  margin-left: 0.5rem;
}

[dir="rtl"] .ml-4 {
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .mr-4 {
  margin-right: 0;
  margin-left: 1rem;
}

[dir="rtl"] .pl-4 {
  padding-left: 0;
  padding-right: 1rem;
}

[dir="rtl"] .pr-4 {
  padding-right: 0;
  padding-left: 1rem;
}

/* RTL Border radius adjustments - using direct CSS to avoid circular dependency */
[dir="rtl"] .rounded-l-md {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

[dir="rtl"] .rounded-r-md {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

/* RTL言語固有フォント最適化 */
html[lang="ar"] {
  font-feature-settings: "liga" 1, "kern" 1, "mark" 1, "mkmk" 1;
  text-rendering: optimizeLegibility;
}

html[lang="fa"] {
  font-feature-settings: "liga" 1, "kern" 1, "mark" 1, "mkmk" 1;
  text-rendering: optimizeLegibility;
}

/* RTLアクセシビリティ強化 */
[dir="rtl"] .skip-link {
  @apply left-auto right-4;
}

[dir="rtl"] [role="main"] {
  text-align: right;
}

[dir="rtl"] .sr-only {
  /* RTLスクリーンリーダー対応維持 */
  direction: rtl;
}

/* RTL Media Queries */
@media (min-width: 768px) {
  [dir="rtl"] .md\:text-left {
    text-align: right;
  }

  [dir="rtl"] .md\:text-right {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  [dir="rtl"] .lg\:text-left {
    text-align: right;
  }

  [dir="rtl"] .lg\:text-right {
    text-align: left;
  }

  [dir="rtl"] .desktop-sidebar {
    @apply left-auto right-0;
  }
}

/* RTL Keyboard navigation */
[dir="rtl"].keyboard-user .btn:focus,
[dir="rtl"].keyboard-user .nav-link:focus,
[dir="rtl"].keyboard-user .form-control:focus {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

/* RTL Tooltip & Popover positioning */
[dir="rtl"] .tooltip-left {
  @apply left-auto right-full;
}

[dir="rtl"] .tooltip-right {
  @apply left-full right-auto;
}

[dir="rtl"] .tooltip::before {
  transform: scaleX(-1);
}

/* RTL Animation adjustments */
[dir="rtl"] .animate-slideInLeft {
  animation-name: slideInRight;
}

[dir="rtl"] .animate-slideInRight {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* RTL Email List specific */
[dir="rtl"] .email-list-item {
  @apply text-right;
}

[dir="rtl"] .email-sender {
  @apply text-right font-semibold;
}

[dir="rtl"] .email-subject {
  @apply text-right;
}

[dir="rtl"] .email-timestamp {
  @apply text-left;
}

[dir="rtl"] .email-actions {
  @apply justify-start flex-row-reverse;
}

/* ============================================
   Landing Page Feature Cards
   オールグリーン系統一スタイル
   ============================================ */
.feature-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--neutral-300);
  transform: translateY(-2px);
}

/* Feature card icon container - グリーン系のみ */
.feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  background-color: var(--neutral-100);
}

.feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--neutral-600);
}

/* Feature card variants - すべてグリーン系 */
.feature-icon--primary {
  background-color: var(--neutral-100);
}
.feature-icon--primary svg {
  color: var(--neutral-600);
}

.feature-icon--secondary {
  background-color: var(--neutral-50);
}
.feature-icon--secondary svg {
  color: var(--neutral-700);
}

.feature-icon--accent {
  background-color: var(--neutral-200);
}
.feature-icon--accent svg {
  color: var(--neutral-800);
}

.feature-icon--dark {
  background-color: var(--neutral-900);
}
.feature-icon--dark svg {
  color: var(--neutral-100);
}

/* Feature card title */
.feature-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: var(--spacing-sm);
}

/* Feature card description */
.feature-description {
  font-size: 0.875rem;
  color: var(--neutral-600);
  line-height: 1.6;
}

/* CTA Buttons - グリーン系統一 */
.btn-cta-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--neutral-800), var(--neutral-700));
  color: #ffffff;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.btn-cta-primary:hover {
  background: linear-gradient(135deg, var(--neutral-700), var(--neutral-600));
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn-cta-secondary {
  display: inline-block;
  background: #ffffff;
  color: var(--neutral-800);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--neutral-300);
  transition: all 0.3s ease;
}

.btn-cta-secondary:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-400);
}

/* Demo badge / status indicators - グリーン系のみ */
.badge-demo {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--neutral-100);
  color: var(--neutral-800);
}

.badge-success {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
}

.badge-info {
  background-color: var(--neutral-50);
  color: var(--neutral-700);
}

/* Mock email demo styles */
.mock-email-demo {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mock-email-header {
  background: var(--neutral-900);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  align-items: center;
}

.mock-email-header span {
  color: var(--neutral-100);
}

.mock-email-content {
  padding: var(--spacing-md);
}

/* ============================================
   Alert / Notification Styles
   オールグリーン系統一 - エラー・警告もグリーン系
   ============================================ */

/* Alert tone variations - パレット準拠 */
.alert-error {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--neutral-700);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  color: var(--neutral-900);
}

.alert-error-icon { color: var(--neutral-700); }

.alert-error-text {
  color: var(--neutral-900);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Warning alerts - パレット準拠 */
.alert-warning {
  background: var(--color-warning-light);
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  color: var(--neutral-900);
}

.alert-warning-icon { color: var(--color-warning); }

.alert-warning-text {
  color: var(--neutral-900);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Info alerts - パレット準拠 */
.alert-info {
  background: var(--color-info-light);
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  color: var(--neutral-900);
}

.alert-info-icon { color: var(--color-info); }

.alert-info-text {
  color: var(--neutral-900);
  font-size: 0.875rem;
}

/* Success alerts - パレット準拠 */
.alert-success {
  background: var(--color-success-light);
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  color: var(--neutral-900);
}

.alert-success-icon { color: var(--color-success); }

.alert-success-text {
  color: var(--neutral-900);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Danger/Delete buttons - グリーン系暗め */
.btn-danger {
  color: var(--neutral-900);
  border-color: var(--neutral-500);
  background: transparent;
}

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

/* Status indicators - グリーン系のみ */
.status-active {
  background-color: var(--neutral-500);
}

.status-inactive {
  background-color: var(--neutral-300);
}

.status-error {
  background-color: var(--neutral-700);
}

/* Required field indicator */
.required-indicator {
  color: var(--neutral-700);
}

/* Badge variants - すべてグリーン系 */
.badge-error {
  background-color: var(--neutral-200);
  color: var(--neutral-900);
}

.badge-warning {
  background-color: var(--neutral-100);
  color: var(--neutral-800);
}

/* Floating elements decorations */
.floating-element {
  color: var(--neutral-200);
}