*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f0f2f5;line-height:1.6;color:#333;min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}.app{width:100%;max-width:1200px;margin:0 auto;padding:16px;flex:1}@media (min-width: 768px){.app{padding:24px}}@media (min-width: 1024px){.app{padding:32px}}.header{text-align:center;margin-bottom:24px;padding:16px 0}.header h1{font-size:2rem;font-weight:700;color:#333;margin-bottom:8px}@media (min-width: 768px){.header h1{font-size:2.5rem}}.main-container{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;width:100%}@media (max-width: 767px){.main-container{flex-direction:column;gap:16px}}.camera-section,.avatar-section{flex:1;min-width:280px;max-width:100%}@media (min-width: 768px){.camera-section,.avatar-section{max-width:500px}}.camera-container{border:2px solid #ddd;border-radius:10px;overflow:hidden;margin-bottom:20px;background:white;position:relative;width:100%;aspect-ratio:4/3}.webcam-feed{width:100%;height:100%;object-fit:cover}.avatar-container{border:2px solid #ddd;border-radius:10px;overflow:hidden;margin-bottom:20px;background:white;text-align:center;min-height:300px;display:flex;align-items:center;justify-content:center}.btn{display:inline-block;padding:12px 24px;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;text-align:center;min-width:120px;margin:4px}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.btn-secondary{background:#6c757d;color:#fff}.btn-success{background:#28a745;color:#fff}.btn-danger{background:#dc3545;color:#fff}@media (min-width: 768px){.container-responsive{padding:0 24px}.grid-responsive{grid-template-columns:repeat(2,1fr);gap:24px}}@media (min-width: 1024px){.container-responsive{padding:0 32px}.grid-responsive{grid-template-columns:repeat(3,1fr);gap:32px}}.flex-responsive{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.modal-responsive{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-content-responsive{background:white;border-radius:12px;padding:24px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;position:relative}@media (min-width: 768px){.modal-content-responsive{padding:32px}}.form-group{margin-bottom:16px}.form-label{display:block;margin-bottom:4px;font-weight:500;color:#333}.form-input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:16px;transition:border-color .3s ease}.form-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #667eea;outline-offset:2px}@media (prefers-contrast: high){*{border-color:currentColor!important}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.loading{display:flex;align-items:center;justify-content:center;padding:40px}.loading:after{content:"";width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{color:#dc3545;background:#f8d7da;border:1px solid #f5c6cb;border-radius:4px;padding:12px;margin:16px 0}.success{color:#155724;background:#d4edda;border:1px solid #c3e6cb;border-radius:4px;padding:12px;margin:16px 0}:root{--mobile-max: 767px;--tablet-min: 768px;--tablet-max: 1023px;--desktop-min: 1024px;--large-desktop-min: 1440px}.container-responsive{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}@media (min-width: 768px){.container-responsive{padding:0 24px}}@media (min-width: 1024px){.container-responsive{padding:0 32px}}.grid-responsive{display:grid;gap:16px;grid-template-columns:1fr}@media (min-width: 768px){.grid-responsive{grid-template-columns:repeat(2,1fr);gap:24px}}@media (min-width: 1024px){.grid-responsive{grid-template-columns:repeat(3,1fr);gap:32px}}.plan-grid{display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 768px){.plan-grid{grid-template-columns:repeat(2,1fr);gap:20px}}@media (min-width: 1024px){.plan-grid{grid-template-columns:repeat(3,1fr);gap:24px}}.btn-responsive{padding:12px 24px;font-size:16px;width:100%;margin-bottom:12px}@media (min-width: 768px){.btn-responsive{width:auto;min-width:160px;margin-bottom:0;margin-right:16px}}@media (min-width: 1024px){.btn-responsive{padding:16px 32px;font-size:18px}}.text-responsive-sm{font-size:12px}.text-responsive-base{font-size:14px}.text-responsive-lg{font-size:16px}.text-responsive-xl{font-size:18px}.text-responsive-2xl{font-size:20px}@media (min-width: 768px){.text-responsive-sm{font-size:13px}.text-responsive-base{font-size:16px}.text-responsive-lg{font-size:18px}.text-responsive-xl{font-size:20px}.text-responsive-2xl{font-size:24px}}@media (min-width: 1024px){.text-responsive-sm{font-size:14px}.text-responsive-base{font-size:16px}.text-responsive-lg{font-size:20px}.text-responsive-xl{font-size:24px}.text-responsive-2xl{font-size:28px}}.flex-responsive{display:flex;flex-direction:column;gap:16px}@media (min-width: 768px){.flex-responsive{flex-direction:row;align-items:center;gap:24px}}.spacing-responsive{padding:16px}@media (min-width: 768px){.spacing-responsive{padding:24px}}@media (min-width: 1024px){.spacing-responsive{padding:32px}}.card-responsive{background:white;border-radius:8px;padding:16px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}@media (min-width: 768px){.card-responsive{padding:24px;border-radius:12px;margin-bottom:20px}}@media (min-width: 1024px){.card-responsive{padding:32px;border-radius:16px;margin-bottom:24px}}.header-responsive{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px}@media (min-width: 768px){.header-responsive{flex-direction:row;align-items:center;justify-content:space-between;padding:20px 24px}}@media (min-width: 1024px){.header-responsive{padding:24px 32px}}.nav-responsive{display:flex;flex-direction:column;width:100%}@media (min-width: 768px){.nav-responsive{flex-direction:row;width:auto;gap:16px}}.reception-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;min-height:100vh;gap:16px}@media (min-width: 1024px){.reception-layout{grid-template-columns:1fr 400px;grid-template-rows:auto 1fr;gap:24px}}.avatar-container-responsive{width:100%;max-width:300px;margin:0 auto}@media (min-width: 768px){.avatar-container-responsive{max-width:400px}}@media (min-width: 1024px){.avatar-container-responsive{max-width:500px}}.chat-container-responsive{height:300px;max-height:50vh}@media (min-width: 768px){.chat-container-responsive{height:400px;max-height:60vh}}@media (min-width: 1024px){.chat-container-responsive{height:500px;max-height:70vh}}.controls-responsive{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 768px){.controls-responsive{grid-template-columns:repeat(2,1fr);gap:16px}}@media (min-width: 1024px){.controls-responsive{grid-template-columns:repeat(3,1fr);gap:20px}}.table-responsive{width:100%;overflow-x:auto;margin:16px 0}.table-responsive table{width:100%;min-width:600px;border-collapse:collapse}@media (min-width: 768px){.table-responsive table{min-width:100%}}.modal-responsive{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.modal-content-responsive{background:white;border-radius:12px;padding:24px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto}@media (min-width: 768px){.modal-content-responsive{padding:32px;border-radius:16px;max-width:800px}}@media (min-width: 1024px){.modal-content-responsive{max-width:1000px}}.hidden-mobile{display:none}@media (min-width: 768px){.hidden-mobile{display:block}}.hidden-desktop{display:block}@media (min-width: 768px){.hidden-desktop{display:none}}@media (hover: none) and (pointer: coarse){.btn-responsive,.controls-responsive button{min-height:48px;font-size:16px}}