/* ─── STATS BAR ─── */
                 .main-container {
                     max-width: 1280px;
                     margin: 0 auto;
                     padding: 24px 16px 48px;
                 }
 .stats-bar {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 10px;
     margin-bottom: 20px;
     margin-top: 30px;
 }

 @media (max-width: 900px) {
     .stats-bar {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 500px) {
     .stats-bar {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .mouse_tester .stat-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 14px 16px;
     text-align: center;
     box-shadow: var(--card-shadow);
     transition: transform 0.2s;
     color: var(--primary-text);
 }

 .mouse_tester .stat-card:hover {
     transform: translateY(-2px);
 }

 .mouse_tester .stat-card .stat-icon {
     font-size: 1.3rem;
     margin-bottom: 4px;
 }

 .mouse_tester .stat-card .stat-value {
     font-size: 1.35rem;
     font-weight: 800;
     color: var(--primary-color);
     font-family: 'JetBrains Mono', monospace;
 }

 .mouse_tester .stat-card .stat-label {
     font-size: 0.72rem;
     color: var(--gray-text);
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 /* ─── TABS ─── */
 .mouse_tester .tabs {
     display: flex;
     gap: 6px;
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 5px;
     margin-bottom: 18px;
     overflow-x: auto;
     scrollbar-width: none;
 }

 .mouse_tester .tabs::-webkit-scrollbar {
     display: none;
 }

 .mouse_tester .tab-btn {
     flex: 1;
     min-width: 110px;
     padding: 9px 14px;
     border-radius: var(--radius-sm);
     border: none;
     background: transparent;
     color: var(--gray-text);
     font-family: "Poppins", sans-serif;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     transition: all 0.2s;
     white-space: nowrap;
 }

 .mouse_tester .tab-btn:hover {
     background: var(--menu-hover);
     color: var(--primary-color);
 }

 .mouse_tester .tab-btn.active {
     background: var(--primary-color);
     color: #fff;
     box-shadow: 0 4px 12px var(--primary-glow);
 }

 .mouse_tester .tab-panel {
     display: none;
 }

 .mouse_tester .tab-panel.active {
     display: block;
 }

 /* ─── CARD ─── */
 .mouse_tester .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 20px;
     box-shadow: var(--card-shadow);
     margin-bottom: 18px;
 }

 .mouse_tester .card-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
     flex-wrap: wrap;
     gap: 10px;
 }

 .mouse_tester .card-title {
     font-size: 1rem;
     font-weight: 700;
     color: var(--heading-color);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .mouse_tester .card-title i {
     color: var(--primary-color);
 }

 /* ─── CANVAS AREA ─── */
 .canvas-wrapper {
     position: relative;
     width: 100%;
     border-radius: var(--radius-md);
     overflow: hidden;
     border: 2px dashed var(--border);
     background: var(--canvas-bg);
     cursor: crosshair;
     touch-action: none;
 }

 #mouseCanvas {
     display: block;
     width: 100%;
 }

 .canvas-hint {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     color: var(--gray-text);
     pointer-events: none;
     transition: opacity 0.3s;
 }

 .canvas-hint i {
     font-size: 2.5rem;
     margin-bottom: 8px;
     display: block;
     opacity: 0.4;
 }

 .canvas-hint p {
     font-size: 0.85rem;
     opacity: 0.7;
 }

 .canvas-coords {
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgba(99, 102, 241, 0.12);
     border: 1px solid var(--primary-color);
     border-radius: 8px;
     padding: 5px 12px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.75rem;
     color: var(--primary-color);
     pointer-events: none;
 }

 /* ─── MOUSE BUTTONS ─── */
 .mouse-visual {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
 }

 .mouse-body {
     width: 120px;
     position: relative;
 }

 .mouse-svg-wrap {
     width: 120px;
     height: 190px;
     position: relative;
 }

 .mouse-btn-area {
     display: flex;
     gap: 8px;
     margin-bottom: 8px;
 }

 .btn-indicator {
     flex: 1;
     height: 70px;
     border-radius: 12px 12px 4px 4px;
     border: 2px solid var(--border);
     background: var(--input-bg);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     font-size: 0.72rem;
     font-weight: 600;
     color: var(--gray-text);
     cursor: default;
     transition: all 0.15s;
     position: relative;
     overflow: hidden;
 }

 .btn-indicator i {
     font-size: 1.1rem;
 }

 .btn-indicator::after {
     content: '';
     position: absolute;
     inset: 0;
     background: currentColor;
     opacity: 0;
     transition: opacity 0.15s;
 }

 .btn-indicator.left {
     border-color: var(--left-btn);
 }

 .btn-indicator.left.pressed {
     background: var(--left-btn);
     color: #fff;
     box-shadow: 0 0 20px #6366f155;
     transform: scale(0.96);
 }

 .btn-indicator.right {
     border-color: var(--right-btn);
 }

 .btn-indicator.right.pressed {
     background: var(--right-btn);
     color: #fff;
     box-shadow: 0 0 20px #a855f755;
     transform: scale(0.96);
 }

 .scroll-indicator {
     width: 36px;
     height: 52px;
     border-radius: 18px;
     border: 2px solid var(--middle-btn);
     background: var(--input-bg);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     transition: all 0.15s;
 }

 .scroll-wheel {
     width: 10px;
     height: 22px;
     border-radius: 5px;
     background: var(--middle-btn);
     opacity: 0.4;
     transition: all 0.2s;
 }

 .scroll-indicator.scroll-up .scroll-wheel,
 .scroll-indicator.scroll-down .scroll-wheel,
 .scroll-indicator.pressed .scroll-wheel {
     opacity: 1;
 }

 .scroll-indicator.pressed {
     background: var(--middle-btn);
 }

 .scroll-indicator.pressed .scroll-wheel {
     background: #fff;
 }

 .btn-counter-row {
     display: flex;
     gap: 8px;
 }

 .btn-counter {
     flex: 1;
     text-align: center;
     padding: 6px;
     border-radius: var(--radius-sm);
     background: var(--badge-bg);
 }

 .btn-counter .count-num {
     font-family: 'JetBrains Mono', monospace;
     font-size: 1.2rem;
     font-weight: 800;
     color: var(--primary-color);
 }

 .btn-counter .count-label {
     font-size: 0.65rem;
     color: var(--gray-text);
     text-transform: uppercase;
 }

 /* ─── CLICK TEST ─── */
 .click-zone {
     width: 100%;
     height: 220px;
     border-radius: var(--radius-md);
     background: linear-gradient(135deg, var(--primary-glow), transparent);
     border: 2px dashed var(--primary-color);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: all 0.2s;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
     user-select: none;
 }

 .click-zone:active {
     transform: scale(0.99);
 }

 .click-zone .zone-text {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--primary-color);
     pointer-events: none;
     z-index: 1;
 }

 .click-zone .zone-sub {
     font-size: 0.8rem;
     color: var(--gray-text);
     pointer-events: none;
     z-index: 1;
     margin-top: 4px;
 }

 .click-ripple {
     position: absolute;
     border-radius: 50%;
     background: var(--primary-color);
     opacity: 0.25;
     transform: scale(0);
     animation: rippleOut 0.6s ease-out forwards;
     pointer-events: none;
 }

 @keyframes rippleOut {
     to {
         transform: scale(6);
         opacity: 0;
     }
 }

 /* ─── CPS DISPLAY ─── */
 .cps-display {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
     margin-top: 12px;
 }

 .cps-box {
     background: var(--badge-bg);
     border-radius: var(--radius-sm);
     padding: 12px;
     text-align: center;
 }

 .cps-box .cps-val {
     font-family: 'JetBrains Mono', monospace;
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--badge-text);
 }

 .cps-box .cps-lbl {
     font-size: 0.68rem;
     color: var(--gray-text);
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }

 /* ─── TIMER ─── */
 .timer-controls {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .timer-btn {
     padding: 8px 18px;
     border-radius: var(--radius-sm);
     border: 1px solid var(--border);
     background: var(--input-bg);
     color: var(--primary-text);
     font-family: "Poppins", sans-serif;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
 }

 .timer-btn:hover {
     background: var(--hover-color);
     color: var(--primary-color);
     border-color: var(--primary-color);
 }

 .timer-btn.active {
     background: var(--primary-color);
     color: #fff;
     border-color: var(--primary-color);
 }

 .timer-display {
     font-family: 'JetBrains Mono', monospace;
     font-size: 3rem;
     font-weight: 800;
     color: var(--primary-color);
     text-align: center;
     padding: 18px 0 8px;
     letter-spacing: 0.04em;
 }

 .timer-bar {
     height: 8px;
     background: var(--divider);
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 14px;
 }

 .timer-bar-fill {
     height: 100%;
     background: linear-gradient(90deg, #6366F1, #a855f7);
     border-radius: 4px;
     transition: width 0.1s linear;
 }

 /* ─── SCROLL TEST ─── */
 .scroll-zone {
     height: 180px;
     overflow-y: auto;
     border: 2px dashed var(--border);
     border-radius: var(--radius-md);
     padding: 14px;
     background: var(--canvas-bg);
     scroll-behavior: smooth;
 }

 .scroll-zone::-webkit-scrollbar {
     width: 6px;
 }

 .scroll-zone::-webkit-scrollbar-track {
     background: var(--divider);
     border-radius: 3px;
 }

 .scroll-zone::-webkit-scrollbar-thumb {
     background: var(--primary-color);
     border-radius: 3px;
 }

 .scroll-item {
     padding: 10px 14px;
     margin-bottom: 8px;
     border-radius: var(--radius-sm);
     background: var(--input-bg);
     border-left: 3px solid var(--primary-color);
     font-size: 0.85rem;
     transition: background 0.2s;
     color: var(--primary-text);
 }

 .scroll-info {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
     margin-top: 12px;
 }

 .scroll-info-box {
     background: var(--badge-bg);
     border-radius: var(--radius-sm);
     padding: 10px;
     text-align: center;
 }

 .scroll-info-box .si-val {
     font-family: 'JetBrains Mono', monospace;
     font-size: 1.2rem;
     font-weight: 800;
     color: var(--badge-text);
 }

 .scroll-info-box .si-lbl {
     font-size: 0.68rem;
     color: var(--gray-text);
     text-transform: uppercase;
 }

 /* ─── KEYBOARD ─── */
 .key-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 10px;
 }

 .key-badge {
     padding: 5px 10px;
     border-radius: 6px;
     background: var(--input-bg);
     border: 1px solid var(--border);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.78rem;
     font-weight: 600;
     color: var(--gray-text);
     transition: all 0.2s;
 }

 .key-badge.held {
     background: var(--primary-color);
     border-color: var(--primary-color);
     color: #fff;
 }

 /* ─── HISTORY TABLE ─── */
 .history-list {
     max-height: 220px;
     overflow-y: auto;
     border-radius: var(--radius-sm);
     border: 1px solid var(--border);
     scrollbar-width: thin;
 }

 .history-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 14px;
     border-bottom: 1px solid var(--divider);
     font-size: 0.8rem;
     font-family: 'JetBrains Mono', monospace;
     transition: background 0.15s;
 }

 .history-item:hover {
     background: var(--menu-hover);
 }

 .history-item:last-child {
     border-bottom: none;
 }

 .h-type {
     width: 90px;
     font-weight: 700;
     font-size: 0.72rem;
     padding: 2px 8px;
     border-radius: 4px;
     text-align: center;
 }

 .h-type.left {
     background: #eef2ff;
     color: var(--left-btn);
 }

 .h-type.right {
     background: #faf5ff;
     color: var(--right-btn);
 }

 .h-type.middle {
     background: #ecfeff;
     color: var(--middle-btn);
 }

 .h-type.move {
     background: #f0fdf4;
     color: var(--success);
 }

 .h-type.scroll {
     background: #fffbeb;
     color: var(--warning);
 }

 [data-theme="dark"] .h-type.left {
     background: #1e2647;
 }

 [data-theme="dark"] .h-type.right {
     background: #2a1e47;
 }

 [data-theme="dark"] .h-type.middle {
     background: #0e2838;
 }

 [data-theme="dark"] .h-type.move {
     background: #0f2a1a;
 }

 [data-theme="dark"] .h-type.scroll {
     background: #2a2010;
 }

 .h-coords {
     color: var(--gray-text);
     flex: 1;
 }

 .h-time {
     color: var(--gray-text);
     font-size: 0.7rem;
 }

 /* ─── PRECISION TEST ─── */
 .precision-field {
     position: relative;
     width: 100%;
     height: 280px;
     background: var(--canvas-bg);
     border: 2px dashed var(--border);
     border-radius: var(--radius-md);
     overflow: hidden;
     cursor: crosshair;
 }

 .precision-target {
     position: absolute;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     color: #fff;
     transition: transform 0.15s;
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
 }

 .precision-target:hover {
     transform: scale(1.08);
 }

 .precision-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 8px;
     margin-top: 12px;
 }

 @media (max-width: 500px) {
     .precision-stats {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .prec-box {
     background: var(--badge-bg);
     border-radius: var(--radius-sm);
     padding: 10px;
     text-align: center;
 }

 .prec-box .prec-val {
     font-family: 'JetBrains Mono', monospace;
     font-size: 1.15rem;
     font-weight: 800;
     color: var(--badge-text);
 }

 .prec-box .prec-lbl {
     font-size: 0.65rem;
     color: var(--gray-text);
     text-transform: uppercase;
 }

 /* ─── TWO-COL GRID ─── */
 .two-col {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
 }

 @media (max-width: 768px) {
     .two-col {
         grid-template-columns: 1fr;
     }
 }

 /* ─── BTN SMALL ─── */
 .small-btn {
     padding: 6px 14px;
     border-radius: var(--radius-sm);
     border: 1px solid var(--border);
     background: var(--input-bg);
     color: var(--primary-text);
     font-family: "Poppins", sans-serif;
     font-size: 0.78rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 5px;
     transition: all 0.2s;
 }

 .small-btn:hover {
     background: var(--hover-color);
     color: var(--primary-color);
 }

 .small-btn.primary {
     background: var(--primary-color);
     color: #fff;
     border-color: var(--primary-color);
     box-shadow: 0 3px 12px var(--primary-glow);
 }

 /* ─── SPEED METER ─── */
 .speed-arc {
     display: flex;
     justify-content: center;
     margin: 10px 0;
 }

 /* ─── TRAIL OPTIONS ─── */
 .trail-options {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 10px;
 }

 .trail-opt {
     padding: 5px 12px;
     border-radius: 20px;
     border: 1px solid var(--border);
     background: var(--input-bg);
     font-size: 0.78rem;
     font-weight: 600;
     cursor: pointer;
     color: var(--gray-text);
     transition: all 0.2s;
 }

 .trail-opt:hover {
     border-color: var(--primary-color);
     color: var(--primary-color);
 }

 .trail-opt.active {
     background: var(--primary-color);
     color: #fff;
     border-color: var(--primary-color);
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 640px) {
     .page-header {
         padding: 12px 14px;
     }

     .main-container {
         padding: 14px 12px 40px;
     }

     .timer-display {
         font-size: 2.2rem;
     }

     .mouse-body {
         transform: scale(0.9);
     }
 }

 /* ─── ANIMATION ─── */
 @keyframes popIn {
     0% {
         transform: scale(0.5);
         opacity: 0;
     }

     70% {
         transform: scale(1.1);
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 .pop {
     animation: popIn 0.25s ease forwards;
 }

 /* ─── TOOLTIP ─── */
 [data-tip] {
     position: relative;
 }

 [data-tip]::after {
     content: attr(data-tip);
     position: absolute;
     bottom: 110%;
     left: 50%;
     transform: translateX(-50%);
     background: #1e2647;
     color: #fff;
     font-size: 0.72rem;
     padding: 4px 9px;
     border-radius: 6px;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s;
 }

 [data-tip]:hover::after {
     opacity: 1;
 }

 /* ─── DOUBLE CLICK BADGE ─── */
 .dbl-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     background: var(--warning);
     color: #fff;
     font-size: 0.7rem;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 20px;
     opacity: 0;
     pointer-events: none;
 }

 .dbl-badge.show {
     animation: fadeInOut 0.8s ease forwards;
 }

 @keyframes fadeInOut {
     0% {
         opacity: 0;
         transform: scale(0.8);
     }

     30% {
         opacity: 1;
         transform: scale(1);
     }

     70% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }



 /* How To Use Section */
.mouse-guide-section{
    margin-top:28px;
    padding:26px;
    /* border:1px solid var(--border); */
    /* border-radius:var(--radius-lg); */
    background:radial-gradient(circle at top left,var(--primary-glow),transparent 36%),
               linear-gradient(135deg,var(--card-color),var(--section-bg));
    /* box-shadow:var(--box-shadow); */
    position:relative;
    overflow:hidden;
}
.mouse-guide-section:before{
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(90deg,var(--canvas-grid) 1px,transparent 1px),
                     linear-gradient(var(--canvas-grid) 1px,transparent 1px);
    background-size:34px 34px;
    opacity:.18;
    pointer-events:none;
}
.mouse-guide-head,.mouse-guide-grid{position:relative;z-index:1}
.mouse-guide-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}
.mouse-guide-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.74rem;
    font-weight:700;
    margin-bottom:10px;
}
.mouse-guide-head h2{
    color:var(--heading-color);
    font-size:clamp(1.45rem,2.6vw,2.25rem);
    line-height:1.1;
    margin-bottom:8px;
}
.mouse-guide-head p{
    max-width:640px;
    color:var(--gray-text);
    font-size:.94rem;
    line-height:1.7;
}
.mouse-guide-score{
    min-width:170px;
    padding:16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    text-align:center;
    box-shadow:var(--card-shadow);
}
.guide-score-value{
    display:block;
    color:var(--primary-color);
    font-size:2rem;
    font-weight:800;
    line-height:1;
}
.guide-score-label{
    display:block;
    margin-top:6px;
    color:var(--gray-text);
    font-size:.74rem;
    font-weight:600;
}
.mouse-guide-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:18px;
}
.guide-steps{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.guide-step-card{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px;
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    transition:.22s ease;
}
.guide-step-card:hover,.guide-step-card.active{
    transform:translateY(-4px);
    border-color:var(--primary-color);
    box-shadow:0 16px 34px -18px var(--primary-color);
}
.guide-step-top{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:10px;
}
.guide-step-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-color),var(--right-btn));
    box-shadow:0 10px 22px var(--primary-glow);
}
.guide-step-card:nth-child(2) .guide-step-icon{background:linear-gradient(135deg,var(--middle-btn),var(--primary-color))}
.guide-step-card:nth-child(3) .guide-step-icon{background:linear-gradient(135deg,var(--warning),var(--primary-color))}
.guide-step-card:nth-child(4) .guide-step-icon{background:linear-gradient(135deg,var(--success),var(--middle-btn))}
.guide-step-card h3{
    color:var(--primary-text);
    font-size:.98rem;
    line-height:1.25;
}
.guide-step-card p{
    color:var(--gray-text);
    font-size:.82rem;
    line-height:1.65;
}
.guide-step-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px;
}
.guide-chip{
    padding:5px 9px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.7rem;
    font-weight:700;
}
.guide-panel{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    overflow:hidden;
}
.guide-panel-top{
    padding:18px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,var(--primary-glow),transparent);
}
.guide-panel-top h3{
    color:var(--primary-text);
    font-size:1rem;
    margin-bottom:7px;
}
.guide-panel-top p{
    color:var(--gray-text);
    font-size:.8rem;
    line-height:1.6;
}
.guide-checklist{
    padding:16px;
    display:grid;
    gap:10px;
}
.guide-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--label-color);
    font-size:.82rem;
    line-height:1.5;
}
.guide-check i{
    color:var(--success);
    margin-top:3px;
}
.guide-action-row{
    display:flex;
    gap:10px;
    padding:0 16px 16px;
}
.guide-action{
    flex:1;
    border:none;
    border-radius:var(--radius-sm);
    padding:11px 12px;
    cursor:pointer;
    font-size:.78rem;
    font-weight:700;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-color),var(--right-btn));
    box-shadow:0 10px 22px var(--primary-glow);
    transition:.2s ease;
}
.guide-action:hover{
    transform:translateY(-2px);
    opacity:.92;
}
@media(max-width:900px){
    .mouse-guide-head{display:grid}
    .mouse-guide-grid{grid-template-columns:1fr}
    .mouse-guide-score{min-width:0}
}
@media(max-width:620px){
    .mouse-guide-section{padding:18px}
    .guide-steps{grid-template-columns:1fr}
    .guide-action-row{flex-direction:column}
}


