:root {
    --bg: #121212;
    --panel: #1e1e1e;
    --text: #e0e0e0;
    --accent: #2979ff;
    --accent2: #f50057;
    --radius: 10px;
    --space: 1.2rem;
}

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui,sans-serif;
}
/* ─── основной блок ─── */
.box {
    position: relative;
    width: 80vw;
    max-width: none; /* ← растянули до 80% ширины экрана */
    margin: var(--space) auto;
    padding: calc(2*var(--space));
    background: var(--panel);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--space);
    box-shadow: 0 0 30px #000a;
    text-align: center;
}

h1 {
    margin: 0 0 var(--space);
    font-weight: 500;
}
/* опции */
.search-opts {
    position: absolute;
    right: var(--space);
    top: var(--space);
    display: flex;
    gap: 1rem;
    font-size: .85rem;
    opacity: .8;
}

    .search-opts label {
        cursor: pointer;
        user-select: none;
    }
/* поиск */
.search-row {
    display: flex;
    gap: var(--space);
}

input[type=text] {
    flex: 1;
    padding: .8rem 1rem;
    font-size: 1rem;
    background: #2b2b2b;
    border: none;
    border-radius: var(--radius);
    color: var(--text);
}

button {
    padding: .8rem 1.2rem;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    background: #333;
    color: var(--text);
    transition: background .2s;
}

    button:hover:not(:disabled) {
        background: #444;
    }

    button:disabled {
        opacity: .5;
        cursor: default;
    }

    button.primary {
        background: var(--accent);
    }

        button.primary:hover:not(:disabled) {
            background: #1c6dff;
        }
/* результаты */
.result {
    display: none;
    white-space: pre-wrap;
    text-align: left;
    max-height: 60vh;
    overflow: auto;
    line-height: 1.4;
    border-top: 1px solid #333;
    padding-top: var(--space);
}

.item {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: .8rem;
    padding-bottom: .8rem;
}

    .item:not(:last-child) {
        border-bottom: 1px solid #2a2a2a;
    }

    .item:nth-child(odd) {
        background: #1a1a1a;
        border-radius: 6px;
    }

    .item:nth-child(even) {
        background: #171717;
        border-radius: 6px;
    }

    .item span {
        display: block;
        padding: .2rem 0;
    }

mark {
    background: #f6d743;
    color: #000;
    padding: 0 .15em;
    border-radius: 4px;
}
/* панель поисковиков */
.engines {
    display: none;
    gap: var(--space);
    align-items: center;
    justify-content: center;
}

    .engines span {
        font-size: .9rem;
        opacity: .8;
    }

    .engines button {
        background: var(--accent2);
    }

        .engines button:hover {
            background: #c51162;
        }
/* футер */
.footer {
    text-align: center;
    font-size: .8rem;
    opacity: .7;
    color: #bbb;
    padding: calc(var(--space)/1.5) 0;
    margin-bottom: var(--space);
}

    .footer a {
        color: var(--accent2);
        text-decoration: none;
    }

        .footer a:hover {
            text-decoration: underline;
        }