@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #f4f7fb;
    --bg-soft: #eef3f9;
    --card: #ffffff;
    --text: #182033;
    --muted: #5f6b86;
    --line: #dfe6f2;
    --brand: #1f6fff;
    --brand-strong: #1357d6;
    --ok-bg: #e8fff2;
    --ok-line: #64d49a;
    --warn-bg: #fff5df;
    --warn-line: #f4c86a;
    --err-bg: #ffecef;
    --err-line: #ff8799;
    --shadow: 0 10px 32px rgba(18, 38, 78, 0.08);
    font-family: 'Manrope', 'Segoe UI', Tahoma, sans-serif;
    color: var(--text);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(1200px 500px at -10% -20%, #dbe8ff 0%, transparent 60%),
        radial-gradient(900px 500px at 110% 10%, #dff8ef 0%, transparent 55%),
        var(--bg);
}

.page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px;
}

h1 {
    margin: 0 0 4px;
    font-size: 32px;
    line-height: 1.15;
}

h2 {
    margin: 0 0 8px;
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

.hint {
    margin: 0;
    color: var(--muted);
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 24px;
}

.cabinet-link,
.user-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
    margin-top: 10px;
}

.cabinet-link span,
.user-bar span,
.meta,
.token-owner { color: var(--muted); }

.star-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

.star-filter label {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 6px 10px;
    border-radius: 999px;
}

.control-buttons,
.token-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

button {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(180deg, #2c7bff 0%, #1f6fff 100%);
    color: #fff;
    box-shadow: 0 8px 16px rgba(31, 111, 255, 0.22);
}

button:hover { filter: brightness(1.03); }

button.secondary {
    background: #ecf1fa;
    color: #2c3a57;
    box-shadow: none;
}

.alert,
.reply-form,
.review,
.cabinet-section,
.auto-reply,
.auto-reply-pools,
.auto-reply-logs {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.alert {
    background: var(--warn-bg);
    border-color: var(--warn-line);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.alert-error { background: var(--err-bg); border-color: var(--err-line); }
.alert-success { background: var(--ok-bg); border-color: var(--ok-line); }

.auto-reply,
.auto-reply-pools,
.auto-reply-logs,
.reply-form,
.review,
.cabinet-section {
    padding: 16px;
    margin-bottom: 20px;
}

.auto-reply {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.auto-reply p,
.auto-reply-pools p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.auto-reply-pools form,
.inline-reply form,
.cabinet-form,
.auth-form,
.reply-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

textarea,
.auth-form input,
.cabinet-form input,
.cabinet-form textarea,
.auto-reply-pools textarea {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #cfd9ea;
    font-family: inherit;
    font-size: 14px;
}

.reply-form textarea { min-height: 100px; resize: vertical; }

.reply-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
}

.review__header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rating { margin-left: 8px; color: #ee9700; }
.meta { display: flex; flex-direction: column; text-align: right; font-size: 13px; }

.details { margin: 0; }
.details dt { font-weight: 700; margin-top: 6px; }
.details dd { margin: 0; color: #314261; }

.answer {
    margin-top: 10px;
    padding: 10px;
    background: #f0f6ff;
    border-radius: 10px;
}

.no-answer { margin-top: 10px; color: var(--muted); }

.inline-reply summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 700;
}

.token-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.token-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f8;
}

.token-item:last-child { border-bottom: none; }

.badge {
    background: #eaf4ff;
    color: #1659c9;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    margin-left: 8px;
    font-weight: 700;
}

.badge-inactive {
    background: #ffe9ee;
    color: #b2234e;
}

.inline-form { margin: 0; }
.auth-page { max-width: 480px; }
.auth-form button { width: 100%; }

.logs-table-wrap { overflow-x: auto; }
.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.logs-table th,
.logs-table td {
    border-bottom: 1px solid #ecf1f8;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

@media (max-width: 768px) {
    .page { padding: 12px; }
    h1 { font-size: 24px; }
    h2 { font-size: 18px; }

    .user-bar,
    .cabinet-link,
    .review__header,
    .auto-reply,
    .token-item,
    .reply-form__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .meta { text-align: left; }

    .control-buttons,
    .token-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    button {
        width: 100%;
        padding: 12px 14px;
    }

    .logs-table {
        font-size: 13px;
        min-width: 720px;
    }

    .logs-table th,
    .logs-table td {
        white-space: nowrap;
        padding: 6px;
    }

    .logs-table td:last-child,
    .logs-table th:last-child {
        white-space: normal;
        min-width: 220px;
    }

    .auth-page { max-width: 100%; }
}