@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,800);
@import url(https://yes008.lol/assets/css/fontawesome-all.min.css);

/* 全局基础样式 */
a, big, body, center, div, em, footer, h1, h2, h3, h4, h5, h6, header, html, i, img, label, li, menu, nav, object, p, s, section, small, span, strong, time, ul {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

footer, header, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ul {
    list-style: none;
}

/* 全局字体缩小一号 */
body {
    font-size: 0.9em; /* 缩小一号 */
}

/* 乌尔都语字体再缩小两号 */
body[lang="ur"] {
    font-size: 0.7em; /* 缩小两号 */
}

body {
    -webkit-text-size-adjust: none;
}

html {
    box-sizing: border-box;
}

*, :after, :before {
    box-sizing: inherit;
}

body {
    background: #303238 url(https://yes008.lol/assets/css/images/bg01.png);
}

body.is-preload * {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #7b818c;
    font-weight: 400;
    font-size: 11pt;
    line-height: 1.85em;
}

a {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .04em;
    color: #404248;
    margin: 0 0 1em 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
    outline: 0;
}

h2 {
    font-size: 2em;
    margin: 0 0 1.5em 0;
    line-height: 1em;
}

h2.icon {
    line-height: 48px;
}

h2.icon:before {
    position: relative;
    top: .05em;
    margin-right: .5em;
    opacity: .25;
}

h3 {
    font-size: 1.35em;
    margin-top: 2em;
}

strong {
    color: #404248;
    font-weight: 700;
}

em, i {
    font-style: italic;
}

p, ul {
    margin-bottom: 2em;
}

.container {
    margin: 0 auto;
    max-width: calc(100% - 100px);
    width: 1200px;
}

@media screen and (max-width: 1280px) {
    .container {
        width: 100%;
    }
}

@media screen and (max-width: 980px) {
    .container {
        width: 100%;
    }
}

@media screen and (max-width: 736px) {
    .container {
        width: 100%;
        max-width: 100%;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
}

.row > * {
    box-sizing: border-box;
}

.row > .col-1 {
    width: 8.33333%;
}

.row > .col-2 {
    width: 16.66667%;
}

.row > .col-3 {
    width: 25%;
}

.row > .col-4 {
    width: 33.33333%;
}

.row > .col-5 {
    width: 41.66667%;
}

.row > .col-6 {
    width: 50%;
}

.row > .col-7 {
    width: 58.33333%;
}

.row > .col-8 {
    width: 66.66667%;
}

.row > .col-9 {
    width: 75%;
}

.row > .col-10 {
    width: 83.33333%;
}

.row > .col-11 {
    width: 91.66667%;
}

.row > .col-12 {
    width: 100%;
}

.row {
    margin-top: -50px;
    margin-left: -50px;
}

.row > * {
    padding: 50px 0 0 50px;
}

@media screen and (max-width: 1280px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

    .row > * {
        box-sizing: border-box;
    }

    .row > .col-1-large {
        width: 8.33333%;
    }

    .row > .col-2-large {
        width: 16.66667%;
    }

    .row > .col-3-large {
        width: 25%;
    }

    .row > .col-4-large {
        width: 33.33333%;
    }

    .row > .col-5-large {
        width: 41.66667%;
    }

    .row > .col-6-large {
        width: 50%;
    }

    .row > .col-7-large {
        width: 58.33333%;
    }

    .row > .col-8-large {
        width: 66.66667%;
    }

    .row > .col-9-large {
        width: 75%;
    }

    .row > .col-10-large {
        width: 83.33333%;
    }

    .row > .col-11-large {
        width: 91.66667%;
    }

    .row > .col-12-large {
        width: 100%;
    }

    .row {
        margin-top: -35px;
        margin-left: -35px;
    }

    .row > * {
        padding: 35px 0 0 35px;
    }
}

@media screen and (max-width: 980px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

    .row > * {
        box-sizing: border-box;
    }

    .row > .col-1-medium {
        width: 8.33333%;
    }

    .row > .col-2-medium {
        width: 16.66667%;
    }

    .row > .col-3-medium {
        width: 25%;
    }

    .row > .col-4-medium {
        width: 33.33333%;
    }

    .row > .col-5-medium {
        width: 41.66667%;
    }

    .row > .col-6-medium {
        width: 50%;
    }

    .row > .col-7-medium {
        width: 58.33333%;
    }

    .row > .col-8-medium {
        width: 66.66667%;
    }

    .row > .col-9-medium {
        width: 75%;
    }

    .row > .col-10-medium {
        width: 83.33333%;
    }

    .row > .col-11-medium {
        width: 91.66667%;
    }

    .row > .col-12-medium {
        width: 100%;
    }

    .row {
        margin-top: -50px;
        margin-left: -50px;
    }

    .row > * {
        padding: 50px 0 0 50px;
    }
}

@media screen and (max-width: 736px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }

    .row > * {
        box-sizing: border-box;
    }

    .row > .col-1-small {
        width: 8.33333%;
    }

    .row > .col-2-small {
        width: 16.66667%;
    }

    .row > .col-3-small {
        width: 25%;
    }

    .row > .col-4-small {
        width: 33.33333%;
    }

    .row > .col-5-small {
        width: 41.66667%;
    }

    .row > .col-6-small {
        width: 50%;
    }

    .row > .col-7-small {
        width: 58.33333%;
    }

    .row > .col-8-small {
        width: 66.66667%;
    }

    .row > .col-9-small {
        width: 75%;
    }

    .row > .col-10-small {
        width: 83.33333%;
    }

    .row > .col-11-small {
        width: 91.66667%;
    }

    .row > .col-12-small {
        width: 100%;
    }

    .row {
        margin-top: -10px;
        margin-left: -10px;
    }

    .row > * {
        padding: 10px 0 0 10px;
    }
}

section {
    margin-bottom: 5em;
}

section:last-child, section > :last-child {
    margin-bottom: 0;
}

header {
    margin: 0 0 2em 0;
}

header h2, header h3 {
    margin: 0 0 .25em 0;
}

header p {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .065em;
    font-size: .9em;
    color: #696969;
    margin: 0;
}

header p strong {
    color: #404248;
    font-weight: 800;
}

footer {
    margin: 2.5em 0 0 0;
}

header.major {
    border-bottom: solid 1px #dbdbdb;
    margin: 0 0 3em 0;
}

header.major:after {
    content: '';
    display: block;
    border-top: solid 1px #dbdbdb;
    height: 8px;
}

header.major h2, header.major h3 {
    margin: 0 0 1.2em 0;
}

header.major p {
    margin: 0 0 1.5em 0;
    position: relative;
    top: -1em;
}

.image {
    position: relative;
    display: inline-block;
}

.image img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.image:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: url(images/bg01.png);
    width: 100%;
    height: 100%;
    opacity: .75;
}

.image.fit {
    display: block;
    width: 100%;
}

.image.featured {
    display: block;
    width: 100%;
    margin: 0 0 2.5em 0;
}

.image.left {
    float: left;
    margin: 0 2em 2em 0;
}

.button, button {
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), url(images/bg02.png);
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), url(images/bg02.png);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), url(images/bg02.png);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), url(images/bg02.png);
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    background-color: #4091bf;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 2px 1px 0 rgba(255, 255, 255, .35);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
    color: #fff !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .95em;
    letter-spacing: .075em;
    padding: 1em 2em;
    outline: 0;
    border: 0;
    white-space: nowrap;
    cursor: pointer;
}

