:root {
  --background: #e8ebed;
  --foreground: #333333;
  --card: #ffffff;
  --card-foreground: #333333;
  --popover: #ffffff;
  --popover-foreground: #333333;
  --primary: #e05d38;
  --primary-foreground: #ffffff;
  --secondary: #f3f4f6;
  --secondary-foreground: #4b5563;
  --muted: #f9fafb;
  --muted-foreground: #6b7280;
  --accent: #d6e4f0;
  --accent-foreground: #1e3a8a;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #dcdfe2;
  --input: #f4f5f7;
  --ring: #e05d38;
  --chart-1: #86a7c8;
  --chart-2: #eea591;
  --chart-3: #5a7ca6;
  --chart-4: #466494;
  --chart-5: #334c82;
  --sidebar: #dddfe2;
  --sidebar-foreground: #333333;
  --sidebar-primary: #e05d38;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d6e4f0;
  --sidebar-accent-foreground: #1e3a8a;
  --sidebar-border: #e5e7eb;
  --sidebar-ring: #e05d38;
  
  /* Typography Structure */
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;

  /* Form & Baseline Adjustments */
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: #1c2433;
  --foreground: #e5e5e5;
  --card: #2a3040;
  --card-foreground: #e5e5e5;
  --popover: #262b38;
  --popover-foreground: #e5e5e5;
  --primary: #e05d38;
  --primary-foreground: #ffffff;
  --secondary: #2a303e;
  --secondary-foreground: #e5e5e5;
  --muted: #2a303e;
  --muted-foreground: #a3a3a3;
  --accent: #2a3656;
  --accent-foreground: #bfdbfe;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #3d4354;
  --input: #3d4354;
  --ring: #e05d38;
  --chart-1: #86a7c8;
  --chart-2: #e6a08f;
  --chart-3: #5a7ca6;
  --chart-4: #466494;
  --chart-5: #334c82;
  --sidebar: #2a303f;
  --sidebar-foreground: #e5e5e5;
  --sidebar-primary: #e05d38;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2a3656;
  --sidebar-accent-foreground: #bfdbfe;
  --sidebar-border: #3d4354;
  --sidebar-ring: #e05d38;
}

/* Styles from start.html */

        * { font-family: 'Inter', sans-serif; }
        
        body {
            background-color: theme('colors.background');
            margin: 0;
            overflow-x: hidden; /* Prevent horizontal scrolling only */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        /* The exact background pattern from your landing page */
        .bg-pattern {
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(224, 93, 56, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(214, 228, 240, 0.3) 0%, transparent 50%);
            z-index: 0;
        }

        /* ==========================================
           CHOREOGRAPHED ANIMATIONS
           ========================================== */
        
        /* 1. Graceful Entrance */
        @keyframes splash-intro {
            0% { opacity: 0; transform: scale(0.75) translateY(20px); filter: blur(10px); }
            100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
        }
        
        /* 2. The "Healthcare Heartbeat" */
        @keyframes splash-pulse {
            0% { transform: scale(1); }
            15% { transform: scale(1.08); }
            30% { transform: scale(1); }
            45% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }
        
        /* 3. The Ethereal Dissolve (Blows past the camera) */
        @keyframes splash-dissolve {
            0% { opacity: 1; transform: scale(1); filter: blur(0); }
            50% { opacity: 0.8; }
            100% { opacity: 0; transform: scale(5); filter: blur(25px); }
        }

        /* 4. Final page fade to white/background right before redirect */
        @keyframes fade-to-bg {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        #splash-wrapper {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #splash-logo {
            width: 16rem; /* Adjust base size here if needed */
            opacity: 0; 
            animation: splash-intro 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            will-change: transform, opacity, filter;
        }
        
        @media (min-width: 768px) {
            #splash-logo { width: 22rem; }
        }

        /* Classes added by JavaScript to trigger the next phases */
        #splash-logo.pulsing {
            animation: splash-pulse 1.2s ease-in-out forwards;
        }
        
        #splash-logo.dissolving {
            animation: splash-dissolve 0.9s cubic-bezier(0.7, 0, 0.3, 1) forwards;
        }

        body.fade-out {
            animation: fade-to-bg 0.4s ease-out forwards;
        }
    
