/* ============================================================
   Google Cloud IAM 风格 UI
   ============================================================ */

:root {
  --gcp-blue: #1a73e8;
  --gcp-blue-hover: #1557b0;
  --gcp-blue-light: #e8f0fe;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa;
  --gcp-gray-100: #f1f3f4;
  --gcp-gray-200: #e8eaed;
  --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6;
  --gcp-gray-500: #9aa0a6;
  --gcp-gray-600: #80868b;
  --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043;
  --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
  --gcp-radius: 8px;
  --gcp-radius-sm: 4px;
  --sidebar-width: 240px;
  --topbar-height: 56px;
  --transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* ===== 主题：深色模式 ===== */
[data-theme="dark"] {
  --gcp-blue: #8ab4f8;
  --gcp-blue-hover: #aecbfa;
  --gcp-blue-light: #1e3a5f;
  --gcp-red: #f28b82;
  --gcp-red-light: #3c1f1e;
  --gcp-green: #81c995;
  --gcp-green-light: #1e3524;
  --gcp-yellow: #fdd663;
  --gcp-yellow-light: #3a2e1a;
  --gcp-gray-50: #1f1f1f;
  --gcp-gray-100: #292929;
  --gcp-gray-200: #3c3c3c;
  --gcp-gray-300: #5e5e5e;
  --gcp-gray-400: #808080;
  --gcp-gray-500: #9e9e9e;
  --gcp-gray-600: #bdbdbd;
  --gcp-gray-700: #d4d4d4;
  --gcp-gray-800: #e8e8e8;
  --gcp-gray-900: #f5f5f5;
  --gcp-white: #1f1f1f;
  --gcp-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.4);
  --gcp-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.4);
  --gcp-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 4px 12px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .gcp-topbar,
[data-theme="dark"] .gcp-sidebar,
[data-theme="dark"] .gcp-card,
[data-theme="dark"] .gcp-input,
[data-theme="dark"] .gcp-table th,
[data-theme="dark"] .gcp-table td,
[data-theme="dark"] .batch-toolbar,
[data-theme="dark"] .pagination-bar,
[data-theme="dark"] .info-card,
[data-theme="dark"] .sidepanel { background: var(--gcp-white); }
[data-theme="dark"] .gcp-input { color: var(--gcp-gray-900); }
[data-theme="dark"] .gcp-table tbody tr:hover { background: var(--gcp-gray-100); }
[data-theme="dark"] .gcp-table tbody tr.row-disabled td { opacity: .4; }
[data-theme="dark"] .nav-item:hover { background: var(--gcp-gray-100); }
[data-theme="dark"] .nav-item.active { background: var(--gcp-blue-light); }

