*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg-page:#FEF7EF;--bg-header:#FFFFFF;--bg-content:transparent;--bg-video-btn:linear-gradient(rgb(137,187,249),rgb(62,135,247));--bg-video-btn-hover:linear-gradient(rgb(144,180,227),rgb(53,112,214));--bg-orange-btn:linear-gradient(rgb(255,163,93),rgb(239,132,50));--bg-orange-btn-hover:linear-gradient(rgb(255,193,145),rgb(224,111,25));--bg-error:rgb(253,72,61);--bg-warning:rgb(253,247,239);--color-text:rgb(0,0,0);--color-text-secondary:rgb(66,64,65);--color-text-muted:rgb(157,152,143);--color-text-white:rgb(255,255,255);--color-link:rgb(11,7,255);--color-border:rgb(200,201,204);--color-orange:rgb(239,132,50);--color-red:rgb(253,72,61);--color-blue:rgb(65,120,227);--color-blue-light:rgb(197,221,252);--font-primary:"PingFang SC",-apple-system,"system-ui","Helvetica Neue",Helvetica,Arial,"Microsoft YaHei UI","Microsoft YaHei","Segoe UI",Roboto,sans-serif;--font-secondary:"Inter",sans-serif;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--header-height:76px}body,html{height:100%;font-family:var(--font-primary);background:var(--bg-page);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:var(--color-link);text-decoration:none}button,input,textarea{font-family:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.primary-button{background:var(--bg-video-btn);color:var(--color-text-white);border:none;border-radius:var(--radius-sm);padding:5px 10px;cursor:pointer;font-weight:500;transition:background .2s}.primary-button:hover{background:var(--bg-video-btn-hover)}.secondary-button{background:var(--bg-orange-btn);color:var(--color-text-white);border:none;border-radius:var(--radius-sm);padding:5px 10px;cursor:pointer;font-weight:500;transition:background .2s}.secondary-button:hover{background:var(--bg-orange-btn-hover)}.header-btn{padding:10px 16px;font-size:15px}.header-root{border-bottom:1px solid var(--color-border);background:var(--bg-header);position:-webkit-sticky;position:sticky;top:0;z-index:50;height:var(--header-height)}.header-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:100%}.header-logo-container{display:flex;align-items:center;gap:12px}.header-logo-link{display:flex;flex-direction:column}.header-logo-title{font-size:28px;font-weight:800;color:var(--color-text);line-height:1}.header-logo-subtitle{font-size:13px;color:var(--color-text-secondary);font-weight:500;margin-top:2px}.header-desktop-nav{display:none;align-items:center;gap:12px}.header-mobile-controls{display:flex;align-items:center;gap:12px}.header-hamburger-btn{background:transparent;border:none;padding:8px;color:var(--color-text)}.header-avatar,.header-hamburger-btn{cursor:pointer;display:flex;align-items:center;justify-content:center}.header-avatar{width:36px;height:36px;border-radius:50%;background:var(--color-border)}.header-mobile-menu{position:absolute;top:var(--header-height);left:0;right:0;background:var(--bg-header);border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;padding:16px;gap:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);z-index:40}.header-mobile-menu .header-btn{width:100%;justify-content:center}@media (min-width:768px){.header-desktop-nav{display:flex}.header-hamburger-btn,.header-mobile-menu{display:none}}.match-root{display:flex;flex-direction:column;width:100%;height:calc(100dvh - var(--header-height));overflow:hidden;background:var(--bg-page)}@media (min-width:768px){.match-root{flex-direction:row}}.match-video-panel{position:relative;width:100%;flex:0 0 45%;min-height:0;background:#111;overflow:hidden}@media (min-width:768px){.match-video-panel{flex:1 1;height:100%}}.match-video-remote{width:100%;height:100%;object-fit:cover;display:block}.match-video-waiting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;background:rgba(0,0,0,.5)}.match-video-local-pip{position:absolute;bottom:8px;right:8px;width:clamp(80px,25%,140px);aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:#000;border:2px solid rgba(255,255,255,.3);z-index:10}.match-video-local-pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}.match-chat-panel{display:flex;flex-direction:column;background:#fff;flex:1 1;min-height:0;border-top:1px solid var(--color-border);overflow:hidden}@media (min-width:768px){.match-chat-panel{width:380px;flex:0 0 380px;border-top:none;border-left:1px solid var(--color-border);height:100%}}@media (min-width:1280px){.match-chat-panel{width:420px;flex:0 0 420px}}.match-chat-panel--full{width:100%!important;flex:1 1!important;border:none!important}.match-chat-history{flex:1 1;overflow-y:auto;padding:12px 16px;min-height:0}.match-chat-intro{margin-bottom:12px;color:var(--color-text-secondary);font-size:14px}.match-controls{display:flex;gap:6px;padding:10px 12px;background:#f5f5f5;border-top:1px solid var(--color-border);align-items:flex-end;flex-shrink:0}.match-btn-stop{flex-shrink:0;min-width:72px;min-height:44px;padding:8px 14px;font-size:15px;font-weight:600;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}.match-btn-stop:active{background:#eee}.match-textarea-wrap{flex:1 1;display:flex;min-width:0}.match-textarea{flex:1 1;resize:none;padding:10px;border:1px solid var(--color-border);border-radius:var(--radius-sm) 0 0 var(--radius-sm);font-family:inherit;font-size:15px;min-height:44px;max-height:100px;line-height:1.4}.match-textarea:disabled{background:#fafafa;color:var(--color-text-muted)}.match-btn-send{flex-shrink:0;min-width:64px;min-height:44px;padding:8px 14px;font-weight:700;font-size:15px;background:#fff;border:1px solid var(--color-border);border-left:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;cursor:pointer}.match-btn-send:disabled{color:var(--color-text-muted);cursor:default}.match-btn-send:not(:disabled):active{background:#eee}.chat-messages{display:flex;flex-direction:column;gap:6px}.chat-message{display:flex;font-size:15px;line-height:1.5;gap:4px}.chat-message__label--me{color:var(--color-blue);font-weight:700;flex-shrink:0}.chat-message__label--stranger{color:var(--color-red);font-weight:700;flex-shrink:0}.chat-message__text{color:var(--color-text);word-break:break-word}.chat-typing{font-size:13px;color:var(--color-text-muted);font-style:italic}