/* Features Section */
.mouse-features-section{
    /* margin-top:28px; */
    padding:26px;
    /* border-radius:var(--radius-lg); */
    /* border:1px solid var(--border); */
    background:linear-gradient(135deg,var(--card-color),var(--section-bg));
    /* box-shadow:var(--box-shadow); */
    position:relative;
    overflow:hidden;
}
.mouse-features-section:before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-90px;
    top:-90px;
    background:radial-gradient(circle,var(--primary-glow),transparent 70%);
    pointer-events:none;
}
.features-head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}
.features-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.74rem;
    font-weight:700;
    margin-bottom:10px;
}
.features-head h2{
    color:var(--heading-color);
    font-size:clamp(1.45rem,2.5vw,2.15rem);
    line-height:1.12;
    margin-bottom:8px;
}
.features-head p{
    max-width:640px;
    color:var(--gray-text);
    font-size:.92rem;
    line-height:1.7;
}
.features-mini-badge{
    min-width:150px;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    text-align:center;
}
.features-mini-badge strong{
    display:block;
    color:var(--primary-color);
    font-size:1.8rem;
    line-height:1;
}
.features-mini-badge span{
    display:block;
    margin-top:6px;
    color:var(--gray-text);
    font-size:.74rem;
    font-weight:600;
}
.features-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.feature-card{
    padding:18px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.feature-card:hover{
    transform:translateY(-5px);
    border-color:var(--primary-color);
    box-shadow:0 16px 34px -18px var(--primary-color);
}
.feature-icon{
    width:46px;
    height:46px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:1.05rem;
    background:linear-gradient(135deg,var(--primary-color),var(--right-btn));
    box-shadow:0 10px 22px var(--primary-glow);
    margin-bottom:14px;
}
.feature-card:nth-child(2) .feature-icon{background:linear-gradient(135deg,var(--middle-btn),var(--primary-color))}
.feature-card:nth-child(3) .feature-icon{background:linear-gradient(135deg,var(--warning),var(--primary-color))}
.feature-card:nth-child(4) .feature-icon{background:linear-gradient(135deg,var(--success),var(--middle-btn))}
.feature-card:nth-child(5) .feature-icon{background:linear-gradient(135deg,var(--danger),var(--right-btn))}
.feature-card:nth-child(6) .feature-icon{background:linear-gradient(135deg,var(--primary-color),var(--middle-btn))}
.feature-card h3{
    color:var(--primary-text);
    font-size:1rem;
    line-height:1.3;
    margin-bottom:8px;
}
.feature-card p{
    color:var(--gray-text);
    font-size:.82rem;
    line-height:1.65;
}
.feature-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:13px;
}
.feature-tags span{
    padding:5px 9px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.68rem;
    font-weight:700;
}
@media(max-width:980px){
    .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
    .mouse-features-section{padding:18px}
    .features-head{display:grid}
    .features-mini-badge{min-width:0}
    .features-grid{grid-template-columns:1fr}
}



