:root{--side-width: 360px;--header-height: 47px}html,body,#root{height:100%;margin:0;font-family:Arial,sans-serif;overflow-x:hidden}.app-root{min-height:100vh;display:flex;flex-direction:column}.container{display:flex;flex:1}.site-header{position:sticky;top:0;z-index:100;height:var(--header-height);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(90deg,#0d1117,#111827);color:#fff;box-shadow:0 2px 8px #0003;overflow:hidden}.site-header .logo a{color:#fff;font-weight:600;text-decoration:none;font-size:18px}.site-header .sitemap{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;white-space:nowrap}.site-header .sitemap a{color:#ffffffd9;text-decoration:none;font-size:14px}.site-header .hamburger{display:none}.site-header .hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px}.side{width:var(--side-width);padding:12px;box-sizing:border-box;background:#f4f4f4;overflow:auto}.side h2{font-size:18px;margin:0 0 8px}.side textarea{width:100%;height:160px;margin-bottom:8px}.side input[type=range]{width:100%}.preview{flex:1;display:flex;align-items:stretch;justify-content:center;height:100%;background:#000}.tele-wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative}.tele-controls{padding:8px;z-index:3}.tele-container{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;position:relative;height:calc(100vh - var(--header-height) - 160px)}.tele-content{width:100%;padding:40px;line-height:1.6;box-sizing:border-box}.tele-content .line{margin:8px 0}.ad-slot{margin:12px 0 18px;border:1px dashed #ccc;padding:8px;background:#fff;text-align:center}.ad-slot .ad-inner{height:90px;display:flex;align-items:center;justify-content:center;color:#666}.tele-wrapper .pointer{position:absolute;left:12px;top:50%;transform:translateY(-50%) rotate(180deg);width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:24px solid #fff;z-index:2;opacity:.95;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));transition:border-right-color .26s ease,filter .2s ease}.tele-wrapper .tele-content{padding-left:80px}.tele-wrapper.mirror .pointer{left:auto;right:12px;transform:translateY(-50%) rotate(180deg) scaleX(-1)}.tele-wrapper.mirror .tele-content{padding-left:40px;padding-right:80px}@media (max-width: 820px){:root{--side-width: 100%}.container{flex-direction:column;padding:0}.side{width:100%}.side textarea{height:120px}.preview{flex:none;background:#000;width:100%;justify-content:flex-start}.tele-container{height:58vh;width:100%}.tele-wrapper,.tele-content{width:100%}.tele-wrapper .tele-content{padding-left:80px}.tele-wrapper.mirror .tele-content{padding-right:80px}}@media (max-width: 480px){.site-header{height:auto;padding:6px 10px;overflow:visible;align-items:flex-start;position:sticky}.site-header .logo a{font-size:16px}.site-header .hamburger{display:flex;flex-direction:column;justify-content:space-between;width:28px;height:20px;margin-left:auto;background:transparent;border:none;cursor:pointer}.site-header .sitemap{display:none;position:absolute;left:0;right:0;top:100%;background:linear-gradient(90deg,#0d1117,#111827);border-top:1px solid #1f2937;padding:8px 12px;gap:10px;flex-direction:column;white-space:normal}.site-header .sitemap.open{display:flex}}.local-preview{position:absolute;right:12px;top:12px;width:180px;max-height:120px;border:2px solid rgba(255,255,255,.08);z-index:60}.recorded-area video{box-shadow:0 4px 12px #00000080;border-radius:6px}.recordings-modal{box-shadow:0 8px 24px #0009;border-radius:6px}.tele-wrapper:fullscreen{width:100vw!important;height:100vh!important}.tele-wrapper:fullscreen .tele-controls{display:none}.tele-wrapper:fullscreen .tele-container{flex:1 1 auto;max-height:none;height:100vh}.tele-wrapper:-webkit-full-screen{width:100vw!important;height:100vh!important}.tele-wrapper:-webkit-full-screen .tele-controls{display:none}.tele-wrapper:-ms-fullscreen{width:100vw!important;height:100vh!important}.tele-wrapper:-ms-fullscreen .tele-controls{display:none}.demo-script{position:absolute;top:12px;left:50%;transform:translate(-50%);max-width:820px;width:calc(100% - 160px);background:#000000b3;color:#fff;padding:12px 16px;border-radius:8px;z-index:80;cursor:pointer;line-height:1.4;box-shadow:0 6px 20px #00000080;font-size:13px}.demo-script div{margin-bottom:6px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;backdrop-filter:blur(6px) saturate(115%);-webkit-backdrop-filter:blur(6px) saturate(115%);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{position:relative;width:92vw;max-width:440px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #00000059;padding:20px}.modal-close{position:absolute;right:10px;top:8px;border:none;background:transparent;font-size:24px;cursor:pointer}.auth-card{width:100%}.report-fullpage{height:calc(100vh - var(--header-height));display:flex;align-items:flex-start;justify-content:center;width:100%;flex:1 1 auto;padding:40px 24px 24px;box-sizing:border-box;overflow:hidden}.report-card{border:1px solid #e5e7eb;border-radius:12px;background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 12px 36px #0000001a;padding:24px;max-width:900px;margin:0 auto}.report-card .rf-hero{margin:-24px -24px 16px;padding:18px 24px;border-top-left-radius:12px;border-top-right-radius:12px;background:radial-gradient(1200px 320px at 10% -40%,rgba(99,102,241,.25),transparent),linear-gradient(135deg,#f5e6ff,#e6f0ff)}.rf-hero-title{font-size:24px;font-weight:700;color:#111827;display:flex;align-items:center;gap:10px}.rf-hero-sub{font-size:13px;color:#4b5563;margin-top:4px}.rf-badge{font-size:22px}.report-card .rf-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.report-card .rf-title{font-size:22px;font-weight:700;color:#111827}.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rf-field{display:flex;flex-direction:column}.rf-label{font-size:12px;color:#374151;margin-bottom:4px}.rf-input-wrap{display:flex;align-items:center;gap:8px;border:1px solid #d1d5db;border-radius:8px;padding:8px 10px;background:#fff}.rf-input-wrap .rf-icon{color:#6b7280}.rf-input-wrap input{border:none;outline:none;font-size:15px;flex:1}.rf-input,.rf-textarea{border:1px solid #d1d5db;border-radius:8px;padding:12px 14px;font-size:15px;outline:none;background:#fff}.rf-input:focus,.rf-textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb26}.rf-textarea{resize:vertical;min-height:120px;grid-column:1 / -1}.rf-select{border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;font-size:15px;background:#fff}.rf-attach{grid-column:1 / -1;display:flex;align-items:center;gap:10px;border:1px dashed #d1d5db;border-radius:10px;padding:10px 12px;color:#4b5563;background:#fff}.rf-attach input[type=file]{display:none}.rf-attach .rf-attach-btn{border:none;background:#eef2ff;color:#1e40af;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:600}.rf-actions{display:flex;align-items:center;gap:10px;margin-top:10px}.rf-btn{border:none;background:linear-gradient(90deg,#2563eb,#1e40af);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;cursor:pointer}.rf-btn:disabled{filter:grayscale(.3);opacity:.6;cursor:not-allowed}.rf-status{font-size:12px}.rf-footer{margin-top:12px;font-size:12px;color:#6b7280;display:flex;align-items:center;gap:8px}.footer-social-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;transition:outline .2s,color .2s;color:#fff}.footer-social-icon:hover{outline:2px solid #38bdf8;outline-offset:2px;background:none;color:#38bdf8}.site-footer a{transition:color .18s,background .18s}.site-footer a:hover{color:#38bdf8!important}