:root {
    --card-bg: #2a2a2a;
    --highlight-bg: #2b2b2b;
    --border-color: #4a4a4a;
    --shadow-color: rgba(0,0,0,.4);
    --text-main: #e0e0e0;
    --text-light: #b0b0b0;
    --text-bright: #ffffff;
    --bad: #ff6f61;
    --bad-soft: #ffb3a9;
}

* {
    box-sizing: border-box
}

.onyx-errors-kit {

    margin: 25px 30px;
    display: grid;
    gap: 12px
}

.onyx-errorbox {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px var(--shadow-color)
}

.oe-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg,rgba(0,0,0,.12),transparent)
}

.oe-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))
}

.onyx-errorbox[data-type="generic"] .oe-icon {
    background: linear-gradient(135deg, color-mix(in srgb,var(--bad) 28%, transparent), rgba(255,255,255,.04));
    border-color: color-mix(in srgb,var(--bad) 35%, var(--border-color))
}

.onyx-errorbox[data-type="nopermission"] .oe-icon {
    background: linear-gradient(135deg, rgba(127,86,217,.20), rgba(127,86,217,.06))
}

.onyx-errorbox[data-type="maintenance"] .oe-icon {
    background: linear-gradient(135deg, rgba(154,127,224,.20), rgba(154,127,224,.06))
}

.onyx-errorbox[data-type="banned"] .oe-icon {
    background: linear-gradient(135deg, rgba(255,94,152,.22), rgba(255,94,152,.06))
}

.onyx-errorbox[data-type="flood"] .oe-icon {
    background: linear-gradient(135deg, rgba(255,210,129,.22), rgba(255,210,129,.06))
}

.onyx-errorbox[data-type="search"] .oe-icon {
    background: linear-gradient(135deg, rgba(48,213,200,.20), rgba(48,213,200,.06))
}

.onyx-errorbox[data-type="notfound"] .oe-icon {
    background: linear-gradient(135deg, rgba(218,218,255,.22), rgba(218,218,255,.06))
}

.onyx-errorbox[data-type="server"] .oe-icon {
    background: linear-gradient(135deg, rgba(255,133,102,.22), rgba(255,133,102,.06))
}

.oe-title b {
    color: #fff;
    font-size: 16px
}

.oe-title .muted {
    color: var(--text-light);
    margin: 2px 0 0
}

.oe-x {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: #fff
}

.oe-x:hover {
    background: var(--highlight-bg)
}

.oe-body {
    padding: 12px;
    display: grid;
    gap: 10px
}

.oe-list {
    margin: 0;
    padding-left: 20px;
    color: #fff
}

.oe-list li {
    padding: 6px 0
}

.oe-more>summary {
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--text-main);
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--highlight-bg)
}

.oe-more[open]>summary {
    color: #fff;
    border-color: var(--accent)
}

.oe-more__box {
    margin-top: 8px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 10px;
    background: rgba(0,0,0,.15);
    color: var(--text-main);
    white-space: pre-wrap
}

.oe-callout,.oe-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    background: var(--highlight-bg)
}

.oe-alert {
    border-color: color-mix(in srgb,var(--bad) 35%, var(--border-color));
    background: color-mix(in srgb,var(--bad) 10%, transparent)
}

.oe-callout i,.oe-alert i {
    color: #ffb3a9
}

.oe-banner {
    display: flex;
    gap: 8px;
    align-items: center;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 8px;
    background: rgba(255,255,255,.04);
    color: #fff
}

.oe-msg {
    color: #fff;
    margin: 0
}

.oe-progress {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center
}

.oe-progress i {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--accent),var(--accent-soft));
    width: calc(var(--w,0)*100%)
}

.oe-tips {
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 10px;
    background: var(--highlight-bg)
}

.tips-title {
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    gap: 8px;
    align-items: center
}

.oe-tips ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--text-main)
}

.oe-tips code {
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    padding: 2px 6px;
    color: #fff
}

.oe-foot {
    padding: 10px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg)
}

.oe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end
}

.oe-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    background: var(--highlight-bg);
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

.oe-btn:hover {
    border-color: var(--accent)
}

.oe-btn.primary {
    background: linear-gradient(90deg,var(--button-bg),var(--button-hover-bg));
    border-color: transparent
}

.oe-btn.outline {
    background: transparent
}

.oe-btn.ghost {
    background: var(--card-bg)
}

.onyx-inlineerror {
    padding: 10px;
    border: 1px solid color-mix(in srgb,var(--bad) 35%, var(--border-color));
    border-radius: 12px;
    background: color-mix(in srgb,var(--bad) 10%, var(--card-bg));
    display: flex;
    gap: 8px;
    align-items: flex-start
}

.onyx-inlineerror>i {
    color: #ffb3a9;
    font-size: 18px;
    margin-top: 2px
}

.oe-list-inline {
    margin: 0;
    padding-left: 18px;
    color: #fff
}

.oe-list-inline li {
    padding: 3px 0
}

@media (max-width: 560px) {
    .oe-actions {
        flex-direction:column;
        align-items: stretch
    }

    .oe-btn {
        justify-content: center
    }
}