.button.icon:before, button.icon:before {
    opacity: .5;
    margin-right: .5em;
    position: relative;
    top: .05em;
}

.button:hover, button:hover {
    background-color: #50a1cf;
}

.button:active, button:active {
    background-color: #3081af;
}

.button.medium, button.medium {
    font-size: 1.25em;
    padding: 1em 2.25em;
}

.button.large, button.large {
    font-size: 1.5em;
    padding: 1em 2.25em;
}

.button.alt, button.alt {
    background-color: #464a52;
}

.button.alt:hover, button.alt:hover {
    background-color: #565a62;
}

.button.alt:active, button.alt:active {
    background-color: #363a42;
}

ul.menu li {
    border-left: solid 1px #eee;
    display: inline-block;
    padding: 0 0 0 1em;
    margin: 0 0 0 1em;
}

ul.menu li:first-child {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}

.box.feature1 {
    text-align: center;
}

.box.feature1 header {
    margin-bottom: 3em;
}

.box.feature1 header.first h2 {
    font-size: 2.5em;
}

.box.feature1 header.first p {
    font-size: 1.2em;
}

.box.feature1 header.second {
    position: relative;
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    white-space: nowrap;
    left: 24px;
}

.box.feature1 header.second p {
    line-height: 1em;
}

.box.feature1 header.second:before {
    font-size: 48px;
    position: absolute;
    right: 100%;
    margin-right: 18px;
    opacity: .5;
    bottom: -4px;
}