/* ===== 主题：海洋 ===== */
[data-theme="ocean"] {
  --gcp-blue: #00897b;
  --gcp-blue-hover: #00695c;
  --gcp-blue-light: #e0f2f1;
  --gcp-red: #e53935;
  --gcp-red-light: #ffebee;
  --gcp-green: #43a047;
  --gcp-green-light: #e8f5e9;
  --gcp-yellow: #ffb300;
  --gcp-yellow-light: #fff8e1;
  --gcp-gray-50: #f5f7fa;
  --gcp-gray-100: #eceff1;
  --gcp-gray-200: #cfd8dc;
  --gcp-gray-300: #b0bec5;
  --gcp-gray-400: #90a4ae;
  --gcp-gray-500: #78909c;
  --gcp-gray-600: #607d8b;
  --gcp-gray-700: #546e7a;
  --gcp-gray-800: #455a64;
  --gcp-gray-900: #263238;
}
[data-theme="ocean"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="ocean"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="ocean"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：日落 ===== */
[data-theme="sunset"] {
  --gcp-blue: #e65100;
  --gcp-blue-hover: #bf360c;
  --gcp-blue-light: #fbe9e7;
  --gcp-red: #c62828;
  --gcp-red-light: #ffebee;
  --gcp-green: #2e7d32;
  --gcp-green-light: #e8f5e9;
  --gcp-yellow: #f9a825;
  --gcp-yellow-light: #fff8e1;
  --gcp-gray-50: #fafafa;
  --gcp-gray-100: #f5f5f5;
  --gcp-gray-200: #eeeeee;
  --gcp-gray-300: #e0e0e0;
  --gcp-gray-400: #bdbdbd;
  --gcp-gray-500: #9e9e9e;
  --gcp-gray-600: #757575;
  --gcp-gray-700: #616161;
  --gcp-gray-800: #424242;
  --gcp-gray-900: #212121;
}
[data-theme="sunset"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="sunset"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="sunset"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：森林 ===== */
[data-theme="forest"] {
  --gcp-blue: #2e7d32;
  --gcp-blue-hover: #1b5e20;
  --gcp-blue-light: #e8f5e9;
  --gcp-red: #c62828;
  --gcp-red-light: #ffebee;
  --gcp-green: #1b5e20;
  --gcp-green-light: #e8f5e9;
  --gcp-yellow: #f9a825;
  --gcp-yellow-light: #fff8e1;
  --gcp-gray-50: #f1f8e9;
  --gcp-gray-100: #dcedc8;
  --gcp-gray-200: #c5e1a5;
  --gcp-gray-300: #aed581;
  --gcp-gray-400: #8bc34a;
  --gcp-gray-500: #689f38;
  --gcp-gray-600: #558b2f;
  --gcp-gray-700: #33691e;
  --gcp-gray-800: #1b3a0e;
  --gcp-gray-900: #0d1f05;
}
[data-theme="forest"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="forest"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="forest"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Windows 11 ===== */
[data-theme="windows11"] {
  --gcp-blue: #0078D4;
  --gcp-blue-hover: #106EBE;
  --gcp-blue-light: #E5F0FC;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="windows11"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="windows11"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="windows11"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：macOS ===== */
[data-theme="macos"] {
  --gcp-blue: #007AFF;
  --gcp-blue-hover: #0066D6;
  --gcp-blue-light: #E8F0FE;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="macos"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="macos"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="macos"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Ubuntu Linux ===== */
[data-theme="ubuntu"] {
  --gcp-blue: #E95420;
  --gcp-blue-hover: #C7441A;
  --gcp-blue-light: #FDE8E0;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="ubuntu"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="ubuntu"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="ubuntu"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Office 365 ===== */
[data-theme="office365"] {
  --gcp-blue: #D83B01;
  --gcp-blue-hover: #B82E00;
  --gcp-blue-light: #FDF0E6;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="office365"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="office365"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="office365"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Word ===== */
[data-theme="word"] {
  --gcp-blue: #2B579A;
  --gcp-blue-hover: #1A3C6B;
  --gcp-blue-light: #E8EEF5;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="word"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="word"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="word"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Excel ===== */
[data-theme="excel"] {
  --gcp-blue: #217346;
  --gcp-blue-hover: #165A33;
  --gcp-blue-light: #E8F0E8;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="excel"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="excel"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="excel"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：PowerPoint ===== */
[data-theme="powerpoint"] {
  --gcp-blue: #D24726;
  --gcp-blue-hover: #B33A1E;
  --gcp-blue-light: #FBE9E5;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="powerpoint"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="powerpoint"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="powerpoint"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Visio ===== */
[data-theme="visio"] {
  --gcp-blue: #3955A3;
  --gcp-blue-hover: #2D437D;
  --gcp-blue-light: #EDEFF7;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="visio"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="visio"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="visio"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：OneNote ===== */
[data-theme="onenote"] {
  --gcp-blue: #7719AA;
  --gcp-blue-hover: #5C1387;
  --gcp-blue-light: #F0E6F5;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="onenote"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="onenote"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="onenote"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Teams ===== */
[data-theme="teams"] {
  --gcp-blue: #6264A7;
  --gcp-blue-hover: #4F4F8B;
  --gcp-blue-light: #EDEBF6;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="teams"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="teams"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="teams"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：微信 ===== */
[data-theme="wechat"] {
  --gcp-blue: #07C160;
  --gcp-blue-hover: #06AD56;
  --gcp-blue-light: #E4F9EA;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="wechat"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="wechat"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="wechat"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：企业微信 ===== */
[data-theme="wecom"] {
  --gcp-blue: #2D9B4E;
  --gcp-blue-hover: #1E7A3A;
  --gcp-blue-light: #E8F5EC;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="wecom"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="wecom"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="wecom"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：钉钉 ===== */
[data-theme="dingtalk"] {
  --gcp-blue: #0089FF;
  --gcp-blue-hover: #006FCC;
  --gcp-blue-light: #E5F4FF;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="dingtalk"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="dingtalk"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="dingtalk"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：飞书 ===== */
[data-theme="feishu"] {
  --gcp-blue: #3370FF;
  --gcp-blue-hover: #2856D6;
  --gcp-blue-light: #E8EFFF;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="feishu"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="feishu"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="feishu"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：OpenClaw ===== */
[data-theme="openclaw"] {
  --gcp-blue: #7C4DFF;
  --gcp-blue-hover: #651FFF;
  --gcp-blue-light: #EDE7F6;
  --gcp-red: #f28b82;
  --gcp-red-light: #3c1f1e;
  --gcp-green: #81c995;
  --gcp-green-light: #1e3524;
  --gcp-yellow: #fdd663;
  --gcp-yellow-light: #3a2e1a;
  --gcp-gray-50: #1f1f1f; --gcp-gray-100: #292929; --gcp-gray-200: #3c3c3c; --gcp-gray-300: #5e5e5e;
  --gcp-gray-400: #808080; --gcp-gray-500: #9e9e9e; --gcp-gray-600: #bdbdbd; --gcp-gray-700: #d4d4d4;
  --gcp-gray-800: #e8e8e8; --gcp-gray-900: #f5f5f5;
  --gcp-white: #1f1f1f;
  --gcp-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.4);
  --gcp-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.4);
  --gcp-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 4px 12px 4px rgba(0,0,0,.4);
}
[data-theme="openclaw"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="openclaw"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="openclaw"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：ChatGPT ===== */
[data-theme="chatgpt"] {
  --gcp-blue: #10A37F;
  --gcp-blue-hover: #0D8C6D;
  --gcp-blue-light: #E6F7F2;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="chatgpt"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="chatgpt"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="chatgpt"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Claude ===== */
[data-theme="claude"] {
  --gcp-blue: #D97706;
  --gcp-blue-hover: #B85C05;
  --gcp-blue-light: #FEF3C7;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="claude"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="claude"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="claude"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：YouTube ===== */
[data-theme="youtube"] {
  --gcp-blue: #FF0000;
  --gcp-blue-hover: #CC0000;
  --gcp-blue-light: #FFE5E5;
  --gcp-red: #f28b82;
  --gcp-red-light: #3c1f1e;
  --gcp-green: #81c995;
  --gcp-green-light: #1e3524;
  --gcp-yellow: #fdd663;
  --gcp-yellow-light: #3a2e1a;
  --gcp-gray-50: #1f1f1f; --gcp-gray-100: #292929; --gcp-gray-200: #3c3c3c; --gcp-gray-300: #5e5e5e;
  --gcp-gray-400: #808080; --gcp-gray-500: #9e9e9e; --gcp-gray-600: #bdbdbd; --gcp-gray-700: #d4d4d4;
  --gcp-gray-800: #e8e8e8; --gcp-gray-900: #f5f5f5;
  --gcp-white: #1f1f1f;
  --gcp-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.4);
  --gcp-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.4);
  --gcp-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 4px 12px 4px rgba(0,0,0,.4);
}
[data-theme="youtube"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="youtube"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="youtube"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Facebook ===== */
[data-theme="facebook"] {
  --gcp-blue: #1877F2;
  --gcp-blue-hover: #166FE5;
  --gcp-blue-light: #E7F3FF;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="facebook"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="facebook"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="facebook"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Twitter ===== */
[data-theme="twitter"] {
  --gcp-blue: #000000;
  --gcp-blue-hover: #333333;
  --gcp-blue-light: #F5F5F5;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="twitter"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="twitter"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="twitter"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Instagram ===== */
[data-theme="instagram"] {
  --gcp-blue: #E4405F;
  --gcp-blue-hover: #C13584;
  --gcp-blue-light: #FDE8EF;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="instagram"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="instagram"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="instagram"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：LinkedIn ===== */
[data-theme="linkedin"] {
  --gcp-blue: #0A66C2;
  --gcp-blue-hover: #004182;
  --gcp-blue-light: #E8F0FE;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="linkedin"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="linkedin"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="linkedin"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：GitHub ===== */
[data-theme="github"] {
  --gcp-blue: #24292E;
  --gcp-blue-hover: #1B1F23;
  --gcp-blue-light: #F0F2F5;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="github"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="github"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="github"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：TikTok ===== */
[data-theme="tiktok"] {
  --gcp-blue: #FE2C55;
  --gcp-blue-hover: #D91A3E;
  --gcp-blue-light: #FCE8ED;
  --gcp-red: #f28b82;
  --gcp-red-light: #3c1f1e;
  --gcp-green: #81c995;
  --gcp-green-light: #1e3524;
  --gcp-yellow: #fdd663;
  --gcp-yellow-light: #3a2e1a;
  --gcp-gray-50: #1f1f1f; --gcp-gray-100: #292929; --gcp-gray-200: #3c3c3c; --gcp-gray-300: #5e5e5e;
  --gcp-gray-400: #808080; --gcp-gray-500: #9e9e9e; --gcp-gray-600: #bdbdbd; --gcp-gray-700: #d4d4d4;
  --gcp-gray-800: #e8e8e8; --gcp-gray-900: #f5f5f5;
  --gcp-white: #1f1f1f;
  --gcp-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.4);
  --gcp-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.4);
  --gcp-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 4px 12px 4px rgba(0,0,0,.4);
}
[data-theme="tiktok"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="tiktok"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="tiktok"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：Gmail ===== */
[data-theme="gmail"] {
  --gcp-blue: #D93025;
  --gcp-blue-hover: #B3261E;
  --gcp-blue-light: #FCE8E6;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="gmail"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="gmail"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="gmail"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：SpaceX ===== */
[data-theme="spacex"] {
  --gcp-blue: #005288;
  --gcp-blue-hover: #003B66;
  --gcp-blue-light: #E5F0F8;
  --gcp-red: #f28b82;
  --gcp-red-light: #3c1f1e;
  --gcp-green: #81c995;
  --gcp-green-light: #1e3524;
  --gcp-yellow: #fdd663;
  --gcp-yellow-light: #3a2e1a;
  --gcp-gray-50: #1f1f1f; --gcp-gray-100: #292929; --gcp-gray-200: #3c3c3c; --gcp-gray-300: #5e5e5e;
  --gcp-gray-400: #808080; --gcp-gray-500: #9e9e9e; --gcp-gray-600: #bdbdbd; --gcp-gray-700: #d4d4d4;
  --gcp-gray-800: #e8e8e8; --gcp-gray-900: #f5f5f5;
  --gcp-white: #1f1f1f;
  --gcp-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.4);
  --gcp-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.4);
  --gcp-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 4px 12px 4px rgba(0,0,0,.4);
}
[data-theme="spacex"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="spacex"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="spacex"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：X ===== */
[data-theme="x"] {
  --gcp-blue: #000000;
  --gcp-blue-hover: #333333;
  --gcp-blue-light: #F5F5F5;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="x"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="x"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="x"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：微软云 ===== */
[data-theme="azure"] {
  --gcp-blue: #0078D4;
  --gcp-blue-hover: #106EBE;
  --gcp-blue-light: #E5F0FC;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="azure"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="azure"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="azure"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：AWS云 ===== */
[data-theme="aws"] {
  --gcp-blue: #FF9900;
  --gcp-blue-hover: #D98200;
  --gcp-blue-light: #FFF3E0;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="aws"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="aws"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="aws"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：阿里云 ===== */
[data-theme="aliyun"] {
  --gcp-blue: #FF6A00;
  --gcp-blue-hover: #D95A00;
  --gcp-blue-light: #FFF0E0;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="aliyun"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="aliyun"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="aliyun"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：华为云 ===== */
[data-theme="huawei"] {
  --gcp-blue: #CF0A2C;
  --gcp-blue-hover: #A80823;
  --gcp-blue-light: #FCE8EB;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="huawei"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="huawei"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="huawei"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：腾讯云 ===== */
[data-theme="tencent"] {
  --gcp-blue: #006EFF;
  --gcp-blue-hover: #0058CC;
  --gcp-blue-light: #E5F0FF;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="tencent"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="tencent"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="tencent"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：天翼云 ===== */
[data-theme="ecloud"] {
  --gcp-blue: #0072E3;
  --gcp-blue-hover: #005BB5;
  --gcp-blue-light: #E5F0FA;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="ecloud"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="ecloud"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="ecloud"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：移动云 ===== */
[data-theme="mcloud"] {
  --gcp-blue: #1A6DFF;
  --gcp-blue-hover: #0055CC;
  --gcp-blue-light: #E5F0FF;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="mcloud"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="mcloud"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="mcloud"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：联通云 ===== */
[data-theme="uncloud"] {
  --gcp-blue: #E60012;
  --gcp-blue-hover: #B8000E;
  --gcp-blue-light: #FCE8EA;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="uncloud"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="uncloud"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="uncloud"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：海禛云 ===== */
[data-theme="haizhenyun"] {
  --gcp-blue: #005A9E;
  --gcp-blue-hover: #00447A;
  --gcp-blue-light: #E5F0FA;
  --gcp-red: #d93025;
  --gcp-red-light: #fce8e6;
  --gcp-green: #1e8e3e;
  --gcp-green-light: #e6f4ea;
  --gcp-yellow: #f9ab00;
  --gcp-yellow-light: #fef7e0;
  --gcp-gray-50: #f8f9fa; --gcp-gray-100: #f1f3f4; --gcp-gray-200: #e8eaed; --gcp-gray-300: #dadce0;
  --gcp-gray-400: #bdc1c6; --gcp-gray-500: #9aa0a6; --gcp-gray-600: #80868b; --gcp-gray-700: #5f6368;
  --gcp-gray-800: #3c4043; --gcp-gray-900: #202124;
  --gcp-white: #ffffff;
  --gcp-shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --gcp-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --gcp-shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 4px 12px 4px rgba(60,64,67,.15);
}
[data-theme="haizhenyun"] .nav-item.active { background: var(--gcp-blue-light); }
[data-theme="haizhenyun"] .btn-gcp { background: var(--gcp-blue); }
[data-theme="haizhenyun"] .btn-gcp:hover { background: var(--gcp-blue-hover); }

/* ===== 主题：登录页适配 ===== */
[data-theme="dark"],
[data-theme="openclaw"],
[data-theme="youtube"],
[data-theme="tiktok"],
[data-theme="spacex"] .auth-card { background: var(--gcp-white); }
[data-theme="dark"],
[data-theme="openclaw"],
[data-theme="youtube"],
[data-theme="tiktok"],
[data-theme="spacex"] .auth-card input { background: var(--gcp-gray-100); color: var(--gcp-gray-900); border-color: var(--gcp-gray-300); }
[data-theme="dark"],
[data-theme="openclaw"],
[data-theme="youtube"],
[data-theme="tiktok"],
[data-theme="spacex"] .oauth-btn { background: var(--gcp-gray-100) !important; border-color: var(--gcp-gray-300) !important; }
[data-theme="dark"],
[data-theme="openclaw"],
[data-theme="youtube"],
[data-theme="tiktok"],
[data-theme="spacex"] .oauth-btn:hover { background: var(--gcp-gray-200) !important; }
[data-theme="dark"],
[data-theme="openclaw"],
[data-theme="youtube"],
[data-theme="tiktok"],
[data-theme="spacex"] .agree-modal { background: var(--gcp-white); }
[data-theme="dark"],
[data-theme="openclaw"],
[data-theme="youtube"],
[data-theme="tiktok"],
[data-theme="spacex"] .agree-modal-body { color: var(--gcp-gray-800); }


/* ===== 重置 ===== */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Google Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--gcp-gray-900);
  background: var(--gcp-gray-50);
  overflow: hidden;
  height: 100vh;
}

/* ===== 顶部导航栏 ===== */
.gcp-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--gcp-white);
  border-bottom: 1px solid var(--gcp-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1000;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hamburger-btn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gcp-gray-700);
  cursor: pointer;
  transition: var(--transition);
}
.hamburger-btn:hover { background: var(--gcp-gray-100); }
.gcp-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-icon {
  font-size: 20px;
  color: var(--gcp-blue);
}
.brand-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--gcp-gray-800);
}
.brand-beta {
  font-size: 10px;
  font-weight: 500;
  color: var(--gcp-gray-500);
  background: var(--gcp-gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .5px;
}
.topbar-divider {
  width: 1px;
  height: 24px;
  background: var(--gcp-gray-300);
}
.topbar-title {
  font-size: 16px;
  color: var(--gcp-gray-700);
  font-weight: 400;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 顶栏 HZT Token 余额 chip（与 AIWAN/AIOS 同源同形） */
.iam-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--gcp-gray-100);
  border: 1px solid var(--gcp-gray-200);
  font-size: 13px;
  font-weight: 600;
  color: var(--gcp-text-primary);
  white-space: nowrap;
  cursor: default;
}
.iam-balance-chip .ab-label { color: var(--gcp-gray-500); font-weight: 500; font-size: 12px; }
.iam-balance-chip.low { border-color: var(--gcp-red); color: var(--gcp-red); }
.iam-balance-chip.low .ab-label { color: var(--gcp-red); }
.gcp-search {
  display: flex;
  align-items: center;
  background: var(--gcp-gray-100);
  border-radius: 24px;
  padding: 0 12px;
  width: 280px;
  height: 36px;
  transition: var(--transition);
}
.gcp-search:focus-within {
  background: var(--gcp-white);
  box-shadow: 0 0 0 2px var(--gcp-blue);
}
.gcp-search i { color: var(--gcp-gray-500); font-size: 14px; }
.gcp-search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  padding: 0 8px;
  font-size: 14px;
  color: var(--gcp-gray-800);
}
.gcp-search input::placeholder { color: var(--gcp-gray-500); }
.gcp-search kbd {
  font-size: 11px;
  color: var(--gcp-gray-500);
  background: var(--gcp-gray-200);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: inherit;
}
.gcp-icon-btn {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gcp-gray-600);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.gcp-icon-btn:hover { background: var(--gcp-gray-100); }
.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gcp-red);
  border: 2px solid var(--gcp-white);
}
.gcp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gcp-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 4px;
}

/* ===== 主布局 ===== */
.gcp-layout {
  display: flex;
  height: calc(100vh - var(--topbar-height));
  margin-top: var(--topbar-height);
}

/* ===== 侧边栏 ===== */
.gcp-sidebar {
  width: var(--sidebar-width);
  background: var(--gcp-white);
  border-right: 1px solid var(--gcp-gray-200);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  transition: var(--transition);
}
.gcp-sidebar.collapsed { width: 0; overflow: hidden; }
.sidebar-nav {
  padding: 12px 0;
  flex: 1;
}
.nav-section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gcp-gray-500);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 16px 16px 8px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  color: var(--gcp-gray-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border-left: 3px solid transparent;
  transition: var(--transition);
  cursor: pointer;
}
.nav-item:hover {
  background: var(--gcp-gray-50);
  color: var(--gcp-gray-900);
}
.nav-item.active {
  background: var(--gcp-blue-light);
  color: var(--gcp-blue);
  border-left-color: var(--gcp-blue);
  font-weight: 500;
}
.nav-item i {
  width: 20px;
  text-align: center;
  font-size: 16px;
}
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--gcp-gray-200);
}
.project-select {
  font-size: 13px;
  color: var(--gcp-gray-600);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: var(--transition);
}
.project-select:hover { background: var(--gcp-gray-50); }
.project-select i:last-child { margin-left: auto; font-size: 12px; }

/* ===== 主内容区 ===== */
.gcp-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  background: var(--gcp-gray-50);
}
.page { display: none; }
.page.active { display: block; }

/* ===== 页面头部 ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.page-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--gcp-gray-900);
  margin: 0 0 4px;
}
.page-subtitle {
  font-size: 14px;
  color: var(--gcp-gray-600);
  margin: 0;
}
.page-actions { display: flex; gap: 8px; }

/* ===== 按钮 ===== */
.btn-gcp {
  background: var(--gcp-blue);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-gcp:hover { background: var(--gcp-blue-hover); box-shadow: var(--gcp-shadow-sm); }
.btn-gcp:active { box-shadow: none; }
.btn-outline-gcp {
  background: transparent;
  color: var(--gcp-gray-700);
  border: 1px solid var(--gcp-gray-300);
  padding: 7px 19px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.btn-outline-gcp:hover { background: var(--gcp-gray-50); border-color: var(--gcp-gray-400); }
.btn-sm { padding: 4px 12px; font-size: 13px; }
.btn-icon {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gcp-gray-600);
  cursor: pointer;
  transition: var(--transition);
}
.btn-icon:hover { background: var(--gcp-gray-100); color: var(--gcp-gray-800); }
.btn-icon.danger:hover { background: var(--gcp-red-light); color: var(--gcp-red); }

/* ===== 卡片 ===== */
.gcp-card {
  background: var(--gcp-white);
  border: 1px solid var(--gcp-gray-200);
  border-radius: var(--gcp-radius);
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.card-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gcp-gray-200);
  gap: 12px;
  flex-wrap: wrap;
}
.card-toolbar-left, .card-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== 表格 ===== */
.table-container { overflow-x: auto; }
.gcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.gcp-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
  color: var(--gcp-gray-600);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--gcp-gray-200);
  white-space: nowrap;
}
.gcp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gcp-gray-100);
  color: var(--gcp-gray-800);
  vertical-align: middle;
}
.gcp-table tr:hover td { background: var(--gcp-gray-50); }
.gcp-table tr:last-child td { border-bottom: none; }
.gcp-table tr.row-disabled td {
  opacity: 0.55;
  background: var(--gcp-gray-50);
}
.table-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--gcp-gray-500);
}
.table-empty i { font-size: 48px; margin-bottom: 12px; display: block; }
.table-empty p { margin: 0; font-size: 14px; }

/* ===== 资源树形视图 ===== */
.tree-container {
  padding: 0;
}
.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gcp-border, #e8eaed);
  font-size: 13px;
  transition: background 0.15s;
}
.tree-node:hover {
  background: var(--gcp-gray-50, #f8f9fa);
}
.tree-toggle {
  cursor: pointer;
  font-size: 10px;
  width: 16px;
  text-align: center;
  color: var(--gcp-gray-500, #5f6368);
  flex-shrink: 0;
  user-select: none;
}
.tree-toggle:hover {
  color: var(--gcp-gray-700, #3c4043);
}
.tree-toggle-placeholder {
  width: 16px;
  flex-shrink: 0;
}
.node-icon {
  width: 20px;
  text-align: center;
  color: var(--gcp-gray-500, #5f6368);
  flex-shrink: 0;
}
.node-name {
  font-weight: 500;
  min-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-path {
  font-size: 12px;
  color: var(--gcp-gray-500, #5f6368);
  min-width: 100px;
}
.node-time {
  color: var(--gcp-gray-500, #5f6368);
  font-size: 12px;
  white-space: nowrap;
  margin-left: auto;
}
.node-actions {
  white-space: nowrap;
  flex-shrink: 0;
}
.tree-children {
  display: none;
}

/* ===== 视图切换 ===== */
.view-toggle {
  display: flex;
  border: 1px solid var(--gcp-gray-300);
  border-radius: 4px;
  overflow: hidden;
}
.toggle-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  color: var(--gcp-gray-600);
  cursor: pointer;
  transition: var(--transition);
}
.toggle-btn.active { background: var(--gcp-blue-light); color: var(--gcp-blue); }
.toggle-btn:not(:last-child) { border-right: 1px solid var(--gcp-gray-300); }

/* ===== 过滤标签 ===== */
.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  color: var(--gcp-gray-600);
  background: var(--gcp-gray-100);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.filter-chip:hover { background: var(--gcp-gray-200); }
.filter-chip.active { background: var(--gcp-blue-light); color: var(--gcp-blue); font-weight: 500; }

/* ===== 输入框 ===== */
.gcp-input-group {
  display: flex;
  align-items: center;
  background: var(--gcp-white);
  border: 1px solid var(--gcp-gray-300);
  border-radius: 4px;
  padding: 0 8px;
  transition: var(--transition);
}
.gcp-input-group:focus-within { border-color: var(--gcp-blue); box-shadow: 0 0 0 1px var(--gcp-blue); }
.gcp-input-group i { color: var(--gcp-gray-500); font-size: 14px; }
.gcp-input-group input {
  border: none;
  background: none;
  outline: none;
  padding: 7px 8px;
  font-size: 14px;
  color: var(--gcp-gray-800);
  font-family: inherit;
  min-width: 200px;
}
.gcp-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gcp-gray-300);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gcp-gray-800);
  transition: var(--transition);
  background: var(--gcp-white);
}
.gcp-input:focus { outline: none; border-color: var(--gcp-blue); box-shadow: 0 0 0 1px var(--gcp-blue); }
.gcp-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gcp-gray-300);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gcp-gray-800);
  background: var(--gcp-white);
  transition: var(--transition);
  cursor: pointer;
}
.gcp-select:focus { outline: none; border-color: var(--gcp-blue); box-shadow: 0 0 0 1px var(--gcp-blue); }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gcp-gray-700);
  margin-bottom: 6px;
}
.form-hint {
  font-size: 12px;
  color: var(--gcp-gray-500);
  margin: 4px 0 0;
}
.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row .form-group { flex: 1; margin-bottom: 0; }

/* ===== 信息卡片 ===== */
.info-card { border-left: 4px solid var(--gcp-blue); }
.info-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gcp-gray-700);
  border-bottom: 1px solid var(--gcp-gray-100);
}
.info-card-body { padding: 12px 16px; }
.info-item {
  display: flex;
  gap: 12px;
  padding: 6px 0;
}
.info-label {
  font-weight: 500;
  color: var(--gcp-gray-700);
  min-width: 100px;
  flex-shrink: 0;
}
.info-value { color: var(--gcp-gray-600); }

/* ===== 统计卡片 ===== */
.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 24px; font-weight: 500; color: var(--gcp-gray-900); }
.stat-label { font-size: 13px; color: var(--gcp-gray-600); }

/* ===== 侧边面板 ===== */
.gcp-sidepanel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 2000;
  display: none;
}
.gcp-sidepanel-overlay.show { display: block; }
.gcp-sidepanel {
  position: fixed;
  top: 0;
  right: -480px;
  width: 480px;
  height: 100vh;
  background: var(--gcp-white);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--gcp-shadow-lg);
}
.gcp-sidepanel.wide { width: 640px; right: -640px; }
.gcp-sidepanel.show { right: 0; }
.sidepanel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gcp-gray-200);
  flex-shrink: 0;
}
.sidepanel-header h2 {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  color: var(--gcp-gray-900);
}
.sidepanel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.sidepanel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--gcp-gray-200);
  flex-shrink: 0;
}

