.webcam-grid{display:grid;grid-template-columns:1fr 320px;gap:20px}@media (max-width:900px){.webcam-grid{grid-template-columns:1fr}}.video-card{background:var(--upcard);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);overflow:hidden;border:1px solid var(--border)}.video-wrapper{position:relative;background:#000;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}#webcamVideo{width:100%;height:100%;object-fit:cover;display:none;transform:scaleX(-1)}#webcamCanvas{width:100%;height:100%;object-fit:cover;display:none;position:absolute;top:0;left:0}.video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;text-align:center}.video-placeholder .cam-icon{width:72px;height:72px;background:rgb(99 102 241 / .12);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--primary-color)}.video-placeholder p{color:#6b7280;font-size:.88rem;max-width:220px}.video-placeholder .hint{font-size:.78rem;color:#9ca3af;margin-top:-8px}#filterCanvas{position:absolute;top:0;left:0;width:100%;height:100%}.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}.flash.snap{animation:snapFlash 0.4s ease-out}@keyframes snapFlash{0%{opacity:.8}100%{opacity:0}}.rec-badge{position:absolute;top:12px;left:12px;background:rgb(239 68 68 / .9);color:#fff;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:20px;display:none;align-items:center;gap:6px}.rec-badge.active{display:flex}.rec-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:blink 1s infinite}@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}.mirror-badge{position:absolute;top:12px;right:12px;background:rgb(99 102 241 / .85);color:#fff;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:20px;display:none}.mirror-badge.active{display:block}.stats-overlay{position:absolute;bottom:10px;left:10px;background:rgb(0 0 0 / .55);color:#fff;font-size:.7rem;padding:4px 10px;border-radius:8px;display:none;gap:12px}.stats-overlay.active{display:flex}.video-controls{padding:14px 16px;border-top:1px solid var(--divider);display:flex;flex-wrap:wrap;gap:10px;align-items:center}.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);border:none;font-family:inherit;font-size:.83rem;font-weight:500;cursor:pointer;transition:0.25s;white-space:nowrap}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:#4f52d0;transform:translateY(-1px)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-outline{background:#fff0;color:var(--primary-color);border:1.5px solid var(--primary-color)}.btn-outline:hover{background:var(--hover-color)}.btn-gray{background:var(--input-bg);color:var(--label-color);border:1.5px solid var(--border)}.btn-gray:hover{background:var(--menu-hover);color:var(--primary-color)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.btn i{font-size:15px}.sidebar{display:flex;flex-direction:column;gap:16px}.panel-card{background:var(--upcard);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);border:1px solid var(--border);overflow:hidden}.panel-head{padding:14px 18px;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--heading-color)}.panel-head i{color:var(--primary-color);font-size:16px}.panel-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}.status-item{display:flex;justify-content:space-between;align-items:center;font-size:.82rem}.status-label{color:var(--gray-text)}.status-val{font-weight:500;color:var(--primary-text)}.status-badge{padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.badge-ok{background:rgb(16 185 129 / .12);color:var(--success)}.badge-warn{background:rgb(245 158 11 / .12);color:var(--warning)}.badge-err{background:rgb(239 68 68 / .12);color:var(--danger)}.badge-idle{background:var(--input-bg);color:var(--gray-text)}.field-label{font-size:.8rem;color:var(--label-color);font-weight:500;margin-bottom:4px}.webcam-grid select,.webcam-grid .range-wrap input[type=range]{width:100%;background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--primary-text);font-family:inherit;font-size:.82rem;padding:8px 10px;outline:none;transition:0.2s}.webcam-grid select:focus{border-color:var(--primary-color)}.range-wrap{display:flex;flex-direction:column;gap:4px}.range-row{display:flex;align-items:center;gap:10px}.webcam-grid input[type=range]{flex:1;-webkit-appearance:none;height:4px;border-radius:4px;background:var(--border);padding:0;border:none}.webcam-grid input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary-color);cursor:pointer}.range-val{font-size:.8rem;font-weight:600;color:var(--primary-color);min-width:28px;text-align:right}.filters-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.filter-chip{padding:7px 10px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--input-bg);color:var(--primary-text);font-size:.78rem;font-family:inherit;font-weight:500;cursor:pointer;transition:0.2s;text-align:center}.filter-chip:hover{border-color:var(--primary-color);color:var(--primary-color)}.filter-chip.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.snapshots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.snap-thumb{aspect-ratio:16/9;border-radius:8px;overflow:hidden;cursor:pointer;position:relative;background:var(--input-bg);border:1.5px solid var(--border);transition:0.2s}.snap-thumb:hover{border-color:var(--primary-color);transform:scale(1.03)}.snap-thumb img{width:100%;height:100%;object-fit:cover}.snap-dl{position:absolute;inset:0;background:rgb(99 102 241 / .75);display:none;align-items:center;justify-content:center;color:#fff;font-size:18px}.snap-thumb:hover .snap-dl{display:flex}.snaps-empty{font-size:.8rem;color:var(--gray-text);text-align:center;padding:10px 0}.full-stats{background:var(--upcard);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);border:1px solid var(--border);padding:20px}.full-stats h3{font-size:.88rem;font-weight:600;color:var(--heading-color);margin-bottom:14px;display:flex;align-items:center;gap:8px}.full-stats h3 i{color:var(--primary-color)}.specs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.spec-item{background:var(--section-bg);border-radius:var(--radius-sm);padding:12px 14px;border:1px solid var(--border)}.spec-key{font-size:.72rem;color:var(--gray-text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}.spec-val{font-size:.88rem;font-weight:600;color:var(--primary-text);word-break:break-all}.perm-prompt{position:fixed;inset:0;background:rgb(0 0 0 / .5);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px;display:none}.perm-prompt.show{display:flex}.perm-box{background:var(--upcard);border-radius:var(--radius-lg);padding:32px 28px;max-width:380px;width:100%;text-align:center;box-shadow:var(--box-shadow)}.perm-box .perm-icon{font-size:44px;color:var(--primary-color);margin-bottom:14px}.perm-box h3{font-size:1.1rem;font-weight:600;margin-bottom:8px;color:var(--heading-color)}.perm-box p{font-size:.85rem;color:var(--gray-text);margin-bottom:22px}.perm-box .btn{width:100%;justify-content:center;padding:12px}@media (max-width:600px){.video-controls{justify-content:center}.btn{padding:8px 14px;font-size:.78rem}.filters-grid{grid-template-columns:repeat(3,1fr)}.snapshots-grid{grid-template-columns:repeat(4,1fr)}}.webcam-guide-section{margin:10px auto 60px;padding:0 10px;background-color:var(--section-bg)}.webcam-guide-wrap{overflow:hidden}.webcam-guide-head{padding:26px 26px 18px}.webcam-guide-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgb(99 102 241 / .12);color:var(--primary-color);font-size:.78rem;font-weight:600;margin-bottom:12px}.webcam-guide-head h2{font-size:clamp(1.45rem, 3vw, 2rem);color:var(--heading-color);line-height:1.25;margin-bottom:8px}.webcam-guide-head h2 span{background:var(--liearcolor);-webkit-background-clip:text;background-clip:text;color:#fff0}.webcam-guide-head p{color:var(--gray-text);font-size:.9rem;max-width:760px;line-height:1.7}.webcam-guide-body{display:grid;grid-template-columns:1.5fr .9fr;gap:18px;padding:22px}.webcam-steps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.webcam-step-card{position:relative;background:var(--section-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;overflow:hidden;transition:.25s ease}.webcam-step-card:hover{transform:translateY(-3px);border-color:rgb(99 102 241 / .45);box-shadow:0 14px 34px rgb(99 102 241 / .13)}.webcam-step-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}.webcam-step-num{width:38px;height:38px;border-radius:12px;background:var(--liearcolor);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;box-shadow:0 10px 22px rgb(99 102 241 / .25);flex:0 0 auto}.webcam-step-icon{width:38px;height:38px;border-radius:12px;background:rgb(99 102 241 / .12);color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}.webcam-step-card h3{font-size:.95rem;color:var(--primary-text);margin-bottom:7px}.webcam-step-card p{color:var(--gray-text);font-size:.82rem;line-height:1.65}.webcam-guide-side{display:flex;flex-direction:column;gap:14px}.webcam-info-box{background:var(--section-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px}.webcam-info-box h3{display:flex;align-items:center;gap:8px;color:var(--heading-color);font-size:.95rem;margin-bottom:12px}.webcam-info-box h3 i{color:var(--primary-color);font-size:17px}.webcam-check-list{display:flex;flex-direction:column;gap:10px}.webcam-check-list li{list-style:none;display:flex;align-items:flex-start;gap:9px;color:var(--gray-text);font-size:.82rem;line-height:1.55}.webcam-check-list i{color:var(--success);font-size:15px;margin-top:3px;flex:0 0 auto}.webcam-privacy-card{background:linear-gradient(135deg,rgb(16 185 129 / .12),rgb(99 102 241 / .12));border:1px solid rgb(99 102 241 / .22);border-radius:var(--radius-md);padding:18px}.webcam-privacy-card .privacy-icon{width:42px;height:42px;border-radius:14px;background:rgb(16 185 129 / .15);color:var(--success);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}.webcam-privacy-card h3{color:var(--heading-color);font-size:.98rem;margin-bottom:7px}.webcam-privacy-card p{color:var(--gray-text);font-size:.82rem;line-height:1.65}.webcam-guide-actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 22px 22px}.webcam-mini-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:var(--section-bg);border:1px solid var(--border);color:var(--label-color);font-size:.78rem;font-weight:500}.webcam-mini-pill i{color:var(--primary-color);font-size:15px}@media (max-width:900px){.webcam-guide-body{grid-template-columns:1fr}}@media (max-width:600px){.webcam-guide-head,.webcam-guide-body{padding:18px}.webcam-steps-grid{grid-template-columns:1fr}.webcam-guide-actions{padding:0 18px 18px}}.webcam-premium-features{max-width:1200px;margin:24px auto 65px;padding:0 10px}.webcam-premium-container{position:relative;overflow:hidden;padding:28px}.webcam-premium-head{position:relative;max-width:780px;margin-bottom:24px}.webcam-premium-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgb(99 102 241 / .12);color:var(--primary-color);border:1px solid rgb(99 102 241 / .18);font-size:.78rem;font-weight:600;margin-bottom:12px}.webcam-premium-head h2{font-size:clamp(1.5rem, 3vw, 2.15rem);color:var(--heading-color);line-height:1.22;margin-bottom:9px}.webcam-premium-head h2 span{background:var(--liearcolor);-webkit-background-clip:text;background-clip:text;color:#fff0}.webcam-premium-head p{color:var(--gray-text);font-size:.9rem;line-height:1.75}.webcam-premium-grid{position:relative;display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:14px}.webcam-feature-highlight{position:relative;grid-row:span 2;min-height:360px;overflow:hidden;border-radius:var(--radius-lg);padding:22px;background:linear-gradient(145deg,#2563eb,#6366f1 55%,#818cf8);color:#fff;box-shadow:0 20px 45px rgb(99 102 241 / .28)}.webcam-highlight-glow{position:absolute;width:170px;height:170px;right:-60px;top:-55px;background:rgb(255 255 255 / .22);border-radius:50%}.webcam-highlight-icon{position:relative;width:54px;height:54px;border-radius:18px;background:rgb(255 255 255 / .18);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;backdrop-filter:blur(8px)}.webcam-feature-highlight h3{position:relative;font-size:1.25rem;margin-bottom:9px}.webcam-feature-highlight p{position:relative;font-size:.86rem;line-height:1.7;color:rgb(255 255 255 / .86)}.webcam-highlight-preview{position:absolute;left:22px;right:22px;bottom:22px;border-radius:18px;background:rgb(255 255 255 / .16);border:1px solid rgb(255 255 255 / .24);overflow:hidden;backdrop-filter:blur(10px)}.preview-top{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid rgb(255 255 255 / .18)}.preview-top span{width:8px;height:8px;border-radius:50%;background:rgb(255 255 255 / .75)}.preview-screen{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.preview-camera-icon{width:42px;height:42px;border-radius:50%;background:rgb(255 255 255 / .18);display:flex;align-items:center;justify-content:center;font-size:21px}.preview-line{height:7px;border-radius:999px;background:rgb(255 255 255 / .34)}.preview-line.large{width:140px}.preview-line.small{width:82px}.webcam-feature-card.premium{position:relative;overflow:hidden;background:rgb(248 250 252 / .78);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;min-height:173px;transition:.25s ease}[data-theme="dark"] .webcam-feature-card.premium{background:rgb(15 20 32 / .72)}.webcam-feature-card.premium::after{content:"";position:absolute;width:86px;height:86px;right:-38px;bottom:-42px;background:rgb(99 102 241 / .10);border-radius:50%;transition:.25s ease}.webcam-feature-card.premium:hover{transform:translateY(-5px);border-color:rgb(99 102 241 / .45);box-shadow:0 16px 34px rgb(99 102 241 / .13)}.webcam-feature-card.premium:hover::after{transform:scale(1.35)}.webcam-feature-icon{width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}.webcam-feature-icon.blue{background:rgb(37 99 235 / .13);color:#2563eb}.webcam-feature-icon.green{background:rgb(16 185 129 / .13);color:#10b981}.webcam-feature-icon.red{background:rgb(239 68 68 / .13);color:#ef4444}.webcam-feature-icon.violet{background:rgb(124 58 237 / .13);color:#7c3aed}.webcam-feature-icon.orange{background:rgb(245 158 11 / .15);color:#f59e0b}.webcam-feature-icon.cyan{background:rgb(6 182 212 / .13);color:#06b6d4}.webcam-feature-card.premium h3{position:relative;font-size:.92rem;color:var(--primary-text);margin-bottom:7px}.webcam-feature-card.premium p{position:relative;color:var(--gray-text);font-size:.8rem;line-height:1.62}.webcam-feature-pills{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.webcam-feature-pills span{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:var(--section-bg);border:1px solid var(--border);color:var(--label-color);font-size:.78rem;font-weight:500}.webcam-feature-pills i{color:var(--primary-color);font-size:15px}@media (max-width:1050px){.webcam-premium-grid{grid-template-columns:repeat(2,1fr)}.webcam-feature-highlight{grid-column:1 / -1;min-height:330px}}@media (max-width:620px){.webcam-premium-container{padding:18px}.webcam-premium-grid{grid-template-columns:1fr}.webcam-feature-highlight{min-height:370px}}.webcam-content-section{margin:24px auto 65px;padding:30px 10px;background-color:var(--section-bg)}.webcam-content-container{display:grid;grid-template-columns:1.35fr .75fr;gap:18px;align-items:stretch}.webcam-content-left,.webcam-content-card{background:var(--upcard);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--card-shadow)}.webcam-content-left{position:relative;overflow:hidden;padding:28px}.webcam-content-left::before{content:"";position:absolute;width:260px;height:260px;right:-120px;top:-120px;background:radial-gradient(circle,rgb(99 102 241 / .18),transparent 68%);pointer-events:none}.webcam-content-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgb(99 102 241 / .12);color:var(--primary-color);border:1px solid rgb(99 102 241 / .18);font-size:.78rem;font-weight:600;margin-bottom:13px}.webcam-content-left h2{position:relative;font-size:clamp(1.45rem, 3vw, 2.1rem);color:var(--heading-color);line-height:1.25;margin-bottom:12px}.webcam-content-left h2 span{background:var(--liearcolor);-webkit-background-clip:text;background-clip:text;color:#fff0}.webcam-content-left p{position:relative;color:var(--gray-text);font-size:.9rem;line-height:1.8;margin-bottom:12px}.webcam-content-points{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.webcam-content-points div{display:flex;align-items:center;gap:9px;padding:12px 13px;background:var(--section-bg);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--label-color);font-size:.82rem;font-weight:500}.webcam-content-points i{color:var(--success);font-size:16px;flex:0 0 auto}.webcam-content-right{display:flex}.webcam-content-card{width:100%;padding:24px;background:radial-gradient(circle at top right,rgb(99 102 241 / .14),transparent 38%),var(--upcard)}.content-card-icon{width:54px;height:54px;border-radius:18px;background:var(--liearcolor);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px;box-shadow:0 14px 28px rgb(99 102 241 / .25)}.webcam-content-card h3{color:var(--heading-color);font-size:1.05rem;margin-bottom:14px}.webcam-content-card ul{display:flex;flex-direction:column;gap:10px}.webcam-content-card li{list-style:none;position:relative;padding-left:20px;color:var(--gray-text);font-size:.84rem;line-height:1.55}.webcam-content-card li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--primary-color)}@media (max-width:900px){.webcam-content-container{grid-template-columns:1fr}}@media (max-width:600px){.webcam-content-left,.webcam-content-card{padding:18px}.webcam-content-points{grid-template-columns:1fr}}.webcam-example-section{margin:24px auto 65px;padding:0 10px}.webcam-example-container{padding:28px;overflow:hidden;position:relative}.webcam-example-head{max-width:760px;margin-bottom:22px}.webcam-example-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgb(99 102 241 / .12);color:var(--primary-color);border:1px solid rgb(99 102 241 / .18);font-size:.78rem;font-weight:600;margin-bottom:12px}.webcam-example-head h2{font-size:clamp(1.45rem, 3vw, 2.1rem);color:var(--heading-color);line-height:1.25;margin-bottom:8px}.webcam-example-head h2 span{background:var(--liearcolor);-webkit-background-clip:text;background-clip:text;color:#fff0}.webcam-example-head p{color:var(--gray-text);font-size:.9rem;line-height:1.7}.webcam-example-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.webcam-example-preview{border-radius:var(--radius-lg);overflow:hidden;background:#0f172a;border:1px solid var(--border);min-height:360px}.example-preview-top{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;background:rgb(255 255 255 / .08);border-bottom:1px solid rgb(255 255 255 / .12)}.example-preview-top span{width:9px;height:9px;border-radius:50%;background:rgb(255 255 255 / .65)}.example-preview-top p{margin-left:8px;color:rgb(255 255 255 / .72);font-size:.78rem;font-weight:500}.example-preview-screen{min-height:318px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 38%,rgb(99 102 241 / .35),transparent 30%),linear-gradient(135deg,#111827,#1e1b4b)}.example-rec-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgb(239 68 68 / .92);color:#fff;font-size:.72rem;font-weight:700}.example-rec-badge span{width:8px;height:8px;border-radius:50%;background:#fff}.example-camera-circle{width:92px;height:92px;border-radius:50%;background:rgb(255 255 255 / .14);border:1px solid rgb(255 255 255 / .22);display:flex;align-items:center;justify-content:center;color:#fff;font-size:42px;box-shadow:0 22px 55px rgb(0 0 0 / .28)}.example-face-lines{display:flex;flex-direction:column;align-items:center;gap:9px}.example-face-lines span{height:8px;border-radius:999px;background:rgb(255 255 255 / .35)}.example-face-lines .line-lg{width:170px}.example-face-lines .line-sm{width:105px}.example-preview-stats{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap}.example-preview-stats span{padding:6px 10px;border-radius:999px;background:rgb(0 0 0 / .38);color:#fff;font-size:.72rem;font-weight:600}.webcam-example-result{background:var(--section-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px}.webcam-example-result h3{color:var(--heading-color);font-size:1.05rem;margin-bottom:15px}.example-result-list{display:flex;flex-direction:column;gap:10px}.example-result-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--upcard);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 13px}.example-result-item div{display:flex;align-items:center;gap:9px;color:var(--label-color);font-size:.83rem;font-weight:500}.example-result-item i{color:var(--primary-color);font-size:16px}.example-result-item.success i{color:var(--success)}.example-result-item strong{color:var(--primary-text);font-size:.82rem}.example-tip-box{margin-top:15px;display:flex;align-items:flex-start;gap:10px;padding:14px;border-radius:var(--radius-md);background:rgb(99 102 241 / .10);border:1px solid rgb(99 102 241 / .18)}.example-tip-box i{color:var(--primary-color);font-size:18px;margin-top:2px}.example-tip-box p{color:var(--gray-text);font-size:.82rem;line-height:1.65}@media (max-width:900px){.webcam-example-grid{grid-template-columns:1fr}}@media (max-width:600px){.webcam-example-container{padding:18px}.webcam-example-preview{min-height:310px}.example-preview-screen{min-height:268px}.example-result-item{align-items:flex-start;flex-direction:column}}.webcam-faq-section{margin:24px auto 65px;padding:0 10px;background-color:var(--section-bg)}.webcam-faq-container{padding:28px;overflow:hidden}.webcam-faq-head{max-width:760px;margin-bottom:22px}.webcam-faq-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgb(99 102 241 / .12);color:var(--primary-color);border:1px solid rgb(99 102 241 / .18);font-size:.78rem;font-weight:600;margin-bottom:12px}.webcam-faq-head h2{font-size:clamp(1.45rem, 3vw, 2.1rem);color:var(--heading-color);line-height:1.25;margin-bottom:8px}.webcam-faq-head h2 span{background:var(--liearcolor);-webkit-background-clip:text;background-clip:text;color:#fff0}.webcam-faq-head p{color:var(--gray-text);font-size:.9rem;line-height:1.7}.webcam-faq-list{display:flex;flex-direction:column;gap:12px}.webcam-faq-item{background:var(--section-bg);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:.25s ease}.webcam-faq-item:hover{border-color:rgb(99 102 241 / .35)}.webcam-faq-item.active{border-color:rgb(99 102 241 / .45);box-shadow:0 14px 34px rgb(99 102 241 / .11)}.webcam-faq-question{width:100%;border:none;background:#fff0;color:var(--primary-text);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;font-family:inherit;text-align:left}.webcam-faq-question span{font-size:.9rem;font-weight:600;line-height:1.5}.webcam-faq-question i{width:34px;height:34px;border-radius:50%;background:rgb(99 102 241 / .12);color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;transition:transform .3s ease,background .3s ease}.webcam-faq-item.active .webcam-faq-question i{transform:rotate(180deg);background:var(--primary-color);color:#fff}.webcam-faq-answer{max-height:0;overflow:hidden;transition:max-height .38s ease}.webcam-faq-answer p{padding:0 18px 16px;color:var(--gray-text);font-size:.84rem;line-height:1.75}@media (max-width:600px){.webcam-faq-container{padding:18px}.webcam-faq-question{padding:14px}.webcam-faq-question span{font-size:.84rem}}.webcam-related-section{max-width:1200px;margin:24px auto 70px;padding:0 10px}.webcam-related-container{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 10%,rgb(99 102 241 / .16),transparent 28%),radial-gradient(circle at 90% 20%,rgb(16 185 129 / .10),transparent 26%),var(--upcard);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);padding:28px}.webcam-related-container::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(99 102 241 / .07) 1px,transparent 1px),linear-gradient(90deg,rgb(99 102 241 / .07) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,rgb(0 0 0 / .65),transparent 70%);pointer-events:none}.webcam-related-head{position:relative;max-width:760px;margin-bottom:22px}.webcam-related-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgb(99 102 241 / .12);color:var(--primary-color);border:1px solid rgb(99 102 241 / .18);font-size:.78rem;font-weight:600;margin-bottom:12px}.webcam-related-head h2{font-size:clamp(1.45rem, 3vw, 2.1rem);color:var(--heading-color);line-height:1.25;margin-bottom:8px}.webcam-related-head h2 span{background:var(--liearcolor);-webkit-background-clip:text;background-clip:text;color:#fff0}.webcam-related-head p{color:var(--gray-text);font-size:.9rem;line-height:1.7}.webcam-related-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.webcam-related-card{position:relative;overflow:hidden;min-height:170px;text-decoration:none;background:rgb(248 250 252 / .76);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:14px;transition:.28s ease}[data-theme="dark"] .webcam-related-card{background:rgb(15 20 32 / .72)}.related-card-glow{position:absolute;width:110px;height:110px;right:-45px;top:-45px;border-radius:50%;background:rgb(99 102 241 / .12);transition:.28s ease}.webcam-related-card:hover{transform:translateY(-6px);border-color:rgb(99 102 241 / .46);box-shadow:0 18px 38px rgb(99 102 241 / .14)}.webcam-related-card:hover .related-card-glow{transform:scale(1.45);background:rgb(99 102 241 / .18)}.related-icon{position:relative;width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:23px}.related-icon.blue{background:rgb(37 99 235 / .13);color:#2563eb}.related-icon.violet{background:rgb(124 58 237 / .13);color:#7c3aed}.related-icon.green{background:rgb(16 185 129 / .13);color:#10b981}.related-icon.orange{background:rgb(245 158 11 / .15);color:#f59e0b}.related-icon.cyan{background:rgb(6 182 212 / .13);color:#06b6d4}.related-icon.red{background:rgb(239 68 68 / .13);color:#ef4444}.webcam-related-card h3{position:relative;color:var(--primary-text);font-size:.98rem;margin-bottom:7px}.webcam-related-card p{position:relative;color:var(--gray-text);font-size:.82rem;line-height:1.65}.related-arrow{position:absolute;right:16px;bottom:16px;width:34px;height:34px;border-radius:50%;background:var(--section-bg);color:var(--primary-color);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;transition:.28s ease}.webcam-related-card:hover .related-arrow{background:var(--primary-color);color:#fff;transform:translateX(3px)}@media (max-width:950px){.webcam-related-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.webcam-related-container{padding:18px}.webcam-related-grid{grid-template-columns:1fr}.webcam-related-card{min-height:155px}}