/* css/base.css */
   :root {
       /* Primary Theme */
       --primary-color: #0a66c2;
       --primary-hover: #004182;
       --secondary-color: #5e6977;
       --accent-color: #2ec4b6;

       /* Status Colors */
       --success-color: #198754;
       --error-color: #dc3545;
       --warning-color: #ffc107;

       /* Backgrounds */
       --bg-primary: #ffffff;
       --bg-secondary: #f4f6f8;
       --bg-tertiary: #e9eff5;

       /* Text Colors */
       --text-primary: #1e293b;
       --text-secondary: #475569;
       --text-muted: #94a3b8;

       /* Borders */
       --border-color: #d0d7de;
       --border-focus: #0a66c2;

       --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
       --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
       --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
       --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

       --border-radius: 12px;
       --border-radius-lg: 16px;
       --border-radius-full: 9999px;

       --spacing-xs: 0.25rem;
       --spacing-sm: 0.5rem;
       --spacing-md: 1rem;
       --spacing-lg: 1.5rem;
       --spacing-xl: 2rem;
       --spacing-2xl: 3rem;

       --font-size-sm: 0.875rem;
       --font-size-base: 1rem;
       --font-size-lg: 1.125rem;
       --font-size-xl: 1.25rem;
       --font-size-2xl: 1.5rem;
       --font-size-3xl: 1.875rem;
       --font-size-4xl: 2.25rem;

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

       --transition-fast: 0.15s ease-in-out;
       --transition-normal: 0.3s ease-in-out;
       --transition-slow: 0.5s ease-in-out;
   }

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

   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
       background: linear-gradient(135deg, #dfe9f3 0%, #ffffff 100%);
       min-height: 100vh;
       color: var(--text-primary);
       line-height: 1.6;
       overflow-x: hidden;
   }

   .container {
       position: relative;
       width: 100%;
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--spacing-lg);
   }

   .screen {
       display: none;
       width: 100%;
       max-width: 700px;
       animation: fadeInUp 0.6s ease-out;
   }

   .screen.active {
       display: block;
   }

   .content-card {
       background: var(--bg-primary);
       border-radius: var(--border-radius-lg);
       box-shadow: var(--shadow-xl);
       padding: var(--spacing-2xl);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.2);
   }