:root{--color-primary:#2d5a27;--color-primary-light:#4a8c3f;--color-primary-dark:#1e3d1a;--color-secondary:#f59e0b;--color-secondary-hover:#d97706;--color-background:#f5f5f0;--color-background-gradient:linear-gradient(135deg,#f5f5f0,#e8f5e9 50%,#f5f5f0);--color-card:#fff;--color-text:#1f2937;--color-text-muted:#6b7280;--color-text-light:#9ca3af;--color-error:#dc2626;--color-error-bg:#fef2f2;--color-success:#16a34a;--color-success-bg:#f0fdf4;--color-warning:#f59e0b;--color-mic-active:#ef4444;--color-mic-muted:#9ca3af;--font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--font-size-sm:16px;--font-size-body:18px;--font-size-large:20px;--font-size-heading:28px;--font-size-title:32px;--font-size-icon:64px;--font-size-icon-large:80px;--font-size-icon-xl:100px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height:1.6;--line-height-tight:1.3;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--button-height:56px;--button-min-width:200px;--input-height:56px;--border-radius:16px;--border-radius-sm:12px;--border-radius-lg:20px;--card-shadow:0 4px 20px rgba(0,0,0,.1);--card-shadow-hover:0 8px 30px rgba(0,0,0,.15);--card-max-width:480px;--transition-fast:.15s ease;--transition-normal:.25s ease}*{box-sizing:border-box}body{background:var(--color-background-gradient);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-body);line-height:var(--line-height);margin:0;min-height:100vh}.center{align-items:center;justify-content:center;padding:var(--spacing-lg)}.center,.page-container{display:flex;min-height:100vh}.page-container{background:var(--color-background-gradient);flex-direction:column}.card-elderly{background:var(--color-card);border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);max-width:var(--card-max-width);padding:var(--spacing-xl);text-align:center;transition:box-shadow var(--transition-normal);width:100%}.card-elderly:hover{box-shadow:var(--card-shadow-hover)}.card-icon{display:block;font-size:var(--font-size-icon);margin-bottom:var(--spacing-md)}.card-icon-large{font-size:var(--font-size-icon-large)}.card-icon-large,.card-icon-xl{display:block;margin-bottom:var(--spacing-lg)}.card-icon-xl{font-size:var(--font-size-icon-xl)}.card-title{color:var(--color-primary);font-size:var(--font-size-title);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin:0 0 var(--spacing-sm) 0}.card-description{color:var(--color-text-muted);font-size:var(--font-size-body);margin:0 0 var(--spacing-xl) 0}.form-group{margin-bottom:var(--spacing-lg);text-align:left}.form-label{display:block;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}.form-label,.input-elderly{color:var(--color-text);font-size:var(--font-size-body)}.input-elderly{background:var(--color-card);border:2px solid #e5e7eb;border-radius:var(--border-radius-sm);font-family:var(--font-family);height:var(--input-height);padding:var(--spacing-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.input-elderly::-moz-placeholder{color:var(--color-text-light)}.input-elderly::placeholder{color:var(--color-text-light)}.input-elderly:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2d5a2733;outline:none}.input-elderly:disabled{background:#f3f4f6;cursor:not-allowed}.btn-primary{align-items:center;background:linear-gradient(135deg,var(--color-secondary) 0,var(--color-secondary-hover) 100%);border:none;border-radius:var(--border-radius);color:#fff;cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);height:var(--button-height);justify-content:center;min-width:var(--button-min-width);padding:0 var(--spacing-lg);transition:transform var(--transition-fast),box-shadow var(--transition-fast);width:100%}.btn-primary:hover:not(:disabled){box-shadow:0 8px 25px #f59e0b66;transform:translateY(-2px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{cursor:not-allowed;opacity:.6}.btn-secondary{align-items:center;background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);height:var(--button-height);justify-content:center;min-width:var(--button-min-width);padding:0 var(--spacing-lg);transition:all var(--transition-fast);width:100%}.btn-secondary:hover:not(:disabled){background:var(--color-primary);color:#fff}.btn-secondary:disabled{cursor:not-allowed;opacity:.6}.btn-success{align-items:center;background:linear-gradient(135deg,var(--color-success) 0,#15803d 100%);border:none;border-radius:var(--border-radius);color:#fff;cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);height:var(--button-height);justify-content:center;min-width:var(--button-min-width);padding:0 var(--spacing-lg);transition:transform var(--transition-fast),box-shadow var(--transition-fast);width:100%}.btn-success:hover:not(:disabled){box-shadow:0 8px 25px #16a34a66;transform:translateY(-2px)}.btn-danger{align-items:center;background:linear-gradient(135deg,var(--color-mic-active) 0,#dc2626 100%);border:none;border-radius:var(--border-radius);color:#fff;cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);height:var(--button-height);justify-content:center;min-width:var(--button-min-width);padding:0 var(--spacing-lg);transition:transform var(--transition-fast),box-shadow var(--transition-fast);width:100%}.btn-danger:hover:not(:disabled){box-shadow:0 8px 25px #ef444466;transform:translateY(-2px)}.btn-muted{align-items:center;background:var(--color-mic-muted);border:none;border-radius:var(--border-radius);color:#fff;cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);height:var(--button-height);justify-content:center;min-width:var(--button-min-width);padding:0 var(--spacing-lg);transition:all var(--transition-fast);width:100%}.btn-muted:hover:not(:disabled){background:#6b7280}.btn-icon{font-size:var(--font-size-large)}.status-bar{align-items:center;background:#fff;border-radius:var(--border-radius);box-shadow:0 2px 10px #00000014;display:flex;justify-content:space-between;margin-bottom:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg)}.status-indicator{align-items:center;display:inline-flex;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);gap:var(--spacing-sm)}.status-dot{border-radius:50%;flex-shrink:0;height:12px;width:12px}.status-indicator.connected .status-dot{background:var(--color-success);box-shadow:0 0 8px #16a34a80}.status-indicator.connected{color:var(--color-success)}.status-indicator.connecting .status-dot{animation:pulse 1.5s ease-in-out infinite;background:var(--color-warning)}.status-indicator.connecting{color:var(--color-warning)}.status-indicator.mic-active .status-dot{animation:pulse 1s ease-in-out infinite;background:var(--color-mic-active)}.status-indicator.mic-active{color:var(--color-mic-active)}.status-indicator.mic-muted .status-dot{background:var(--color-mic-muted)}.status-indicator.mic-muted{color:var(--color-text-muted)}.status-indicator.error .status-dot{background:var(--color-error)}.status-indicator.error{color:var(--color-error)}.participant-count{align-items:center;color:var(--color-text);display:inline-flex;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);gap:var(--spacing-xs)}.participant-count .count-number{color:var(--color-primary);font-size:var(--font-size-large);font-weight:var(--font-weight-bold)}.error-message{align-items:center;background:var(--color-error-bg);border-radius:var(--border-radius-sm);color:var(--color-error);display:flex;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-md);padding:var(--spacing-md)}.error-message .error-icon{flex-shrink:0;font-size:var(--font-size-large)}.success-message{background:var(--color-success-bg);border-radius:var(--border-radius-sm);color:var(--color-success);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);justify-content:center;margin-top:var(--spacing-md);padding:var(--spacing-md)}.mic-status,.success-message{align-items:center;display:flex;gap:var(--spacing-sm)}.mic-status{border-radius:var(--border-radius);flex-direction:column;margin:var(--spacing-md) 0;padding:var(--spacing-lg)}.mic-status.active{background:#ef44441a;border:2px solid var(--color-mic-active)}.mic-status.muted{background:#9ca3af1a;border:2px solid var(--color-mic-muted)}.mic-status-text{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold)}.mic-status.active .mic-status-text{color:var(--color-mic-active)}.mic-status.muted .mic-status-text{color:var(--color-text-muted)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes pulse-icon{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pulse-animation{animation:pulse-icon 1.5s ease-in-out infinite}.loading-spinner{animation:spin 1s ease-in-out infinite;border:3px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:24px;width:24px}.loading-spinner.dark{border-color:#2d5a274d;border-top-color:var(--color-primary)}@keyframes spin{to{transform:rotate(1turn)}}@media(max-width:768px){:root{--card-max-width:100%}.center{padding:var(--spacing-md)}.card-elderly{border-radius:var(--border-radius);max-width:100%;padding:var(--spacing-lg)}.card-title{font-size:var(--font-size-heading)}.card-icon{font-size:56px}.card-icon-large{font-size:64px}.card-icon-xl{font-size:80px}.status-bar{flex-direction:column;gap:var(--spacing-sm);max-width:100%!important;text-align:center}.btn-danger,.btn-muted,.btn-primary,.btn-secondary,.btn-success{min-width:100%}.error-message{flex-direction:column;text-align:center}.mic-status{padding:var(--spacing-md)}}@media(max-width:375px){.center{padding:var(--spacing-sm)}.card-elderly{padding:var(--spacing-md)}.card-title{font-size:24px}.card-description{font-size:var(--font-size-sm)}}.text-center{text-align:center}.text-primary{color:var(--color-primary)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-muted{color:var(--color-text-muted)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.participant-list{text-align:left;width:100%}.participant-list-title{color:var(--color-text);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-sm) 0}.participant-list-items{background:var(--color-background);border-radius:var(--border-radius-sm);list-style:none;margin:0;max-height:200px;overflow-y:auto;padding:0;padding:var(--spacing-sm)}.participant-item{align-items:center;background:#fff;border-radius:var(--border-radius-sm);color:var(--color-text);display:flex;font-size:var(--font-size-body);gap:var(--spacing-xs);margin-bottom:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}.participant-item:last-child{margin-bottom:0}.participant-item:before{content:"👤";font-size:var(--font-size-large)}.participant-item.empty{color:var(--color-text-muted);font-style:italic}.participant-item.empty:before{content:""}