/* Content Section */
.mouse-content-section{
    /* margin-top:28px; */
    padding:26px;
    /* border:1px solid var(--border); */
    /* border-radius:var(--radius-lg); */
    background:var(--section-bg);
    /* box-shadow:var(--box-shadow); */
}
.content-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:22px;
    align-items:center;
}
.content-visual{
    min-height:310px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:
        radial-gradient(circle at 30% 20%,var(--primary-glow),transparent 34%),
        linear-gradient(135deg,var(--section-bg),var(--card-color));
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
}
.content-visual:before{
    content:"";
    position:absolute;
    inset:22px;
    border:1px dashed var(--border);
    border-radius:var(--radius-md);
}
.content-mouse-card{
    position:relative;
    z-index:1;
    width:min(260px,80%);
    padding:22px;
    border-radius:24px;
    background:var(--card-color);
    border:1px solid var(--border);
    box-shadow:var(--card-shadow);
    text-align:center;
}
.content-mouse-icon{
    width:86px;
    height:86px;
    margin:0 auto 16px;
    border-radius:28px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:2.1rem;
    background:linear-gradient(135deg,var(--primary-color),var(--right-btn));
    box-shadow:0 18px 36px var(--primary-glow);
}
.content-mouse-card strong{
    display:block;
    color:var(--primary-text);
    font-size:1rem;
    margin-bottom:6px;
}
.content-mouse-card span{
    color:var(--gray-text);
    font-size:.78rem;
}
.content-dot{
    position:absolute;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--primary-color);
    box-shadow:0 0 0 8px var(--primary-glow);
    animation:contentDotMove 4s ease-in-out infinite;
}
@keyframes contentDotMove{
    0%,100%{left:18%;top:22%}
    25%{left:76%;top:28%}
    50%{left:68%;top:76%}
    75%{left:24%;top:68%}
}
.content-info{
    display:grid;
    gap:16px;
}
.content-kicker{
    display:inline-flex;
    width:max-content;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.74rem;
    font-weight:700;
}
.content-info h2{
    color:var(--heading-color);
    font-size:clamp(1.5rem,2.6vw,2.2rem);
    line-height:1.15;
}
.content-info p{
    color:var(--gray-text);
    font-size:.92rem;
    line-height:1.75;
}
.content-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:4px;
}
.content-point{
    display:flex;
    gap:11px;
    padding:14px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--section-bg);
}
.content-point i{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-color),var(--middle-btn));
}
.content-point  strong{
    display:block;
    color:var(--primary-text);
    font-size:.86rem;
    margin-bottom:3px;
}
.content-point span{
    color:var(--gray-text);
    font-size:.75rem;
    line-height:1.5;
}
@media(max-width:900px){
    .content-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
    .mouse-content-section{padding:18px}
    .content-points{grid-template-columns:1fr}
    .content-visual{min-height:260px}
}