/* ===== 角色/权限标签 ===== */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  background: var(--gcp-blue-light);
  color: var(--gcp-blue);
  max-width: 200px;
}
.role-chip .role-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-chip .role-type {
  font-size: 10px;
  background: rgba(0,0,0,.08);
  padding: 1px 5px;
  border-radius: 8px;
}
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  background: var(--gcp-gray-100);
  color: var(--gcp-gray-700);
}
.member-chip i { font-size: 11px; }
.condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--gcp-yellow-light);
  color: #e37400;
  cursor: pointer;
}
.deny-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--gcp-red-light);
  color: var(--gcp-red);
}

/* ===== 权限列表 ===== */
.perm-search {
  display: flex;
  align-items: center;
  background: var(--gcp-gray-50);
  border: 1px solid var(--gcp-gray-300);
  border-radius: 4px;
  padding: 0 8px;
  margin-bottom: 12px;
}
.perm-search i { color: var(--gcp-gray-500); }
.perm-search input {
  border: none;
  background: none;
  outline: none;
  padding: 7px 8px;
  font-size: 13px;
  flex: 1;
  font-family: inherit;
}
.perm-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--gcp-gray-200);
  border-radius: 4px;
}
.perm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gcp-gray-100);
  cursor: pointer;
  transition: var(--transition);
}
.perm-item:last-child { border-bottom: none; }
.perm-item:hover { background: var(--gcp-gray-50); }
.perm-item input[type="checkbox"] {
  accent-color: var(--gcp-blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.perm-item .perm-name { font-size: 13px; color: var(--gcp-gray-800); flex: 1; }
.perm-item .perm-desc { font-size: 11px; color: var(--gcp-gray-500); }

/* ===== 策略排查 ===== */
.troubleshooter-form { padding: 16px; }
.ts-results { border-top: 1px solid var(--gcp-gray-200); padding: 16px; }
.section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--gcp-gray-800);
  margin: 0 0 12px;
}
.ts-permission-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.ts-permission-result.allowed { background: var(--gcp-green-light); }
.ts-permission-result.denied { background: var(--gcp-red-light); }
.ts-permission-result i { font-size: 16px; }
.ts-permission-result.allowed i { color: var(--gcp-green); }
.ts-permission-result.denied i { color: var(--gcp-red); }
.ts-permission-result .perm-name { flex: 1; font-weight: 500; }
.ts-permission-result .perm-reason { font-size: 12px; color: var(--gcp-gray-600); }

