html,body {
    min-height:100%;
    margin:0;
    background:#f5f7fb;
    color:#25324b;
    font-family:"Microsoft YaHei",Arial,sans-serif
}

.yx-page {
    padding:20px
}

.yx-card {
    background:#fff;
    border:1px solid #e7ebf3;
    border-radius:10px;
    box-shadow:0 3px 14px rgba(38,55,89,.05);
    padding:20px;
    margin-bottom:18px
}

.yx-page-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px
}

.yx-page-title h1 {
    font-size:20px;
    font-weight:600;
    margin:0;
    color:#1f2d3d
}

.yx-subtitle {
    font-size:13px;
    color:#8894a7;
    margin-top:6px
}

.yx-toolbar {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}

.yx-table {
    width:100%;
    border-collapse:collapse;
    background:#fff
}

.yx-table th,.yx-table td {
    padding:12px 10px;
    border-bottom:1px solid #edf0f5;
    text-align:left;
    font-size:14px;
    vertical-align:middle
}

.yx-table th {
    background:#f8fafc;
    color:#53627a;
    font-weight:600
}

.yx-table tr:hover td {
    background:#fbfcfe
}

.yx-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:34px;
    line-height:34px;
    padding:0 14px;
    border-radius:6px;
    border:1px solid #d8deea;
    background:#fff;
    color:#44546a;
    cursor:pointer;
    text-decoration:none;
    font-size:14px;
    box-sizing:border-box
}


/* Unified upload buttons: prevent Chinese text wrapping/shrinking in flex rows. */
.yx-upload-row {
    display:flex;
    align-items:center;
    gap:10px
}

.yx-upload-row .yx-input {
    flex:1 1 auto;
    min-width:0;
    width:auto
}

.yx-upload-btn {
    flex:0 0 112px !important;
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    height:34px !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    writing-mode:horizontal-tb !important;
    line-height:1 !important;
    text-align:center !important;
    box-sizing:border-box !important
}

.yx-upload-btn i {
    flex:0 0 auto
}

.yx-btn:hover {
    border-color:#3f7cff;
    color:#3f7cff
}

.yx-btn-primary {
    background:#3f7cff;
    border-color:#3f7cff;
    color:#fff
}

.yx-btn-primary:hover {
    background:#326eea;
    color:#fff
}

.yx-btn-danger {
    border-color:#ffb8b8;
    color:#e14d4d
}

.yx-btn-small {
    height:28px;
    line-height:28px;
    padding:0 10px;
    font-size:12px
}

.yx-form-row {
    display:flex;
    gap:16px;
    margin-bottom:16px
}

.yx-form-item {
    flex:1;
    min-width:0
}

.yx-form-item label {
    display:block;
    font-size:14px;
    color:#53627a;
    margin-bottom:7px
}

.yx-form-item .required:before {
    content:"*";
    color:#ee4d4d;
    margin-right:4px
}

.yx-input,.yx-select,.yx-textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid #dbe1ea;
    border-radius:6px;
    background:#fff;
    color:#25324b;
    font-size:14px;
    outline:none
}

.yx-input,.yx-select {
    height:38px;
    padding:0 11px
}

.yx-textarea {
    min-height:90px;
    padding:10px 11px;
    resize:vertical
}

.yx-input:focus,.yx-select:focus,.yx-textarea:focus {
    border-color:#3f7cff;
    box-shadow:0 0 0 3px rgba(63,124,255,.1)
}

.yx-help {
    font-size:12px;
    color:#98a3b5;
    margin-top:5px
}

.yx-badge {
    display:inline-block;
    padding:3px 8px;
    border-radius:12px;
    font-size:12px;
    background:#eef3ff;
    color:#3f6fd9
}

.yx-badge-success {
    background:#eaf8f0;
    color:#2b9a5b
}

.yx-badge-danger {
    background:#fff0f0;
    color:#d95353
}

.yx-badge-warning {
    background:#fff7e8;
    color:#ba7a16
}

.yx-stat-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px
}

.yx-stat {
    background:#fff;
    border:1px solid #e7ebf3;
    border-radius:10px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:14px
}

.yx-stat-icon {
    width:46px;
    height:46px;
    border-radius:10px;
    background:#eef3ff;
    color:#3f7cff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px
}

.yx-stat-label {
    font-size:13px;
    color:#8491a5
}

.yx-stat-value {
    font-size:25px;
    font-weight:600;
    margin-top:4px;
    color:#24324a
}

.yx-empty {
    text-align:center;
    padding:45px 20px;
    color:#9aa5b5
}

.yx-pagination {
    padding-top:16px;
    text-align:right
}

.yx-pagination a,.yx-pagination span {
    display:inline-block;
    padding:5px 10px;
    border:1px solid #e0e5ed;
    margin-left:5px;
    border-radius:4px;
    color:#53627a
}

.yx-pagination .current {
    background:#3f7cff;
    border-color:#3f7cff;
    color:#fff
}

.yx-checkbox-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
}

