:root{--color-bg: #eef1f4;--color-surface: #ffffff;--color-surface-elevated: #f7f9fb;--color-text: #1c2430;--color-text-muted: #5b6572;--color-border: #d0d7de;--color-primary: #1a56db;--color-primary-hover: #1446b8;--color-destructive: #b42318;--color-destructive-hover: #912018;--color-success: #1b7a3f;--color-warning: #b45309;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--shadow-sm: 0 1px 2px rgba(28, 36, 48, .06);--shadow-md: 0 4px 14px rgba(28, 36, 48, .08);--focus-ring: #1a56db;--touch-min: 44px;--app-max-width: 52rem;color:var(--color-text);background:var(--color-bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%;text-size-adjust:100%}*,*:before,*:after{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;min-height:100vh;min-height:100dvh;background:var(--color-bg);color:var(--color-text);overflow-x:hidden}#root{min-height:100%;min-height:100vh;min-height:100dvh}img,video{max-width:100%;height:auto}:focus{outline:none}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.app{width:100%;max-width:var(--app-max-width);margin:0 auto;padding:max(var(--space-4),env(safe-area-inset-top,0px)) max(var(--space-4),env(safe-area-inset-right,0px)) max(var(--space-8),env(safe-area-inset-bottom,0px)) max(var(--space-4),env(safe-area-inset-left,0px));min-height:100vh;min-height:100dvh;overflow-x:hidden}.app--guest{display:flex;flex-direction:column}.app--guest .panel-auth{width:100%;max-width:24rem;margin-left:auto;margin-right:auto;box-shadow:var(--shadow-md)}.app-header{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.app-header-brand h1{margin:0;font-size:clamp(1.35rem,4vw,1.75rem);line-height:1.2;overflow-wrap:anywhere}.app-title{margin:var(--space-1) 0 0;font-size:1.05rem;font-weight:600;color:var(--color-text)}.subtitle{margin:var(--space-1) 0 0;color:var(--color-text-muted);font-size:.95rem}.app-header-account{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.app-header-user{min-width:0}.app-header-user-label{margin:0;font-size:.8rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.02em}.app-header-phone{margin:var(--space-1) 0 0;font-size:1.05rem;font-weight:600;overflow-wrap:anywhere;word-break:break-word}.app-header-meta{margin:var(--space-1) 0 0;color:var(--color-text-muted);font-size:.9rem;overflow-wrap:anywhere;word-break:break-word}.app-header-account .button-logout{width:100%}.app-header-actions{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.app-header-actions>.button-link,.app-header-actions>button{width:100%}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}.panel h2{margin:0 0 var(--space-3);font-size:1.1rem}.panel h3{margin:var(--space-4) 0 var(--space-2);font-size:.95rem;color:var(--color-text-muted)}.panel h3:first-child{margin-top:0}.panel-auth-lead{margin:0 0 var(--space-4);color:var(--color-text-muted);font-size:.95rem}.status-card{border-left:4px solid var(--color-border)}.status-card--none{border-left-color:var(--color-text-muted)}.status-card--waiting{border-left-color:var(--color-warning)}.status-card--accepted{border-left-color:var(--color-success)}.status-card--error{border-left-color:var(--color-destructive)}.status-card-summary{margin:0 0 var(--space-4);padding:var(--space-3);border-radius:var(--radius-sm);background:var(--color-surface-elevated);border:1px solid var(--color-border)}.status-card-label{margin:0;font-size:.8rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.02em}.status-card-value{margin:var(--space-1) 0 0;font-size:1.15rem;font-weight:700;overflow-wrap:anywhere;word-break:break-word}.status-card-hint{margin:var(--space-2) 0 0;color:var(--color-text-muted);font-size:.9rem;overflow-wrap:anywhere}.banner{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);margin-bottom:var(--space-4);font-size:.95rem;overflow-wrap:anywhere;word-break:break-word}.banner-error{background:#fdecea;border:1px solid #f5c2c0;color:#8a1f17}.banner-info{background:#e8f4fd;border:1px solid #b6d9f5;color:#0f4c75}.status{font-weight:600;text-transform:uppercase;font-size:.85rem}.status-ok,.status-on,.status-connected,.status-camera-on,.status-webrtc-connected,.status-accepted{color:var(--color-success)}.status-error,.status-camera-error,.status-webrtc-failed,.status-webrtc-closed{color:var(--color-destructive)}.status-unknown,.status-off,.status-disconnected,.status-ended,.status-cancelled,.status-none,.status-camera-off,.status-webrtc-idle{color:var(--color-text-muted)}.status-connecting,.status-waiting,.status-camera-starting,.status-webrtc-connecting{color:var(--color-warning)}.status-none{text-transform:none;font-weight:500}.status-list{display:grid;gap:var(--space-2);margin:0}.status-list div{display:grid;grid-template-columns:minmax(7rem,9.5rem) minmax(0,1fr);gap:var(--space-2);align-items:baseline}.status-list dt{margin:0;font-weight:600;color:var(--color-text-muted);font-size:.9rem}.status-list dd{margin:0;min-width:0;overflow-wrap:anywhere;word-break:break-word}.form-row{margin-bottom:var(--space-3)}.form-row label{display:block;margin-bottom:var(--space-1);font-size:.9rem;font-weight:500}.form-row input,.form-row select{width:100%;min-height:var(--touch-min);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:1rem}.form-row input:disabled,.form-row input[readonly],.form-row select:disabled{background:var(--color-surface-elevated);color:var(--color-text-muted);cursor:not-allowed}.field-error{margin:var(--space-1) 0 0;color:var(--color-destructive);font-size:.875rem;overflow-wrap:anywhere}.panel-profile{max-width:28rem}.profile-account-actions,.profile-security{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.profile-security h3{margin:0 0 var(--space-2);font-size:1.05rem;font-weight:600}.profile-security-lead{margin:0 0 var(--space-3);color:var(--color-text-muted);font-size:.9rem;overflow-wrap:anywhere}.profile-security-history{margin-bottom:var(--space-4)}.profile-security-history h4{margin:0 0 var(--space-3);font-size:1rem;font-weight:600}.security-event-list{list-style:none;margin:0;padding:0;min-width:0}.security-event-item{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);min-width:0}.security-event-item:last-child{border-bottom:none;padding-bottom:0}.security-event-item:first-child{padding-top:0}.security-event-label{font-weight:500;overflow-wrap:anywhere;min-width:0}.security-event-date{color:var(--color-text-muted);font-size:.9rem;overflow-wrap:anywhere;min-width:0}@media(min-width:480px){.security-event-item{flex-direction:row;justify-content:space-between;align-items:baseline;gap:var(--space-4)}.security-event-label{flex:1 1 auto}.security-event-date{flex:0 0 auto;text-align:right;white-space:nowrap}}.profile-logout-all-confirm{padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-elevated)}.profile-logout-all-confirm h4{margin:0 0 var(--space-2);font-size:1rem;font-weight:600}.profile-logout-all-confirm p{margin:0 0 var(--space-3);color:var(--color-text-muted);font-size:.95rem;overflow-wrap:anywhere}.register-note{margin:0 0 var(--space-4);padding:var(--space-3);border-radius:var(--radius-sm);background:var(--color-surface-elevated);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:.9rem;overflow-wrap:anywhere}.register-phone{overflow-wrap:anywhere;word-break:break-word}.register-agreements{margin:0 0 var(--space-4);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);min-width:0}.register-agreements-legend{padding:0 var(--space-1);font-size:.9rem;font-weight:600}.checkbox-row{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-2);min-width:0}.checkbox-row input[type=checkbox]{flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--color-primary)}.checkbox-row label{flex:1 1 auto;min-width:0;font-size:.95rem;line-height:1.4;overflow-wrap:anywhere}.button-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.button-row--stack{flex-direction:column;align-items:stretch}.button-row--stack>button,.button-row--stack>.button-link{width:100%}button{min-height:var(--touch-min);min-width:var(--touch-min);padding:var(--space-2) var(--space-4);border:1px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;font-size:.95rem;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}button:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}button:disabled{opacity:.55;cursor:not-allowed;background:#9aa7b8;border-color:#9aa7b8;color:#f3f5f7}button.button-primary{background:var(--color-primary);border-color:var(--color-primary);font-weight:600}button.button-primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}button.button-primary:disabled{background:#9aa7b8;border-color:#9aa7b8;color:#f3f5f7}button.button-secondary{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-primary)}button.button-secondary:hover:not(:disabled){background:#eef4ff}button.button-secondary:disabled{background:var(--color-surface-elevated);color:var(--color-text-muted);border-color:var(--color-border)}button.button-danger{background:var(--color-destructive);border-color:var(--color-destructive);color:#fff;font-weight:600}button.button-danger:hover:not(:disabled){background:var(--color-destructive-hover);border-color:var(--color-destructive-hover)}button.button-danger:disabled{background:#d4a19c;border-color:#d4a19c;color:#fff8f7}.button-link{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--touch-min);min-width:var(--touch-min);padding:var(--space-2) var(--space-4);border:1px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-primary);font-size:.95rem;font-weight:500;text-decoration:none;text-align:center;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}a.button-link:hover{background:#eef4ff}.button-link--disabled{opacity:.55;cursor:not-allowed;pointer-events:none;color:var(--color-text-muted);border-color:var(--color-border);background:var(--color-surface-elevated)}.user-block{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.user-details,.call-details,.history-stats{display:grid;gap:var(--space-2);margin:0}.user-details div,.call-details div,.history-stats div{display:grid;grid-template-columns:minmax(6.5rem,8.75rem) minmax(0,1fr);gap:var(--space-2)}.user-details dt,.call-details dt,.history-stats dt{margin:0;font-weight:600;color:var(--color-text-muted)}.user-details dd,.call-details dd,.history-stats dd{margin:0;min-width:0;overflow-wrap:anywhere;word-break:break-word}.muted{color:var(--color-text-muted);margin:0;overflow-wrap:anywhere}.auto-refresh-status{margin:var(--space-3) 0 0;font-size:.85rem;color:var(--color-text-muted);overflow-wrap:anywhere}.details-block{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.details-block .auto-refresh-status:first-child{margin-top:0}.history-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}.history-list li{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);background:var(--color-surface-elevated)}.video-call-layout{display:grid;grid-template-columns:1fr;gap:var(--space-4)}.video-stage{min-width:0}.video-remote .camera-preview,.video-local .camera-preview{margin-bottom:0;height:100%}.video-remote .camera-preview{background:#0f1419;color:#e8eef4;border-color:#2a3440}.video-remote .camera-preview h3,.video-remote .camera-preview p{color:#e8eef4}.video-remote .status-webrtc-idle,.video-remote .status-webrtc-closed{color:#a8b3c0}.video-local .camera-preview{background:var(--color-surface-elevated);border-style:dashed}.video-frame{position:relative;width:100%;aspect-ratio:4 / 3;margin:var(--space-2) 0;border-radius:var(--radius-sm);background:#000;overflow:hidden}.camera-video{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;border-radius:0;background:#000;object-fit:cover}.video-remote .camera-video,.video-local .camera-video{width:100%;max-width:none;height:100%}.media-controls{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-elevated)}.media-controls .button-row{margin-top:var(--space-3)}.camera-preview{margin:0;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-elevated)}.camera-preview h3,.camera-preview p{margin:0 0 var(--space-2)}.camera-error{color:var(--color-destructive);font-size:.85rem;overflow-wrap:anywhere}.call-controls{position:sticky;bottom:0;z-index:5;margin-bottom:var(--space-4);padding-bottom:max(var(--space-4),env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--color-bg) 70%,rgba(238,241,244,.92))}.call-controls .panel{margin-bottom:0;box-shadow:var(--shadow-md)}.call-controls .button-row{gap:var(--space-3)}.call-controls .button-row>button{flex:1 1 calc(50% - var(--space-3));min-width:min(100%,9.5rem)}.call-controls .button-hint{flex:1 1 100%}@media(min-width:480px){.app-header-account{flex-direction:row;align-items:center;justify-content:space-between}.app-header-account .button-logout{width:auto;flex-shrink:0}.app-header-actions{flex-direction:row;width:auto;flex-shrink:0}.app-header-actions>.button-link,.app-header-actions>button{width:auto}.button-row--stack{flex-direction:row}.button-row--stack>button,.button-row--stack>.button-link{width:auto;flex:1 1 auto}.status-list div,.user-details div,.call-details div,.history-stats div{grid-template-columns:minmax(8rem,10rem) minmax(0,1fr)}}@media(min-width:768px){.app{padding:max(var(--space-6),env(safe-area-inset-top,0px)) max(var(--space-5),env(safe-area-inset-right,0px)) max(var(--space-8),env(safe-area-inset-bottom,0px)) max(var(--space-5),env(safe-area-inset-left,0px))}.app-header{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}.app-header-account{max-width:22rem}.video-call-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}.call-controls{position:static;background:none;padding-bottom:0}.call-controls .button-row>button{flex:0 1 auto}}@media(max-width:359px){.status-list div,.user-details div,.call-details div,.history-stats div{grid-template-columns:1fr;gap:var(--space-1)}}