/* ===== 资源树 ===== */
.resource-tree { padding: 16px; }
.tree-node { margin-left: 24px; }
.tree-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}
.tree-node-header:hover { background: var(--gcp-gray-50); }
.tree-node-header .toggle-icon {
  width: 16px;
  text-align: center;
  font-size: 10px;
  color: var(--gcp-gray-500);
}
.tree-node-header .node-icon { width: 20px; text-align: center; }
.tree-node-header .node-icon.org { color: #e37400; }
.tree-node-header .node-icon.folder { color: var(--gcp-yellow); }
.tree-node-header .node-icon.project { color: var(--gcp-blue); }
.tree-node-header .node-name { font-size: 14px; color: var(--gcp-gray-800); }
.tree-node-header .node-id { font-size: 12px; color: var(--gcp-gray-500); margin-left: 8px; }
.tree-children { display: none; }
.tree-children.expanded { display: block; }

/* ===== Toast ===== */
.toast { background: #323232; color: white; border-radius: 4px; min-width: 300px; }
.toast .btn-close { filter: brightness(0) invert(1); }

/* ===== 资源层级徽章 ===== */
.badge.badge-organization {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.badge.badge-folder {
  background: #fef7e0 !important;
  color: #e37400 !important;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.badge.badge-project {
  background: #e6f4ea !important;
  color: #1e8e3e !important;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ===== 状态标签 ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.status-badge.active { background: var(--gcp-green-light); color: var(--gcp-green); }
.status-badge.deny { background: var(--gcp-red-light, #fce8e6); color: var(--gcp-red, #d93025); }
.status-badge.inactive { background: var(--gcp-gray-100); color: var(--gcp-gray-600); }
.status-badge.pending { background: var(--gcp-yellow-light); color: #e37400; }
.status-badge.enabled { background: var(--gcp-green-light); color: var(--gcp-green); }
.status-badge.disabled { background: var(--gcp-red-light); color: var(--gcp-red); }
.status-badge.locked { background: var(--gcp-yellow-light); color: #e37400; }

/* ===== 信任分指示器 ===== */
.trust-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.trust-score.high { color: var(--gcp-green); }
.trust-score.medium { color: var(--gcp-yellow); }
.trust-score.low { color: var(--gcp-red); }

/* ===== 滚动条 ===== */
.gcp-main::-webkit-scrollbar,
.sidepanel-body::-webkit-scrollbar,
.perm-list::-webkit-scrollbar { width: 6px; }
.gcp-main::-webkit-scrollbar-track,
.sidepanel-body::-webkit-scrollbar-track,
.perm-list::-webkit-scrollbar-track { background: transparent; }
.gcp-main::-webkit-scrollbar-thumb,
.sidepanel-body::-webkit-scrollbar-thumb,
.perm-list::-webkit-scrollbar-thumb { background: var(--gcp-gray-300); border-radius: 3px; }
.gcp-main::-webkit-scrollbar-thumb:hover,
.sidepanel-body::-webkit-scrollbar-thumb:hover,
.perm-list::-webkit-scrollbar-thumb:hover { background: var(--gcp-gray-400); }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .gcp-sidebar { position: fixed; z-index: 999; box-shadow: var(--gcp-shadow-lg); }
  .gcp-sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-width); }
  .gcp-main { padding: 16px; }
  .gcp-search { width: 36px; }
  .gcp-search input { display: none; }
  .gcp-search:focus-within { width: 200px; position: absolute; right: 16px; }
  .gcp-search:focus-within input { display: block; }
  .gcp-sidepanel { width: 100% !important; right: -100% !important; }
  .form-row { flex-direction: column; }
  .page-header { flex-direction: column; gap: 12px; }
}

/* ============================================================
   Condition Visual Builder
   ============================================================ */
.condition-builder { padding: 0; }
.cond-section { margin-bottom: 16px; }
.cond-section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gcp-gray-700);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cond-expression {
  background: var(--gcp-gray-50);
  border: 1px solid var(--gcp-gray-200);
  border-radius: 4px;
  padding: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  color: var(--gcp-gray-800);
  min-height: 60px;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.cond-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--gcp-white);
  border: 1px solid var(--gcp-gray-200);
  border-radius: 4px;
}
.cond-row .gcp-select { width: auto; min-width: 120px; }
.cond-row .gcp-input { width: auto; flex: 1; }
.cond-remove-btn {
  color: var(--gcp-red);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: var(--transition);
}
.cond-remove-btn:hover { background: var(--gcp-red-light); }
.cond-add-btn {
  color: var(--gcp-blue);
  cursor: pointer;
  padding: 6px 12px;
  border: 1px dashed var(--gcp-gray-300);
  border-radius: 4px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}
.cond-add-btn:hover { background: var(--gcp-blue-light); border-color: var(--gcp-blue); }
.cond-group {
  border: 1px solid var(--gcp-gray-200);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--gcp-white);
}
.cond-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gcp-gray-600);
}
.cond-operator-toggle {
  display: flex;
  border: 1px solid var(--gcp-gray-300);
  border-radius: 4px;
  overflow: hidden;
}
.cond-operator-toggle button {
  background: none;
  border: none;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--gcp-gray-600);
  transition: var(--transition);
}
.cond-operator-toggle button.active { background: var(--gcp-blue); color: white; }
.cond-operator-toggle button:not(:last-child) { border-right: 1px solid var(--gcp-gray-300); }
.cond-preview {
  background: var(--gcp-yellow-light);
  border: 1px solid #f9d71c;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  color: #e37400;
  margin-top: 8px;
}
.cond-preset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cond-preset-btn {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: var(--gcp-gray-100);
  border: 1px solid var(--gcp-gray-300);
  cursor: pointer;
  transition: var(--transition);
  color: var(--gcp-gray-700);
}
.cond-preset-btn:hover { background: var(--gcp-blue-light); border-color: var(--gcp-blue); color: var(--gcp-blue); }