/* Example Section */
.mouse-example-section{
    /* margin-top:28px; */
    padding:26px;
    /* border:1px solid var(--border); */
    /* border-radius:var(--radius-lg); */
    background:
        radial-gradient(circle at 85% 15%,var(--primary-glow),transparent 32%),
        linear-gradient(135deg,var(--card-color),var(--section-bg));
    /* box-shadow:var(--box-shadow); */
    overflow:hidden;
}
.example-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}
.example-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.74rem;
    font-weight:700;
    margin-bottom:10px;
}
.example-head h2{
    color:var(--heading-color);
    font-size:clamp(1.45rem,2.5vw,2.15rem);
    line-height:1.12;
    margin-bottom:8px;
}
.example-head p{
    max-width:650px;
    color:var(--gray-text);
    font-size:.92rem;
    line-height:1.7;
}
.example-status-pill{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:max-content;
    padding:11px 14px;
    border-radius:999px;
    background:var(--card-color);
    border:1px solid var(--border);
    color:var(--primary-color);
    font-size:.78rem;
    font-weight:700;
    box-shadow:var(--card-shadow);
}
.example-status-pill span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 6px rgba(34,197,94,.14);
}
.example-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.example-preview{
    padding:18px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
}
.preview-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}
.preview-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--primary-text);
    font-weight:700;
    font-size:.95rem;
}
.preview-title i{
    width:36px;
    height:36px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-color),var(--right-btn));
}
.preview-badge{
    padding:6px 10px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.7rem;
    font-weight:700;
}
.example-test-box{
    min-height:230px;
    border-radius:var(--radius-md);
    border:1px dashed var(--border);
    background:
        linear-gradient(90deg,var(--canvas-grid) 1px,transparent 1px),
        linear-gradient(var(--canvas-grid) 1px,transparent 1px),
        var(--canvas-bg);
    background-size:28px 28px;
    position:relative;
    overflow:hidden;
}
.example-cursor-line{
    position:absolute;
    left:14%;
    top:58%;
    width:70%;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--primary-color),var(--middle-btn));
}
.example-cursor-dot{
    position:absolute;
    left:68%;
    top:51%;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--primary-color);
    box-shadow:0 0 0 10px var(--primary-glow);
    animation:exampleCursorMove 3.8s ease-in-out infinite;
}
@keyframes exampleCursorMove{
    0%,100%{left:18%;top:34%}
    35%{left:72%;top:42%}
    70%{left:48%;top:72%}
}
.example-mini-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:14px;
}
.example-stat{
    padding:12px;
    border-radius:var(--radius-sm);
    background:var(--section-bg);
    border:1px solid var(--border);
    text-align:center;
}
.example-stat strong{
    display:block;
    color:var(--primary-color);
    font-size:1.15rem;
    line-height:1;
}
.example-stat span{
    display:block;
    margin-top:6px;
    color:var(--gray-text);
    font-size:.7rem;
    font-weight:600;
}
.example-cards{
    display:grid;
    gap:12px;
}
.example-card{
    display:flex;
    gap:13px;
    padding:16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    transition:transform .22s ease,border-color .22s ease;
}
.example-card:hover{
    transform:translateY(-4px);
    border-color:var(--primary-color);
}
.example-card-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-color),var(--middle-btn));
    box-shadow:0 10px 22px var(--primary-glow);
}
.example-card:nth-child(2) .example-card-icon{background:linear-gradient(135deg,var(--warning),var(--primary-color))}
.example-card:nth-child(3) .example-card-icon{background:linear-gradient(135deg,var(--success),var(--middle-btn))}
.example-card:nth-child(4) .example-card-icon{background:linear-gradient(135deg,var(--danger),var(--right-btn))}
.example-card h3{
    color:var(--primary-text);
    font-size:.95rem;
    margin-bottom:5px;
}
.example-card p{
    color:var(--gray-text);
    font-size:.8rem;
    line-height:1.6;
}
@media(max-width:900px){
    .example-head{display:grid}
    .example-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
    .mouse-example-section{padding:18px}
    .example-mini-stats{grid-template-columns:1fr}
    .example-card{padding:14px}
}



