/**
 * Design System CSS untuk Webinar Registration Form
 * Konsisten dengan sistem desain kerjabaik.ai
 */

/* ============================================
   FONT IMPORTS
   ============================================ */

   /* Roboto Mono font is loaded via link tag in index.html */
   
   /* ============================================
      CSS VARIABLES - DESIGN TOKENS
      ============================================ */
   
   :root {
     /* Color Palette - Orange (Pulse) */
     --color-orange-50: #fff7ed;
     --color-orange-100: #ffedd5;
     --color-orange-200: #fed7aa;
     --color-orange-300: #fdba74;
     --color-orange-400: #fb923c;
     --color-orange-500: #f97316;
     --color-orange-600: #ea580c;
     --color-orange-700: #c2410c;
     --color-orange-800: #9a3412;
     --color-orange-900: #7c2d12;
     --color-orange-950: #431407;
   
     /* Color Palette - Gray Scale */
     --color-gray-50: #f9fafb;
     --color-gray-100: #f3f4f6;
     --color-gray-200: #e5e7eb;
     --color-gray-300: #d1d5db;
     --color-gray-400: #9ca3af;
     --color-gray-500: #6b7280;
     --color-gray-600: #4b5563;
     --color-gray-700: #374151;
     --color-gray-800: #1f2937;
     --color-gray-900: #111827;
   
     /* Semantic Colors (HSL) */
     --color-background: 0 0% 100%;
     --color-foreground: 24 10% 10%;
     --color-primary: 24 92% 55%;
     --color-primary-foreground: 0 0% 100%;
     --color-secondary: 0 0% 96%;
     --color-secondary-foreground: 24 10% 10%;
     --color-muted: 0 0% 96%;
     --color-muted-foreground: 24 5% 45%;
     --color-accent: 0 0% 96%;
     --color-accent-foreground: 24 10% 10%;
     --color-destructive: 0 84.2% 60.2%;
     --color-border: 0 0% 92%;
     --color-input: 0 0% 92%;
     --color-ring: 24 92% 55%;
   
     /* Border Radius */
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 1rem;
     --radius-2xl: 1.5rem;
     --radius-3xl: 2rem;
     --radius-full: 9999px;
   
     /* Spacing Scale */
     --spacing-1: 0.25rem;
     --spacing-2: 0.5rem;
     --spacing-3: 0.75rem;
     --spacing-4: 1rem;
     --spacing-5: 1.25rem;
     --spacing-6: 1.5rem;
     --spacing-8: 2rem;
     --spacing-10: 2.5rem;
     --spacing-12: 3rem;
     --spacing-16: 4rem;
     --spacing-20: 5rem;
     --spacing-24: 6rem;
   
     /* Container Padding (Responsive) */
     --container-padding-mobile: 1rem;
     --container-padding-sm: 1.5rem;
     --container-padding-md: 2rem;
   
     /* Typography - Font Sizes */
     --font-size-xs: 0.8125rem;
     --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.75rem;
     --font-size-4xl: 2rem;
     --font-size-5xl: 2.5rem;
     --font-size-6xl: 3rem;
     --font-size-7xl: 3.5rem;
   
     /* Typography - Line Heights */
     --line-height-tight: 1.1;
     --line-height-snug: 1.3;
     --line-height-normal: 1.5;
     --line-height-relaxed: 1.6;
     --line-height-loose: 1.7;
   
     /* Typography - Letter Spacing */
     --letter-spacing-tight-hero: -0.01em;
     --letter-spacing-wide-badge: 0.18em;
     --letter-spacing-widest: 0.2em;
   
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     --shadow-gray-900-10: 0 10px 15px -3px rgba(17, 24, 39, 0.1);
   
     /* Transitions */
     --transition-fast: 150ms ease-out;
     --transition-base: 300ms ease-out;
     --transition-slow: 700ms ease-out;
   
     /* Max Widths */
     --max-width-3xl: 48rem;
     --max-width-6xl: 72rem;
   }
   
   /* ============================================
      BASE STYLES & RESET
      ============================================ */
   
   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     scroll-behavior: smooth;
     font-size: 15px;
   }
   
   body {
     font-family: "Roboto Mono", monospace;
     font-size: var(--font-size-base);
     line-height: var(--line-height-relaxed);
     color: var(--color-gray-900);
     background-color: var(--color-gray-50);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     min-height: 100vh;
     padding: var(--spacing-3);
     display: flex;
     align-items: flex-start;
     justify-content: center;
     padding-top: var(--spacing-4);
   }
   
   @media (min-width: 640px) {
     body {
       padding: var(--spacing-4);
       align-items: center;
     }
   }
   
   ::selection {
     background-color: var(--color-orange-100);
     color: var(--color-orange-900);
   }
   
   /* ============================================
      TYPOGRAPHY
      ============================================ */
   
   h1, h2, h3, h4, h5, h6 {
     font-family: "Roboto Mono", monospace;
     font-weight: 500;
     color: var(--color-gray-900);
     line-height: var(--line-height-tight);
   }
   
   h1 {
     font-size: var(--font-size-2xl);
     line-height: var(--line-height-tight);
   }
   
   h2 {
     font-size: var(--font-size-2xl);
     line-height: 1.3;
   }
   
   @media (min-width: 640px) {
     h1 {
       font-size: var(--font-size-3xl);
     }
     
     h2 {
       font-size: var(--font-size-3xl);
     }
   }
   
   @media (min-width: 768px) {
     h1 {
       font-size: var(--font-size-4xl);
     }
     
     h2 {
       font-size: var(--font-size-4xl);
     }
   }
   
   @media (min-width: 1024px) {
     h1 {
       font-size: var(--font-size-5xl);
     }
     
     h2 {
       font-size: var(--font-size-5xl);
     }
   }
   
   p {
     font-size: var(--font-size-sm);
     line-height: var(--line-height-relaxed);
     color: var(--color-gray-600);
   }
   
   @media (min-width: 640px) {
     p {
       font-size: var(--font-size-base);
     }
   }
   
   @media (min-width: 768px) {
     p {
       font-size: var(--font-size-lg);
     }
   }
   
   #webinar-tanggal,
   #webinar-waktu {
     font-size: inherit;
     line-height: inherit;
     color: inherit;
   }
   
   /* ============================================
      CARD HEADER CONTENT
      ============================================ */
   
   .card-header-content h1 {
     margin-bottom: var(--spacing-3);
   }
   
   .card-header-content .header-description {
     margin-bottom: var(--spacing-4);
   }
   
   .card-header-content .header-info {
     margin-top: var(--spacing-4);
   }
   
   .card-header-content .header-info p {
     margin-bottom: var(--spacing-2);
   }
   
   .card-header-content .header-info p:last-child {
     margin-bottom: 0;
   }
   
   @media (min-width: 640px) {
     .card-header-content h1 {
       margin-bottom: var(--spacing-4);
     }
   
     .card-header-content .header-description {
       margin-bottom: var(--spacing-5);
     }
   
     .card-header-content .header-info {
       margin-top: var(--spacing-5);
     }
   }
   
   @media (min-width: 768px) {
     .card-header-content h1 {
       margin-bottom: var(--spacing-5);
     }
   
     .card-header-content .header-description {
       margin-bottom: var(--spacing-6);
     }
   
     .card-header-content .header-info {
       margin-top: var(--spacing-6);
     }
   }
   
   /* ============================================
      LAYOUT - CONTAINER
      ============================================ */
   
   .container {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--spacing-3);
     padding-right: var(--spacing-3);
     max-width: var(--max-width-3xl);
   }
   
   @media (min-width: 640px) {
     .container {
       padding-left: var(--container-padding-sm);
       padding-right: var(--container-padding-sm);
     }
   }
   
   @media (min-width: 768px) {
     .container {
       padding-left: var(--container-padding-md);
       padding-right: var(--container-padding-md);
     }
   }
   
   /* ============================================
      BADGES & LABELS
      ============================================ */
   
   .badge {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-2);
     padding: var(--spacing-1) var(--spacing-3);
     font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--color-orange-700);
     letter-spacing: var(--letter-spacing-wide-badge);
     border: 1px solid var(--color-orange-100);
     background-color: rgba(255, 237, 213, 0.5);
     border-radius: var(--radius-full);
   }
   
   @media (min-width: 640px) {
     .badge {
       padding: var(--spacing-1) var(--spacing-4);
       font-size: var(--font-size-sm);
     }
   }
   
   /* ============================================
      CARDS
      ============================================ */
   
   .card {
     background-color: hsl(var(--color-background));
     border: 1px solid var(--color-gray-200);
     border-radius: var(--radius-lg);
     padding: var(--spacing-4);
     box-shadow: var(--shadow-sm);
     transition: all var(--transition-base);
     margin-bottom: var(--spacing-4);
   }
   
   @media (min-width: 640px) {
     .card {
       border-radius: var(--radius-xl);
       padding: var(--spacing-6);
       margin-bottom: var(--spacing-5);
     }
   }
   
   @media (min-width: 768px) {
     .card {
       padding: var(--spacing-8);
       margin-bottom: var(--spacing-6);
     }
   }
   
   .card:last-child {
     margin-bottom: 0;
   }
   
   .card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-1px);
   }
   
   .card-image {
     padding: 0 !important;
     overflow: hidden;
     aspect-ratio: 16 / 7;
     margin-bottom: var(--spacing-4);
     border-radius: var(--radius-lg);
     display: block;
     width: 100%;
   }
   
   @media (min-width: 640px) {
     .card-image {
       aspect-ratio: 16 / 6;
       margin-bottom: var(--spacing-5);
       border-radius: var(--radius-xl);
     }
   }
   
   @media (min-width: 768px) {
     .card-image {
       margin-bottom: var(--spacing-6);
     }
   }
   
   .webinar-image {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     object-position: bottom;
     border-radius: inherit;
     margin: 0;
     padding: 0;
   }
   
   @media (min-width: 640px) {
     .webinar-image {
       border-radius: 0;
     }
   }
   
   /* ============================================
      FORM ELEMENTS
      ============================================ */
   
   .form-group {
     margin-bottom: var(--spacing-3);
   }
   
   @media (min-width: 640px) {
     .form-group {
       margin-bottom: var(--spacing-4);
     }
   }
   
   @media (min-width: 768px) {
     .form-group {
       margin-bottom: var(--spacing-5);
     }
   }
   
   .form-label {
     display: block;
     font-size: var(--font-size-sm);
     font-weight: 600;
     color: var(--color-gray-900);
     margin-bottom: var(--spacing-2);
     font-family: "Roboto Mono", monospace;
   }
   
   @media (min-width: 640px) {
     .form-label {
       font-size: var(--font-size-base);
     }
   }
   
   @media (min-width: 768px) {
     .form-label {
       font-size: var(--font-size-lg);
     }
   }
   
   .form-label.required::after {
     content: ' *';
     color: var(--color-orange-600);
   }
   
   .form-input,
   .form-select,
   .form-textarea {
     width: 100%;
     padding: var(--spacing-3) var(--spacing-3);
     font-size: var(--font-size-sm);
     font-family: "Roboto Mono", monospace;
     line-height: var(--line-height-normal);
     color: var(--color-gray-900);
     background-color: hsl(var(--color-background));
     border: 1px solid hsl(var(--color-input));
     border-radius: var(--radius-md);
     transition: all var(--transition-base);
     min-height: 44px;
   }
   
   @media (min-width: 640px) {
     .form-input,
     .form-select,
     .form-textarea {
       padding: var(--spacing-3) var(--spacing-4);
       font-size: var(--font-size-base);
       border-radius: var(--radius-lg);
     }
   }
   
   .form-input:focus,
   .form-select:focus,
   .form-textarea:focus {
     outline: none;
     border-color: hsl(var(--color-ring));
     box-shadow: 0 0 0 3px hsla(var(--color-ring), 0.1);
   }
   
   .form-input::placeholder,
   .form-textarea::placeholder {
     color: var(--color-gray-400);
   }
   
   .form-textarea {
     min-height: 120px;
     resize: vertical;
   }
   
   .form-select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
     background-position: right var(--spacing-3) center;
     background-repeat: no-repeat;
     background-size: 1.5em 1.5em;
     padding-right: var(--spacing-10);
     appearance: none;
     cursor: pointer;
   }
   
   /* Checkbox & Radio */
   .form-checkbox,
   .form-radio {
     width: 1.25rem;
     height: 1.25rem;
     border: 2px solid hsl(var(--color-input));
     border-radius: var(--radius-sm);
     cursor: pointer;
     transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
     appearance: none;
     position: relative;
     flex-shrink: 0;
     background-color: white;
   }
   
   .form-radio {
     border-radius: var(--radius-full);
     width: 1.25rem;
     height: 1.25rem;
     border-width: 2px;
   }
   
   .form-checkbox:hover,
   .form-radio:hover {
     border-color: var(--color-orange-400);
     box-shadow: 0 0 0 4px hsla(var(--color-ring), 0.1);
     transform: scale(1.05);
   }
   
   .form-checkbox:checked,
   .form-radio:checked {
     background-color: var(--color-orange-600);
     border-color: var(--color-orange-600);
     transform: scale(1);
     box-shadow: 0 0 0 4px hsla(var(--color-ring), 0.15);
   }

   .form-checkbox {
     width: 1.4rem;
     height: 1.4rem;
     border-radius: 6px;
   }
   
   .form-checkbox:checked::after {
     content: '';
     position: absolute;
     left: 50%;
     top: 45%;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 6px;
     height: 11px;
     border: solid white;
     border-width: 0 2.5px 2.5px 0;
     animation: checkmarkDraw 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
   
   @keyframes checkmarkDraw {
     0% {
       opacity: 0;
       transform: translate(-50%, -50%) rotate(45deg) scale(0);
     }
     100% {
       opacity: 1;
       transform: translate(-50%, -50%) rotate(45deg) scale(1);
     }
   }
   
   .form-radio:checked::after {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) scale(0);
     width: 0.5rem;
     height: 0.5rem;
     background-color: white;
     border-radius: var(--radius-full);
     animation: radioDotAppear 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
   
   @keyframes radioDotAppear {
     0% {
       transform: translate(-50%, -50%) scale(0);
       opacity: 0;
     }
     50% {
       transform: translate(-50%, -50%) scale(1.3);
     }
     100% {
       transform: translate(-50%, -50%) scale(1);
       opacity: 1;
     }
   }
   
   .form-checkbox:focus,
   .form-radio:focus {
     outline: none;
     box-shadow: 0 0 0 4px hsla(var(--color-ring), 0.2);
   }
   
   .checkbox-group {
     display: flex;
     align-items: flex-start;
     gap: var(--spacing-3);
     padding: 0;
     border: none;
     border-radius: 0;
     transition: none;
     cursor: pointer;
     background-color: transparent;
   }
   
   .checkbox-group:hover {
     background-color: transparent;
   }
   
   .checkbox-group:has(input:checked) {
     background-color: transparent;
   }
   
   .checkbox-group:focus-within {
     border: none;
     box-shadow: none;
   }
   
   .radio-group {
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
     padding: 0;
     border-radius: 0;
     cursor: pointer;
     transition: none;
     border: none;
     background-color: transparent;
     position: relative;
   }
   
   .radio-group:hover {
     background-color: transparent;
   }
   
   .radio-group:has(input:checked) {
     background-color: transparent;
   }
   
   .radio-group:active {
     transform: none;
   }
   
   .checkbox-label,
   .radio-label {
     font-size: var(--font-size-base);
     color: var(--color-gray-700);
     line-height: 1.6;
     cursor: pointer;
     flex: 1;
     margin: 0;
     transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
     user-select: none;
     font-weight: 500;
   }
   
   .checkbox-group:hover .checkbox-label,
   .radio-group:hover .radio-label {
     color: var(--color-gray-900);
   }
   
   .checkbox-group:has(input:checked) .checkbox-label,
   .radio-group:has(input:checked) .radio-label {
     color: var(--color-gray-900);
     font-weight: 600;
   }
   

   .checkbox-label a {
     color: var(--color-orange-600);
     text-decoration: none;
     font-weight: 600;
     padding-bottom: 1px;
     border-bottom: 2px solid var(--color-orange-100);
     transition: all var(--transition-fast);
   }

   .checkbox-label a:hover {
     border-bottom-color: var(--color-orange-500);
     color: var(--color-orange-700);
   }
   
   @media (min-width: 640px) {
     .checkbox-label,
     .radio-label {
       font-size: var(--font-size-base);
     }
   }
   
   /* ============================================
      BUTTONS
      ============================================ */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-2);
     padding: var(--spacing-3) var(--spacing-5);
     font-size: var(--font-size-sm);
     font-weight: 500;
     font-family: "Roboto Mono", monospace;
     line-height: var(--line-height-normal);
     border: none;
     border-radius: var(--radius-md);
     cursor: pointer;
     transition: all var(--transition-base);
     min-height: 44px;
     text-decoration: none;
   }
   
   @media (min-width: 640px) {
     .btn {
       padding: var(--spacing-3) var(--spacing-6);
       border-radius: var(--radius-lg);
     }
   }
   
   .btn:focus {
     outline: 2px solid hsl(var(--color-ring));
     outline-offset: 2px;
   }
   
   .btn-primary {
     background-color: var(--color-gray-900);
     color: white;
     box-shadow: var(--shadow-gray-900-10);
   }
   
   .btn-primary:hover:not(:disabled) {
     background-color: var(--color-gray-800);
     transform: translateY(-1px);
     box-shadow: var(--shadow-lg);
   }
   
   .btn-primary:active:not(:disabled) {
     transform: translateY(0);
   }
   
   .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   /* ============================================
      MESSAGES
      ============================================ */
   
   .message {
     margin-top: var(--spacing-6);
     padding: var(--spacing-3) var(--spacing-4);
     border-radius: var(--radius-lg);
     font-size: var(--font-size-sm);
     font-weight: 500;
     text-align: center;
     display: none;
     animation: fadeIn 0.3s ease;
   }
   
   .message.show {
     display: block;
   }
   
   .message.success {
     background: #d1fae5;
     color: #065f46;
     border: 1px solid #10b981;
   }
   
   .message.error {
     background: #fee2e2;
     color: #991b1b;
     border: 1px solid #ef4444;
   }
   
   .message.info {
     background: #dbeafe;
     color: #1e40af;
     border: 1px solid #3b82f6;
   }
   
   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translateY(10px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* ============================================
      UTILITIES
      ============================================ */
   
   .text-center {
     text-align: center;
   }
   
   .text-orange-600 {
     color: var(--color-orange-600);
   }
   
   .text-orange-600:hover {
     text-decoration: underline;
   }
   
   .space-y-3 > * + * {
     margin-top: var(--spacing-2);
   }
   
   @media (min-width: 640px) {
     .space-y-3 > * + * {
       margin-top: var(--spacing-3);
     }
   }
   
   .space-y-4 > * + * {
     margin-top: var(--spacing-3);
   }
   
   @media (min-width: 640px) {
     .space-y-4 > * + * {
       margin-top: var(--spacing-4);
     }
   }
   
   /* ============================================
      SEARCHABLE DROPDOWN - KOTA
      ============================================ */
   
   .kota-search-wrapper {
     position: relative;
     width: 100%;
   }
   
   .kota-search-input {
     width: 100%;
     cursor: pointer;
   }
   
   .kota-search-input:focus {
     border-color: hsl(var(--color-ring));
     box-shadow: 0 0 0 3px hsla(var(--color-ring), 0.1);
   }
   
   .kota-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background-color: hsl(var(--color-background));
     border: 1px solid hsl(var(--color-input));
     border-top: none;
     border-radius: 0 0 var(--radius-lg) var(--radius-lg);
     max-height: 300px;
     overflow-y: auto;
     z-index: 1000;
     box-shadow: var(--shadow-lg);
     display: none;
     margin-top: -1px;
   }
   
   .kota-dropdown.show {
     display: block;
   }
   
   .kota-dropdown-item {
     padding: var(--spacing-3) var(--spacing-4);
     font-size: var(--font-size-base);
     font-family: "Roboto Mono", monospace;
     color: var(--color-gray-900);
     cursor: pointer;
     transition: background-color var(--transition-fast);
     border-bottom: 1px solid var(--color-gray-100);
   }
   
   .kota-dropdown-item:last-child {
     border-bottom: none;
   }
   
   .kota-dropdown-item:hover {
     background-color: var(--color-gray-50);
   }
   
   .kota-dropdown-item.selected {
     background-color: var(--color-orange-50);
     color: var(--color-orange-700);
     font-weight: 500;
   }
   
   .kota-dropdown-item:focus {
     outline: none;
     background-color: var(--color-gray-50);
   }
   
   .kota-dropdown-empty {
     padding: var(--spacing-4);
     text-align: center;
     color: var(--color-gray-500);
     font-size: var(--font-size-sm);
   }
   
   /* ============================================
      RESPONSIVE
      ============================================ */
   
   @media (max-width: 640px) {
     body {
       padding: var(--spacing-4);
     }
   
     .card {
       padding: var(--spacing-6);
     }
   
     .kota-dropdown {
       max-height: 250px;
     }
     }
  
  /* ============================================
     MODAL - SYARAT DAN KETENTUAN
     ============================================ */
  
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }
  
  .modal-backdrop.show {
    opacity: 1;
    visibility: visible;
  }
  
  .modal-container {
    background-color: hsl(var(--color-background));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 42rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.95);
    transition: transform var(--transition-base);
    overflow: hidden;
  }
  
  .modal-backdrop.show .modal-container {
    transform: translateY(0) scale(1);
  }
  
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-6);
    border-bottom: 1px solid hsl(var(--color-border));
    flex-shrink: 0;
  }
  
   .modal-title {
     font-family: "Roboto Mono", monospace;
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: var(--color-gray-900);
    margin: 0;
    line-height: var(--line-height-tight);
  }
  
  @media (min-width: 640px) {
    .modal-title {
      font-size: var(--font-size-3xl);
    }
  }
  
  .modal-close-btn {
    background: none;
    border: none;
    padding: var(--spacing-2);
    cursor: pointer;
    color: var(--color-gray-500);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    line-height: 1;
    min-width: 2rem;
    min-height: 2rem;
  }
  
  .modal-close-btn:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
  }
  
  .modal-close-btn:focus {
    outline: 2px solid hsl(var(--color-ring));
    outline-offset: 2px;
  }
  
  .modal-close-btn svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-6);
    -webkit-overflow-scrolling: touch;
  }
  
  .modal-body::-webkit-scrollbar {
    width: 8px;
  }
  
  .modal-body::-webkit-scrollbar-track {
    background: var(--color-gray-100);
  }
  
  .modal-body::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
  }
  
  .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
  }
  
  .modal-content {
    color: var(--color-gray-700);
    line-height: var(--line-height-relaxed);
  }
  
  .modal-content h3 {
    font-family: "Roboto Mono", monospace;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
    line-height: var(--line-height-snug);
  }
  
  .modal-content h3:first-child {
    margin-top: 0;
  }
  
  .modal-term-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
  }
  
  .modal-term-item:first-of-type {
    margin-top: var(--spacing-4);
  }
  
  .modal-term-number {
    font-family: "Roboto Mono", monospace;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    flex-shrink: 0;
    line-height: var(--line-height-relaxed);
  }
  
  .modal-term-item p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-600);
    margin: 0;
    flex: 1;
  }
  
  @media (min-width: 640px) {
    .modal-term-item p {
      font-size: var(--font-size-base);
    }
  }
  
  .modal-content p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
  }
  
  @media (min-width: 640px) {
    .modal-content p {
      font-size: var(--font-size-base);
    }
  }
  
  .modal-content ul {
    margin-left: var(--spacing-5);
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-2);
  }
  
  .modal-content li {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
  }
  
  @media (min-width: 640px) {
    .modal-content li {
      font-size: var(--font-size-base);
    }
  }
  
  .modal-content strong {
    font-weight: 600;
    color: var(--color-gray-900);
  }
  
  .modal-footer-note {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid hsl(var(--color-border));
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    font-style: italic;
  }
  
  .modal-footer {
    padding: var(--spacing-6);
    border-top: 1px solid hsl(var(--color-border));
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  
  .modal-close-btn-footer {
    min-width: 120px;
  }
  
  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden;
  }
  
  @media (max-width: 640px) {
    .modal-backdrop {
      padding: var(--spacing-2);
    }
  
    .modal-container {
      max-height: 95vh;
      border-radius: var(--radius-lg);
    }
  
    .modal-header {
      padding: var(--spacing-4);
    }
  
    .modal-body {
      padding: var(--spacing-4);
    }
  
    .modal-footer {
      padding: var(--spacing-4);
    }
  
    .modal-title {
      font-size: var(--font-size-xl);
    }
  }