/* ── MAIN TOOL AREA ── */
 /* .tool-container {
     max-width: 1200px;
     margin: 20px auto;
     padding: 0 10px 40px;
 } */

 /* ── LAYOUT GRID ── */
 .webcam-grid {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 20px;
 }

 @media (max-width: 900px) {
     .webcam-grid {
         grid-template-columns: 1fr;
     }
 }

 /* ── VIDEO CARD ── */
 .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);
     /* mirror */
 }

 #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: rgba(99, 102, 241, 0.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: 0.88rem;
     max-width: 220px;
 }

 .video-placeholder .hint {
     font-size: 0.78rem;
     color: #9ca3af;
     margin-top: -8px;
 }

 /* Filter overlay */
 #filterCanvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 /* Snapshot flash */
 .flash {
     position: absolute;
     inset: 0;
     background: #fff;
     opacity: 0;
     pointer-events: none;
 }

 .flash.snap {
     animation: snapFlash 0.4s ease-out;
 }

 @keyframes snapFlash {
     0% {
         opacity: 0.8
     }

     100% {
         opacity: 0
     }
 }

 /* Recording indicator */
 .rec-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     background: rgba(239, 68, 68, 0.9);
     color: #fff;
     font-size: 0.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: 0.2
     }
 }

 /* Mirror toggle */
 .mirror-badge {
     position: absolute;
     top: 12px;
     right: 12px;
     background: rgba(99, 102, 241, 0.85);
     color: #fff;
     font-size: 0.72rem;
     font-weight: 600;
     padding: 4px 10px;
     border-radius: 20px;
     display: none;
 }

 .mirror-badge.active {
     display: block;
 }

 /* FPS/Resolution overlay */
 .stats-overlay {
     position: absolute;
     bottom: 10px;
     left: 10px;
     background: rgba(0, 0, 0, 0.55);
     color: #fff;
     font-size: 0.7rem;
     padding: 4px 10px;
     border-radius: 8px;
     display: none;
     gap: 12px;
 }

 .stats-overlay.active {
     display: flex;
 }

 /* Controls row below video */
 .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: 0.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: transparent;
     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: 0.45;
     cursor: not-allowed;
     transform: none !important;
 }

 .btn i {
     font-size: 15px;
 }

 /* ── SIDEBAR ── */
 .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: 0.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 items */
 .status-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.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: 0.75rem;
     font-weight: 600;
 }

 .badge-ok {
     background: rgba(16, 185, 129, 0.12);
     color: var(--success);
 }

 .badge-warn {
     background: rgba(245, 158, 11, 0.12);
     color: var(--warning);
 }

 .badge-err {
     background: rgba(239, 68, 68, 0.12);
     color: var(--danger);
 }

 .badge-idle {
     background: var(--input-bg);
     color: var(--gray-text);
 }

 /* Select & Range */
 .field-label {
     font-size: 0.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: 0.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: 0.8rem;
     font-weight: 600;
     color: var(--primary-color);
     min-width: 28px;
     text-align: right;
 }

 /* Filters grid */
 .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: 0.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 */
 .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: rgba(99, 102, 241, 0.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: 0.8rem;
     color: var(--gray-text);
     text-align: center;
     padding: 10px 0;
 }

 /* ── BOTTOM FULL-WIDTH STATS ── */
 .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: 0.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: 0.72rem;
     color: var(--gray-text);
     text-transform: uppercase;
     letter-spacing: 0.04em;
     margin-bottom: 4px;
 }

 .spec-val {
     font-size: 0.88rem;
     font-weight: 600;
     color: var(--primary-text);
     word-break: break-all;
 }

 /* ── PERMISSION PROMPT ── */
 .perm-prompt {
     position: fixed;
     inset: 0;
     background: rgba(0, 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: 0.85rem;
     color: var(--gray-text);
     margin-bottom: 22px;
 }

 .perm-box .btn {
     width: 100%;
     justify-content: center;
     padding: 12px;
 }

 /* Responsive tweaks */
 @media (max-width: 600px) {
     .video-controls {
         justify-content: center;
     }

     .btn {
         padding: 8px 14px;
         font-size: 0.78rem;
     }

     .filters-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .snapshots-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }



     .webcam-guide-section {
        /* max-width: 1200px; */
        margin: 10px auto 60px;
        padding: 0 10px;
        background-color: var(--section-bg);
    }

    .webcam-guide-wrap {
        /* background: var(--upcard); */
        /* border: 1px solid var(--border); */
        /* border-radius: var(--radius-lg); */
        /* box-shadow: var(--card-shadow); */
        overflow: hidden;
    }

    .webcam-guide-head {
        padding: 26px 26px 18px;
        /* border-bottom: 1px solid var(--divider); */
        /* background:
            radial-gradient(circle at top left, rgba(99, 102, 241, .16), transparent 34%),
            linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(129, 140, 248, .08)); */
    }

    .webcam-guide-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(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: transparent;
    }

    .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: rgba(99, 102, 241, .45);
        box-shadow: 0 14px 34px rgba(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 rgba(99, 102, 241, .25);
        flex: 0 0 auto;
    }

    .webcam-step-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: rgba(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, rgba(16, 185, 129, .12), rgba(99, 102, 241, .12));
        border: 1px solid rgba(99, 102, 241, .22);
        border-radius: var(--radius-md);
        padding: 18px;
    }

    .webcam-privacy-card .privacy-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: rgba(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;
    /* background:
        radial-gradient(circle at 8% 12%, rgba(99, 102, 241, .16), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(37, 99, 235, .12), transparent 24%),
        var(--upcard);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow); */
    padding: 28px;
}