/* ============================================================
   MFA Enrollment Wizard
   ============================================================ */
.mfa-wizard { padding: 0; }
.mfa-step {
  display: none;
  padding: 16px 0;
}
.mfa-step.active { display: block; }
.mfa-step-indicator {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.mfa-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  background: var(--gcp-gray-100);
  color: var(--gcp-gray-500);
  border: 2px solid var(--gcp-gray-300);
}
.mfa-step-dot.active { background: var(--gcp-blue); color: white; border-color: var(--gcp-blue); }
.mfa-step-dot.completed { background: var(--gcp-green); color: white; border-color: var(--gcp-green); }
.mfa-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: var(--gcp-white);
  border: 1px solid var(--gcp-gray-200);
  border-radius: 8px;
  margin-bottom: 16px;
}
.mfa-qr-placeholder {
  width: 180px;
  height: 180px;
  background: var(--gcp-gray-100);
  border: 2px dashed var(--gcp-gray-300);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--gcp-gray-400);
  margin-bottom: 12px;
}
.mfa-secret-key {
  font-family: monospace;
  font-size: 14px;
  color: var(--gcp-gray-700);
  background: var(--gcp-gray-50);
  padding: 8px 12px;
  border-radius: 4px;
  user-select: all;
  margin-bottom: 8px;
}
.mfa-method-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--gcp-gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
}
.mfa-method-card:hover { border-color: var(--gcp-blue); background: var(--gcp-blue-light); }
.mfa-method-card.selected { border-color: var(--gcp-blue); background: var(--gcp-blue-light); }
.mfa-method-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.mfa-method-info { flex: 1; }
.mfa-method-title { font-weight: 500; color: var(--gcp-gray-800); }
.mfa-method-desc { font-size: 12px; color: var(--gcp-gray-500); }
.mfa-backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.mfa-backup-code {
  font-family: monospace;
  font-size: 14px;
  padding: 8px;
  background: var(--gcp-gray-50);
  border: 1px solid var(--gcp-gray-200);
  border-radius: 4px;
  text-align: center;
}

