* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    background: #0f1218;
    color: #e6e8ee;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 1.25rem;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    -webkit-tap-highlight-color: transparent
}

.card {
    width: min(600px, 94vw);
    background: #181d27;
    border: 1px solid #262d3b;
    border-radius: 20px;
    padding: 36px;
    margin: 30px 0
}

.card.wide {
    width: min(1200px, 96vw)
}

h1 {
    margin: 0 0 25px;
    font-size: 1.75rem;
    overflow-wrap: anywhere
}

h2 {
    margin: 0 0 10px;
    font-size: 1.3rem
}

p {
    margin: 8px 0;
    overflow-wrap: anywhere
}

.muted {
    color: #8b93a7;
    font-size: 1.05rem
}

.step {
    border: 1px solid #262d3b;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 18px
}

.step.active {
    border-color: #4c6ef5
}

.step.done {
    border-color: #2f9e44
}

.step.locked {
    opacity: .5
}

.btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 1.15rem;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation
}

.btn.steam {
    background: #1b2838
}

.btn.discord {
    background: #5865f2
}

.btn.danger {
    background: #c92a2a
}

.btn.admin {
    background: #e8590c
}

.btn.ghost {
    background: transparent;
    border: 1px solid #262d3b;
    color: #8b93a7
}

.btn.inline {
    width: auto;
    margin-top: 0;
    padding: 13px 24px
}

.btn:hover {
    filter: brightness(1.15)
}

.alert {
    padding: 13px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 1.15rem;
    overflow-wrap: anywhere
}

.alert.ok {
    background: #12351f;
    color: #8ce99a
}

.alert.err {
    background: #3b1518;
    color: #ffa8a8
}

label {
    display: block;
    margin: 18px 0 8px;
    font-size: 1.1rem
}

input[type=text], input[type=number], input:not([type]), input[inputmode] {
    width: 100%;
    padding: 13px 16px;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid #262d3b;
    background: #0f1218;
    color: #e6e8ee;
    font-size: 1.15rem
}

input:focus {
    outline: 3px solid #4c6ef5;
    border-color: transparent
}

.search {
    display: flex;
    gap: 12px;
    margin-bottom: 20px
}

.search input {
    flex: 1;
    min-width: 0
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.15rem
}

th, td {
    text-align: left;
    padding: 13px 10px;
    border-bottom: 1px solid #262d3b;
    vertical-align: top
}

th {
    color: #8b93a7;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    white-space: nowrap
}

.link {
    color: #74a0ff;
    text-decoration: none;
    overflow-wrap: anywhere
}

.link:hover {
    text-decoration: underline
}

/* ===== Пагинация ===== */
.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px 0 8px
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #262d3b;
    border-radius: 12px;
    background: #0f1218;
    color: #e6e8ee;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: background-color .15s, border-color .15s
}

a.pager-btn:hover {
    background: #1d2433;
    border-color: #4c6ef5
}

a.pager-btn:focus-visible {
    outline: 3px solid #4c6ef5;
    outline-offset: 2px
}

.pager-btn.current {
    background: #4c6ef5;
    border-color: #4c6ef5;
    color: #fff;
    cursor: default
}

.pager-btn.disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none
}

.pager-gap {
    color: #8b93a7;
    padding: 0 2px
}

.pager-info {
    text-align: center;
    color: #8b93a7;
    font-size: .95rem;
    margin: 4px 0 0
}

/* ===== Страница ошибок ===== */

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 30px;
    gap: 16px;
    padding: 20px;
}

.error-container h1 {
    margin: 0;
    font-size: 75px;
}

.error-container p {
    margin: 0;
}

@media (max-width: 600px) {
    .pager {
        gap: 6px
    }

    .pager-btn {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: .95rem
    }

    .pager-info {
        font-size: .85rem
    }
}

@media (hover: none) {
    a.pager-btn:hover {
        background: #0f1218;
        border-color: #262d3b
    }

    a.pager-btn:active {
        background: #1d2433;
        border-color: #4c6ef5
    }
}

/* ===== Планшеты ===== */
@media (max-width: 900px) {
    body {
        font-size: 1.1rem
    }

    .card {
        padding: 28px
    }

    h1 {
        font-size: 1.5rem
    }

    table {
        font-size: 1rem
    }
}

/* ===== Телефоны ===== */
@media (max-width: 600px) {
    body {
        font-size: 1rem;
        place-items: start center
    }

    .card,
    .card.wide {
        width: calc(100% - 24px);
        padding: 20px 16px;
        margin: 12px 0;
        border-radius: 14px
    }

    h1 {
        font-size: 1.3rem;
        margin-bottom: 16px
    }

    h2 {
        font-size: 1.1rem
    }

    .muted {
        font-size: .9rem
    }

    .step {
        padding: 14px;
        margin-bottom: 12px;
        border-radius: 12px
    }

    .btn {
        font-size: 1rem;
        padding: 13px;
        border-radius: 10px
    }

    .btn.inline {
        width: 100%;
        margin-top: 10px
    }

    .alert {
        font-size: .95rem;
        padding: 11px 13px
    }

    label {
        font-size: 1rem;
        margin: 14px 0 6px
    }

    /* 16px — чтобы iOS Safari не приближал страницу при фокусе */
    input[type=text], input[type=number], input:not([type]), input[inputmode] {
        font-size: 16px;
        padding: 12px 14px
    }

    .search {
        flex-direction: column;
        gap: 10px
    }

    /* таблица прокручивается по горизонтали, а не ломает страницу */
    table {
        font-size: .9rem;
        min-width: 560px
    }

    th, td {
        padding: 10px 8px
    }

    th {
        font-size: .75rem
    }
}

/* ===== Очень маленькие экраны ===== */
@media (max-width: 360px) {
    .card,
    .card.wide {
        width: calc(100% - 16px);
        padding: 16px 12px
    }

    h1 {
        font-size: 1.15rem
    }
}

/* ===== Устройства без hover (тач) ===== */
@media (hover: none) {
    .btn:hover {
        filter: none
    }

    .btn:active {
        filter: brightness(1.2)
    }

    .link:hover {
        text-decoration: none
    }
}

/* Ссылки-действия: на десктопе обычный текст */
.act-danger {
    color: #ff8787
}

.sep {
    color: #8b93a7;
    margin: 0 4px
}

.cell-val {
    min-width: 0;
    overflow-wrap: anywhere
}

/* ===== Админ-таблица: карточки на мобильных ===== */
@media (max-width: 700px) {
    .table-wrap {
        overflow: visible
    }

    table.responsive,
    table.responsive tbody {
        display: block;
        min-width: 0;
        width: 100%
    }

    table.responsive thead {
        display: none
    }

    table.responsive tr {
        display: block;
        background: #0f1218;
        border: 1px solid #262d3b;
        border-radius: 12px;
        padding: 4px 14px;
        margin-bottom: 12px
    }

    table.responsive td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 1px solid #262d3b;
        text-align: right;
        overflow-wrap: anywhere
    }

    table.responsive td:last-child {
        border-bottom: 0
    }

    table.responsive td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: #8b93a7;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        text-align: left;
        padding-top: 2px
    }

    /* Кнопки действий */
    table.responsive td.actions {
        gap: 10px;
        padding: 12px 0 8px
    }

    table.responsive td.actions::before,
    table.responsive td.empty::before,
    .sep {
        display: none
    }

    table.responsive td.empty {
        display: block;
        text-align: center;
        border: 0
    }

    .act {
        flex: 1;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #262d3b;
        border-radius: 10px;
        text-decoration: none
    }

    .act-danger {
        border-color: #5c2226;
        background: #3b1518
    }
}