* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:Arial,sans-serif; color:var(--text); background:var(--bg); transition: background .35s ease, color .35s ease; min-height:100vh; }
.container { width:min(1100px,92%); margin:0 auto; }
.row { display:flex; align-items:center; justify-content:space-between; }
.top { padding:22px 0; }
.brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; user-select:none; }
.dot { width:12px; height:12px; border-radius:50%; }
.theme-switch-wrapper { display:flex; align-items:center; }
.theme-toggle { display:none; }
.theme-label { position:relative; width:60px; height:30px; display:flex; align-items:center; justify-content:space-between; padding:0 6px; border-radius:30px; cursor:pointer; transition:background .3s, border-color .3s, box-shadow .3s; }
.theme-icon { font-size:18px; line-height:1; transition:color .3s; }
.theme-label::after { content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; transition:transform .3s ease; }
.theme-toggle:checked + .theme-label::after { transform:translateX(30px); }
.hero { text-align:center; padding:40px 0 10px; }
.hero h1 { font-size:46px; margin-bottom:12px; font-weight:800; }
.gauge-wrap { position:relative; width:360px; height:360px; margin:30px auto; }
.gauge { width:100%; height:100%; transform:rotate(-90deg); }
.g-bg { fill:none; stroke-width:18; }
.g-progress { fill:none; stroke-width:18; stroke-linecap:round; stroke-dasharray:880; stroke-dashoffset:880; transition:stroke .3s; }
#needle line { stroke-width:6; stroke-linecap:round; }
#needle circle { transition:fill .3s; }
.center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#speed { font-size:68px; font-weight:800; line-height:1; }
.unit { margin-top:6px; font-size:18px; }
#status { margin-top:12px; font-size:15px; }
.actions { display:flex; justify-content:center; margin:24px 0; }
.primary { padding:16px 28px; border:none; border-radius:999px; font-size:17px; font-weight:700; cursor:pointer; transition:transform .25s, box-shadow .25s, background .25s, opacity .25s; }
.primary:hover { transform:translateY(-2px); }
.primary:active { transform:translateY(0); }
.primary:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }
.card { position:relative; padding:22px; border-radius:18px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform:translateY(-4px); }
.label { margin-bottom:12px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.value { font-size:34px; font-weight:800; line-height:1.2; }
.info { margin:30px 0; padding:24px 0; background:transparent !important; border:none !important; box-shadow:none !important; transition:color .3s; }
.info h2 { margin-bottom:18px; font-size:28px; font-weight:700; color:var(--text); }
.info table { width:100%; border-collapse:collapse; }
.info td { padding:12px 0; border-bottom:1px solid var(--border); color:var(--text); }
.info td:first-child { width:180px; font-weight:600; color:var(--muted); }
.info-desc { margin-top:28px; padding-top:22px; border-top:1px solid var(--border); font-size:17px; line-height:1.7; color:var(--muted); }

/* ==========================================
   ТЕХНИЧЕСКАЯ ИНФОРМАЦИЯ (НОВЫЙ БЛОК)
   ========================================== */
.technical-info {
    margin: 40px 0;
    padding: 24px 0;
    border-top: 1px solid var(--border);
}
.technical-info h2 {
    margin-bottom: 18px;
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
}

/* Блок предупреждения */
.warning-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
}
.warning-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}
.warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #f44336;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.warning-content p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
}
.copy-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 30px;
    background: #ffffff;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.copy-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
body.dark .copy-btn {
    background: #f5f7fb;
    color: #0f172a;
}

/* Таблица технических данных */
.tech-table {
    width: 100%;
    border-collapse: collapse;
}
.tech-table td {
    padding: 10px 0;
    color: var(--text);
}
.tech-table td:first-child {
    width: 200px;
    font-weight: 600;
    color: var(--muted);
}
/* ========================================== */

.footer { padding:30px; text-align:center; font-size:14px; }
a { text-decoration:none; transition:color .25s; }
.card, .theme-label, .primary, .g-progress, #needle line, #needle circle, .dot { transition:background .3s, color .3s, border-color .3s, box-shadow .3s, transform .25s, stroke .3s, fill .3s; }
@media (max-width:900px){ .cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ 
    .hero h1 { font-size:34px; } 
    .gauge-wrap { width:300px; height:300px; } 
    #speed { font-size:52px; } 
    .cards { grid-template-columns:1fr; } 
    .info td:first-child { width:120px; } 
    .tech-table td:first-child { width:120px; }
    .warning-box { flex-direction: column; align-items: flex-start; gap: 15px; }
    .warning-content { flex-wrap: wrap; }
    .copy-btn { width: 100%; justify-content: center; display: flex; }
}