@font-face {
    font-family: 'MontDemo';
    src: url('/public/fonts/Mont-ExtraLightDEMO.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MontDemo';
    src: url('/public/fonts/Mont-HeavyDEMO.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-solid: #072d44;
    --panel: rgba(255, 255, 255, 0.06);
    --panel-border: rgba(255, 255, 255, 0.12);
    --ink: #ecf7ff;
    --ink-weak: #cde6f3;

    --line: rgba(255, 255, 255, 0.15);


    --badge-metal-bg: rgba(255, 255, 255, 0.08);
    --badge-metal-fg: #eaf6fb;
    --badge-chem-bg: rgba(0, 158, 207, 0.18);
    --badge-chem-fg: #c9f3ff;
    --badge-pest-bg: rgba(0, 207, 136, 0.18);
    --badge-pest-fg: #ccffea;

    --danger-bg: rgba(220, 38, 38, 0.18);
    --danger-fg: #ffdcdc;
    --ok-bg: rgba(16, 185, 129, 0.18);
    --ok-fg: #d9ffe9;

    /* WET Global — luminous water blue palette */
    --background: 196 70% 92%;
    --foreground: 196 38% 10%;

    /* Water tokens (HSL) */
    --water-mist: 196 71% 95%;        /* #E6F6FA */
    --water-pale: 195 80% 92%;        /* #D9F1FA */
    --water-cyan: 195 75% 88%;        /* #CDECF7 */
    --water-aqua: 196 70% 85%;        /* #BFE5F3 */
    --water-haze: 195 36% 97%;        /* #F4FAFB */

    --water-charcoal: 196 38% 10%;    /* #102024 */
    --water-charcoal-2: 196 36% 14%;  /* #152B32 */
    --water-charcoal-3: 196 40% 19%;  /* #1D3A44 */

    --wet-blue: 202 100% 45%;         /* #008FE3 */
    --wet-blue-deep: 203 100% 39%;    /* #0077C8 */
    --wet-blue-ink: 206 100% 36%;     /* #006BB6 */

    --gradient-water:
            radial-gradient(ellipse 60% 45% at 8% 18%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%),
            radial-gradient(ellipse 70% 55% at 92% 82%, rgba(0,119,200,0.18) 0%, rgba(0,119,200,0) 65%),
            radial-gradient(ellipse 90% 70% at 50% 50%, rgba(213,240,250,0.55) 0%, rgba(213,240,250,0) 70%),
            conic-gradient(from 210deg at 30% 40%, #EAF8FC 0deg, #D5F0FA 80deg, #BFE6F4 160deg, #CDECF7 240deg, #EAF8FC 360deg),
            linear-gradient(135deg, #E6F6FA 0%, #D5F0FA 45%, #BFE6F4 100%);
    --gradient-water-soft:
            radial-gradient(ellipse 55% 40% at 12% 15%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%),
            radial-gradient(ellipse 65% 50% at 88% 85%, rgba(0,119,200,0.22) 0%, rgba(0,119,200,0) 65%),
            radial-gradient(ellipse 80% 60% at 50% 50%, rgba(207,234,243,0.6) 0%, rgba(207,234,243,0) 70%),
            conic-gradient(from 150deg at 70% 30%, #EAF8FC 0deg, #BFE6F4 90deg, #CDECF7 180deg, #D9F1FA 270deg, #EAF8FC 360deg),
            linear-gradient(160deg, #E6F6FA 0%, #D9F1FA 45%, #BFE6F4 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(190,230,235,0.18));
    --shadow-soft: 0 40px 90px -50px hsla(206, 100%, 36%, 0.18);
    --shadow-glass: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 60px -40px hsla(203,100%,39%,0.18);

    --card: 0 0% 100%;
    --card-foreground: 196 38% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 196 38% 10%;

    --primary: 202 100% 45%;
    --primary-foreground: 0 0% 100%;

    --secondary: 196 60% 94%;
    --secondary-foreground: 196 38% 10%;

    --muted: 196 50% 94%;
    --muted-foreground: 196 20% 38%;

    --accent: 202 100% 45%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 196 40% 86%;
    --input: 196 40% 86%;
    --ring: 202 100% 45%;

    --radius: 0.5rem;

    --sidebar-background: 196 71% 95%;
    --sidebar-foreground: 196 38% 14%;
    --sidebar-primary: 202 100% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 196 60% 92%;
    --sidebar-accent-foreground: 196 38% 14%;
    --sidebar-border: 196 40% 86%;
    --sidebar-ring: 202 100% 45%;
}



@layer base {
    * { @apply border-border; }
    body {
        @apply bg-background text-foreground;
        font-family: 'Manrope', system-ui, -apple-system, sans-serif;
        font-feature-settings: "ss01", "cv11";
        background: var(--gradient-water);
        background-attachment: fixed;
    }
}

@layer utilities {
    .font-manrope {
        font-family: 'Manrope', system-ui, sans-serif;
    }

    .wet-mirror {
        background: linear-gradient(
                105deg,
                #0077C8 0%,
                #0a86d8 38%,
                #cfeaf3 49%,
                #ffffff 50%,
                #cfeaf3 51%,
                #0a86d8 62%,
                #0077C8 100%
        );
        background-size: 220% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: wet-mirror 18s linear infinite;
    }

    @keyframes wet-mirror {
        0% {
            background-position: 0% 50%;
        }
        100% {
            background-position: 200% 50%;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .wet-mirror {
            animation: none;
        }
    }
    .bg-water {
        background: var(--gradient-water);
        position: relative;
    }

    .bg-water::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.45) 54%, transparent 62%),
        linear-gradient(105deg, transparent 60%, rgba(0, 119, 200, 0.08) 72%, transparent 84%);
        mix-blend-mode: screen;
        opacity: 0.7;
    }

    .bg-water-flow {
        position: relative;
        background: var(--gradient-water-soft);
        background-size: 280% 280%;
        background-position: 0% 50%;
        animation: water-flow 16s ease-in-out infinite;
    }

    .bg-water-flow::after {
        content: "";
        position: absolute;
        inset: -10%;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 40% 35% at 20% 30%, hsla(202, 100%, 55%, 0.22), transparent 65%),
        radial-gradient(ellipse 38% 32% at 80% 70%, hsla(195, 90%, 75%, 0.35), transparent 65%),
        radial-gradient(ellipse 30% 28% at 60% 20%, rgba(255, 255, 255, 0.45), transparent 70%),
        radial-gradient(ellipse 34% 30% at 35% 85%, hsla(203, 100%, 45%, 0.18), transparent 70%);
        filter: blur(40px);
        mix-blend-mode: screen;
        animation: water-drift 22s ease-in-out infinite;
    }

    @keyframes water-flow {
        0% {
            background-position: 0% 30%;
        }
        25% {
            background-position: 70% 75%;
        }
        50% {
            background-position: 100% 45%;
        }
        75% {
            background-position: 30% 85%;
        }
        100% {
            background-position: 0% 30%;
        }
    }
    @keyframes water-drift {
        0%, 100% {
            transform: translate3d(0%, 0%, 0) scale(1);
        }
        33% {
            transform: translate3d(4%, -3%, 0) scale(1.08);
        }
        66% {
            transform: translate3d(-3%, 4%, 0) scale(1.05);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .bg-water-flow, .bg-water-flow::after {
            animation: none;
        }
    }
    .bg-water-soft {
        background: var(--gradient-water-soft);
        position: relative;
    }

    /* Deep navy-blue mix (Abbas blue) — only for "Every molecule, accounted for" block */
    .bg-water-abyss {
        background: radial-gradient(ellipse 55% 70% at 8% 12%, hsla(212, 88%, 18%, 0.62), transparent 60%),
        radial-gradient(ellipse 50% 60% at 96% 8%, hsla(208, 82%, 22%, 0.42), transparent 65%),
        radial-gradient(ellipse 65% 55% at 50% 110%, hsla(200, 75%, 70%, 0.35), transparent 70%),
        var(--gradient-water);
        position: relative;
    }

    .bg-water-abyss::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse 40% 50% at 5% 8%, hsla(214, 95%, 14%, 0.55), transparent 55%),
        radial-gradient(ellipse 30% 40% at 100% 0%, hsla(210, 90%, 20%, 0.35), transparent 60%),
        linear-gradient(118deg, transparent 40%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0.40) 56%, transparent 64%),
        linear-gradient(100deg, transparent 58%, hsla(206, 90%, 30%, 0.10) 72%, transparent 86%);
        mix-blend-mode: screen;
        opacity: 0.85;
    }

    .bg-water-abyss::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse 45% 55% at 6% 10%, hsla(215, 100%, 12%, 0.55), transparent 60%);
        mix-blend-mode: multiply;
        opacity: 0.75;
    }

    .bg-water-soft::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(125deg, transparent 32%, rgba(255, 255, 255, 0.6) 44%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.5) 56%, transparent 68%),
        linear-gradient(95deg, transparent 55%, rgba(0, 119, 200, 0.10) 70%, transparent 88%),
        radial-gradient(ellipse 35% 25% at 78% 30%, rgba(255, 255, 255, 0.45), transparent 70%);
        mix-blend-mode: screen;
        opacity: 0.85;
    }

    .bg-glass {
        background: var(--gradient-glass);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border: 1px solid rgba(255,255,255,0.5);
    }
    .shadow-soft { box-shadow: var(--shadow-soft); }
    .shadow-glass { box-shadow: var(--shadow-glass); }
    .text-charcoal { color: hsl(var(--water-charcoal)); }
    .text-charcoal-2 { color: hsl(var(--water-charcoal-2)); }
    .text-wet-blue { color: hsl(var(--wet-blue)); }
    .bg-wet-blue { background-color: hsl(var(--wet-blue)); }
    .border-wet-blue { border-color: hsl(var(--wet-blue)); }

    .hairline { background: linear-gradient(90deg, transparent, hsla(202,100%,45%,0.35), transparent); height: 1px; }

    @keyframes drift {
        0%, 100% { transform: translateY(0) translateX(0); }
        50% { transform: translateY(-6px) translateX(3px); }
    }
    .animate-drift { animation: drift 14s ease-in-out infinite; }

    @keyframes orbit-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .animate-orbit { animation: orbit-slow 80s linear infinite; }

    @keyframes orb-float {
        0%, 100% { transform: translateY(0) scale(1); }
        50%      { transform: translateY(-10px) scale(1.012); }
    }
    .animate-orb-float { animation: orb-float 11s ease-in-out infinite; }

    /* Earth-like rotation: continuous, noticeable amplitude (full revolution ~24s) */
    @keyframes orb-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    .animate-orb-spin { animation: orb-spin 24s linear infinite; transform-origin: 50% 50%; }

    @media (prefers-reduced-motion: reduce) {
        .animate-drift, .animate-orbit, .animate-orb-float, .animate-orb-spin { animation: none; }
    }
}

