/* Сервер лицензий — оформление.
   Тот же тёмно-красный, что в «Защите» и в руководстве, чтобы всё
   хозяйство выглядело одним инструментом. */

:root {
    --чернила:   #1a1a1a;
    --тихий:     #6b6b6b;
    --красный:   #8c2f1f;
    --красный-т: #6c2216;
    --зелёный:   #2e6b3a;
    --жёлтый:    #8a6d1f;
    --бумага:    #ffffff;
    --поле:      #f7f5f0;
    --линия:     #e0dcd4;
    --скругление: 10px;
    --тень: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
}

@media (prefers-color-scheme: dark) {
    :root {
        --чернила: #ececec;
        --тихий:   #9a9a9a;
        --красный: #d4634d;
        --красный-т: #b8503c;
        --зелёный: #6fbc82;
        --жёлтый:  #d0aa4e;
        --бумага:  #17181a;
        --поле:    #202225;
        --линия:   #303338;
        --тень: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--чернила);
    background: var(--бумага);
}

code, .моно, input[name="serial"], input[name="hwid"] {
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
}

a { color: var(--красный); }
a:hover { color: var(--красный-т); }

.ширина { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------- шапка */

.шапка {
    border-bottom: 1px solid var(--линия);
    background: var(--поле);
    position: sticky; top: 0; z-index: 5;
}
.шапка-ряд {
    display: flex; align-items: center; gap: 24px;
    padding-top: 12px; padding-bottom: 12px;
}
.шапка-ряд strong { color: var(--красный); font-size: 16px; }
.шапка-ряд .тихо { margin-left: auto; }

.вкладки { display: flex; gap: 4px; }
.вкладки a {
    padding: 6px 14px; border-radius: 999px;
    text-decoration: none; color: var(--тихий);
    transition: background .15s, color .15s;
}
.вкладки a:hover { background: rgba(140,47,31,.08); color: var(--красный); }
.вкладки a.тут { background: var(--красный); color: #fff; }

/* ---------------------------------------------------------- блоки */

.карта {
    border: 1px solid var(--линия);
    border-radius: var(--скругление);
    padding: 20px 22px;
    margin: 22px 0;
    background: var(--бумага);
    box-shadow: var(--тень);
}
.карта h2 {
    margin: 0 0 14px;
    font-size: 17px; font-weight: 600;
    color: var(--красный);
}

.тихо  { color: var(--тихий); font-size: 13px; }
.весть {
    padding: 11px 16px; border-radius: var(--скругление);
    border-left: 3px solid var(--зелёный);
    background: var(--поле);
    margin: 20px 0 0;
}
.весть.беда { border-left-color: var(--красный); }

/* ---------------------------------------------------------- формы */

label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--тихий); }
label small { color: var(--тихий); opacity: .8; }

input, select, button {
    font: inherit;
    color: var(--чернила);
    border: 1px solid var(--линия);
    border-radius: 8px;
    padding: 9px 11px;
    background: var(--бумага);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--красный);
    box-shadow: 0 0 0 3px rgba(140,47,31,.14);
}
input[type="file"] { padding: 6px; font-size: 12px; }

button {
    cursor: pointer;
    background: var(--поле);
    white-space: nowrap;
}
button:hover { border-color: var(--красный); color: var(--красный); }
button.главная {
    background: var(--красный); color: #fff; border-color: var(--красный);
    font-weight: 600; align-self: end;
}
button.главная:hover { background: var(--красный-т); color: #fff; }
button.опасно:hover { border-color: var(--красный); color: var(--красный); }

.сетка-3, .сетка-6 { display: grid; gap: 14px; align-items: end; }
.сетка-3 { grid-template-columns: 1fr 1fr auto; }
.сетка-6 { grid-template-columns: repeat(3, 1fr) auto; }
@media (max-width: 900px) {
    .сетка-3, .сетка-6 { grid-template-columns: 1fr; }
    button.главная { align-self: stretch; }
}

.встрок { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.рядом  { display: flex; gap: 6px; flex-wrap: wrap; }
.рядом form { display: inline; }

.поиск { width: 100%; margin-bottom: 14px; }

/* ---------------------------------------------------------- таблицы */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
    text-align: left; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--тихий);
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--чернила);
}
td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--линия); vertical-align: top; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--поле); }

.метка {
    display: inline-block;
    padding: 2px 10px; border-radius: 999px;
    font-size: 12px; white-space: nowrap;
    border: 1px solid currentColor;
}
.метка.хорошо   { color: var(--зелёный); }
.метка.плохо    { color: var(--красный); }
.метка.внимание { color: var(--жёлтый); }

.копия { cursor: pointer; border-bottom: 1px dashed var(--тихий); }
.копия:hover { color: var(--красный); border-bottom-color: var(--красный); }
.копия.взято { color: var(--зелёный); border-bottom-color: var(--зелёный); }

/* ---------------------------------------------------------- вход */

body.вход {
    display: grid; place-items: center; min-height: 100vh;
    background: var(--поле);
}
.карточка {
    width: min(380px, calc(100vw - 40px));
    background: var(--бумага);
    border: 1px solid var(--линия);
    border-radius: 14px;
    padding: 30px 32px 28px;
    box-shadow: var(--тень);
    display: flex; flex-direction: column; gap: 14px;
}
.карточка h1 { margin: 0; font-size: 21px; color: var(--красный); }
.карточка p  { margin: 0; }
.карточка .беда { color: var(--красный); font-size: 14px; }