/* ===== Z-Index Tokens ===== */
/* 统一层级令牌，解决散乱的硬编码数值问题 */
/* 层级规范：从低到高，严格递增，禁止跳级 */

:root {
    /* 基础层：默认文档流 */
    --z-base: 0;

    /* 内容层：卡片、徽章、装饰元素 */
    --z-content: 1;
    --z-content-high: 2;
    --z-content-overlay: 3;
    --z-card: 10;
    --z-card-hover: 15;
    --z-card-overlay: 100;

    /* 导航层：固定/吸顶导航 */
    --z-nav: 999;
    --z-nav-header: 1000;
    --z-nav-dropdown: 1001;
    --z-nav-overlay: 1002;

    /* 组件层：弹出面板、菜单 */
    --z-popup: 1999;
    --z-popup-overlay: 2000;
    --z-popup-high: 2001;

    /* 提示层：Toast、Snackbar */
    --z-toast: 9999;

    /* 模态层：对话框、确认框 */
    --z-modal: 10000;

    /* 最高层：灯箱、全屏覆盖 */
    --z-lightbox: 10001;
}

/* ===== 移动端横屏锁定（orientation lock）=====
   纯 CSS 实现，无需 JS。当设备处于横屏且视口宽度 ≤ 768px（手机）时，
   将整个页面逆时针旋转 90° 并重新定位，使内容始终以竖屏布局展示，
   从而「锁定手机不可旋转为横屏」。平板（>768px）与桌面端不受影响。
   本规则为全站跨页全局行为，挂接于所有页面统一加载的 z-index.css 上，
   故一次添加即对全部页面生效（无需逐个改 HTML 的 <link>）。 */
@media screen and (orientation: landscape) and (max-width: 768px) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}