/*
 * oreUI / McUI Vue Style System
 * 基于 Spectrollay OreUI / McUI Vue 的 Minecraft Bedrock 风格
 * https://shenyuanor.github.io/mcui-oreui/
 */

/* ==========================================================================
   CSS 变量 / 主题色
   ========================================================================== */
:root {
    color-scheme: only light !important;
    --oreui-accent-blue-light: #8CB3FF;
    --oreui-accent-yellow: #FFE866;
    --oreui-accent-green: #3C8527;
    --oreui-accent-blue: #2E6BE5;
    --oreui-accent-red: #F46D6D;
    --oreui-text-muted: rgba(255, 255, 255, 0.5);
}

* {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "NotoSans Bold", "Microsoft YaHei", sans-serif;
    height: 100%;
    overscroll-behavior: contain;
}

::selection {
    background-color: transparent;
    color: inherit;
}

/* ==========================================================================
   页面基础布局
   ========================================================================== */
body {
    background-color: #48494A;
    color: #FFFFFF;
    font-family: "NotoSans Bold", "Microsoft YaHei", sans-serif;
    height: 100%;
    margin: 0;
    min-width: 330px;
    overflow: hidden;
    position: relative;
    scrollbar-width: none;
    -webkit-user-select: none;
}

oreui-scroll-container {
    display: grid;
    flex: 1;
    height: 100%;
    overflow: auto;
    position: relative;
    scroll-behavior: smooth;
    scrollbar-width: none;
    width: 100%;
}

main {
    color: #FFFFFF;
    min-width: 330px;
    width: 100vw;
}

a {
    box-shadow: inset 0 -2px 0 0 currentColor;
    color: inherit;
    position: relative;
    text-decoration: none;
}

/* 隐藏默认滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   顶部导航栏 (McHeader)
   ========================================================================== */
oreui-header {
    align-items: stretch;
    background-color: #E6E8EB;
    border-bottom: 4px solid #B1B2B5;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: 40px;
    min-width: 330px;
    position: relative;
    width: 100%;
    z-index: 10;
}

oreui-header-left,
oreui-header-right {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 100%;
    justify-content: center;
    width: 42px;
    z-index: 1;
}

oreui-header-left {
    border-right: 2px solid #A1A3A5;
    box-shadow: inset -2px 0 #FFFFFF;
}

oreui-header-right {
    border-left: 2px solid #FFFFFF;
    box-shadow: inset 2px 0 #A1A3A5;
}

