.header{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);color:var(--color-white);box-shadow:var(--shadow-md);position:sticky;top:0;z-index:100}.header-container{max-width:1400px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-xl);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl)}.header-brand{display:flex;align-items:center;gap:var(--spacing-lg)}.header-logo{height:60px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}.header-logo-desktop{display:block}.header-logo-mobile{display:none}.header-title h1{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-white);margin:0;line-height:1.2}.header-subtitle{font-size:var(--font-size-sm);color:#ffffffe6;font-weight:400}.header-user{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-sm)}.header-user-logo{height:48px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}.header-user-logo-desktop{display:block}.header-user-logo-mobile{display:none;height:36px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}.header-user-content{display:flex;align-items:flex-end;gap:var(--spacing-sm)}.header-user-actions{display:flex;align-items:center;gap:var(--spacing-xs)}.user-info{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-xs)}.user-name{font-weight:600;font-size:var(--font-size-base)}.user-email{font-size:var(--font-size-sm);color:#fffc}.btn-logout{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);color:var(--color-white);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-logout:hover{background:#ffffff40;border-color:#ffffff80;transform:translateY(-1px)}.btn-logout:active{transform:translateY(0)}.btn-logout svg{width:20px;height:20px}.logout-text{display:inline}@media (max-width: 768px){.header-container{padding:var(--spacing-md);gap:var(--spacing-md)}.header-brand{gap:var(--spacing-sm);flex:1}.header-logo-desktop{display:none}.header-logo-mobile{display:block;height:48px}.header-title h1{font-size:var(--font-size-lg)}.header-subtitle{display:none}.header-user{gap:var(--spacing-xs)}.header-user-logo-desktop{display:none}.header-user-logo-mobile{display:block}.header-user-actions{gap:var(--spacing-xs)}.user-info,.user-email{display:none}.btn-logout{padding:var(--spacing-sm);min-width:40px;min-height:40px;justify-content:center}.logout-text{display:none}.btn-logout svg{margin:0}}.recording-controls{display:flex;gap:var(--spacing-xl);justify-content:center;margin-top:var(--spacing-2xl);flex-wrap:wrap}.btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:1.5rem 2.5rem;font-size:1.25rem;font-weight:700;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-lg);min-width:240px;min-height:70px;font-family:var(--font-family)}.btn-record{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);color:var(--color-white)}.btn-record:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);transform:translateY(-2px);box-shadow:0 12px 24px -5px #003e7e66}.btn-pause{background:linear-gradient(135deg,#f59e0b,#f97316);color:var(--color-white)}.btn-pause:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#ea580c);transform:translateY(-2px);box-shadow:0 12px 24px -5px #f59e0b66}.btn-resume{background:linear-gradient(135deg,#10b981,#059669);color:var(--color-white)}.btn-resume:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px);box-shadow:0 12px 24px -5px #10b98166}.btn-stop{background:linear-gradient(135deg,var(--color-error) 0%,#DC2626 100%);color:var(--color-white)}.btn-stop:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 12px 24px -5px #ef444466}.btn:disabled{background:var(--color-gray-300);color:var(--color-gray-500);cursor:not-allowed;transform:none;box-shadow:var(--shadow-md);opacity:.6}.btn-icon{font-size:1.5rem;line-height:1}.btn:active:not(:disabled){transform:translateY(-1px)}@media (max-width: 768px){.recording-controls{flex-direction:row;gap:var(--spacing-md)}.btn{flex:1;min-width:140px;padding:1.25rem 1.5rem;font-size:1.125rem;min-height:60px}.btn-icon{font-size:1.25rem}}.status-indicator{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.status-badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-weight:600;font-size:var(--font-size-sm);transition:all var(--transition-base)}.status-icon{font-size:var(--font-size-lg);line-height:1}.status-badge.draft{background:#6b72801a;color:var(--color-gray-700);border:1px solid rgba(107,114,128,.2)}.status-badge.recording{background:#ef44441a;color:var(--color-error);border:1px solid rgba(239,68,68,.3);animation:pulse-glow 2s ease-in-out infinite}.status-badge.paused{background:#f59e0b1a;color:#d97706;border:1px solid rgba(245,158,11,.3)}.status-badge.processing{background:#3b82f61a;color:var(--color-primary);border:1px solid rgba(59,130,246,.3)}.status-badge.completed{background:#22c55e1a;color:var(--color-success);border:1px solid rgba(34,197,94,.3)}.status-badge.failed{background:#ef44441a;color:var(--color-error);border:1px solid rgba(239,68,68,.3)}@keyframes pulse-glow{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 8px #ef444400}}.recording-timer{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-error);font-variant-numeric:tabular-nums;letter-spacing:.05em;transition:color var(--transition-base)}.recording-timer.paused{color:#d97706}@media (max-width: 768px){.status-indicator{padding:var(--spacing-sm)}.recording-timer{font-size:var(--font-size-2xl)}}.consent-toggle-container{margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:#e170000d;border:2px solid rgba(225,112,0,.2);border-radius:var(--radius-lg)}.consent-toggle-label{display:flex;align-items:flex-start;gap:var(--spacing-md);cursor:pointer;-webkit-user-select:none;user-select:none}.consent-toggle-input{position:absolute;opacity:0;pointer-events:none}.consent-toggle-switch{position:relative;flex-shrink:0;width:52px;height:28px;background:var(--color-gray-300);border-radius:var(--radius-full);transition:background-color var(--transition-base);margin-top:2px}.consent-toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;background:var(--color-white);border-radius:var(--radius-full);transition:transform var(--transition-base);box-shadow:var(--shadow-sm)}.consent-toggle-input:checked+.consent-toggle-switch{background:var(--color-accent)}.consent-toggle-input:checked+.consent-toggle-switch:after{transform:translate(24px)}.consent-toggle-input:disabled+.consent-toggle-switch{opacity:.5;cursor:not-allowed}.consent-toggle-label:hover .consent-toggle-input:not(:disabled)+.consent-toggle-switch{background:var(--color-gray-400)}.consent-toggle-label:hover .consent-toggle-input:checked:not(:disabled)+.consent-toggle-switch{background:var(--color-accent-dark)}.consent-toggle-text{flex:1;font-size:var(--font-size-base);font-weight:500;color:var(--color-gray-900);line-height:1.5}.consent-hint{display:block;margin-top:var(--spacing-sm);margin-left:68px;font-size:var(--font-size-sm);color:var(--color-accent-dark);font-weight:500}@media (max-width: 768px){.consent-toggle-container{padding:var(--spacing-md)}.consent-toggle-text{font-size:var(--font-size-sm)}.consent-toggle-switch{width:48px;height:26px}.consent-toggle-switch:after{width:22px;height:22px}.consent-toggle-input:checked+.consent-toggle-switch:after{transform:translate(22px)}.consent-hint{margin-left:60px;font-size:var(--font-size-xs)}}.conversation-recorder{max-width:800px;margin:0 auto;padding:var(--spacing-2xl) var(--spacing-xl)}.recorder-card{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-2xl);border:1px solid var(--color-gray-200)}.recorder-card h2{color:var(--color-primary);font-size:var(--font-size-3xl);font-weight:700;margin-bottom:var(--spacing-xl);text-align:center;padding-bottom:var(--spacing-lg);border-bottom:3px solid var(--color-accent)}.alert{padding:var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--font-size-base);font-weight:500;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-icon{font-size:var(--font-size-2xl);flex-shrink:0}.alert-error{background:#fee2e2;border:1px solid #FECACA;color:#991b1b}.alert-success{background:#d1fae5;border:1px solid #A7F3D0;color:#065f46}.form-group{margin-bottom:var(--spacing-xl)}.form-group label{display:block;font-weight:600;font-size:var(--font-size-base);color:var(--color-gray-700);margin-bottom:var(--spacing-sm)}.required{color:var(--color-error);margin-left:var(--spacing-xs)}.form-input{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);transition:all var(--transition-base);background:var(--color-white);color:var(--color-gray-900)}.form-input:hover{border-color:var(--color-gray-400)}.form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #003e7e1a}.form-input:disabled{background:var(--color-gray-100);color:var(--color-gray-500);cursor:not-allowed}.form-hint{display:block;font-size:var(--font-size-sm);color:var(--color-gray-500);margin-top:var(--spacing-sm);font-style:italic}.user-info{text-align:center}.user-info small{color:var(--color-gray-500);font-size:var(--font-size-sm)}@media (max-width: 768px){.conversation-recorder{padding:var(--spacing-lg) var(--spacing-md)}.recorder-card{padding:var(--spacing-xl) var(--spacing-lg)}.recorder-card h2{font-size:var(--font-size-2xl)}}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3 3 3-3' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-md) center;padding-right:var(--spacing-3xl);cursor:pointer}.form-select:hover{border-color:var(--color-primary)}.login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e17000,#ff8c1a,#ffa940);padding:var(--spacing-xl);position:relative;overflow:hidden}.login-view:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);animation:float 20s ease-in-out infinite}.login-view:after{content:"";position:absolute;bottom:-50%;left:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:float 25s ease-in-out infinite reverse}@keyframes float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(50px,50px) scale(1.1)}}.login-card{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #00000040;padding:var(--spacing-3xl) var(--spacing-2xl);max-width:520px;width:100%;text-align:center;position:relative;z-index:1;animation:slideUp .6s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-logo{width:200px;height:auto;margin:0 auto var(--spacing-2xl);display:block}.login-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-lg)}.login-subtitle{font-size:var(--font-size-xl);color:var(--color-gray-600);margin-bottom:var(--spacing-3xl);line-height:1.6}.btn-login{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-lg);padding:var(--spacing-xl) var(--spacing-3xl);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);color:var(--color-white);border:none;border-radius:var(--radius-xl);font-size:var(--font-size-xl);font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:0 10px 25px -5px #003e7e4d;width:100%;max-width:380px;margin:0 auto}.btn-login:hover{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);transform:translateY(-3px);box-shadow:0 15px 30px -5px #003e7e66}.btn-login:active{transform:translateY(-1px);box-shadow:0 10px 25px -5px #003e7e4d}.login-icon{width:28px;height:28px}.login-info{margin-top:var(--spacing-2xl);padding-top:var(--spacing-xl);border-top:1px solid var(--color-gray-200)}.info-text{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-gray-600);margin:0}.info-icon{width:20px;height:20px;color:var(--color-info);flex-shrink:0}@media (max-width: 768px){.login-view{padding:var(--spacing-lg)}.login-card{padding:var(--spacing-2xl) var(--spacing-xl)}.login-logo{width:160px}.login-title{font-size:var(--font-size-3xl)}.login-subtitle{font-size:var(--font-size-lg)}.btn-login{font-size:var(--font-size-lg);padding:var(--spacing-lg) var(--spacing-2xl)}.login-icon{width:24px;height:24px}}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.app-content{flex:1;display:flex;flex-direction:column}.container{max-width:1400px;margin:0 auto;padding:0 var(--spacing-xl)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:var(--spacing-lg)}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-gray-300);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--font-size-lg);color:var(--color-gray-600);font-weight:500}@media (max-width: 768px){.app-content{padding:var(--spacing-lg) 0}.container{padding:0 var(--spacing-md)}}:root{--color-primary: #E17000;--color-primary-dark: #C45F00;--color-primary-light: #FF8C1A;--color-accent: #003E7E;--color-accent-dark: #002855;--color-accent-light: #0051A5;--color-white: #FFFFFF;--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;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #3B82F6;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .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;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease-in-out;--transition-base: .2s ease-in-out;--transition-slow: .3s ease-in-out}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-gray-800);background-color:var(--color-gray-50);min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;color:var(--color-gray-900);margin-bottom:var(--spacing-md)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}p{margin-bottom:var(--spacing-md)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark);text-decoration:underline}button{font-family:var(--font-family);cursor:pointer;transition:all var(--transition-base)}button:disabled{cursor:not-allowed;opacity:.6}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-gray-100)}::-webkit-scrollbar-thumb{background:var(--color-gray-400);border-radius:var(--radius-md)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-500)}