.pseudo-heading {
    letter-spacing: 0.42em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
    display:inline-block;
}

* {
    box-sizing: border-box
}

html {

}

html, body {
    margin: 0;
    padding: 0;
    overflow-x:hidden;
}

body {
    min-height:100vh;
    color: hsl(var(--water-charcoal));
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px
}

.custom-radio-boxes button[role="radio"] > span {
    display: none;
}
.custom-radio-boxes button[role="radio"][data-state="checked"] > span {
    display: flex;
}
.custom-radio-boxes button[role="radio"][data-state="checked"] {
    border-color: var(--wet-blue, #2563eb); /* подставь свою переменную/цвет вместо border-charcoal-2/40 */
}

.custom-checkbox-boxes button[role="checkbox"] > svg,
[role="checkbox"] > svg {
    display: none;
}
.custom-checkbox-boxes button[role="checkbox"][data-state="checked"] > svg {
    display: block;
}

.header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
    gap: 16px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px
}

.brand .name {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 18px;
    color: #e8fbff
}

.btn {
    padding: 10px 2rem 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 9999px;
    white-space: nowrap;
    border:none;
    outline:none;
}

.btn--primary {
    background-color: hsl(var(--wet-blue));
    box-shadow: var(--shadow-soft);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.btn--primary:hover {
    background-color: hsl(var(--wet-blue-deep));
}

.sm {
    font-size: 13px;
    color: var(--muted)
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
}

.hero {
    border-radius:1rem;
    margin-bottom: 24px;
}

.hero-inner {
    padding: 22px
}

.headline {
    text-align: center;
    margin: 6px 0 10px
}

.headline h1 {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 1.5rem;
    font-weight: 300;
}

.subline {
    text-align: center;
}

.grid {
    display: grid;
    gap: 12px;
    margin: 12px 0
}

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

.card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .20)
}