oreui-header-logo {
    align-items: center;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

oreui-header-title {
    align-items: center;
    display: flex;
    font-family: "Minecraft Ten", "NotoSans Bold", sans-serif;
    font-size: 30px;
    height: 100%;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

oreui-header-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

oreui-header-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

oreui-header-item:active {
    background-color: rgba(0, 0, 0, 0.1);
}

.oreui-header-icon {
    height: 20px;
    width: 20px;
}

/* ==========================================================================
   主体框架
   ========================================================================== */
oreui-display-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

oreui-scroll-view {
    display: flex;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* ==========================================================================
   主体块 (Main Block)
   ========================================================================== */
oreui-main-block-frame {
    border-bottom: 2px solid #333334;
    border-left: 2px solid #333334;
    border-right: 2px solid #333334;
    border-top: 2px solid #5A5B5C;
    font-family: "NotoSans Bold", "Microsoft YaHei", sans-serif;
    margin: 0 20px;
}

oreui-main-block {
    align-items: center;
    border-bottom: 2px solid #333334;
    border-left: 0;
    border-right: 0;
    border-top: 2px solid #5A5B5C;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    min-height: 66px;
    padding: 8px 0;
    text-align: center;
}

.main_content_center {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 300px;
}

.main_detail_center {
    font-size: 20px;
    text-align: center;
}

oreui-main-block-spacing {
    display: block;
    height: 20px;
}

/* ==========================================================================
   主体显示 (Main Display)
   ========================================================================== */
oreui-main-display-frame {
    align-items: center;
    border-bottom: 2px solid #333334;
    border-left: 0;
    border-right: 0;
    border-top: 2px solid #5A5B5C;
    display: flex;
    font-family: "NotoSans Bold", "Microsoft YaHei", sans-serif;
    flex-direction: column;
    height: auto;
    justify-content: center;
    min-height: 60px;
    padding: 8px 16px;
    text-align: center;
}

oreui-main-display {
    margin: 8px;
}

/* ==========================================================================
   页面标题区域
   ========================================================================== */
oreui-page-title-area {
    align-items: center;
    border-bottom: 2px solid #333334;
    border-left: 0;
    border-right: 0;
    display: flex;
    flex-direction: column;
    font-family: "Minecraft Seven", "NotoSans Bold", sans-serif;
    justify-content: center;
    min-height: 70px;
    text-align: center;
}

oreui-page-title {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    margin: 10px 20px;
    width: calc(100% - 40px);
}

oreui-page-title-span {
    font-size: 24px;
}

.main-header, .main-footer {
    font-family: "Minecraft Ten", "NotoSans Bold", sans-serif;
}

/* ==========================================================================
   链接卡片 (Link Block / Show Block)
   ========================================================================== */
oreui-show-block {
    align-items: center;
    border: 2px solid #58585A;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 6px;
    overflow: hidden;
    padding: 5px 17px;
    position: relative;
    white-space: normal;
    text-decoration: none;
    color: #FFFFFF;
}

oreui-show-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 15px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    transform: skewX(-45deg);
    transition: none;
    z-index: 2;
}

oreui-show-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 6px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: skewX(-45deg);
    transition: none;
    z-index: 1;
}

oreui-show-block:hover::before {
    animation: thickFlash 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

oreui-show-block:hover::after {
    animation: thinFlash 0.6s 0.01s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes thickFlash {
    0% { left: -150%; }
    100% { left: 150%; }
}

@keyframes thinFlash {
    0% { left: -150%; }
    100% { left: 150%; }
}

oreui-show-block:hover,
oreui-show-block:active {
    border: 2px solid #6D6D6E;
    background-color: #58585A;
}

oreui-show-block-title {
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 17px;
    margin: 10px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 8px);
}

oreui-show-block-title-img {
    align-self: center;
    margin-right: 5px;
    width: 20px;
}

oreui-show-block-description {
    margin-bottom: 6px;
    color: #D0D1D4;
    font-size: 14px;
    margin: 0 4px 6px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 8px);
}

/* ==========================================================================
   按钮 (McUI Vue 风格)
   ========================================================================== */
button {
    align-items: center;
    display: flex;
    justify-content: center;
}

.btn {
    cursor: pointer;
    font-family: "NotoSans Bold", "Microsoft YaHei", sans-serif;
    height: 40px;
    justify-self: center;
    margin: 6px;
    padding-bottom: 6px;
    text-decoration: none;
    white-space: nowrap;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:active:not(.disabled_btn) {
    height: 36px;
    margin-top: 10px;
    padding-bottom: 2px;
}

/* 尺寸 */
.extra_small_btn { font-size: 12px; height: 28px; width: 100px; }
.extra_small_btn:active:not(.disabled_btn) { height: 24px; margin-top: 10px; padding-bottom: 2px; }
.small_btn { font-size: 14px; height: 32px; width: 130px; }
.small_btn:active:not(.disabled_btn) { height: 28px; margin-top: 10px; padding-bottom: 2px; }
.middle_btn { font-size: 16px; height: 40px; width: 200px; }
.middle_btn:active:not(.disabled_btn) { height: 36px; margin-top: 10px; padding-bottom: 2px; }
.large_btn { font-size: 18px; height: 48px; width: 272px; }
.large_btn:active:not(.disabled_btn) { height: 44px; margin-top: 10px; padding-bottom: 2px; }

/* 次要按钮 (normal) */
.normal_btn {
    background-color: #D0D1D4;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #58585A, inset 3px 3px rgba(255, 255, 255, 0.6), inset -3px -7px rgba(255, 255, 255, 0.4);
    color: #000000;
    padding-bottom: 6px;
}
.normal_btn:hover:not(.disabled_btn) {
    background-color: #B1B2B5;
    box-shadow: inset 0 -4px #58585A, inset 3px 3px rgba(255, 255, 255, 0.8), inset -3px -7px rgba(255, 255, 255, 0.6);
}
.normal_btn:active:not(.disabled_btn) {
    background-color: #B1B2B5;
    box-shadow: inset 3px 3px rgba(255, 255, 255, 0.8), inset -3px -3px rgba(255, 255, 255, 0.6);
}

/* 主操作按钮 (primary) */
.primary_btn {
    background-color: #3C8527;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #1D4D13, inset 3px 3px rgba(255, 255, 255, 0.2), inset -3px -7px rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding-bottom: 6px;
}
.primary_btn:hover:not(.disabled_btn) {
    background-color: #2A641C;
    box-shadow: inset 0 -4px #1D4D13, inset 3px 3px rgba(255, 255, 255, 0.4), inset -3px -7px rgba(255, 255, 255, 0.3);
}
.primary_btn:active:not(.disabled_btn) {
    background-color: #1D4D13;
    box-shadow: inset 3px 3px rgba(255, 255, 255, 0.4), inset -3px -3px rgba(255, 255, 255, 0.3);
}

/* 危险按钮 (error) */
.error_btn {
    background-color: #C33636;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -4px #AD1D1D, inset 3px 3px rgba(255, 255, 255, 0.2), inset -3px -7px rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding-bottom: 6px;
}
.error_btn:hover:not(.disabled_btn) {
    background-color: #C02D2D;
    box-shadow: inset 0 -4px #AD1D1D, inset 3px 3px rgba(255, 255, 255, 0.4), inset -3px -7px rgba(255, 255, 255, 0.3);
}
.error_btn:active:not(.disabled_btn) {
    background-color: #AD1D1D;
    box-shadow: inset 3px 3px rgba(255, 255, 255, 0.5), inset -3px -3px rgba(255, 255, 255, 0.4);
}

/* 禁用按钮 */
.disabled_btn {
    background-color: #D0D1D4;
    border: 2px solid #8C8D90;
    box-shadow: inset 0 -4px #B1B2B5;
    color: #48494A;
    cursor: not-allowed;
    padding-bottom: 6px;
}
.disabled_btn img { filter: invert(100%) grayscale(100%) brightness(50%); }
.btn_icon { width: 14px; height: 14px; margin-right: 4px; }
.button_img { width: 14px; }
.button_img.left { margin-right: 4px; }
.button_img.right { margin-left: 4px; }

/* ==========================================================================
   Badge 徽章
   ========================================================================== */
.badge_area { align-items: center; display: flex; }
.badge { height: 6px; margin-right: 6px; width: 6px; border-radius: 50%; }
.green_badge { background-color: #6CC349; }
.blue_badge { background-color: #8CB3FF; }
.yellow_badge { background-color: #FFE866; }
.red_badge { background-color: #F46D6D; }

/* ==========================================================================
   Banner 横幅
   ========================================================================== */
.banner_area { align-items: center; display: flex; justify-content: center; }
.banner { align-items: center; color: #FFFFFF; display: flex; font-family: "NotoSans Bold", sans-serif; hyphens: auto; justify-content: center; margin: 10px 20px; min-height: 30px; padding: 10px; text-align: center; width: calc(100% - 40px); word-wrap: break-word; }
.neutral_banner { background-color: #1E1E1F; }
.information_banner { background-color: #2E6BE5; }
.important_banner { background-color: #FFE866; color: #000000; font-weight: bolder; }

/* ==========================================================================
   分割线
   ========================================================================== */
divider { background-color: #58585A; display: block; height: 2px; margin: 6px 0; width: 100%; }
divider-box { box-shadow: inset 0 2px #333334, inset 0 -2px #5A5B5C; display: block; height: 4px; margin: 6px 0; width: 100%; }
line { background-color: #48494A; display: block; height: 2px; margin: 1px 0; width: 100%; }

/* ==========================================================================
   Checkbox 复选框
   ========================================================================== */
custom-checkbox { display: inline-block; margin: 5px; }
.custom-checkbox { background-color: #8C8D90; border: 2px solid #1E1E1F; box-shadow: inset 2px 2px rgba(255,255,255,0.2), inset -2px -2px rgba(255,255,255,0.1); cursor: pointer; height: 20px; position: relative; width: 20px; }
.custom-checkbox:hover { background-color: #B1B2B5; }
.custom-checkbox:active { background-color: #58585A; }
.custom-checkbox.on { background-color: #3C8527; }
.custom-checkbox.on:hover { background-color: #2A641C; }
.custom-checkbox.on:active { background-color: #1D4D13; }
.custom-checkbox.disabled { background-color: #D0D1D4; border: 2px solid #8C8D90; box-shadow: none; cursor: not-allowed; }

/* ==========================================================================
   Modal 弹窗
   ========================================================================== */
.modal_area { border: 2px solid #1E1E1F; display: none; left: 50%; max-width: calc(min(600px, 100vw)); min-width: 320px; outline: none; position: fixed; top: 50%; transform: translate(-50%, -50%); z-index: 12; }
.modal { background-color: #313233; color: #FFFFFF; display: block; text-align: center; }
.modal_title_area { background-color: #48494A; box-shadow: inset 2px 2px rgba(255,255,255,0.2), inset -2px -2px rgba(255,255,255,0.1); display: flex; font-size: 18px; height: 40px; justify-content: center; align-items: center; position: relative; }
.modal_close_btn { align-items: center; cursor: pointer; display: flex; height: calc(100% - 8px); justify-content: center; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; }
.modal_close_btn:hover { background-color: #58585A; }
.modal_content { display: grid; align-items: center; max-height: calc(min(450px, calc(90vh - 150px))); min-height: 60px; overflow-y: auto; padding: 10px; scrollbar-width: none; }
.modal_button_area { align-items: center; background-color: #48494A; border-bottom: 2px solid #333334; border-top: 2px solid #5A5B5C; display: flex; justify-content: center; padding: 2px 0; }

/* ==========================================================================
   Switch 开关
   ========================================================================== */
.switch_content { margin: 6px; }
.switch { cursor: pointer; height: 24px; overflow: visible; position: relative; width: 52px; }
.normal_switch { background: linear-gradient(to right, #3C8527 50%, #8C8D90 50%); border: 2px solid #1E1E1F; box-shadow: inset 2px 2px rgba(255,255,255,0.2), inset -2px -2px rgba(255,255,255,0.1); height: 100%; width: 100%; }
.switch_slider { background-color: #D0D1D4; height: 28px; left: -2px; position: absolute; top: -6px; transition: left 125ms cubic-bezier(0.34, 1.56, 0.64, 1); width: 28px; z-index: 1; }
.normal_switch .switch_slider { border: 2px solid #1E1E1F; box-shadow: inset 0 -4px #58585A, inset 2px 2px rgba(255,255,255,0.6), inset -2px -6px rgba(255,255,255,0.4); }
.switch.on .switch_slider { left: 22px; }

/* ==========================================================================
   Tag 标签
   ========================================================================== */
.tag_area { align-items: center; }
.tag { color: #000000; display: inline-flex; font-size: 12px; margin-right: 5px; padding: 0 2px; text-wrap: nowrap; vertical-align: 10%; }
.black_tag { background-color: #1E1E1F; color: #FFFFFF; }
.green_tag { background-color: #6CC349; }
.blue_tag { background-color: #8CB3FF; }
.yellow_tag { background-color: #FFE866; }
.red_tag { background-color: #F46D6D; }

/* ==========================================================================
   页面底部信息
   ========================================================================== */
.page_info_title, .page_info { font-family: "NotoSans Bold", sans-serif; font-size: 12px; margin-left: 20px; }
.page_info_title { color: rgba(255, 255, 255, 0.8); }
.page_info { color: rgba(255, 255, 255, 0.4); }

/* 加载中图标 */
.loading_icon { height: 32px; padding: 10px; width: 32px; }

/* 全屏遮罩 */
.overlay { background-color: rgba(0, 0, 0, 0.7); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 11; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 768px) {
    oreui-main-block-frame { margin: 0 10px; }
    oreui-page-title-span { font-size: 20px; }
    oreui-show-block { margin: 4px; }
    .btn { font-size: 14px; }
    .middle_btn { width: 160px; }
}