.box.feature2 {
    text-align: center;
}

.icon {
    text-decoration: none;
}

.icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
}

.icon.solid:before {
    font-weight: 900;
}

.icon.brands:before {
    font-family: 'Font Awesome 5 Brands';
}

.icon > .label {
    display: none;
}

#nav {
    position: absolute;
    right: 2em;
    top: 0;
    line-height: 5.5em;
}

#nav > ul > li {
    float: left;
    padding: 0 .8em 0 .8em;
}

#nav > ul > li > a, #nav > ul > li > span {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .95em;
    letter-spacing: .075em;
    padding: .5em .8em .5em .8em;
    border-radius: 6px;
    outline: 0;
}

#nav > ul > li.active > a, #nav > ul > li.active > span, #nav > ul > li.current_page_item > a, #nav > ul > li.current_page_item > span {
    background: rgba(0, 0, 0, .15);
    box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, .025), 1px 1px 0 0 rgba(255, 255, 255, .025);
}

#nav > ul > li:last-child {
    padding-right: 0;
}

#nav > ul > li > ul {
    display: none;
}

.dropotron {
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)), url(images/bg02.png);
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)), url(images/bg02.png);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)), url(images/bg02.png);
    background-image: linear-gradient(top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)), url(images/bg02.png);
    position: relative;
    background-color: #3b3e45;
    background-color: rgba(59, 62, 69, .9);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .075), inset 0 2px 1px 0 rgba(255, 255, 255, .2), 0 2px 14px 0 rgba(0, 0, 0, .4);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
    padding: 1.5em;
    line-height: 2.5em;
    min-width: 15em;
}

.dropotron a, .dropotron span {
    color: #aaa;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .8em;
    letter-spacing: .075em;
    outline: 0;
}

.dropotron li:hover > a, .dropotron li:hover > span {
    color: #fff;
}

#banner {
    text-align: center;
    width: 940px;
    margin: 0 auto;
    overflow: hidden;
    padding: 9em 0 6em 0;
}

#banner h2 {
    border: solid 1px rgba(255, 255, 255, .25);
    border-left: 0;
    border-right: 0;
    color: #fff;
    color: rgba(255, 255, 255, .75);
    font-size: 2.35em;
    font-weight: 700;
    line-height: 1.3em;
    margin: 0 0 1.5em 0;
}

#banner h2 strong {
    font-weight: 800;
    color: inherit;
}

#banner h2:before {
    content: '';
    display: block;
    border-top: solid 1px;
    border-color: #888;
    border-color: rgba(255, 255, 255, .25);
    margin: 10px 0 1.25em 0;
}

#banner h2:after {
    content: '';
    display: block;
    border-bottom: solid 1px;
    border-color: #888;
    border-color: rgba(255, 255, 255, .25);
    margin: 1.25em 0 10px 0;
}

#banner p {
    text-transform: uppercase;
    color: #fff;
    color: rgba(255, 255, 255, .75);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: .04em;
    float: left;
    text-align: right;
    width: 60%;
    line-height: 1.5em;
    margin: 0;
}

