.tw-page {
    display: grid;
    gap: 18px
}

.tw-page h2,
.tw-page p,
.tw-panel h3 {
    margin: 0
}

.tw-panel {
    border: 1px solid #27354a;
    border-radius: 15px
}

.tw-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px
}

.tw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.tw-panel label {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    font-weight: 700
}

.tw-panel input,
.tw-panel select,
.tw-panel textarea {
    box-sizing: border-box;
    width: 100%;
    background: #0d1420;
    color: #eef4ff;
    border: 1px solid #344258;
    border-radius: 8px;
    padding: 10px 12px
}

.tw-check {
    display: flex !important;
    align-items: center;
    gap: 8px
}

.tw-check input {
    width: auto
}

.tw-options,
.tw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.tw-actions button {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #3b82f6;
    background: #15233a;
    color: #dceaff;
    cursor: pointer
}

.tw-help {
    color: #9ba9ba;
    margin: 8px 0 18px !important
}

.tw-notice {
    padding: 13px;
    border-radius: 10px
}

.tw-notice.success {
    background: rgba(35, 160, 80, .17);
    border: 1px solid #32c671
}

.tw-notice.error {
    background: rgba(205, 55, 65, .17);
    border: 1px solid #dc5963
}

.tw-notice.hidden {
    display: none
}

.tw-status p {
    margin: 7px 0
}

@media(max-width:750px) {
    .tw-grid {
        grid-template-columns: 1fr
    }

    .tw-heading {
        align-items: flex-start;
        flex-direction: column
    }
}