:root {
    color-scheme: dark;
    font-family: Arial, Helvetica, sans-serif;
    background: #15171d;
    color: #f1f4f8;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #15171d;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
.upload-button {
    background: #2f6fed;
    border: 0;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
}

button:hover,
.upload-button:hover {
    background: #3f7cff;
}

.reload-button {
    background: #c86816;
}

.reload-button:hover {
    background: #df7924;
}

.top-nav {
    align-items: center;
    background: #20242d;
    border-bottom: 1px solid #343b49;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 0 18px;
}

.nav-links,
.nav-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.nav-links a {
    border-radius: 6px;
    color: #f1f4f8;
    padding: 8px 10px;
    text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
    background: #303746;
}

.upload-button input {
    display: none;
}

main {
    display: grid;
    gap: 18px;
    height: calc(100vh - 52px);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 18px;
}

.editor {
    background: #20242d;
    border: 1px solid #343b49;
    border-radius: 8px;
    padding: 16px;
}

.editor-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

h1 {
    font-size: 24px;
    margin: 0;
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.editor-grid {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.editor-grid > label:nth-child(1) {
    grid-column: span 1;
}

.editor-grid > label:nth-child(2),
.editor-grid > label:nth-child(3) {
    grid-column: span 3;
}

.editor-grid > label:nth-child(4),
.editor-grid > label:nth-child(5),
.editor-grid > label:nth-child(6),
.editor-grid > label:nth-child(7),
.editor-grid > label:nth-child(8) {
    grid-column: span 1;
}

.editor-grid > label:nth-child(9) {
    grid-column: span 2;
}

label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

label span {
    color: #b9c2d3;
    font-size: 12px;
}

input,
select,
textarea {
    background: #151922;
    border: 1px solid #3a4252;
    border-radius: 6px;
    color: #f1f4f8;
    min-height: 36px;
    min-width: 0;
    padding: 7px 9px;
    width: 100%;
}

.element-input {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 28px 1fr;
}

.element-input select {
    width: 100%;
}

input[readonly] {
    color: #b9c2d3;
}

input:disabled {
    color: #737d91;
    cursor: not-allowed;
    opacity: 0.65;
}

textarea:disabled {
    color: #737d91;
    cursor: not-allowed;
    opacity: 0.65;
}

.trigger-field,
.description-field {
    grid-column: 1 / -1;
}

.switch-field {
    align-items: center;
    align-self: end;
    display: inline-grid;
    gap: 10px;
    grid-column: span 3;
    grid-template-columns: 42px max-content;
    justify-content: start;
    min-height: 36px;
    padding-bottom: 0;
}

.switch-label {
    color: #f1f4f8;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

.switch-field input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.switch-control {
    align-self: center;
    background: #151922;
    border: 1px solid #586174;
    border-radius: 999px;
    cursor: pointer;
    height: 22px;
    position: relative;
    transition: background 120ms ease, border-color 120ms ease;
    width: 42px;
}

.switch-control::after {
    background: #b9c2d3;
    border-radius: 50%;
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform 120ms ease, background 120ms ease;
    width: 16px;
}

.switch-field input:checked + .switch-control {
    background: #2f6fed;
    border-color: #7da7ff;
}

.switch-field input:checked + .switch-control::after {
    background: #fff;
    transform: translateX(20px);
}

.switch-field input:focus-visible + .switch-control {
    outline: 2px solid #9bbcff;
    outline-offset: 2px;
}

textarea {
    resize: vertical;
    white-space: pre-wrap;
}

.table-section {
    min-height: 0;
}

.table-wrap {
    border: 1px solid #343b49;
    border-radius: 8px;
    height: 100%;
    overflow: auto;
}

table {
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1120px;
    width: 100%;
}

thead {
    background: #20242d;
    position: sticky;
    top: 0;
    z-index: 1;
}

th,
td {
    border-bottom: 1px solid #303746;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

th button {
    background: transparent;
    color: #f1f4f8;
    justify-content: flex-start;
    min-height: 24px;
    padding: 0;
    width: 100%;
}

tbody tr {
    cursor: pointer;
}

tbody tr:hover,
tbody tr.selected {
    background: #283142;
}

.element-cell {
    align-items: center;
    display: flex;
    gap: 8px;
}

.element-cell img,
select option {
    width: 22px;
}

.symbol-icon {
    height: 22px;
    object-fit: contain;
    width: 22px;
}

.description-cell {
    max-width: 420px;
    white-space: pre-line;
}

.trigger-line {
    font-weight: 700;
}

@media (max-width: 900px) {
    main {
        height: auto;
    }

    .editor-grid {
        grid-template-columns: 1fr 1fr;
    }

    .editor-grid > label,
    .switch-field {
        grid-column: span 1;
    }

    .trigger-field,
    .description-field {
        grid-column: 1 / -1;
    }

    .table-wrap {
        max-height: 55vh;
    }
}

@media (max-width: 620px) {
    .top-nav,
    .editor-header {
        align-items: stretch;
        flex-direction: column;
        padding-bottom: 12px;
        padding-top: 12px;
    }

    main {
        height: auto;
    }

    .editor-grid {
        grid-template-columns: 1fr;
    }

    .editor-grid > label,
    .switch-field,
    .trigger-field,
    .description-field {
        grid-column: 1 / -1;
    }
}