#sidebar h2 {
    font-size: 1.5em;
}

#header-wrapper {
    background: url(images/bg01.png), url(https://yes008.lol/images/header.webp);
    background-position: top left, center center;
    background-size: auto, cover;
    padding: 3em 0;
}

#main-wrapper {
    background: #fff;
}

#footer-wrapper {
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(images/bg03.png), url(images/bg02.png);
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(images/bg03.png), url(images/bg02.png);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(images/bg03.png), url(images/bg02.png);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url(images/bg03.png), url(images/bg02.png);
    position: relative;
    background-repeat: repeat-x, no-repeat, repeat;
    background-size: 100% 100%, 100% 15em, auto auto;
    background-position: top left, top center, top left;
    padding: 7em 0 7em 0;
}

.wrapper {
    padding: 7em 0 7em 0;
}

.wrapper > .inner {
    position: relative;
    z-index: 2;
}

.wrapper.style1 {
    position: relative;
    text-shadow: 1px 1px 0 #fff;
    background-color: #fff;
    background-image: url(images/bg03.png), url(https://yes008.lol/assets/css/images/bg04.png), url(images/bg02.png);
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: 100% 15em, 100% 15em, auto auto;
    background-position: top center, bottom center, top left;
}

.wrapper.style3 {
    position: relative;
    text-shadow: 1px 1px 0 #fff;
    background-color: #fff;
    background-image: url(images/bg03.png), url(images/bg02.png);
    background-repeat: no-repeat, repeat;
    background-size: 100% 15em, auto auto;
    background-position: top center, top left;
}

#header {
    position: relative;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    padding: .75em;
    margin-bottom: 0;
}

#header .inner {
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)), url(images/bg02.png);
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)), url(images/bg02.png);
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)), url(images/bg02.png);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)), url(images/bg02.png);
    position: relative;
    height: 5.5em;
    background-color: #3b3e45;
    background-color: rgba(59, 62, 69, .9);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 2px 1px 0 rgba(255, 255, 255, .15);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
}

#header h1 {
    position: absolute;
    left: 1.75em;
    top: 50%;
    margin-top: -.65em;
    font-size: 1.5em;
    color: #fff;
}

#footer {
    margin-bottom: 0;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .5);
    position: relative;
    z-index: 2;
}

#footer h2 {
    font-size: 1.35em;
    color: #fff;
}

#footer strong {
    color: #fff;
}

#footer a {
    color: #acb2bf;
}

#footer .button.alt {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 2px 1px 0 rgba(255, 255, 255, .25);
}

#footer ul.menu li {
    border-color: #444;
    border-color: rgba(255, 255, 255, .075);
}

#footer ul.menu {
    margin: 0;
}

#copyright {
    border-top: solid 1px;
    border-color: #444;
    border-color: rgba(255, 255, 255, .075);
    text-align: center;
    margin-top: 2em;
    padding: 3em 0 4em 0;
    color: inherit;
}

#copyright a {
    color: inherit;
}

@media screen and (max-width: 1280px) {
    body {
        line-height: 1.75em;
        font-size: 10.75pt;
    }

    #header-wrapper {
        padding: 2em 0;
    }

    body.homepage #header-wrapper {
        height: auto;
    }

    #footer-wrapper {
        padding: 4.5em 0 4.5em 0;
    }

    .wrapper {
        padding: 4.5em 0 4.5em 0;
    }

    #banner {
        width: 100%;
        padding: 4em 0 2em 0;
    }

    #banner h2 {
        font-size: 2.2em;
        line-height: 1.3em;
        margin: 0 0 1em 0;
    }

    #banner p {
        font-size: 1.25em;
        line-height: 1.75em;
        letter-spacing: .04em;
        float: none;
        text-align: center;
        width: 100%;
        margin: 0 0 2em 0;
    }
}

