/* Layui ↔ Docbit — minimal bridge (preserve official Layui component styles) */

body {
    line-height: 1.6 !important;
    font-family: var(--font) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Shell grid: neutralize layui layout classes when used inside content-shell */
.content-shell .layui-side,
.content-shell .content-sidebar {
    position: sticky !important;
    left: auto !important;
    top: var(--header-h) !important;
    bottom: auto !important;
    width: auto !important;
    z-index: auto !important;
}

.content-shell .layui-body,
.content-shell .content-main {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* Auth form — stacked fields with icon inputs */
.layui-form.auth-form .layui-form-label {
    display: none;
}

.layui-form.auth-form .layui-input-block {
    margin-left: 0;
}

.layui-form.auth-form .layui-form-item {
    margin-bottom: 1rem;
}

.layui-form.blog-edit-form .layui-form-label {
    width: 72px;
}

.layui-form.blog-edit-form .layui-input-block {
    margin-left: 92px;
}

.comment-form .layui-form-label {
    width: 56px;
}

.comment-form .layui-input-block {
    margin-left: 76px;
}

@media (max-width: 768px) {
    .layui-form.auth-form .layui-form-label,
    .layui-form.blog-edit-form .layui-form-label,
    .comment-form .layui-form-label {
        width: 100% !important;
        text-align: left !important;
        padding-bottom: 4px !important;
    }

    .layui-form.auth-form .layui-input-block,
    .layui-form.blog-edit-form .layui-input-block,
    .comment-form .layui-input-block {
        margin-left: 0 !important;
    }
}

/* ── C-end surface: pill buttons & soft controls (user-facing pages) ── */

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn {
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
        border-color 0.18s ease, color 0.18s ease !important;
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn:hover {
    transform: translateY(-1px);
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn.layui-btn-normal {
    border: none !important;
    box-shadow: 0 2px 10px var(--accent-glow);
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn.layui-btn-normal:hover {
    box-shadow: 0 4px 14px var(--accent-glow);
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn.layui-btn-primary {
    border-color: color-mix(in srgb, var(--border) 82%, transparent) !important;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent) !important;
    color: var(--text) !important;
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn.layui-btn-primary:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn.layui-btn-xs {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 0.75rem !important;
    font-size: 0.75rem !important;
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-btn.layui-btn-sm {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 1rem !important;
    font-size: 0.82rem !important;
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-input,
body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-textarea,
body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-select-title input {
    border-radius: var(--radius-btn) !important;
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-form-select dl {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

body:not(.layout-blog-admin):not(.layout-blog-edit) .layui-form-select dl dd {
    border-radius: var(--radius-sm);
    margin: 2px 4px;
}

.header-user-menu .layui-btn {
    border-radius: var(--radius-pill) !important;
}