.card h2 {
    font-size: 16px;
    margin: 0 0 6px;
    color: #eafcff;
    font-weight: 800
}

.kv {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.pill {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #e7faff;
    font-weight: 200
}

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid transparent
}

.badge.metal {
    background: var(--badge-metal-bg);
    color: var(--badge-metal-fg);
    border-color: rgba(255, 255, 255, 0.18)
}

.badge.chem {
    background: var(--badge-chem-bg);
    color: var(--badge-chem-fg);
    border-color: rgba(0, 158, 207, 0.35)
}

.badge.pest {
    background: var(--badge-pest-bg);
    color: var(--badge-pest-fg);
    border-color: rgba(0, 207, 136, 0.35)
}

.table-wrap {
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    background: var(--panel);
    margin-top: 12px;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 992px) {
    .table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap::-webkit-scrollbar {
        height: 8px;
    }

    .table-wrap::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .table-wrap::-webkit-scrollbar-thumb {
        background: rgba(0, 158, 207, 0.3);
        border-radius: 4px;
        border: 1px solid rgba(0, 158, 207, 0.1);
    }

    .table-wrap::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 158, 207, 0.5);
    }

    .table-wrap {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 158, 207, 0.3) rgba(255, 255, 255, 0.05);
    }

    .table {
        min-width: 100%;
        width: max-content;
    }
}