/* .webcam-premium-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .08) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 65%);
    pointer-events: none;
} */

.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: rgba(99, 102, 241, .12);
    color: var(--primary-color);
    border: 1px solid rgba(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: transparent;
}

.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 rgba(99, 102, 241, .28);
}

.webcam-highlight-glow {
    position: absolute;
    width: 170px;
    height: 170px;
    right: -60px;
    top: -55px;
    background: rgba(255,255,255,.22);
    border-radius: 50%;
}

.webcam-highlight-icon {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(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: rgba(255,255,255,.86);
}

.webcam-highlight-preview {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(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 rgba(255,255,255,.18);
}

.preview-top span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(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: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.preview-line {
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
}

.preview-line.large {
    width: 140px;
}

.preview-line.small {
    width: 82px;
}

.webcam-feature-card.premium {
    position: relative;
    overflow: hidden;
    background: rgba(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: rgba(15, 20, 32, .72);
}

.webcam-feature-card.premium::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    right: -38px;
    bottom: -42px;
    background: rgba(99, 102, 241, .10);
    border-radius: 50%;
    transition: .25s ease;
}

.webcam-feature-card.premium:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .45);
    box-shadow: 0 16px 34px rgba(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: rgba(37, 99, 235, .13); color: #2563eb; }
.webcam-feature-icon.green { background: rgba(16, 185, 129, .13); color: #10b981; }
.webcam-feature-icon.red { background: rgba(239, 68, 68, .13); color: #ef4444; }
.webcam-feature-icon.violet { background: rgba(124, 58, 237, .13); color: #7c3aed; }
.webcam-feature-icon.orange { background: rgba(245, 158, 11, .15); color: #f59e0b; }
.webcam-feature-icon.cyan { background: rgba(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 {
    /* max-width: 1200px; */
    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, rgba(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: rgba(99, 102, 241, .12);
    color: var(--primary-color);
    border: 1px solid rgba(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: transparent;
}

.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, rgba(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 rgba(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 {
    /* max-width: 1200px; */
    margin: 24px auto 65px;
    padding: 0 10px;
    
}

.webcam-example-container {
    /* background: var(--upcard); */
    /* border: 1px solid var(--border); */
    /* border-radius: var(--radius-lg); */
    /* box-shadow: var(--card-shadow); */
    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: rgba(99, 102, 241, .12);
    color: var(--primary-color);
    border: 1px solid rgba(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: transparent;
}

.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: rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.example-preview-top span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.65);
}

.example-preview-top p {
    margin-left: 8px;
    color: rgba(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%, rgba(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: rgba(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: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 42px;
    box-shadow: 0 22px 55px rgba(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: rgba(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: rgba(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: rgba(99, 102, 241, .10);
    border: 1px solid rgba(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 {
    /* max-width: 1200px; */
    margin: 24px auto 65px;
    padding: 0 10px;
    background-color: var(--section-bg);
}

.webcam-faq-container {
    /* background:
        radial-gradient(circle at top left, rgba(99, 102, 241, .14), transparent 30%),
        var(--upcard); */
    /* border: 1px solid var(--border); */
    /* border-radius: var(--radius-lg); */
    /* box-shadow: var(--card-shadow); */
    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: rgba(99, 102, 241, .12);
    color: var(--primary-color);
    border: 1px solid rgba(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: transparent;
}

.webcam-faq-head p {
    color: var(--gray-text);
    font-size: .9rem;
    line-height: 1.7;
}

.webcam-faq-list {
    display: flex;
    flex-direction: column;
    /* justify-content: center;
    align-items: center; */
    gap: 12px;
    /* max-width: 900px; */
}

.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: rgba(99, 102, 241, .35);
}

.webcam-faq-item.active {
    border-color: rgba(99, 102, 241, .45);
    box-shadow: 0 14px 34px rgba(99, 102, 241, .11);
}

.webcam-faq-question {
    width: 100%;
    border: none;
    background: transparent;
    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: rgba(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%, rgba(99, 102, 241, .16), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(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(rgba(99, 102, 241, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .07) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, rgba(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: rgba(99, 102, 241, .12);
    color: var(--primary-color);
    border: 1px solid rgba(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: transparent;
}

.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: rgba(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: rgba(15, 20, 32, .72);
}

.related-card-glow {
    position: absolute;
    width: 110px;
    height: 110px;
    right: -45px;
    top: -45px;
    border-radius: 50%;
    background: rgba(99, 102, 241, .12);
    transition: .28s ease;
}

.webcam-related-card:hover {
    transform: translateY(-6px);
    border-color: rgba(99, 102, 241, .46);
    box-shadow: 0 18px 38px rgba(99, 102, 241, .14);
}

.webcam-related-card:hover .related-card-glow {
    transform: scale(1.45);
    background: rgba(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: rgba(37, 99, 235, .13); color: #2563eb; }
.related-icon.violet { background: rgba(124, 58, 237, .13); color: #7c3aed; }
.related-icon.green { background: rgba(16, 185, 129, .13); color: #10b981; }
.related-icon.orange { background: rgba(245, 158, 11, .15); color: #f59e0b; }
.related-icon.cyan { background: rgba(6, 182, 212, .13); color: #06b6d4; }
.related-icon.red { background: rgba(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;
    }
}