/* ============================================================
   Policy Analyzer
   ============================================================ */
.pa-form { padding: 16px; }
.pa-results { border-top: 1px solid var(--gcp-gray-200); }
.pa-summary {
  display: flex;
  gap: 16px;
  padding: 16px;
  flex-wrap: wrap;
}
.pa-summary-card {
  flex: 1;
  min-width: 150px;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}
.pa-summary-card.allowed { background: var(--gcp-green-light); }
.pa-summary-card.denied { background: var(--gcp-red-light); }
.pa-summary-card.conditional { background: var(--gcp-yellow-light); }
.pa-summary-value { font-size: 28px; font-weight: 500; }
.pa-summary-label { font-size: 12px; color: var(--gcp-gray-600); margin-top: 4px; }
.pa-inheritance-chain {
  padding: 0 16px 16px;
}
.pa-chain-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--gcp-gray-300);
  margin-left: 12px;
  position: relative;
}
.pa-chain-node::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gcp-gray-300);
  transform: translateY(-50%);
}
.pa-chain-node.allowed { border-left-color: var(--gcp-green); }
.pa-chain-node.allowed::before { background: var(--gcp-green); }
.pa-chain-node.denied { border-left-color: var(--gcp-red); }
.pa-chain-node.denied::before { background: var(--gcp-red); }
.pa-chain-node.conditional { border-left-color: var(--gcp-yellow); }
.pa-chain-node.conditional::before { background: var(--gcp-yellow); }
.pa-chain-resource { font-weight: 500; font-size: 13px; flex: 1; }
.pa-chain-role { font-size: 12px; color: var(--gcp-gray-600); }
.pa-chain-effect { font-size: 12px; font-weight: 500; }
.pa-chain-effect.allow { color: var(--gcp-green); }
.pa-chain-effect.deny { color: var(--gcp-red); }
.pa-chain-effect.condition { color: #e37400; }

/* ============================================================
   SA Key Management
   ============================================================ */
.key-list { padding: 0; }
.key-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gcp-gray-100);
}
.key-item:last-child { border-bottom: none; }
.key-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gcp-yellow-light);
  color: #e37400;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.key-info { flex: 1; }