/* FAQ Section */
.mouse-faq-section{
    /* margin-top:28px; */
    padding:26px;
    /* border:1px solid var(--border); */
    /* border-radius:var(--radius-lg); */
    background:linear-gradient(135deg,var(--card-color),var(--section-bg));
    /* box-shadow:var(--box-shadow); */
}
.faq-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}
.faq-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.74rem;
    font-weight:700;
    margin-bottom:10px;
}
.faq-head h2{
    color:var(--heading-color);
    font-size:clamp(1.45rem,2.5vw,2.15rem);
    line-height:1.12;
    margin-bottom:8px;
}
.faq-head p{
    max-width:650px;
    color:var(--gray-text);
    font-size:.92rem;
    line-height:1.7;
}
.faq-count{
    min-width:145px;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    text-align:center;
}
.faq-count strong{
    display:block;
    color:var(--primary-color);
    font-size:1.8rem;
    line-height:1;
}
.faq-count span{
    display:block;
    margin-top:6px;
    color:var(--gray-text);
    font-size:.74rem;
    font-weight:600;
}
.faq-list{
    display:grid;
    gap:12px;
}
.faq-item{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    overflow:hidden;
    transition:border-color .22s ease,box-shadow .22s ease;
}
.faq-item.active{
    border-color:var(--primary-color);
    box-shadow:0 16px 34px -20px var(--primary-color);
}
.faq-question{
    width:100%;
    border:none;
    background:transparent;
    color:var(--primary-text);
    padding:16px 18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    text-align:left;
    font-size:.92rem;
    font-weight:700;
}
.faq-question span{
    display:flex;
    align-items:center;
    gap:10px;
}
.faq-question span i{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,var(--primary-color),var(--right-btn));
    flex:0 0 34px;
}
.faq-arrow{
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--badge-bg);
    color:var(--badge-text);
    transition:transform .25s ease;
    flex:0 0 30px;
}
.faq-item.active .faq-arrow{
    transform:rotate(180deg);
}
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}
.faq-answer-inner{
    padding:0 18px 18px 62px;
    color:var(--gray-text);
    font-size:.84rem;
    line-height:1.75;
}
@media(max-width:680px){
    .mouse-faq-section{padding:18px}
    .faq-head{display:grid}
    .faq-count{min-width:0}
    .faq-question{padding:14px}
    .faq-answer-inner{padding:0 14px 16px 14px}
}



