:root{color-scheme:light;--primary: #6a5acd;--bg: #f5f7fb;--panel: #ffffff;--border: #e7ebf3;--text: #1f2329;--subtext: #707785;--success: #23a55a;--warn: #f59e0b;--danger: #ef4444}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,sans-serif;background:transparent;color:var(--text)}body{min-height:100vh;overflow:hidden;background:transparent}#app{min-height:100vh;height:100vh;overflow:hidden;background:transparent}a{color:inherit}.app-shell{display:grid;grid-template-columns:320px 1fr;min-height:100vh}.side-panel,.content-panel{padding:24px}.side-panel{border-right:1px solid var(--border);background:#f8f9fe}.content-panel{display:flex;flex-direction:column;gap:20px}.brand-card,.panel-card,.call-stage-card,.log-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 30px #5a6ca30f}.call-stage-card.main-stage{position:relative;border-radius:0;border:none;box-shadow:none;background:transparent}.brand-card,.panel-card{padding:20px;margin-bottom:16px}.brand-card{display:flex;gap:14px;align-items:center}.brand-logo{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7c6cff,var(--primary))}.brand-card h1,.panel-card h2,.call-stage-card h2,.log-card h2{margin:0}.brand-card p,.panel-card p,.tips-box,.key-value-list,.log-output,.eyebrow{color:var(--subtext)}#call-status-text,#sdk-status-text{margin:12px 0 0;line-height:1.6}.key-value-list{margin:14px 0 0}.key-value-list div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed #edf0f6}.key-value-list div:last-child{border-bottom:none}.key-value-list dt{font-weight:600}.key-value-list dd{margin:0;text-align:right}.button-row{display:flex;gap:10px;margin-top:12px}button{flex:1;min-height:40px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.96);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}button:hover{transform:translateY(-1px);box-shadow:0 8px 18px #5a6ca314}button.primary{border-color:transparent;background:var(--primary);color:#fff}button.primary:hover,button.warn:hover,button.danger:hover{opacity:.94}button.danger{border-color:transparent;background:var(--danger);color:#fff}button.secondary{background:rgba(255,255,255,.9)}button.warn{border-color:transparent;background:var(--warn);color:#fff}button[hidden]{display:none}button:disabled{cursor:not-allowed;opacity:.6}.call-stage-card,.log-card{padding:24px}.tuicallkit-wrapper{margin-top:0;height:min(70vh,720px);min-height:560px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#eef2ff}.tuicallkit-host{position:relative;width:100%;height:100%}.tuicallkit-host>*{width:100%;height:100%}.tuicallkit-host video,.tuicallkit-host canvas{max-width:100%;max-height:100%}.call-stage-header,.log-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.eyebrow{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.12em}.status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:88px;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;background:#eef2ff;color:var(--primary)}.status-badge.connected{background:rgba(35,165,90,.12);color:var(--success)}.status-badge.connecting,.status-badge.ringing,.status-badge.incoming{background:rgba(245,158,11,.12);color:var(--warn)}.status-badge.ended{background:rgba(239,68,68,.12);color:var(--danger)}.tips-box{margin-top:18px;padding:14px 16px;border-radius:14px;background:#f7f8fd;border:1px dashed #d8def0;line-height:1.7}.log-output{margin:16px 0 0;padding:14px;min-height:200px;max-height:320px;overflow:auto;border-radius:14px;background:#0f172a;color:#d7e2ff;font-size:12px;line-height:1.7}@media (max-width: 1080px){.app-shell{grid-template-columns:1fr}.side-panel{border-right:none;border-bottom:1px solid var(--border)}}.call-page{display:flex;flex-direction:column;gap:0;min-height:100vh;height:100vh;padding:0;background:transparent}.call-page.video-theme,.call-page.audio-theme{background:transparent}.brand-chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(106,90,205,.12);color:var(--primary);font-size:12px;font-weight:700;letter-spacing:.08em}.video-theme .brand-chip{background:rgba(56,189,248,.14);color:#2563eb}.main-stage{padding:0;height:100vh}.tuicallkit-wrapper{margin-top:0;height:100vh;min-height:100vh;border-radius:0;overflow:hidden;border:none;background:transparent;box-shadow:none}.tuicallkit-host .TUICallKit-desktop{border-radius:12px!important;overflow:hidden;background:transparent}.float-window-container.float.pc{position:fixed!important;top:10px!important;left:50%!important;width:168px!important;height:56px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;transform:translate(-50%)!important;z-index:9999!important}.float-window-container.float.pc .float-control-panel{margin:0!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 28px #0f172a38}@media (max-width: 960px){.call-page{padding:0}}