@media screen and (max-width: 980px) {
    body, html {
        overflow-x: hidden;
    }

    .box.feature2 section {
        margin: 1em 0;
    }

    #page-wrapper {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform .5s ease;
        -webkit-transition: -webkit-transform .5s ease;
        -ms-transition: -ms-transform .5s ease;
        transition: transform .5s ease;
        padding-bottom: 1px;
    }

    #header, #nav {
        display: none;
    }

    #header-wrapper {
        display: none;
    }

    .homepage #header-wrapper {
        display: block;
        padding-top: 44px;
    }

    #main-wrapper {
        padding-top: 44px;
    }

    .homepage #main-wrapper {
        padding-top: 0;
    }

    #banner {
        padding: 8em 0 4em 0;
    }

    #sidebar {
        margin-top: 1em;
    }
}

/* 新增：语言切换按钮样式 */
.language-switcher {
    position: fixed;
    top: 60px;      /* 在标题栏下方留出空间 */
    right: 20px;
    z-index: 10003; /* 高于标题栏的 z-index (10001) */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 10px;
}

.language-switcher button {
    background: none;
    border: none;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.language-switcher button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    /* 标题栏样式 */
    #titleBar {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        background-color: rgba(59, 62, 69, 0.9);
        box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.075), 0px 1px 6px 0px rgba(0, 0, 0, 0.35);
        display: block;
        height: 44px;
        left: 0;
        position: fixed;
        text-shadow: -1px -1px 0 black;
        top: 0;
        width: 100%;
        z-index: 10001;
    }

    #titleBar .title {
        display: block;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #fff;
        line-height: 44px;
        text-align: center;
    }

    /* Toggle 按钮样式 */
    #titleBar .toggle {
        text-decoration: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
        height: 44px;
        opacity: 0.25;
    }

    #titleBar .toggle:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }

    #titleBar .toggle:before {
        display: inline-block;
        text-decoration: none;
        font-size: 18px;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        content: '\f0c9';
    }

    #titleBar .toggle:active {
        opacity: 0.5;
    }

    /* 导航面板样式 */
    #navPanel {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
        background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
        -moz-transform: translateX(-275px);
        -webkit-transform: translateX(-275px);
        -ms-transform: translateX(-275px);
        transform: translateX(-275px);
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        background-color: #303238;
        box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.5), inset -2px 0px 0px rgba(255, 255, 255, 0.15), inset -2px 0px 10px 0px rgba(0, 0, 0, 0.35);
        display: block;
        height: 100%;
        left: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        width: 275px;
        z-index: 10002;
    }

    #navPanel .link {
        display: block;
        color: #aaa;
        text-decoration: none;
        height: 44px;
        line-height: 44px;
        border-top: solid 1px rgba(255, 255, 255, 0.05);
        border-bottom: solid 1px rgba(0, 0, 0, 0.15);
        padding: 0 1em 0 1em;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.95em;
        letter-spacing: 0.075em;
    }

    #navPanel .link:first-child {
        border-top: 0;
    }

    #navPanel .link:last-child {
        border-bottom: 0;
    }

    #navPanel .depth-0 {
        color: #fff;
    }

    /* 响应式布局切换 */
    body.navPanel-visible #page-wrapper {
        -moz-transform: translateX(275px);
        -webkit-transform: translateX(275px);
        -ms-transform: translateX(275px);
        transform: translateX(275px);
    }

    body.navPanel-visible #titleBar {
        -moz-transform: translateX(275px);
        -webkit-transform: translateX(275px);
        -ms-transform: translateX(275px);
        transform: translateX(275px);
    }

    body.navPanel-visible #navPanel {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    /* 移动端语言切换按钮调整 */
    .language-switcher {
        top: 50px;    /* 减少顶部间距 */
        right: 10px;
        padding: 6px 12px;
    }
}

@media screen and (max-width: 980px) {
    #titleBar, #navPanel {
        display: block;
    }

    #header, #nav {
        display: none;
    }

    #header-wrapper {
        display: none;
    }

    .homepage #header-wrapper {
        display: block;
        padding-top: 44px;
    }

    #main-wrapper {
        padding-top: 44px;
    }

    .homepage #main-wrapper {
        padding-top: 0;
    }
}