.table thead th {
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-weak);
    padding: 10px 12px;
    font-weight: 800
}

.table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 14px;
    color: #e9fbff;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.table tbody td:last-of-type {
    border-right: none;
}

.table tbody td.text-center {
    text-align: center
}

.table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02)
}

.table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03)
}

.flag {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.06);
    color: #e9fbff;
    font-weight: 800
}

.flag.ok {
    background: var(--ok-bg);
    color: var(--ok-fg);
    border-color: rgba(16, 185, 129, 0.45)
}

.flag.bad {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-color: rgba(220, 38, 38, 0.45)
}

.row-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap
}

.checkbox label, .row-actions label {
    cursor: pointer
}

@media (max-width: 760px) {
    .container {
        padding: 14px
    }

    .brand .name {
        font-size: 16px
    }

    .headline h1 {
        font-size: 24px
    }

    .grid.cols-3 {
        grid-template-columns:1fr
    }

    .form {
        flex-direction: column
    }

    .btn {
        width: 100%
    }
}

.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 45, 68, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 90%;
    max-width: 450px;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.modal.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 158, 207, 0.1) 0%, rgba(0, 207, 136, 0.1) 100%);
}

.modal-header h2 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #009ecf 0%, #00cf88 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-close {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.05);
    color:#fff;
}

.modal-close:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.modal-body p {
    margin: 12px 0 20px 0;
    color: var(--ink-weak);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    padding:0 24px;
}

#verificationError {
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--danger-bg);
    color: var(--danger-fg);
    text-align: center;
    font-size: 14px;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Адаптивность */
@media (max-width: 768px) {
    .modal-content {
        margin: 20px;
        width: calc(100% - 40px);
        max-width: none;
    }

    .modal-header {
        padding: 20px;
    }

    .modal-body {
        padding: 20px;
    }

    #verificationForm .input {
        font-size: 20px;
        padding: 14px 18px;
    }
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-dropdown {
    position: relative;
    min-width: 180px;
}

.dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.dropdown-arrow {
    display:block;
    width:16px;
    height:16px;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    border-radius: 12px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.custom-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s ease, color .2s ease;
    font-weight:400;
    background: hsl(195deg 86.56% 88.28%);
}

.dropdown-option:hover {
    background: hsl(var(--wet-blue));
    color:#fff;
}

.dropdown-option.active {
    background: hsl(var(--wet-blue));
    color:#fff;
}

.dropdown-option:first-child {
    border-radius: 12px 12px 0 0;
}

.dropdown-option:last-child {
    border-radius: 0 0 12px 12px;
}

.dropdown-option:only-child {
    border-radius: 12px;
}



#errorMessage {
    text-align: center;
    max-width: 420px;
    margin: 20px auto;
    color: #e91b1b;
}