.key-id { font-size: 13px; font-weight: 500; color: var(--gcp-gray-800); }
.key-meta { font-size: 11px; color: var(--gcp-gray-500); }
.key-actions { display: flex; gap: 4px; }
.key-create-info {
  background: var(--gcp-blue-light);
  border-radius: 4px;
  padding: 12px;
  font-size: 13px;
  color: var(--gcp-blue);
  margin-bottom: 16px;
}
.key-download {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--gcp-green-light);
  border: 1px solid var(--gcp-green);
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--gcp-green);
}

/* ============================================================
   Group Management
   ============================================================ */
.group-member-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--gcp-gray-200);
  border-radius: 4px;
}
.group-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gcp-gray-100);
}
.group-member-item:last-child { border-bottom: none; }
.group-member-item:hover { background: var(--gcp-gray-50); }
.group-member-email { flex: 1; font-size: 13px; }
.group-member-remove {
  color: var(--gcp-red);
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  transition: var(--transition);
}
.group-member-item:hover .group-member-remove { opacity: 1; }
.group-tabs {
  display: flex;
  border-bottom: 1px solid var(--gcp-gray-200);
  margin-bottom: 16px;
}
.group-tab {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--gcp-gray-600);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.group-tab:hover { color: var(--gcp-gray-800); }
.group-tab.active { color: var(--gcp-blue); border-bottom-color: var(--gcp-blue); }

/* ============================================================
   Policy Inheritance Indicators
   ============================================================ */
.inheritance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.inheritance-badge.direct { background: var(--gcp-blue-light); color: var(--gcp-blue); }
.inheritance-badge.inherited { background: var(--gcp-gray-100); color: var(--gcp-gray-600); }
.inheritance-source {
  font-size: 11px;
  color: var(--gcp-gray-500);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.inheritance-source:hover { color: var(--gcp-blue); }
.inheritance-chain-popup {
  position: absolute;
  background: var(--gcp-white);
  border: 1px solid var(--gcp-gray-200);
  border-radius: 8px;
  box-shadow: var(--gcp-shadow-lg);
  padding: 12px;
  z-index: 100;
  min-width: 250px;
}
.inheritance-chain-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.inheritance-chain-item .arrow { color: var(--gcp-gray-400); }

/* ============================================================
   Deny Rule Form
   ============================================================ */
.deny-rule-card {
  border-left: 4px solid var(--gcp-red);
  background: var(--gcp-red-light);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;
}
.deny-rule-card .deny-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gcp-red);
  margin-bottom: 4px;
}
.deny-rule-card .deny-desc {
  font-size: 12px;
  color: var(--gcp-gray-600);
}

/* ============================================================
   SSO Test
   ============================================================ */
.sso-test-result {
  padding: 12px;
  border-radius: 4px;
  margin-top: 8px;
  font-size: 13px;
}
.sso-test-result.success { background: var(--gcp-green-light); color: var(--gcp-green); }
.sso-test-result.error { background: var(--gcp-red-light); color: var(--gcp-red); }

/* ============================================================
   Audit Export
   ============================================================ */
.export-btn-group {
  display: flex;
  gap: 6px;
}
.export-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--gcp-gray-300);
  background: var(--gcp-white);
  color: var(--gcp-gray-700);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}
.export-btn:hover { background: var(--gcp-gray-50); border-color: var(--gcp-gray-400); }
.export-btn.csv:hover { border-color: var(--gcp-green); color: var(--gcp-green); }
.export-btn.json:hover { border-color: var(--gcp-blue); color: var(--gcp-blue); }