/* Styles from khaya-doc-landing.html */

        /* ==========================================
           CSS VARIABLES - COLOR THEME
           Light mode (default) and dark mode variants
           Primary color: #e05d38 (coral/orange)
           ========================================== */
        
        
        
        
        * { font-family: 'Inter', sans-serif; }
        html { scroll-behavior: smooth; }
        
        body {
            background-color: var(--background);
            color: var(--foreground);
            min-height: 100vh;
            transition: background-color 0.3s, color 0.3s;
            overflow-x: hidden;
        }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background-color: var(--muted-foreground); }
        
        /* ==========================================
           ANIMATIONS
           ========================================== */
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(20px); }
            50% { transform: translateY(-12px); }
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        
        .stagger-1 { animation-delay: 0.1s; opacity: 0; }
        .stagger-2 { animation-delay: 0.2s; opacity: 0; }
        .stagger-3 { animation-delay: 0.3s; opacity: 0; }
        .stagger-4 { animation-delay: 0.4s; opacity: 0; }
        .stagger-5 { animation-delay: 0.5s; opacity: 0; }
        
        /* Scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* ==========================================
           BACKGROUND PATTERNS
           ========================================== */
        .bg-pattern {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(224, 93, 56, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(214, 228, 240, 0.3) 0%, transparent 50%);
        }
        .dark .bg-pattern {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(224, 93, 56, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(42, 54, 86, 0.5) 0%, transparent 50%);
        }
        
        .gradient-primary { background: linear-gradient(135deg, var(--primary) 0%, #f97316 100%); }
        .gradient-hero { background: linear-gradient(135deg, rgba(224, 93, 56, 0.05) 0%, rgba(214, 228, 240, 0.2) 50%, rgba(224, 93, 56, 0.03) 100%); }
        .dark .gradient-hero { background: linear-gradient(135deg, rgba(224, 93, 56, 0.1) 0%, rgba(42, 54, 86, 0.3) 50%, rgba(224, 93, 56, 0.05) 100%); }
        
        /* ==========================================
           GLASS CARD COMPONENT
           ========================================== */
        .glass-card {
            background: linear-gradient(145deg, var(--card), rgba(255,255,255,0.02));
            border: 1px solid var(--border);
            backdrop-filter: blur(10px);
        }
        
        /* ==========================================
           FEATURE CARD COMPONENT
           ========================================== */
        .feature-card { transition: all 0.3s ease; }
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px -10px rgba(224, 93, 56, 0.15);
        }
        
        /* ==========================================
           NAVIGATION COMPONENTS
           ========================================== */
        .nav-link { position: relative; }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }
        .nav-link:hover::after { width: 100%; }
        
        /* ==========================================
           BUTTON STYLES
           ========================================== */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, #f97316 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        .btn-primary:hover::before { left: 100%; }
        
        /* ==========================================
           SERVICE CARD STYLES
           ========================================== */
        .service-card {
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), #f97316);
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
        .service-card:hover::before { transform: scaleX(1); }
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px -12px rgba(224, 93, 56, 0.25);
        }
        
        .service-card-inperson {
            background: linear-gradient(145deg, #fff7ed 0%, var(--card) 50%);
            border: 2px solid rgba(224, 93, 56, 0.2);
        }
        .service-card-inperson::before { transform: scaleX(1); height: 5px; }
        .dark .service-card-inperson { background: linear-gradient(145deg, rgba(224, 93, 56, 0.1) 0%, var(--card) 50%); }
        
        .service-card-virtual {
            background: linear-gradient(145deg, rgba(214, 228, 240, 0.3) 0%, var(--card) 50%);
            border: 1px solid var(--border);
        }
        .dark .service-card-virtual { background: linear-gradient(145deg, rgba(42, 54, 86, 0.3) 0%, var(--card) 50%); }
        
        .service-icon-container {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        .service-card:hover .service-icon-container { transform: scale(1.1) rotate(-5deg); }
        
        .price-badge { position: relative; overflow: hidden; }
        .price-badge::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }
        
        .type-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .type-badge-virtual { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; }
        .type-badge-inperson { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); color: #9a3412; }
        .dark .type-badge-virtual { background: linear-gradient(135deg, rgba(30, 64, 175, 0.3) 0%, rgba(30, 64, 175, 0.2) 100%); color: #93c5fd; }
        .dark .type-badge-inperson { background: linear-gradient(135deg, rgba(154, 52, 18, 0.3) 0%, rgba(154, 52, 18, 0.2) 100%); color: #fdba74; }
        
        /* ==========================================
           DOCTOR PROFILE CARD
           ========================================== */
        .doctor-card {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .doctor-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), #f97316);
        }
        .doctor-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px -10px rgba(224, 93, 56, 0.2);
        }
        
        .doctor-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary);
        }
        
        /* ==========================================
           FILTER TABS
           ========================================== */
        .filter-tab {
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--muted-foreground);
        }
        .filter-tab:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        .filter-tab.active {
            background: linear-gradient(135deg, var(--primary) 0%, #f97316 100%);
            color: white;
            border-color: transparent;
        }
        
        /* ==========================================
           PRICING FEATURE STYLES
           ========================================== */
        .pricing-feature {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 0;
        }
        
        /* ==========================================
            FAQ ACCORDION
           ========================================== */
        details > summary { list-style: none; cursor: pointer; }
        details > summary::-webkit-details-marker { display: none; }
        
        /* ==========================================
           LOGO & SOCIAL ICONS
           ========================================== */
        .logo-img { height: 68px; width: auto; object-fit: contain; padding: 4px 0; transition: transform 0.3s ease; }
        .logo-img:hover { transform: scale(2); }
        .logo-img-footer { height: 88px; width: auto; object-fit: contain; }
        
        .social-icon {
            width: 64px;
            height: 64px;
            object-fit: contain;
            transition: all 0.3s ease;
            filter: grayscale(30%);
            opacity: 0.8;
        }
        .social-icon:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
        }
        
        /* ==========================================
           HERO IMAGE CONTAINER
           ========================================== */
        .hero-image-container {
            position: relative;
            overflow: hidden;
        }
        .hero-image-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(224, 93, 56, 0.1) 0%, transparent 50%);
            z-index: 1;
            pointer-events: none;
        }
        
        /* Floating badge - fixed animation */
        .floating-badge {
            position: absolute;
            top: 0px;
            right: -8px;
            z-index: 10;
        }
        .floating-badge-inner {
            background: var(--primary);
            color: white;
            padding: 10px 16px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(224, 93, 56, 0.3);
            animation: float 3s ease-in-out infinite;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .floating-badge-inner i { width: 16px; height: 16px; }
        .floating-badge-inner span { font-size: 13px; font-weight: 600; white-space: nowrap; }

        /* ==========================================
           JOURNEY STEP STYLES
           ========================================== */
        .journey-step {
            transition: all 0.3s ease;
        }
        .journey-step:hover {
            transform: translateX(8px);
        }
        .journey-step-number {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
            color: white;
            background: linear-gradient(135deg, var(--primary) 0%, #f97316 100%);
            box-shadow: 0 4px 15px rgba(224, 93, 56, 0.3);
        }
        

    
/* Styles from khaya-doc-login.html */

        
        
        * {
            font-family: 'Inter', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            background-color: var(--background);
            color: var(--foreground);
            min-height: 100vh;
            min-height: 100dvh; /* Dynamic viewport height for mobile */
            transition: background-color 0.3s, color 0.3s;
        }
        .input-box {
            background-color: var(--input);
            border: 1px solid var(--border);
            color: var(--foreground);
            transition: all 0.2s ease-in-out;
        }
        .input-box:focus {
            outline: none;
            border-color: var(--ring);
            box-shadow: 0 0 0 2px rgba(224, 93, 56, 0.15);
        }
        .input-box::placeholder {
            color: var(--muted-foreground);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background-color: var(--muted-foreground); }

        /* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(224, 93, 56, 0.3); }
            50% { box-shadow: 0 0 40px rgba(224, 93, 56, 0.5); }
        }
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes scale-in {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        .animate-fade-in-up {
            animation: fade-in-up 0.5s ease-out forwards;
        }
        .animate-fade-in {
            animation: fade-in 0.3s ease-out forwards;
        }
        .animate-scale-in {
            animation: scale-in 0.3s ease-out forwards;
        }
        .animate-shake {
            animation: shake 0.3s ease-in-out;
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }
        .animate-pulse-glow {
            animation: pulse-glow 2s ease-in-out infinite;
        }

        /* Role Bubble Styles */
        .role-bubble {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .role-bubble::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        .role-bubble:hover::before {
            left: 100%;
        }
        @media (hover: hover) {
            .role-bubble:hover {
                transform: translateY(-5px) scale(1.02);
                box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            }
        }

        /* OTP Input Styles - Mobile Responsive */
        .otp-input {
            width: 44px;
            height: 52px;
            text-align: center;
            font-size: 1.25rem;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            background-color: var(--input);
            border: 2px solid var(--border);
            border-radius: 10px;
            color: var(--foreground);
            transition: all 0.2s ease;
        }
        .otp-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(224, 93, 56, 0.2);
            transform: scale(1.05);
        }
        .otp-input.filled {
            border-color: var(--primary);
            background-color: var(--card);
        }
        /* Larger OTP inputs on bigger screens */
        @media (min-width: 400px) {
            .otp-input {
                width: 50px;
                height: 60px;
                font-size: 1.5rem;
                border-radius: 12px;
            }
        }

        /* View Transitions */
        .view {
            display: none;
        }
        .view.active {
            display: flex;
        }

        /* Background Pattern */
        .bg-pattern {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(224, 93, 56, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(214, 228, 240, 0.3) 0%, transparent 50%);
        }
        .dark .bg-pattern {
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(224, 93, 56, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(42, 54, 86, 0.5) 0%, transparent 50%);
        }

        /* Link Styles */
        .link-hover {
            position: relative;
        }
        .link-hover::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }
        .link-hover:hover::after {
            width: 100%;
        }

        /* Success Checkmark Animation */
        @keyframes checkmark {
            0% { stroke-dashoffset: 100; }
            100% { stroke-dashoffset: 0; }
        }
        .checkmark-circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            animation: checkmark 0.6s ease-in-out forwards;
        }
        .checkmark-check {
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: checkmark 0.3s 0.4s ease-in-out forwards;
        }

        /* Mobile-specific card padding */
        .card-padding {
            padding: 1.5rem;
        }
        @media (min-width: 480px) {
            .card-padding {
                padding: 2rem;
            }
        }

        /* Mobile header padding */
        .card-header-padding {
            padding: 1rem 1.5rem;
        }
        @media (min-width: 480px) {
            .card-header-padding {
                padding: 1.5rem 2rem;
            }
        }

        /* Form spacing for mobile */
        .form-spacing {
            padding: 1.5rem;
        }
        @media (min-width: 480px) {
            .form-spacing {
                padding: 2rem;
            }
        }

        .pw-tooltip-trigger {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: help;
        }
        .pw-tooltip-trigger .pw-tooltip-box {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            background-color: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 6px 10px;
            font-size: 0.65rem;
            line-height: 1.4;
            color: var(--muted-foreground);
            max-width: 220px;
            white-space: normal;
            box-shadow: 0px 8px 24px -4px hsl(0 0% 0% / 0.15);
            z-index: 10;
        }
        .pw-tooltip-trigger .pw-tooltip-box::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 4px;
            border: 6px solid transparent;
            border-bottom-color: var(--border);
        }
        .pw-tooltip-trigger:hover .pw-tooltip-box,
        .pw-tooltip-trigger:focus .pw-tooltip-box {
            display: block;
        }

        #reg-pw-error {
            display: none;
        }
        #reg-pw-error.visible {
            display: flex;
        }

        /* Safe area for notched phones */
        @supports (padding-top: env(safe-area-inset-top)) {
            .theme-toggle-btn {
                top: calc(0.5rem + env(safe-area-inset-top));
                right: calc(0.5rem + env(safe-area-inset-right));
            }
        }

        /* ==========================================
           CONSENT FORM STYLES
           ========================================== */
        
        .consent-content {
            font-family: 'Source Serif 4', serif;
            line-height: 1.8;
        }
        .consent-content h2 {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            color: var(--foreground);
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }
        .consent-content p,
        .consent-content li {
            color: var(--foreground);
        }
        .consent-content ul {
            list-style-type: disc;
            padding-left: 1.5rem;
            margin: 0.5rem 0;
        }
        .consent-content li {
            margin: 0.25rem 0;
        }

        /* Signature Canvas */
        #signature-canvas {
            background-color: var(--input);
            border: 2px dashed var(--border);
            border-radius: 12px;
            cursor: crosshair;
            touch-action: none;
        }
        #signature-canvas:hover {
            border-color: var(--primary);
        }
        #signature-canvas.signed {
            border-style: solid;
            border-color: var(--primary);
        }

        /* Checkbox Custom */
        .custom-checkbox {
            appearance: none;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            border: 2px solid var(--border);
            border-radius: 4px;
            background-color: var(--input);
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .custom-checkbox:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        .custom-checkbox:checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

        /* Print Styles */
        @media print {
            body {
                background: white !important;
                color: black !important;
            }
            .no-print {
                display: none !important;
            }
            .consent-content {
                color: black !important;
            }
            #signature-canvas {
                border: 2px solid black !important;
            }
        }

        /* Typed Name Input */
        .typed-name-input {
            border-bottom: 2px solid var(--border);
            background: transparent;
            padding: 0.25rem 0;
            font-weight: 600;
        }
        .typed-name-input:focus {
            outline: none;
            border-color: var(--primary);
        }

