:root {
    color-scheme: light dark;
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    
    /* Совместимость со старыми переменными */
    --bg: hsl(var(--background));
    --text: hsl(var(--foreground));
    --card-bg: hsl(var(--card));
    --card-text: hsl(var(--card-foreground));
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.app {
    width: min(28rem, 100%);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.logo-img {
    height: 2rem; /* h-8 = 32px */
    width: auto;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.logo-img:hover {
    opacity: 0.8;
}

header h1 {
    margin: 0;
    font-size: 1.4rem;
    color: #1976d2;
}

header p {
    margin: 0;
    color: hsl(var(--muted-foreground));
}

.captcha-card {
    background: hsl(var(--card));
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border: 1px solid hsl(var(--border));
}

.canvas-wrapper {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
}

#captchaCanvas {
    width: 100%;
    height: auto;
    display: block;
}

#sliderPiece {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.control-row {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.slider-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.slider-track-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%239CA3AF' d='M598.6 342.6C611.1 330.1 611.1 309.8 598.6 297.3L470.6 169.3C458.1 156.8 437.8 156.8 425.3 169.3C412.8 181.8 412.8 202.1 425.3 214.6L498.7 288L64 288C46.3 288 32 302.3 32 320C32 337.7 46.3 352 64 352L498.7 352L425.3 425.4C412.8 437.9 412.8 458.2 425.3 470.7C437.8 483.2 458.1 483.2 470.6 470.7L598.6 342.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    opacity: 0.7;
}

/* Кастомный стиль для широкого слайдера */
input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 48px;
    background: transparent;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
}

/* Трек (полоска) слайдера - как у MUI Switch: серый фон + синий активный участок */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 48px;
    background: linear-gradient(
        to right,
        #2563eb 0%,
        #2563eb var(--slider-fill, 0%),
        #e5e7eb var(--slider-fill, 0%),
        #e5e7eb 100%
    );
    border-radius: 24px;
    transition: background 0.2s ease;
    border: 1px solid #d1d5db;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 48px;
    background: #e5e7eb;
    border-radius: 24px;
    transition: background 0.2s ease;
    border: 1px solid #d1d5db;
}

/* Ползунок - круглый БЕЛЫЙ, с синей обводкой (как у MUI Switch) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    background: #ffffff; /* белый круг */
    border: 3px solid #2563eb; /* синяя обводка */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    margin-top: 4px;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.08);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.15);
}

input[type="range"]::-moz-range-thumb {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 3px solid #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.08);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.15);
}

/* Заполнение трека до ползунка для Firefox */
input[type="range"]::-moz-range-progress {
    height: 48px;
    background: #2563eb;
    border-radius: 24px;
}

#resetBtn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 24px;
    border: none;
    background: #dbeafe; /* водяной голубой */
    color: transparent; /* скрываем текст ↺ */
    cursor: pointer;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23FFFFFF' d='M129.9 292.5C143.2 199.5 223.3 128 320 128C373 128 421 149.5 455.8 184.2C456 184.4 456.2 184.6 456.4 184.8L464 192L416.1 192C398.4 192 384.1 206.3 384.1 224C384.1 241.7 398.4 256 416.1 256L544.1 256C561.8 256 576.1 241.7 576.1 224L576.1 96C576.1 78.3 561.8 64 544.1 64C526.4 64 512.1 78.3 512.1 96L512.1 149.4L500.8 138.7C454.5 92.6 390.5 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6zM573.4 356.5C575.9 339 563.7 322.8 546.3 320.3C528.9 317.8 512.6 330 510.1 347.4C496.8 440.4 416.7 511.9 320 511.9C267 511.9 219 490.4 184.2 455.7C184 455.5 183.8 455.3 183.6 455.1L176 447.9L223.9 447.9C241.6 447.9 255.9 433.6 255.9 415.9C255.9 398.2 241.6 383.9 223.9 383.9L96 384C87.5 384 79.3 387.4 73.3 393.5C67.3 399.6 63.9 407.7 64 416.3L65 543.3C65.1 561 79.6 575.2 97.3 575C115 574.8 129.2 560.4 129 542.7L128.6 491.2L139.3 501.3C185.6 547.4 249.5 576 320 576C449 576 555.7 480.6 573.4 356.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.2);
}

#resetBtn:hover {
    background-color: #bfdbfe;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.35);
}

#resetBtn:active {
    transform: scale(0.96);
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.45);
}

.submit {
    margin-top: 1rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: none;
    background: #2563eb; /* bg-blue-600 */
    color: #fff;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.submit:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
}

.submit:focus-visible {
    outline: none;
    ring-offset-width: 2px;
    ring-offset-color: hsl(var(--background));
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

.submit:active {
    background-color: #1e40af; /* active state */
}

.submit:disabled {
    cursor: not-allowed;
}

.status {
    min-height: 1.25rem;
    margin-top: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.status[data-type="success"] {
    color: hsl(142, 76%, 36%);
}

.status[data-type="error"] {
    color: hsl(0, 84.2%, 60.2%);
}

footer {
    text-align: center;
    color: hsl(var(--muted-foreground));
    font-size: 0.85rem;
}