/* Related Tools Section */
.related-tools-section{
    /* margin-top:28px; */
    padding:26px;
    /* border:1px solid var(--border); */
    /* border-radius:var(--radius-lg); */
    background:
        radial-gradient(circle at 15% 15%,var(--primary-glow),transparent 34%),
        linear-gradient(135deg,var(--card-color),var(--section-bg));
    /* box-shadow:var(--box-shadow); */
    overflow:hidden;
}
.related-tools-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}
.related-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--badge-bg);
    color:var(--badge-text);
    font-size:.74rem;
    font-weight:700;
    margin-bottom:10px;
}
.related-tools-head h2{
    color:var(--heading-color);
    font-size:clamp(1.45rem,2.5vw,2.15rem);
    line-height:1.12;
    margin-bottom:8px;
}
.related-tools-head p{
    max-width:650px;
    color:var(--gray-text);
    font-size:.92rem;
    line-height:1.7;
}
.related-count{
    min-width:145px;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    text-align:center;
}
.related-count strong{
    display:block;
    color:var(--primary-color);
    font-size:1.8rem;
    line-height:1;
}
.related-count span{
    display:block;
    margin-top:6px;
    color:var(--gray-text);
    font-size:.74rem;
    font-weight:600;
}
.related-tools-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.related-tool-card{
    position:relative;
    padding:18px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--card-color);
    box-shadow:var(--card-shadow);
    text-decoration:none;
    overflow:hidden;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.related-tool-card:before{
    content:"";
    position:absolute;
    inset:auto -40px -55px auto;
    width:130px;
    height:130px;
    border-radius:50%;
    background:var(--primary-glow);
    transition:transform .25s ease;
}
.related-tool-card:hover{
    transform:translateY(-5px);
    border-color:var(--primary-color);
    box-shadow:0 16px 34px -18px var(--primary-color);
}
.related-tool-card:hover:before{
    transform:scale(1.25);
}
.related-tool-icon{
    position:relative;
    z-index:1;
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:1.1rem;
    background:linear-gradient(135deg,var(--primary-color),var(--right-btn));
    box-shadow:0 10px 22px var(--primary-glow);
    margin-bottom:14px;
}
.related-tool-card:nth-child(2) .related-tool-icon{background:linear-gradient(135deg,var(--middle-btn),var(--primary-color))}
.related-tool-card:nth-child(3) .related-tool-icon{background:linear-gradient(135deg,var(--warning),var(--primary-color))}
.related-tool-card:nth-child(4) .related-tool-icon{background:linear-gradient(135deg,var(--success),var(--middle-btn))}
.related-tool-card:nth-child(5) .related-tool-icon{background:linear-gradient(135deg,var(--danger),var(--right-btn))}
.related-tool-card:nth-child(6) .related-tool-icon{background:linear-gradient(135deg,var(--primary-color),var(--middle-btn))}
.related-tool-card h3{
    position:relative;
    z-index:1;
    color:var(--primary-text);
    font-size:1rem;
    margin-bottom:7px;
}
.related-tool-card p{
    position:relative;
    z-index:1;
    color:var(--gray-text);
    font-size:.8rem;
    line-height:1.6;
    margin-bottom:14px;
}
.related-tool-link{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--primary-color);
    font-size:.78rem;
    font-weight:700;
}
.related-tool-link i{
    transition:transform .22s ease;
}
.related-tool-card:hover .related-tool-link i{
    transform:translateX(4px);
}
@media(max-width:980px){
    .related-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
    .related-tools-section{padding:18px}
    .related-tools-head{display:grid}
    .related-count{min-width:0}
    .related-tools-grid{grid-template-columns:1fr}
}