.yx-checkbox {
    border:1px solid #e2e7ef;
    border-radius:6px;
    padding:10px;
    background:#fafbfd
}

.yx-checkbox label {
    margin:0;
    cursor:pointer
}

.yx-login-body {
    min-height:100vh;
    background:linear-gradient(135deg,#163b73,#275a9f 55%,#3f7cff);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    box-sizing:border-box
}

.yx-login-panel {
    width:880px;
    max-width:100%;
    min-height:510px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 70px rgba(12,37,76,.28);
    display:grid;
    grid-template-columns:1.1fr .9fr
}

.yx-login-brand {
    background:linear-gradient(145deg,#1d4d8f,#2e6bb8);
    color:#fff;
    padding:62px 52px;
    position:relative;
    overflow:hidden
}

.yx-login-brand:after {
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    right:-130px;
    bottom:-100px
}

.yx-login-brand h1 {
    font-size:32px;
    margin:0 0 18px;
    font-weight:600;
    letter-spacing:1px
}

.yx-login-brand p {
    font-size:15px;
    line-height:1.9;
    color:rgba(255,255,255,.78)
}

.yx-login-version {
    position:absolute;
    left:52px;
    bottom:45px;
    color:rgba(255,255,255,.6);
    font-size:13px
}

.yx-login-form {
    padding:62px 50px;
    background:#fff
}

.yx-login-form h2 {
    font-size:24px;
    color:#25324b;
    margin:0 0 8px
}

.yx-login-form .desc {
    font-size:13px;
    color:#98a3b5;
    margin-bottom:34px
}

.yx-captcha-row {
    display:flex;
    gap:10px
}

.yx-captcha-row .yx-input {
    flex:1
}

.yx-captcha {
    width:120px;
    height:38px;
    border:1px solid #dbe1ea;
    border-radius:6px;
    cursor:pointer;
    object-fit:cover
}

.yx-shell {
    height:100vh;
    overflow:hidden;
    background:#f5f7fb
}

.yx-shell-header {
    height:64px;
    background:#fff;
    border-bottom:1px solid #e7ebf3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    box-sizing:border-box
}

.yx-shell-logo {
    font-size:20px;
    font-weight:600;
    color:#21416d;
    display:flex;
    align-items:center;
    gap:10px
}

.yx-shell-logo i {
    color:#3f7cff
}

.yx-shell-user {
    display:flex;
    align-items:center;
    gap:18px;
    color:#5e6c82;
    font-size:14px
}

.yx-shell-user a {
    color:#5e6c82;
    text-decoration:none
}

.yx-shell-body {
    height:calc(100vh - 64px);
    display:flex
}

.yx-sidebar {
    width:220px;
    background:#1d2b3d;
    color:#fff;
    overflow:auto
}

.yx-menu-group {
    border-bottom:1px solid rgba(255,255,255,.07)
}

.yx-menu-title {
    padding:15px 20px;
    color:#d8e1ec;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none
}

.yx-menu-title .yx-menu-arrow {
    margin-left:auto;
    font-size:12px;
    transition:transform .2s ease
}

.yx-menu-group.open .yx-menu-title .yx-menu-arrow {
    transform:rotate(180deg)
}

.yx-menu-child {
    display:none
}

.yx-menu-group.open .yx-menu-child {
    display:block
}

.yx-menu-child a {
    display:block;
    padding:12px 20px 12px 50px;
    color:#9eacc0;
    text-decoration:none;
    font-size:14px;
    border-left:3px solid transparent
}

.yx-menu-child a:hover,.yx-menu-child a.active {
    background:rgba(255,255,255,.07);
    color:#fff;
    border-left-color:#4d8bff
}

.yx-shell-main {
    flex:1;
    min-width:0
}

.yx-shell-main iframe {
    width:100%;
    height:100%;
    border:0;
    background:#f5f7fb
}

@media(max-width:900px) {
    .yx-stat-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .yx-login-panel {
        grid-template-columns:1fr
    }
    .yx-login-brand {
        display:none
    }
    .yx-form-row {
        display:block
    }
    .yx-form-item {
        margin-bottom:14px
    }
    .yx-checkbox-grid {
        grid-template-columns:1fr
    }
    .yx-sidebar {
        width:180px
    }
}

.yx-global-message {
    position:fixed;
    top:24px;
    left:50%;
    z-index:999999;
    display:flex;
    align-items:center;
    gap:9px;
    max-width:calc(100% - 40px);
    padding:12px 18px;
    border-radius:7px;
    box-sizing:border-box;
    background:#fff;
    box-shadow:0 8px 30px rgba(25,42,70,.18);
    color:#34435a;
    font-size:14px;
    line-height:1.5;
    opacity:0;
    transform:translate(-50%,-12px);
    transition:opacity .18s ease,transform .18s ease
}
.yx-global-message.is-visible {opacity:1;transform:translate(-50%,0)}
.yx-global-message.is-success i {color:#2b9a5b}
.yx-global-message.is-error i {color:#e14d4d}