/* ==========================================
   TIMER EXPIRED ANIMATION
   ========================================== */
.timer-expired {
    animation: timer-pulse 2s ease-in-out infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================
   ADMIN DASHBOARD
   ========================================== */

/* Navbar */
.admin-nav {
    background-color: #1a1f24;
    color: white;
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-nav .brand { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }

/* Admin layout grid */
.admin-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
}

/* Admin sidebar */
.admin-sidebar-menu {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 0.75rem;
}

/* Admin panels */
.admin-panel {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1.5rem;
    color: var(--card-foreground);
}

/* User list */
.user-list-item {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.user-list-item:hover { background: var(--muted); }
.user-list-item.active { background: var(--accent); border-left: 3px solid var(--primary); }

/* User detail compact grid */
.user-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

/* Dirty field indicator */
.field-dirty { border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }

/* Status dot */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.active { background: #10b981; }
.status-dot.inactive { background: #ef4444; }
.status-dot.incomplete { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); }

/* Role micro-badge */
.role-micro-badge {
    font-size: 0.6rem; font-weight: 700; padding: 1px 5px;
    border-radius: 4px; text-transform: uppercase;
}
.role-micro-badge.patient { background: #dbeafe; color: #1e40af; }
.role-micro-badge.doctor { background: #d1fae5; color: #065f46; }

/* Confirmation modal */
.admin-confirm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.admin-confirm-modal {
    background: var(--card); border-radius: var(--radius);
    padding: 2rem; max-width: 500px; width: 90%;
    border: 1px solid var(--border);
}
.changes-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.changes-table th { text-align: left; padding: 0.5rem; background: var(--muted); font-weight: 600; }
.changes-table td { padding: 0.5rem; border-bottom: 1px solid var(--border); }
.changes-table .old-val { color: var(--destructive); text-decoration: line-through; }
.changes-table .new-val { color: #10b981; font-weight: 600; }