/* ============================================================
   Etag / Concurrency
   ============================================================ */
.etag-indicator {
  font-size: 11px;
  color: var(--gcp-gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}
.etag-conflict {
  background: var(--gcp-red-light);
  border: 1px solid var(--gcp-red);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--gcp-red);
  margin-bottom: 12px;
}

/* ===== 批量操作 ===== */
.batch-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gcp-blue);
}
th .batch-checkbox {
  display: block;
  margin: 0 auto;
}
td .batch-checkbox {
  display: block;
  margin: 0 auto;
}
tr.selected {
  background: var(--gcp-blue-light) !important;
}
tr.selected:hover {
  background: #d2e3fc !important;
}
.batch-toolbar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gcp-blue-light);
  border: 1px solid var(--gcp-blue);
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--gcp-gray-700);
}
.batch-toolbar.show {
  display: flex;
}
.batch-toolbar .selected-count {
  font-weight: 500;
  color: var(--gcp-blue);
  margin-right: 8px;
}
.batch-toolbar .btn-sm {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.batch-toolbar .btn-batch-delete {
  background: var(--gcp-red);
  color: white;
}
.batch-toolbar .btn-batch-delete:hover {
  background: #b3261e;
}
.batch-toolbar .btn-batch-cancel {
  background: var(--gcp-gray-100);
  color: var(--gcp-gray-700);
}
.batch-toolbar .btn-batch-cancel:hover {
  background: var(--gcp-gray-200);
}

/* ===== 模态框 ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.4);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: var(--gcp-white);
  border-radius: var(--gcp-radius);
  box-shadow: var(--gcp-shadow-lg);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
}
.modal-header h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  color: var(--gcp-gray-900);
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--gcp-gray-500);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-close:hover { color: var(--gcp-gray-800); }
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--gcp-gray-200);
}

/* ===== 用户详情页（Gmail 风格）===== */
.member-detail-link { color: var(--gcp-blue, #1a73e8); text-decoration: none; cursor: pointer; }
.member-detail-link code { color: inherit; }
.member-detail-link:hover { text-decoration: underline; }
.ud-backbar { padding: 4px 0 14px; }
.ud-header { display: flex; align-items: center; gap: 18px; padding: 4px 4px 22px; border-bottom: 1px solid var(--gcp-border, #e8eaed); margin-bottom: 18px; }
.ud-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #1a73e8, #7c4dff); color: #fff; font-weight: 600; font-size: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ud-header-info { flex: 1; min-width: 0; }
.ud-name { font-size: 22px; font-weight: 600; margin: 0; color: var(--gcp-gray-900, #202124); }
.ud-email { color: var(--gcp-gray-600, #5f6368); font-size: 14px; margin: 2px 0 6px; }
.ud-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.ud-meta code { background: var(--gcp-gray-50, #f8f9fa); padding: 1px 6px; border-radius: 4px; }
.ud-card { border-radius: 12px; }
.ud-card-header { display: flex; align-items: center; justify-content: space-between; }
.ud-card-title { font-weight: 600; font-size: 15px; color: var(--gcp-gray-900, #202124); }
.ud-sub { color: var(--gcp-gray-600, #5f6368); font-size: 12px; margin-top: 2px; }
.ud-body { padding: 16px 20px 20px; }
.ud-accttype { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.ud-label { font-size: 13px; font-weight: 500; color: var(--gcp-gray-700, #3c4043); min-width: 76px; }
.ud-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.ud-span2 { grid-column: span 2; }
.ud-field label { display: block; font-size: 12px; color: var(--gcp-gray-600, #5f6368); margin-bottom: 4px; }
.ud-field input, .ud-field select, .ud-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gcp-border, #dadce0); border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--gcp-gray-900, #202124);
}
.ud-field input:focus, .ud-field select:focus, .ud-field textarea:focus { border-color: var(--gcp-blue, #1a73e8); outline: none; box-shadow: 0 0 0 2px rgba(26,115,232,.12); }
.ud-field input:disabled, .ud-field select:disabled, .ud-field textarea:disabled { background: var(--gcp-gray-50, #f8f9fa); color: var(--gcp-gray-500); }
.ud-ent-section .ud-sub { margin-bottom: 4px; font-weight: 500; color: var(--gcp-gray-700, #3c4043); }
.ud-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ud-hint { font-size: 12px; color: var(--gcp-gray-500); }
.ud-idcards { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.ud-idcard { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ud-idcard-label { font-size: 12px; font-weight: 500; color: var(--gcp-gray-700, #3c4043); }
.ud-idcard-preview { width: 240px; height: 150px; border: 1px dashed var(--gcp-border, #dadce0); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--gcp-gray-400, #9aa0a6); font-size: 12px; background: var(--gcp-gray-50, #f8f9fa); overflow: hidden; }
.ud-idcard-preview img { width: 100%; height: 100%; object-fit: cover; }
.ud-idcard-preview.ud-license { width: 420px; height: 280px; }
/* 审计日志详情页头像（盾牌）：复用 ud-avatar，覆盖为琥珀色区分于用户蓝色 */
.ad-avatar { background: linear-gradient(135deg, #e37400, #f5a623); font-size: 24px; }
/* 资源层级详情页头像：琥珀色立方体/云，区分于用户蓝色 */
.res-avatar { background: linear-gradient(135deg, #e37400, #f5a623); font-size: 24px; }
/* 组织策略详情页头像：Google 绿盾牌，区分于审计琥珀/资源琥珀 */
.op-avatar { background: linear-gradient(135deg, #0f9d58, #1e8e3e); font-size: 24px; }
/* 服务账号详情页头像：靛蓝/紫机器人，区分于用户蓝/审计琥珀/资源琥珀/策略绿 */
.sa-avatar { background: linear-gradient(135deg, #3949ab, #7c4dff); font-size: 24px; }
/* 角色详情页头像：蓝青用户盾，区分于用户蓝/审计琥珀/资源琥珀/策略绿/服务账号靛紫 */
.role-avatar { background: linear-gradient(135deg, #0d7377, #00acc1); font-size: 24px; }
/* IAM 绑定详情页头像：蓝紫用户盾，区分于角色蓝青 */
.iam-avatar { background: linear-gradient(135deg, #1a73e8, #5a6cf0); font-size: 24px; }
/* 层级链面包屑 */
.res-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.res-crumb .crumb-sep { color: var(--gcp-gray-500, #80868b); margin: 0 2px; }
.ud-reject { margin-top: 12px; padding: 10px 12px; background: #fce8e6; color: #d93025; border-radius: 8px; font-size: 12px; }
.status-badge.default { background: var(--gcp-gray-100, #f1f3f4); color: var(--gcp-gray-600, #5f6368); }