/* 全局样式 */
:root {
    /* 颜色系统 - 浅色模式 */
    --bg-primary: #f3f3f3;
    --bg-secondary: rgba(255, 255, 255, 0.7);
    --bg-tertiary: rgba(255, 255, 255, 0.5);
    --text-primary: #1f1f1f;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --accent: #0078d4;
    --accent-hover: #106ebe;
    --accent-rgb: 0, 120, 212;
    --accent-soft: rgba(0, 120, 212, 0.16);
    --border-color: rgba(0, 0, 0, 0.1);
    --bg-hover: rgba(0, 0, 0, 0.06);
    --bg-active: rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.18);
    
    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-icon: var(--radius-md); /* 应用图标圆角 */
    
    /* 模糊 */
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    
    /* 过渡 */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.2s ease-out;
    --transition-slow: 0.3s ease-out;
    --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 深色模式 */
.dark-mode {
    --bg-primary: #202020;
    --bg-secondary: rgba(32, 32, 32, 0.7);
    --bg-tertiary: rgba(32, 32, 32, 0.5);
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-tertiary: #808080;
    --accent: #60cdff;
    --accent-hover: #4db8e8;
    --accent-rgb: 96, 205, 255;
    --accent-soft: rgba(96, 205, 255, 0.18);
    --border-color: rgba(255, 255, 255, 0.1);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-active: rgba(255, 255, 255, 0.14);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.45);
}

/* 深色模式下所有Symbol图标变白色 */
.dark-mode img[src*="Symbol_icon/stroke/"],
.dark-mode img[src*="Symbol_icon/fill/"],
.dark-mode img[src*="Symbol_icon/weather/"] {
    filter: brightness(0) invert(1);
}

/* 深色模式下已经激活的控制中心瓷贴图标不重复应用 */
.dark-mode .control-tile[data-active="true"] .tile-icon {
    filter: brightness(0) invert(1);
}

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 锁定根元素：仅锁 body 在移动端（尤其 iOS Safari）不可靠，
   内容溢出仍会触发整页滚动，导致图标移出视口。html + body 一起锁。 */
html {
    overflow: hidden;
    height: 100%;
    height: 100dvh; /* 动态视口高度，适配手机浏览器底栏，避免画布高出可见区域 */
    overscroll-behavior: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* 动态视口高度，适配手机浏览器底栏，避免画布高出可见区域 */
    overscroll-behavior: none;
    /* 默认 user-select: text —— 全站文字可选中、可复制（含 Ctrl+C）。
       桌面外壳层（图标/任务栏/菜单/标题栏等交互层）在下方 .desktop-shell 等
       选择器统一禁选防误选；其余区域（窗口内容、文档、设置详情等"内容层"）默认可选。
       旧方案问题：body 全局 user-select: none + 白名单 (input/textarea/[contenteditable]/.window-content)
       覆盖——任何新增应用忘了把容器类名加进白名单，文字就丢失复制能力。
       新方案：反转默认值——body 可选，外壳容器显式禁选；内容层零配置即可选中复制。 */
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 桌面外壳层统一禁选文字：防止用户点击图标/任务栏/菜单时误选高亮文字（UX 退步）。
   不影响功能，只是避免视觉割裂。
   - .desktop-icons 容器（.desktop-icon 已有显式 none，容器层再加一层兜底分页指示器文字）
   - .taskbar 任务栏按钮
   - .start-menu 开始菜单项
   - .notification-center 通知中心
   - .window-titlebar 窗口标题栏（已有显式 none，此处归并统一管理）
   - .window-control-btn 窗口控制按钮（最小化/最大化/关闭）
   新增外壳容器：把选择器加进本组即可，无需维护内容层白名单。 */
.desktop-icons,
.taskbar,
.start-menu,
.notification-center,
.window-titlebar,
.window-control-btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 表单控件强制可选可复制 —— 必须显式 user-select: text，不能依赖 body 默认值继承。
   原因：浏览器继承机制下，input/textarea/contenteditable 嵌入 user-select: none
   父级容器（如 .desktop-icon 图标重命名、.file-item 文件重命名、.window-titlebar 标题栏重命名等）
   时，会继承父级的 none 导致输入框内文字不可选中、Ctrl+C 不可复制。
   显式声明 text 后，无论嵌套在哪个 user-select: none 父级内都能正常选中复制。 */
input,
textarea,
[contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* 全局禁用右键菜单 */
body {
    -webkit-touch-callout: none;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
}

input {
    font-family: inherit;
    outline: none;
}

.hidden {
    display: none !important;
}

body:not(.shell-visible) #taskbar,
body:not(.shell-visible) #tuai-blur-layer,
body:not(.shell-visible) #tuai-panel,
body:not(.shell-visible) #start-menu,
body:not(.shell-visible) #power-menu,
body:not(.shell-visible) #power-logout-menu,
body:not(.shell-visible) #control-center,
body:not(.shell-visible) #notification-center {
    display: none !important;
}

.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh; /* 动态视口高度，适配手机浏览器底栏，避免画布高出可见区域 */
    z-index: 1;
}

/* 壁纸容器 */
.lock-wallpaper,
.desktop-wallpaper {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============ 开机屏幕 ============ */
#boot-screen {
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* F5 刷新跳过开机动画：html.skip-boot 由 head 内联 script 在 DOM 渲染前打上。
   隐藏 boot-screen（避免黑底+LOGO闪现）；desktop-screen 保持 hidden 由 JS 预加载壁纸后再显示；
   body 背景用 boot 同色，作为壁纸加载前的过渡，避免白屏。 */
.skip-boot #boot-screen {
    display: none !important;
}
.skip-boot body {
    background: #1a1a1a;
}

.boot-content {
    text-align: center;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.boot-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.boot-logo {
    width: 120px;
    height: 120px;
}

/* 加载圆环 */
.boot-loading-ring {
    width: 45px;
    height: 45px;
    animation: boot-ring-spin 1.2s linear infinite;
    backface-visibility: hidden;
    contain: layout paint;
    transform: translateZ(0);
    will-change: transform;
}

.boot-loading-ring svg {
    display: block;
    width: 100%;
    height: 100%;
}

.boot-ring-arc {
    stroke-dasharray: 22 66;
    stroke-dashoffset: 0;
    transform-origin: center;
}

@keyframes boot-ring-spin {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}

/* ============ 关机/重启/注销 覆盖层 ============ */
#power-overlay {
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.5s ease, background 0.5s ease;
    pointer-events: none;
    opacity: 0;
}

/* ============ 全局亮度调节层 ============ */
/* 亮度用独立覆盖层表达，绝不下发到 body：任何 filter 都会让 body 成为后代
   position:fixed 的包含块，抽屉等贴底元素会改为相对 body 定位而偏移。
   z-index 取 int 上限，需高于 css/tuos-window.css 中的 2147483000。 */
#brightness-layer {
    position: fixed;
    inset: 0;
    background: #000;
    pointer-events: none;
    z-index: 2147483647;
}

/* ============ 全局：文件拖拽到窗口提示（蓝色动态边框） ============ */
#file-drag-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;

    /* 光晕布局：稍微内缩一圈，形成更粗的可见边框 */
    --file-drag-inset: 10px;
    --file-drag-radius: 22px;

    /* 多色级蓝色光晕（浅色模式） */
    --file-drag-blue-deep: rgba(0, 64, 160, 0.55);
    --file-drag-blue-mid: rgba(var(--accent-rgb, 0, 120, 212), 0.55);
    --file-drag-blue-light: rgba(120, 220, 255, 0.85);
}

#file-drag-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease;
}

/* 纯光晕：在网页四周显示动态蓝色光晕（无描边、无线条） */
#file-drag-overlay .file-drag-overlay-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#file-drag-overlay .file-drag-overlay-glow::before,
#file-drag-overlay .file-drag-overlay-glow::after {
    content: "";
    position: absolute;
    inset: var(--file-drag-inset);
    border-radius: var(--file-drag-radius);
    pointer-events: none;
}

#file-drag-overlay .file-drag-overlay-glow::before {
    /* 内层：一圈清晰的粗亮边 + 柔和外扩光，更接近 mac 的厚描边效果 */
    background: none;
    border-radius: var(--file-drag-radius);
    box-shadow:
        /* 实际“粗边”的主体（有一定扩散） */
        0 0 0 3px rgba(120, 220, 255, 0.98),
        /* 紧贴粗边的一层蓝色发光 */
        0 0 20px 10px rgba(var(--accent-rgb, 0, 120, 212), 0.82),
        /* 更远一点的柔光，增强存在感 */
        0 0 40px 20px rgba(0, 64, 160, 0.65);
    opacity: 0.96;
    filter: blur(2.2px) saturate(1.18);
    animation: fileDragAuraPulseInner 1.4s ease-in-out infinite;
}

#file-drag-overlay .file-drag-overlay-glow::after {
    /* 外层：柔和的环境光，略比内圈更大，避免整屏泛蓝 */
    inset: calc(var(--file-drag-inset) - 4px);
    border-radius: calc(var(--file-drag-radius) + 10px);
    background: none;
    box-shadow:
        0 0 60px 26px rgba(var(--accent-rgb, 0, 120, 212), 0.36),
        0 0 90px 34px rgba(120, 220, 255, 0.32);
    opacity: 0.6;
    filter: blur(10px) saturate(1.08);
    animation: fileDragAuraPulseOuter 2s ease-in-out infinite;
}

@keyframes fileDragAuraPulseInner {
    0% { opacity: 0.55; transform: scale(0.998); filter: blur(4px) saturate(1.05); }
    50% { opacity: 0.9; transform: scale(1.002); filter: blur(3px) saturate(1.18); }
    100% { opacity: 0.55; transform: scale(0.998); filter: blur(4px) saturate(1.05); }
}

@keyframes fileDragAuraPulseOuter {
    0% { opacity: 0.32; transform: scale(0.996); filter: blur(10px) saturate(1.02); }
    50% { opacity: 0.55; transform: scale(1.004); filter: blur(8px) saturate(1.1); }
    100% { opacity: 0.32; transform: scale(0.996); filter: blur(10px) saturate(1.02); }
}

.dark-mode #file-drag-overlay {
    /* 多色级蓝色光晕（深色模式更偏青蓝） */
    --file-drag-blue-deep: rgba(0, 90, 200, 0.40);
    --file-drag-blue-mid: rgba(0, 170, 255, 0.45);
    --file-drag-blue-light: rgba(120, 220, 255, 0.90);
}

#power-overlay:not(.hidden) {
    display: flex !important;
    pointer-events: auto;
    opacity: 1;
}

#power-overlay.phase-blur {
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.25);
}

.dark-mode #power-overlay.phase-blur {
    background: rgba(0, 0, 0, 0.35);
}

#power-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.power-overlay-card {
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px) saturate(150%);
    border-radius: 16px;
    padding: 28px 40px;
    min-width: min(260px, 100vw);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: scale(0.92) translateY(8px);
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

#power-overlay.phase-card .power-overlay-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.dark-mode .power-overlay-card {
    background: rgba(40, 40, 40, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.power-overlay-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 16px;
}

.dark-mode .power-overlay-title {
    color: var(--accent);
}

.power-overlay-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.power-loading-ring {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.power-overlay-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============ 锁屏 ============ */
#lock-screen {
    z-index: 900;
}

.lock-wallpaper {
    /* 默认背景与开机屏幕 #boot-screen 统一 */
    background-color: #1a1a1a;
    /* 正常锁屏状态下不模糊 */
    filter: none;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), 
                filter 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lock-time-container {
    position: absolute;
    top: 80px;
    left: 60px;
    color: white;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
                filter 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lock-time {
    font-size: 96px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 8px;
}

.lock-date {
    font-size: 24px;
    font-weight: 400;
    opacity: 0.95;
}

.lock-notifications {
    position: absolute;
    top: 250px;
    left: 60px;
    z-index: 7;
    display: flex;
    width: min(420px, calc(100vw - 120px));
    max-height: calc(100vh - 390px);
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    pointer-events: auto;
}

.lock-notification-item {
    padding: 16px 18px;
    color: #ffffff;
    background: rgba(24, 24, 28, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.lock-notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.lock-notification-title { font-size: 15px; font-weight: 600; }
.lock-notification-time { margin-top: 3px; font-size: 12px; opacity: 0.72; }
.lock-notification-message { margin-top: 10px; font-size: 14px; line-height: 1.45; }

.lock-notification-close {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
}

.lock-notification-close:hover { background: rgba(255, 255, 255, 0.22); }
.lock-notification-close img { width: 14px; height: 14px; filter: brightness(0) invert(1); }

.lock-hint {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
                filter 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 锁屏小组件图层：与时间/提示文字一样参与锁屏↔登录的景深模糊过渡 */
#lock-widgets-layer {
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
                filter 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============ 锁屏登录区 ============
   点击锁屏后就地展开：没有卡片外壳、没有窗口边框、没有投影描边，
   账号/密码框以玻璃态直接浮在锁屏壁纸上 —— 跟 Windows 锁屏登录区同一形态。
   锁屏时钟在屏幕顶部（.lock-time-container），本表单垂直居中，两者互不遮挡。 */
.lock-login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(330px, calc(100vw - 48px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 30;
    /* 入场动画在 animations.css：与 start-menu / control-center 一样受 animations-enabled 约束 */
}

.lock-login.hidden {
    display: none;
}

.lock-login-input {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color 200ms ease, background 200ms ease;
}

.lock-login-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.lock-login-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.16);
}

.lock-login-submit {
    height: 46px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: filter 200ms ease, opacity 200ms ease;
}

.lock-login-submit:hover { filter: brightness(1.08); }
.lock-login-submit:disabled { opacity: 0.6; cursor: default; }

.lock-login-error {
    color: #ff9a9a;
    font-size: 13px;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.lock-login-error.hidden,
.lock-login-captcha-row.hidden {
    display: none;
}

.lock-login-captcha-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lock-login-captcha-img {
    height: 46px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

/* 密码框眼睛按钮（.pin-toggle）
   登录页移除后这套基础样式只服务锁屏登录区的密码框：绝对定位在输入框右侧、垂直居中。 */
.pin-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.pin-toggle img {
    width: 18px;
    height: 18px;
}

/* 密码框：眼睛按钮组件（.pin-toggle）在锁屏上换配色 */
.lock-login-pin-wrap {
    position: relative;
    display: flex;
}

.lock-login-pin-wrap .lock-login-input {
    padding-right: 48px;
}

.lock-login-pin-wrap .pin-toggle {
    color: rgba(255, 255, 255, 0.8);
}

.lock-login-pin-wrap .pin-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Eye.svg 自带深色，锁屏是深色壁纸 —— 强制反相成白色才看得见 */
.lock-login-pin-wrap .pin-toggle img {
    filter: brightness(0) invert(1);
}

/* 邮箱验证码行：与图形验证码行同一形态（输入框 + 右侧小按钮） */
.lock-login-code-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lock-login-code-row.hidden {
    display: none;
}

.lock-login-get-code {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease;
}

.lock-login-get-code:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }
.lock-login-get-code:disabled { opacity: 0.6; cursor: default; }

/* 中性提示（注册待审核 / 验证码已发送 / 密码已重置）：复用错误条位置，只换配色 */
.lock-login-error.lock-login-tip { color: rgba(255, 255, 255, 0.92); }

/* 注册 / 找回密码：弱化小字。这两个流程不再跳去登录页 —— 就地切模式，
   字段复用上面那几个框（注册=用户名+密码[+邮箱+验证码]，找回=邮箱+新密码+验证码）。 */
.lock-login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
}

.lock-login-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 200ms ease;
}

.lock-login-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.lock-login-link-sep {
    color: rgba(255, 255, 255, 0.35);
}

/* 展开登录后：隐藏"轻点屏幕以登录"，壁纸轻微虚化让输入框更聚焦 */
body.lock-unlocking .lock-hint {
    opacity: 0;
    pointer-events: none;
}

body.lock-unlocking .lock-wallpaper {
    filter: blur(4px);
    transform: scale(1.04);
}

/* 响应式：窄屏（< 480px）下锁屏登录区的眼睛按钮收紧尺寸 */
@media (max-width: 480px) {
    .pin-toggle {
        width: 36px;
        height: 36px;
    }
    .pin-toggle img {
        width: 16px;
        height: 16px;
    }
}

/* ============ 桌面 ============ */
#desktop-screen {
    z-index: 100;
}

.desktop-wallpaper {
    position: absolute;
    inset: 0;
    /* 默认背景与开机屏幕 #boot-screen 统一 */
    background-color: #1a1a1a;
    transform: scale(1);
    filter: none;
    transition: filter 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: filter, transform;
}

/* Keep the browser's composition backing surface dark during boot and
   fullscreen/viewport changes, so a transient unpainted frame cannot flash. */
html,
#app {
    background: #1a1a1a;
}

/* #app 作为持久定位上下文：height 100dvh = 动态可见高度，
   让内部 absolute 子元素的 bottom 直接参照可见区域（不被浏览器底栏/软键盘推偏）。
   与 .screen 的 100dvh 方案配套，解决手机端任务栏被遮挡/键盘弹出顶上来问题。
   不加 overflow:hidden——.screen 已各自 fixed 不溢出，overflow 会裁掉 absolute 任务栏。 */
#app {
    position: relative;
    height: 100dvh;
    height: 100%;
}

.desktop-wallpaper-fade-layer {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, filter, transform;
}

.desktop-icons {
    position: absolute;
    /* 网格起点（margin 8px）由 JS 计算并与小组件网格共用；容器左右贴边（0px）；
       游客模式信息栏避让由 body.guest-mode 的 margin-top 单独处理 */
    top: 0;
    left: 0;
    right: 0;
    /* 贴任务栏上沿（任务栏 bottom:8px + 高 64px = 顶 72px），不再额外留白 */
    bottom: 72px;
    /* 图标网格由 JS renderIcons 逐格绝对定位（style 强制 display:block），
       此处仅保留裁剪与滚动边界，不再使用 CSS grid 布局 */
    overflow-x: auto; /* 分页：横向滚动翻页（滚动条隐藏，靠滑动 / 底部圆点翻页） */
    /* 图标超出一屏时向下延伸（renderIcons 的 isFree 不限 row 上限），由纵向滚动承载：
       不开分页——分页是"分类页"那套独立机制，不用来装溢出内容。所有视口统一由纵向滚动承载，
       不截断——滚得到为止（大屏布局落小屏也照滚，不丢图标）。
       注意：overflow 只挡得住用户滚动（滚轮 / 滚动条 / 触摸），挡不住脚本设 scrollTop，
       鼠标纵向拖拽那条路由 desktop.js 的 _panMode 单独处理（见该处注释）。 */
    overflow-y: auto;
    overscroll-behavior: contain; /* 滚动到边界不连锁到父级，避免整页被拖动 */
    -webkit-overflow-scrolling: touch; /* iOS 动量滚动 */
    touch-action: pan-y pinch-zoom; /* 纵向滚动交浏览器；横向手势交给 JS 判定"一划一页"翻页（见 desktop.js 触摸手势），禁掉原生横向滚动避免跟手回弹 */
    scrollbar-width: none; /* 隐藏滚动条（Firefox） */
    -ms-overflow-style: none; /* 隐藏滚动条（旧版 Edge/IE） */
    /* 容器接收事件：空白处滚轮由 JS 接管翻页；图标/小组件自身 pointer-events: auto 不受影响 */
    pointer-events: auto;
}
/* 分页模式下隐藏滚动条（Chrome/Safari），视觉更接近手机桌面 */
.desktop-icons::-webkit-scrollbar {
    display: none;
}

/* 桌面分页指示器：任务栏上方的小圆点，每页一个，当前页拉长高亮（手机桌面样式）
   用 fixed 定位相对视口居中（桌面图标容器分页后为多页宽，absolute 会偏移） */
.desktop-pages-indicator {
    position: fixed;
    left: 50%;
    bottom: 86px; /* 任务栏上方（底 8px、高 64px、顶 72px），圆点占 86~93 */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 3;
    pointer-events: auto;
}
.desktop-pages-indicator .page-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    flex: none;
    transition: width 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.25s ease, opacity 0.25s ease;
}
.desktop-pages-indicator .page-dot.active {
    width: 18px;
    background: rgba(255, 255, 255, 0.92);
}

/* 切页浮层：屏幕上方居中短暂显示当前分页名（整页切换时触发，约 1.6s 淡出）
   样式统一走 V2 卡片 token（--tuos-card-*），跟随明暗主题，与 toast 风格一致 */
.desktop-page-flash {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    /* 高于桌面(100)，低于启动画面(1000) */
    z-index: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: var(--tuos-card-bg-light, rgba(255, 255, 255, 0.7));
    color: #1f2329;
    border: 1px solid var(--tuos-card-border-light, rgba(255, 255, 255, 0.3));
    font-size: 15px;
    line-height: 1;
    padding: 10px 22px;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(var(--tuos-material-blur-light, 10px)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--tuos-material-blur-light, 10px)) saturate(160%);
    letter-spacing: 0.5px;
}
body.tuos-v2.dark-mode .desktop-page-flash {
    background: var(--tuos-card-bg-dark, rgba(0, 0, 0, 0.7));
    color: #fff;
    border-color: var(--tuos-card-border-dark, rgba(255, 255, 255, 0.1));
}

.desktop-icon {
    display: grid;
    grid-template-rows: var(--dicon-row, 52px) var(--dicon-text, 15px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    align-content: center;
    justify-items: center;
    /* 默认 50px 图标时保持 90px 宽（现状不变）；图标放大到 100px 时容器宽度跟随，
       避免大图标溢出固定容器。取 --dicon 与 --dicon-preview 较大者 + 内边距。 */
    width: max(90px, calc(max(var(--dicon, 50px), var(--dicon-preview, 50px)) + 16px));
    height: var(--dicon-h, 90px); /* 高度跟随图标大小变量（默认 90px 还原现状） */
    padding: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
    pointer-events: auto; /* 容器已关闭事件，图标自身恢复 */
    -webkit-tap-highlight-color: transparent;
}

.desktop-icon.cut {
    opacity: 0.5;
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.desktop-icon.selected {
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    box-shadow: none;
    z-index: 2;
}

.desktop-icon:focus,
.desktop-icon:focus-visible,
.desktop-icon:active {
    outline: none;
    box-shadow: none;
}

/* 统一应用图标圆角 */
.app-icon {
    border-radius: 8px;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.desktop-icon img {
    width: var(--dicon, 50px);
    height: var(--dicon, 50px);
    margin: 0;
    align-self: center;
    pointer-events: none;
    flex-shrink: 0; /* 防止图标被压缩 */
    border-radius: 30%;
}

.desktop-icon img.desktop-icon-image-preview {
    width: var(--dicon-preview, 52px);
    height: var(--dicon-preview, 52px);
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.08);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.desktop-icon span {
    display: block;
    width: 100%;
    min-width: 0;
    height: 1.2em;
    max-height: 1.2em;
    font-size: var(--dicon-font, 12px);
    color: var(--dicon-text-color, white);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: text-shadow 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.35);
}

/* 就地重命名（电脑式改名）编辑态：输入框占据文字槽，原 span 仅隐藏不拆除——
   提交/取消后随 class 移除自然还原，reconcile 渲染也不会与输入框冲突 */
.desktop-icon.renaming span {
    visibility: hidden;
}
.desktop-icon-rename-input {
    /* 脱离 grid 布局：绝对定位覆盖第二行（文字槽）位置，
       不参与行高计算，彻底避免 grid align-content 重算导致图标上移。 */
    position: absolute;
    left: 8px;
    right: 8px;
    /* 距容器底 = padding(8px) + 第二行高度，使 input 底边对齐第二行底边。
       --dicon-text 与 .desktop-icon span 的 grid 行高保持一致。 */
    bottom: calc(8px + 0px);
    height: var(--dicon-text, 15px);
    margin: 0;
    padding: 0 3px;
    box-sizing: border-box;
    /* 统一主题变量：背景/文字/边框跟随浅深模式（与其它输入框、对话框一致）。
       桌面壁纸适配通过 --bg-secondary 的 0.7 半透明实现：浅色模式半透明白底、深色模式半透明黑底，
       既随主题切换，又保证在任意壁纸上文字可读。 */
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--dicon-font, 12px);
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    outline: none;
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
}
.desktop-icon-rename-input::selection {
    background: var(--accent-soft);
}

/* 选中后仅让标题从固定的单行槽向下展开；网格第一行尺寸不变，
   因此完整文件名不会把文件或 App 图标向上挤。 */
.desktop-icon.selected span {
    height: auto;
    max-height: none;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: clip;
}

/* 亮色壁纸时添加阴影效果 */
.desktop-icons.light-wallpaper .desktop-icon img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.desktop-icons.light-wallpaper .desktop-icon span {
    color: var(--dicon-text-color, #333);
}

/* 暗色壁纸时的样式 */
.desktop-icons.dark-wallpaper .desktop-icon span {
    color: var(--dicon-text-color, white);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.desktop-icons.dark-wallpaper .desktop-icon img {
    filter: none;
}

/* 修复中的 App 在所有启动入口保持统一的禁用视觉。 */
.desktop-icon.repairing,
.taskbar-app.repairing,
.start-app.repairing,
.start-all-app-row.repairing {
    opacity: 0.4 !important;
    filter: grayscale(100%) !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* 禁用图标的浏览器原生拖拽，避免与指针拖拽（固定到桌面）冲突 */
.taskbar-app img,
.start-app img,
.start-all-app-row img {
    -webkit-user-drag: none;
    user-select: none;
}

/* 任务栏图标拖拽到桌面时的幽灵图标 */
.taskbar-drag-ghost {
    position: fixed;
    z-index: 12000;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    box-shadow: var(--shadow-lg);
    opacity: 0.95;
    transform: scale(0.9);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.taskbar-drag-ghost.droppable {
    transform: scale(1.08);
}

.taskbar-drag-ghost img {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

/* Desktop/files native drag snapshots reuse the Start-menu ghost geometry,
   with a solid material so the wallpaper cannot leak into the capture. */
.taskbar-drag-ghost.desktop-native-drag-ghost {
    background: #f7f7f7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dark-mode .taskbar-drag-ghost.desktop-native-drag-ghost {
    background: #2b2b2b;
}

.desktop-native-drag-ghost span {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #f7f7f7;
    border-radius: 999px;
    background: var(--accent, #0078d4);
    color: var(--accent-contrast, #fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
}

.dark-mode .desktop-native-drag-ghost span {
    border-color: #2b2b2b;
}

.desktop-icon.touch-drag-armed,
.file-item.touch-drag-armed {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 0, 120, 212), 0.5);
    touch-action: none !important;
}

/* 私密文件夹锁角标 */
.file-item-icon-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
/* 角标统一在图标**上方**：共享标在右上、私密锁在左上（与桌面同一套布局规则）。
   两者可同时出现（共享 = 已授权他人，私密 = 访问受限，是两件独立的事），分处两角互不遮挡。 */
.file-item-private-badge {
    position: absolute;
    top: -2px;
    left: -3px;
    width: 16px;
    height: 16px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    pointer-events: none;
}
.file-item-private-badge svg {
    width: 100%;
    height: 100%;
}

/* 共享文件夹角标：右上角、14×14。图形取自图标库 fill/Share.svg——CSS mask 只取形状、
   颜色由 background: currentColor 决定（先例见 css/tuos-window.css
   .fw-sidebar-search-result-icon::before），因此白色跟着 color 走，不再需要 filter 反色 hack。
   换图标只改那个 SVG 文件即可，JS 与 CSS 都不用动。
   注意：样式表里的 url() 相对**样式表**解析，故路径带 ../ 前缀。 */
.file-item-share-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 14px;
    height: 14px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}
.file-item-share-badge::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: url('../TuOS/Icon/Symbol_icon/fill/Share.svg') center / contain no-repeat;
    mask: url('../TuOS/Icon/Symbol_icon/fill/Share.svg') center / contain no-repeat;
}

/* 文件管理器 .link 快捷方式角标：左下角，与桌面 .link 角标同侧（两者互斥，见 _buildItemsHTML）。
   挂在 .file-item-icon-wrap 内，相对图标定位，不会压到文件名。 */
.file-item-link-badge {
    position: absolute;
    bottom: -2px;
    left: -3px;
    width: 14px;
    height: 14px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}
.file-item-link-badge svg {
    width: 100%;
    height: 100%;
}

/* 桌面私密文件夹锁角标 */
.desktop-icon-lock-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    pointer-events: none;
    z-index: 2;
}
.desktop-icon-lock-badge svg {
    width: 100%;
    height: 100%;
}

/* 桌面共享文件夹角标：位置在**右上**，私密锁让到左上——两者可同时出现且不互相遮挡。
   图形与文件管理器共享角标同源，均取自图标库 fill/Share.svg（CSS mask + currentColor 上白），
   drop-shadow 保证浅底上可辨。换图标只改那个 SVG 文件。 */
.desktop-icon-share-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    pointer-events: none;
    z-index: 2;
}
.desktop-icon-share-badge::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: url('../TuOS/Icon/Symbol_icon/fill/Share.svg') center / contain no-repeat;
    mask: url('../TuOS/Icon/Symbol_icon/fill/Share.svg') center / contain no-repeat;
}

/* 桌面图标定位容器：.link 角标挂在这里，才能相对**图标本身**定位。
   .desktop-icon 是"图标行 + 文件名行"的两行网格，角标若挂在它上面写 bottom 会压到文件名。 */
.desktop-icon-icon-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* 桌面 .link 快捷方式角标：左下角（与 Windows 快捷方式箭头同侧），相对图标定位，
   图标尺寸变化时不会错位。共享/私密锁仍挂在 .desktop-icon 上（右上/左上），
   与 .link 互斥（共享、私密锁只作用于文件夹，.link 是文件），不会打架。 */
.desktop-icon-link-badge {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    pointer-events: none;
    z-index: 2;
}
.desktop-icon-link-badge svg {
    width: 100%;
    height: 100%;
}

.touch-drag-ghost {
    transition: none;
    transform: scale(0.98);
}

body.touch-drag-active {
    user-select: none;
    -webkit-user-select: none;
}


/* 开始按钮快捷菜单及电源悬浮子菜单 */
.start-user-header {
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 4px 0 6px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.08);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: default;
}

.start-user-header.login-action,
.start-user-header.logout-action {
    cursor: pointer;
}

.start-user-header.login-action:hover,
.start-user-header.login-action:focus-visible,
.start-user-header.logout-action:hover,
.start-user-header.logout-action:focus-visible {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.14);
    outline: none;
}

.start-user-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.12);
}

.start-user-header-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.start-user-header-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-user-header-status {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-user-header-badge {
    padding: 3px 8px;
    border-radius: 999px;
    color: rgb(var(--accent-rgb, 0, 120, 212));
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.12);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.dark-mode .start-user-header {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.16);
}

.dark-mode .start-user-header.login-action:hover,
.dark-mode .start-user-header.login-action:focus-visible,
.dark-mode .start-user-header.logout-action:hover,
.dark-mode .start-user-header.logout-action:focus-visible {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.24);
}

.start-button-power-menu {
    z-index: 10001;
}

/* 任务栏自身右键菜单（非 TuOSUI.ContextMenu 组件，无动态层级）：提到任务栏(10000)之上，
   否则会被带 transform 的 .taskbar stacking context 压在下层，右键菜单看不见 */
#taskbar-context-menu {
    z-index: 10002;
}

/* ============ 任务栏 ============ */
/* 任务栏层级，低于面板但高于窗口 - Taskbar z-index, below panels but above windows */
.taskbar {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    padding: 8px 12px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    z-index: 10000;
}

/* 窄屏：任务栏改 position: absolute（挂在 #app 的 100dvh 定位上下文内），
   使 bottom 参照动态可见区域，软键盘弹出时不会被浏览器顶上来。
   #app 已 position: relative + height: 100dvh，任务栏是其直接子级，改 absolute 安全。 */
@media (max-width: 768px) {
    .taskbar {
        position: absolute;
    }
    /* 软键盘弹出时隐藏任务栏（与 widgets.css 的抽屉隐藏同步），
       用户在输入框打字时不需要任务栏，键盘收起后自动恢复。
       比 absolute/dvh 方案更可靠：不依赖各机型 dvh 是否跟随键盘缩小。 */
    body.keyboard-open .taskbar {
        display: none !important;
    }
    /* 锁定 layout viewport，防止浏览器在 input focus 时自动滚动导致 fixed 元素被顶上去 */
    body.keyboard-open {
        position: fixed !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
}

/* 任务栏显示动画 - 从下方弹入（非线性平滑） */
body.animations-enabled .taskbar {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.35s ease-out;
}

/* 任务栏隐藏动画 - 向下滑出（非线性平滑） */
body.animations-enabled .taskbar.hiding {
    transition: transform 0.45s cubic-bezier(0.55, 0.055, 0.675, 0.19), 
                opacity 0.3s ease-in;
}

body.animations-enabled .taskbar.auto-hide-active {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.35s ease-out;
}

body.animations-enabled .taskbar.auto-hide-active.hiding {
    transition: transform 0.45s cubic-bezier(0.55, 0.055, 0.675, 0.19),
                opacity 0.3s ease-in;
}

.taskbar.hidden {
    transform: translateX(-50%) translateY(calc(100% + 30px));
    opacity: 0;
    pointer-events: none;
}

@keyframes taskbarPeekPop {
    0% {
        transform: translateX(-50%) translateY(calc(100% + 30px));
        opacity: 0;
    }
    62% {
        transform: translateX(-50%) translateY(-5px);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

body.animations-enabled .taskbar.auto-hide-active.peek-pop {
    animation: taskbarPeekPop 0.52s cubic-bezier(0.2, 1.2, 0.2, 1) both;
}

.taskbar-left,
.taskbar-center,
.taskbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 任务栏扩充弹簧动画 */
body.animations-enabled .taskbar-center {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.taskbar-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), transform var(--transition-fast);
    position: relative;
}

.taskbar-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

.dark-mode .taskbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.taskbar-btn:active {
    transform: scale(0.95);
}

.taskbar-btn img {
    width: 24px;
    height: 24px;
}

/* 任务栏图标固定使用描边版：填充版 img 已从 index.php 移除，
   因此不再需要激活态的图标切换，这里只保留 stroke 的显示。
   注：TuAi 按钮另有 css/tuai.css 的同名控制规则。 */
.taskbar-btn .icon-stroke {
    display: block;
}

.taskbar-app {
    position: relative;
}

.taskbar-app img {
    position: relative;
    z-index: 2;
    border-radius: 6px;
}

.taskbar-app-stack-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25px;
    height: 25px;
    display: none;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: color-mix(in srgb, var(--bg-primary) 88%, var(--accent) 12%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
    pointer-events: none;
    z-index: 1;
}

.taskbar-app.taskbar-app-multi .taskbar-app-stack-layer {
    display: block;
}

.taskbar-app-stack-back {
    transform: translate(-36%, -64%);
    opacity: 0.7;
}

.taskbar-app-stack-front {
    transform: translate(-44%, -56%);
    opacity: 0.9;
}

.dark-mode .taskbar-app-stack-layer {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
}

.taskbar-app::before {
    content: '';
    position: absolute;
    inset: 4px 8px auto 8px;
    height: 8px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(var(--accent-rgb, 0, 120, 212), 0.28) 0%, rgba(var(--accent-rgb, 0, 120, 212), 0.12) 55%, rgba(var(--accent-rgb, 0, 120, 212), 0) 100%);
    filter: blur(6px);
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast), bottom var(--transition-fast);
    pointer-events: none;
    z-index: 0;
}

.taskbar-app::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    background: var(--accent);
    border-radius: 999px;
    opacity: 0;
    transition: opacity var(--transition-fast), width var(--transition-fast), height var(--transition-fast), bottom var(--transition-fast);
    pointer-events: none;
    z-index: 1;
}

.taskbar-app.running::before,
.taskbar-app.taskbar-app-minimized::before {
    opacity: 1;
    transform: translateY(2px);
}

.taskbar-app.taskbar-app-active::before {
    opacity: 1;
    transform: translateY(0);
    background: radial-gradient(circle, rgba(var(--accent-rgb, 0, 120, 212), 0.34) 0%, rgba(var(--accent-rgb, 0, 120, 212), 0.18) 55%, rgba(var(--accent-rgb, 0, 120, 212), 0) 100%);
}

.taskbar-app.taskbar-indicator-sync::before {
    transition:
        opacity var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease),
        transform var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease),
        background var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease);
}

.taskbar-app.running::after,
.taskbar-app.taskbar-app-minimized::after {
    width: 4px;
    height: 4px;
    opacity: 1;
    z-index: 2;
}

.taskbar-app.taskbar-app-active::after {
    width: 16px;
    height: 3px;
    bottom: -3px;
    opacity: 1;
    z-index: 2;
}

.taskbar-app.taskbar-indicator-sync::after {
    transition:
        opacity var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease),
        width var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease),
        height var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease),
        bottom var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease),
        background var(--taskbar-indicator-duration, var(--transition-fast)) var(--taskbar-indicator-ease, ease);
}

.taskbar-app.taskbar-app-dock-hit:not(.taskbar-indicator-sync)::after {
    opacity: 0;
}

body.button-glow-enabled .taskbar-app::after {
    bottom: -5px;
}

body.button-glow-enabled .taskbar-app.button-glow-target {
    overflow: hidden;
}

body.button-glow-enabled .taskbar-app > .button-edge-glow,
body.button-glow-enabled .taskbar-app > .button-glow-ripple {
    z-index: 1;
}

body.button-glow-enabled .taskbar-app > .button-edge-glow {
    width: 54px;
    height: 54px;
    filter: blur(5px);
}

body.button-glow-enabled .taskbar-app.running:not(.taskbar-app-active)::after,
body.button-glow-enabled .taskbar-app.taskbar-app-minimized::after {
    bottom: 3px;
}

body.button-glow-enabled .taskbar-app.taskbar-app-active::after {
    bottom: 3px;
}

body.button-glow-enabled .taskbar-app.running:not(.taskbar-app-active)::after,
body.button-glow-disabled .taskbar-app.running:not(.taskbar-app-active)::after,
body.button-glow-enabled .taskbar-app.taskbar-app-minimized::after,
body.button-glow-disabled .taskbar-app.taskbar-app-minimized::after {
    opacity: 1;
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.5);
}

.taskbar-app.taskbar-app-active.running::after {
    opacity: 1;
    background: var(--accent);
}

.taskbar-window-preview {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5000;
    width: max-content;
    max-width: calc(100vw - 16px);
    padding: 6px;
    border-radius: 14px;
    background: rgba(248, 248, 248, 0.82);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(var(--tuos-material-blur-light, 20px)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--tuos-material-blur-light, 20px)) saturate(160%);
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom center;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.taskbar-window-preview.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.taskbar-window-preview-list {
    display: flex;
    align-items: stretch;
    gap: 6px;
    max-width: calc(100vw - 28px);
    overflow-x: auto;
    scrollbar-width: thin;
}

.taskbar-window-preview-card {
    flex: 0 0 auto;
    padding: 5px;
    border-radius: 10px;
    transition: background 120ms ease, transform 120ms ease;
    cursor: default;
}

.taskbar-window-preview-card:hover {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.12);
}

.taskbar-window-preview-card:active {
    transform: scale(0.985);
}

.dark-mode .taskbar-window-preview {
    background: rgba(34, 34, 34, 0.84);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
}

.taskbar-window-preview-titlebar {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 5px 2px;
    color: var(--text-primary);
}

.taskbar-window-preview-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.taskbar-window-preview-title img {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.taskbar-window-preview-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 228px;
}

.taskbar-window-preview-close {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
}

.taskbar-window-preview-close img {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.dark-mode .taskbar-window-preview-close img {
    filter: invert(1);
}

.taskbar-window-preview-close:hover {
    background: rgba(232, 17, 35, 0.88);
    color: #fff;
}

.taskbar-window-preview-close:hover img {
    filter: invert(1);
}

.taskbar-window-preview-frame {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

.dark-mode .taskbar-window-preview-frame {
    border-color: rgba(255, 255, 255, 0.1);
}

.taskbar-window-preview-clone,
.taskbar-window-preview-clone * {
    pointer-events: none !important;
}

.taskbar-window-preview-clone {
    animation: none !important;
}

.taskbar-window-preview-clone .window-resize-handle,
.taskbar-window-preview-clone .window-snap-layout-menu {
    display: none !important;
}

.cross-app-drop-preview {
    position: absolute;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 28px;
    border: 2px solid rgba(var(--accent-rgb, 0, 120, 212), 0.8);
    border-radius: inherit;
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.1);
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    opacity: 0;
    transform: scale(0.985);
    pointer-events: none;
    transition: opacity 130ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cross-app-drop-preview.show {
    opacity: 1;
    transform: scale(1);
}

.cross-app-drop-preview-card {
    min-width: min(320px, calc(100% - 32px));
    max-width: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    background: rgba(250, 250, 250, 0.88);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
    color: var(--text-primary);
}

.dark-mode .cross-app-drop-preview-card {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(38, 38, 38, 0.9);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.46);
}

.cross-app-drop-preview-card > img {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}

.cross-app-drop-preview-card > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cross-app-drop-preview-card strong {
    font-size: 15px;
    line-height: 1.25;
}

.cross-app-drop-preview-card small {
    color: var(--text-secondary);
    font-size: 12px;
}

.taskbar-notification {
    width: auto !important;
    padding: 0 12px !important;
}

.notification-time-container {
    text-align: center;
}

.notification-time {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.notification-date {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* ============ 开始菜单 ============ */
/* 开始菜单在任务栏上方 - Start menu above taskbar */
/* 开始菜单 absolute 挂在 #app 的 100dvh 定位上下文内（与窄屏任务栏同一套方案）：
   高度上限用 100% 沿 #app → body 的 vh 兜底 / dvh 增强链自动结算，
   无需在本元素再写 dvh，也不用依赖媒体查询 */
.start-menu {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 600px;
    max-height: calc(100% - 100px);
    overflow-y: auto;
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    z-index: 10200;
    transform-origin: center bottom;
}

.start-menu-user {
    width: 100%;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 0 14px;
    border: 1px solid rgba(var(--accent-rgb, 0, 120, 212), 0.18);
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.08);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: default;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.start-menu-user.login-action,
.start-menu-user.logout-action {
    cursor: pointer;
}

.start-menu-user.login-action:hover,
.start-menu-user.login-action:focus-visible,
.start-menu-user.logout-action:hover,
.start-menu-user.logout-action:focus-visible {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.14);
    border-color: rgba(var(--accent-rgb, 0, 120, 212), 0.32);
    outline: none;
}

.start-menu-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.12);
}

.start-menu-user-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.start-menu-user-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-menu-user-status {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 8px;
}

/* 用户区云端存储进度条（已用 / 可用） */
.cloud-storage-bar {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(var(--text-rgb, 17, 17, 17), 0.14);
    overflow: hidden;
    order: -1;
}

.cloud-storage-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: rgb(var(--accent-rgb, 0, 120, 212));
    transition: width 0.3s ease;
}

.dark-mode .cloud-storage-bar {
    background: rgba(var(--text-rgb, 255, 255, 255), 0.18);
}

/* 用户区云端存储图例（已用 / 可用），与设置「云端存储」卡一致 */
.cloud-storage-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.cloud-storage-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cloud-storage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.cloud-storage-dot-cloud {
    background: rgb(var(--accent-rgb, 0, 120, 212));
}

.cloud-storage-dot-available {
    background: rgba(var(--text-rgb, 17, 17, 17), 0.35);
}

.dark-mode .cloud-storage-dot-available {
    background: rgba(var(--text-rgb, 255, 255, 255), 0.4);
}

.start-menu-user-badge {
    padding: 3px 8px;
    border-radius: 999px;
    color: rgb(var(--accent-rgb, 0, 120, 212));
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.12);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.start-menu.start-all-apps-mode .start-menu-user,
.start-menu.start-search-mode .start-menu-user {
    display: none;
}

.start-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

.start-search:focus-within {
    border-color: var(--accent);
}

.start-search img {
    width: 20px;
    height: 20px;
}

.start-search input {
    flex: 1;
    border: none;
    background: none;
    font-size: 14px;
    color: var(--text-primary);
}

.start-search input::placeholder {
    color: var(--text-tertiary);
}

/* 开始菜单分区 */
.start-section {
    margin-bottom: 20px;
    transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.start-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.start-section-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.start-section-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.start-section-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .start-section-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.start-section-link img {
    width: 14px;
    height: 14px;
    opacity: 0.9;
}

.start-apps-grid {
    display: grid;
    /* 列数自动：浏览器按容器宽度算最多可放列数，宽则多列、窄则自动减列换行，任何宽度都不会截断。
       下限取格子物理最小宽(36px 图标 + 左右 8px×2 内边距 = 52px)，让同屏排的列数尽量多、
       格子紧凑不拉空；想更稀可调大下限(如 64/76px)，想更密则需同步缩小图标或内边距 */
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 8px;
}

.start-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 5px 5px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.start-app:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .start-app:hover {
    background: rgba(255, 255, 255, 0.1);
}

.start-app img {
    width: 36px;
    height: 36px;
}

.start-app span {
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
}

.start-empty {
    grid-column: 1 / -1;
    padding: 22px 8px;
    color: var(--text-tertiary);
    font-size: 13px;
    text-align: center;
}

.start-all-apps-view,
.start-search-results-view {
    margin-bottom: 20px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(22px);
    transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.start-menu.start-all-apps-mode .start-all-apps-view,
.start-menu.start-search-mode .start-search-results-view {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 94px;
    margin-bottom: 0;
    opacity: 1;
    transform: translateX(0);
}

.start-menu.start-search-mode .start-search-results-view {
    top: 114px;
}

.start-menu.start-all-apps-mode .start-section,
.start-menu.start-search-mode .start-section {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-22px);
}

.start-menu.start-returning-home .start-all-apps-view,
.start-menu.start-returning-home .start-search-results-view {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 94px;
    margin-bottom: 0;
    pointer-events: none;
}

.start-menu.start-all-apps-mode .start-footer {
    display: none;
}

.start-all-apps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin-bottom: 4px;
    padding: 0 4px;
}

.start-all-apps-header > span {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--text-primary);
}

.start-all-apps-back {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 4px 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.start-all-apps-back:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.dark-mode .start-all-apps-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.start-all-apps-back img {
    width: 14px;
    height: 14px;
}

.start-all-apps-list {
    height: var(--start-apps-list-height, 388px);
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 72px;
    overscroll-behavior: contain;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

.start-search-results-view .start-all-apps-list {
    height: min(388px, max(260px, calc(100vh - 220px)));
}

.start-all-apps-list::-webkit-scrollbar {
    width: 0;
}

.start-all-apps-list.tuos-scrollbar-active {
    scrollbar-width: thin;
    scrollbar-color: var(--text-tertiary) transparent;
}

.start-all-apps-list.tuos-scrollbar-active::-webkit-scrollbar {
    width: 6px;
}

.start-all-apps-list::-webkit-scrollbar-track {
    background: transparent;
}

.start-all-apps-list::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 3px;
}

.recent-item-icon,
.recent-item > img {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
}

.start-all-apps-list > .start-app-group:first-child {
    padding-top: 4px;
}

.recent-item-thumb {
    object-fit: cover;
    border-radius: 6px;
}

.start-app-group {
    padding: 10px 8px 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.start-all-app-row {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 42px;
    padding: 7px 10px;
}

.start-all-app-row img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.start-all-app-row span {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.start-power-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.start-power-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .start-power-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.start-power-btn img {
    width: 20px;
    height: 20px;
}

/* ============ 电源菜单 ============ */
/* 电源菜单在任务栏上方 - Power menu above taskbar */
.power-menu {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    border-radius: var(--radius-md);
    padding: 6px;
    min-width: min(180px, 100vw);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    z-index: 10200;
}

.power-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.power-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .power-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.power-menu-item img {
    width: 18px;
    height: 18px;
}

/* ============ 控制中心 ============ */
/* 控制中心在任务栏上方 - Control center above taskbar */
.control-center {
    position: fixed;
    /* 不设置默认bottom，由JS动态计算 */
    width: min(380px, calc(100vw - 24px));
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    z-index: 10200;
}

.control-center-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.control-tile {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.control-tile:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
}

.dark-mode .control-tile:hover {
    background: rgba(255, 255, 255, 0.12);
}

.control-tile[data-active="true"] {
    background: var(--accent);
    color: white;
}

.control-tile[data-active="true"] .tile-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.control-tile-large {
    display: flex;
    gap: 12px;
}

.control-tile .tile-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
}

.control-tile-large .tile-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.control-tile .tile-icon.icon-stroke {
    display: block;
}

.control-tile .tile-icon.icon-fill {
    display: none;
}

.control-tile[data-active="true"] .tile-icon.icon-stroke {
    display: none !important;
}

.control-tile[data-active="true"] .tile-icon.icon-fill {
    display: block !important;
}

/* 激活状态的图标使用白色 */
.control-tile[data-active="true"] .tile-icon {
    filter: brightness(0) invert(1);
}

/* 蓝牙图标容器 */
.tile-icon-container {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 0; /* Flex gap 处理间距 */
}

.tile-icon-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}


/* 隐藏类优先级 */
.tile-icon.hidden {
    display: none !important;
}

.tile-label {
    flex: 1;
}

.tile-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.tile-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.control-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.control-slider:last-child {
    margin-bottom: 0;
}

.control-slider img {
    width: 20px;
    height: 20px;
}

.control-slider .tuos-slider {
    flex: 1;
    min-width: 0;
}

.control-slider span {
    font-size: 13px;
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}

/* ============ 通知中心 ============ */
/* 通知中心在任务栏上方 - Notification center above taskbar */
.notification-center {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    box-shadow: var(--shadow-xl);
    border-left: 1px solid var(--border-color);
    z-index: 10200;
    display: flex;
    flex-direction: column;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

.notification-header h3 {
    font-size: 20px;
    font-weight: 600;
}

.notification-clear {
    font-size: 13px;
    color: var(--accent);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.notification-clear:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .notification-clear:hover {
    background: rgba(255, 255, 255, 0.1);
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.notification-item {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    border: 1px solid var(--border-color);
}

.notification-item-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notification-item-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.notification-item-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

.notification-item-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.notification-item-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.dark-mode .notification-item-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.notification-item-close img {
    width: 12px;
    height: 12px;
}

.notification-item-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.notification-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.notification-empty img {
    width: 64px;
    height: 64px;
    opacity: 0.3;
    margin-bottom: 16px;
}

.notification-empty p {
    font-size: 14px;
}

/* ============ 窗口系统 ============ */
.window {
    position: absolute;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: min(400px, 100vw);
    min-height: min(300px, 100dvh);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    /* 不使用 will-change/translateZ 强制分层:backdrop-filter 本身已强制分层,
       多余的持久合成层会让 Chromium 在页面静止时走 render surface 缓存路径,
       在非整数 DPR 下于模糊层边缘产生黑线。 */
}

/* 窗口调整大小的手柄 */
.window-resize-handle {
    position: absolute;
    z-index: 200;
    touch-action: none;
}

.window-resize-handle.resize-top {
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    cursor: ns-resize;
}

.window-resize-handle.resize-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    cursor: ns-resize;
}

.window-resize-handle.resize-left {
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    cursor: ew-resize;
}

.window-resize-handle.resize-right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    cursor: ew-resize;
}

.window-resize-handle.resize-top-left {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

.window-resize-handle.resize-top-right {
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.window-resize-handle.resize-bottom-left {
    bottom: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.window-resize-handle.resize-bottom-right {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

/* 窗口调整时禁用过渡 */
.window.resizing {
    transition: none;
}

/* 窗口背景 - 模糊模式 */
.window-blur-enabled .window {
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
}

/* 窗口背景 - 纯色模式 */
.window-blur-disabled .window {
    background: var(--bg-primary);
}

.window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    cursor: move;
    user-select: none;
    touch-action: none;
}

/* 沉浸式窗口：隐藏标题栏，控制按钮悬浮在内容内 */
.window.window--immersive .window-titlebar,
body.window-blur-disabled .window.window--immersive .window-titlebar,
body.tuos-v2.window-blur-disabled .window.window--immersive .window-titlebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    border-bottom: none;
    z-index: 100;
}

.window.window--immersive .window-title-section {
    visibility: hidden;
}

.window.window--immersive .window-content {
    padding-top: 0;
    border-radius: var(--radius-xl);
}

.window.window--immersive .window-controls {
    margin-left: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast, 150ms) ease, visibility var(--transition-fast, 150ms) ease;
}

.window.window--immersive .window-titlebar:hover .window-controls,
.window.window--immersive .window-controls:hover,
.window.window--immersive .window-controls:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.window-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.window-icon {
    width: 20px;
    height: 20px;
}

.window-title {
    font-size: 14px;
    font-weight: 600;
}

.window.window-inactive {
    filter: saturate(0.78);
    transition: filter 120ms ease;
}

.window-controls {
    display: flex;
    gap: 8px;
    position: relative;
}

.window-control-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    touch-action: manipulation;
}

.window-control-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .window-control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.window-control-btn.close:hover {
    background: #d13438;
    color: white;
}

.window-control-btn img {
    width: 16px;
    height: 16px;
}

.window-snap-layout-menu {
    --snap-shell: rgba(255, 255, 255, 0.9);
    --snap-border: rgba(0, 0, 0, 0.12);
    --snap-empty: rgba(15, 23, 42, 0.08);
    --snap-fill: rgba(var(--accent-rgb, 0, 120, 212), 0.42);
    position: absolute;
    top: 50px;
    right: 52px;
    width: 252px;
    padding: 9px;
    border-radius: 12px;
    border: 1px solid var(--snap-border);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    background: var(--snap-shell);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    opacity: 0;
    transform: translateY(-8px) scale(0.93);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1.18);
    z-index: 45;
}

.window-snap-layout-menu.window-snap-layout-menu-portal {
    position: fixed;
    z-index: 10080;
}

.dark-mode .window-snap-layout-menu {
    --snap-shell: rgba(34, 37, 43, 0.88);
    --snap-border: rgba(255, 255, 255, 0.15);
    --snap-empty: rgba(255, 255, 255, 0.07);
    --snap-fill: rgba(var(--accent-rgb, 0, 120, 212), 0.52);
}

.window-snap-layout-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.snap-layout-btn {
    height: 44px;
    border-radius: 9px;
    border: 1px solid transparent;
    padding: 0;
    background: transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.snap-layout-btn.is-large {
    height: 56px;
}

.snap-layout-btn:hover {
    border-color: rgba(var(--accent-rgb, 0, 120, 212), 0.38);
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.12);
    transform: translateY(-1px);
}

.dark-mode .snap-layout-btn:hover {
    border-color: rgba(var(--accent-rgb, 144, 202, 249), 0.52);
    background: rgba(var(--accent-rgb, 144, 202, 249), 0.16);
}

.snap-layout-mini {
    position: relative;
    display: block;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: 5px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: var(--snap-empty);
    overflow: hidden;
}

.dark-mode .snap-layout-mini {
    border-color: rgba(255, 255, 255, 0.18);
}

.snap-layout-mini::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 4px;
    background: var(--snap-fill);
}

.preview-left-half::before {
    clip-path: inset(0 50% 0 0);
}

.preview-right-half::before {
    clip-path: inset(0 0 0 50%);
}

.preview-left-two-thirds::before {
    clip-path: inset(0 34% 0 0);
}

.preview-right-two-thirds::before {
    clip-path: inset(0 0 0 34%);
}

.preview-top-left::before {
    clip-path: inset(0 50% 50% 0);
}

.preview-top-right::before {
    clip-path: inset(0 0 50% 50%);
}

.preview-bottom-left::before {
    clip-path: inset(50% 50% 0 0);
}

.preview-bottom-right::before {
    clip-path: inset(50% 0 0 50%);
}

.window.snapping {
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.window-edge-snap-hint {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9500;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: scale(0.93);
    transform-origin: center center;
    transition:
        left 260ms cubic-bezier(0.2, 0.9, 0.26, 1),
        top 260ms cubic-bezier(0.2, 0.9, 0.26, 1),
        width 280ms cubic-bezier(0.2, 0.9, 0.26, 1),
        height 280ms cubic-bezier(0.2, 0.9, 0.26, 1),
        opacity 170ms ease,
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1.22);
}

.dark-mode .window-edge-snap-hint {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(34, 39, 46, 0.44), rgba(34, 39, 46, 0.2));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.window-edge-snap-hint.show {
    opacity: 1;
    transform: scale(1);
}

.window-edge-snap-hint-core {
    position: absolute;
    inset: 10px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb, 0, 120, 212), 0.45);
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.09);
}

.dark-mode .window-edge-snap-hint-core {
    border-color: rgba(var(--accent-rgb, 144, 202, 249), 0.5);
    background: rgba(var(--accent-rgb, 144, 202, 249), 0.12);
}

.window-content {
    flex: 1;
    overflow: auto;
    background: var(--bg-primary);
    position: relative;
    overscroll-behavior: contain; /* 滚动到边界不连锁到父级，避免整页被拖动/翻页 */
    /* 可选中能力统一收敛在全局"内容层白名单"规则中（见 body 基础样式区） */
}

/* 统一窗口内容区滚动条为通知中心风格 */
.window-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.window-content::-webkit-scrollbar-track {
    background: transparent;
}
.window-content::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 3px;
}
.window-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}
.window-content {
    scrollbar-width: thin;
    scrollbar-color: var(--text-tertiary) transparent;
}

.window.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

@media (pointer: coarse) {
    .window-resize-handle.resize-top,
    .window-resize-handle.resize-bottom {
        height: 10px;
    }

    .window-resize-handle.resize-left,
    .window-resize-handle.resize-right {
        width: 10px;
    }

    .window-resize-handle.resize-top-left,
    .window-resize-handle.resize-top-right,
    .window-resize-handle.resize-bottom-left,
    .window-resize-handle.resize-bottom-right {
        width: 22px;
        height: 22px;
    }
}

.window.minimizing,
.window.restoring {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.window.closing {
    animation: windowClose 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* 全局窗口模式切换 */
body.window-blur-enabled .window {
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--blur-lg)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
}

body.window-blur-disabled .window {
    background: var(--bg-primary);
    backdrop-filter: none;
}

body.window-blur-disabled .window-content {
    background: var(--bg-primary);
}

body.window-blur-disabled .window-titlebar {
    background: var(--bg-secondary);
}

/* ============ 模糊禁用时的半透明替代方案 ============ */
.blur-disabled .taskbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.9);
}

.dark-mode.blur-disabled .taskbar {
    background: rgba(32, 32, 32, 0.9);
}

.blur-disabled .start-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
}

.dark-mode.blur-disabled .start-menu {
    background: rgba(32, 32, 32, 0.95);
}

.blur-disabled .power-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
}

.dark-mode.blur-disabled .power-menu {
    background: rgba(32, 32, 32, 0.95);
}

.blur-disabled .control-center {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
}

.dark-mode.blur-disabled .control-center {
    background: rgba(32, 32, 32, 0.95);
}

.blur-disabled .notification-center {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
}

.dark-mode.blur-disabled .notification-center {
    background: rgba(32, 32, 32, 0.95);
}


/* ============ 任务视图 ============ */
.taskview {
    position: fixed;
    inset: 0;
    z-index: 9000; /* 低于窗口(9100)和任务栏(9000) */
    pointer-events: auto;
}
.taskview.hidden { display: none !important; }

/* 背景壁纸过渡效果已在基础样式中定义 */

/* 仅虚化桌面背景壁纸+放大效果，不虚化窗口和任务栏 */
body.in-taskview .desktop-wallpaper {
    filter: blur(20px) brightness(0.8);
    transform: scale(1.08);
}

/* 多任务视图下淡化隐藏桌面图标，退出时平滑出现 */
body.in-taskview .desktop-icons {
    filter: blur(14px) saturate(120%);
    opacity: .35;
    transition: filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

/* 恢复时的过渡 */
body:not(.in-taskview) .desktop-icons {
    filter: none;
    opacity: 1;
    transition: filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 多任务视图下桌面小组件层与图标同节奏进入景深模糊（实时过渡）。
   方案 A：层已移入图标滚动容器，容器的 filter/opacity 已作用于层内元素，
   此处不再重复叠加，避免双重模糊与透明度相乘 */
body.in-taskview #desktop-widgets-layer {
    pointer-events: none;
}

body.in-taskview #desktop-widgets-layer .tuos-widget {
    pointer-events: none;
}

#desktop-widgets-layer {
    transition: filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 任务栏保持清晰可见 */
body.in-taskview .taskbar,
body.in-taskview .taskbar.hidden,
body.in-taskview .taskbar.hiding {
    opacity: 1;
    pointer-events: auto !important;
    filter: none !important;
    transform: translateX(-50%) !important;
}

/* 窗口在任务视图中保持清晰，仅位置和大小变化 */
.taskview-window-active {
    cursor: pointer;
    box-shadow: var(--shadow-xl) !important;
    filter: none !important;
    transform-origin: top left !important;
    will-change: transform;
}

body.in-taskview .window.taskview-window-active.taskview-window-frozen {
    filter: grayscale(1) saturate(0.16) brightness(0.78) contrast(0.86) !important;
    opacity: 0.72 !important;
}

body.in-taskview .window.taskview-window-active.taskview-window-frozen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    border-radius: inherit;
    background: rgba(120, 120, 120, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

body.dark-mode.in-taskview .window.taskview-window-active.taskview-window-frozen::after {
    background: rgba(24, 24, 24, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ============ 锁屏 → 登录过渡动画 ============ */
/* 锁屏壁纸放大+模糊（同时进行，双向过渡） */
body.lock-to-login .lock-wallpaper {
    transform: scale(1.08);
    filter: blur(18px) brightness(0.82);
}

/* 时间容器：景深虚化（保留可见的失焦轮廓，与壁纸模糊程度一致，双向过渡） */
body.lock-to-login .lock-time-container {
    transform: scale(0.96) translateY(-8px);
    opacity: 0.55;
    filter: blur(16px);
}

/* 底部提示文字：景深虚化（双向过渡） */
body.lock-to-login .lock-hint {
    transform: translateX(-50%) scale(0.96) translateY(8px);
    opacity: 0.45;
    filter: blur(12px);
}

/* 锁屏小组件：与时钟同节奏的景深虚化
   （轻微缩小 + 重度模糊 + 半透明，背景里仍能隐约看到小组件失焦后的色块轮廓；
   动画全部走 #lock-widgets-layer 上的 600ms 过渡，与时钟完全同步、双向可逆。
   父级 filter 会把子树整体栅格化后再模糊，子元素的 backdrop-filter
   也会一并被虚化，呈现统一的失焦效果。） */
body.lock-to-login #lock-widgets-layer,
body.lock-login-open #lock-widgets-layer {
    transform: scale(0.96);
    opacity: 0.55;
    filter: blur(16px) brightness(0.92);
}

/* .tuos-widget 自带 pointer-events: auto，需在子级一并禁用 */
body.lock-to-login #lock-widgets-layer .tuos-widget,
body.lock-login-open #lock-widgets-layer .tuos-widget {
    pointer-events: none;
}

/* 注意：移除 body.lock-to-login 后，所有元素会自动反向过渡回初始状态 */

/* ============ 登录 → 桌面过渡动画 ============ */
/* 密码卡片退出时，锁屏背景加深模糊（全屏实时动态模糊） */
body.login-to-desktop-blur .lock-wallpaper {
    filter: blur(35px) brightness(0.65);
    transition: filter 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.login-to-desktop-blur .lock-time-container,
body.login-to-desktop-blur .lock-hint,
body.login-to-desktop-blur #lock-widgets-layer {
    filter: blur(20px);
    opacity: 0.2;
    transition: filter 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 桌面初始模糊状态（与深度模糊一致，实现无缝淡化切换） + 景深放大 */
body.desktop-blur-in .desktop-wallpaper {
    filter: blur(35px) brightness(0.65);
    transform: scale(1.1);
}

body.desktop-blur-in .desktop-icons {
    filter: blur(18px);
    opacity: 0.3;
}

/* 桌面在转场后半段以非线性曲线从景深模糊恢复清晰 */
body.desktop-unblur .desktop-wallpaper {
    filter: none;
    transform: scale(1);
    transition: filter 680ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.start-app.touch-drag-armed {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 0, 120, 212), 0.42);
}

/* 触控设备使用浏览器原生合成滚动，避免逐帧脚本滚动造成卡顿。 */
.tuos-native-touch-scroll {
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: auto !important;
}

.tuos-native-touch-scroll.tuos-native-touch-scroll-xy {
    touch-action: pan-x pan-y pinch-zoom;
}

.touch-input-supported,
.touch-input-supported body {
    -webkit-touch-callout: none;
}

.touch-input-supported .notes-app {
    -webkit-touch-callout: default;
}

/* 触控端全局图片防护：长按任何图片都不弹浏览器原生菜单（保存图片/标记广告），
   统一走我们合成的右键菜单；记事本的文本选择 default 不受影响（img 不参与文本选择） */
.touch-input-supported img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* 壁纸与视频壁纸同样禁用浏览器长按菜单 */
.touch-input-supported .desktop-wallpaper,
.touch-input-supported #desktop-video-wallpaper {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

body.desktop-unblur .desktop-icons {
    filter: none;
    opacity: 1;
    transition: filter 680ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.desktop-unblur #desktop-screen {
    transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 方案 A：小组件层已移入 .desktop-icons 容器，进入/恢复模糊时随容器效果联动，无需单独处理 */
body.desktop-blur-in .taskbar {
    filter: blur(16px) brightness(0.72);
    opacity: 0.24;
}

body.desktop-unblur .taskbar {
    filter: none;
    opacity: 1;
    transition: filter 680ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.desktop-to-lock-blur .desktop-wallpaper {
    filter: blur(35px) brightness(0.65);
    transform: scale(1.1);
    transition: filter 460ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 460ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.desktop-to-lock-blur .desktop-icons {
    filter: blur(18px);
    opacity: 0.3;
    transition: filter 460ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 460ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 方案 A：小组件层已随 .desktop-icons 容器联动模糊，此处不再单独处理 */
body.desktop-to-lock-blur .window,
body.desktop-to-lock-blur .taskbar {
    filter: blur(16px) brightness(0.72);
    opacity: 0.24;
    transition: filter 460ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 460ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.lock-blur-in .lock-wallpaper {
    filter: blur(35px) brightness(0.65);
    transform: scale(1.1);
}

body.lock-blur-in .lock-time-container,
body.lock-blur-in .lock-hint,
body.lock-blur-in .lock-notifications,
body.lock-blur-in #lock-widgets-layer {
    filter: blur(20px);
    opacity: 0.2;
}

body.lock-unblur .lock-wallpaper {
    filter: none;
    transform: scale(1);
    transition: filter 680ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.lock-unblur .lock-time-container,
body.lock-unblur .lock-hint,
body.lock-unblur .lock-notifications,
body.lock-unblur #lock-widgets-layer {
    filter: none;
    opacity: 1;
    transition: filter 680ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 小组件抽屉从锁屏编辑返回桌面时，反向复用同一套景深曲线。 */
body.lock-to-desktop-blur .lock-wallpaper {
    filter: blur(35px) brightness(0.65);
    transform: scale(1.1);
    transition: filter 460ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 460ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.lock-to-desktop-blur .lock-time-container,
body.lock-to-desktop-blur .lock-hint,
body.lock-to-desktop-blur .lock-notifications,
body.lock-to-desktop-blur #lock-widgets-layer {
    filter: blur(20px) brightness(0.78);
    opacity: 0.2;
    transition: filter 460ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 460ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 460ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.lock-to-desktop-blur .lock-time-container,
body.lock-to-desktop-blur .lock-notifications,
body.lock-to-desktop-blur #lock-widgets-layer {
    transform: scale(0.96);
}

body.lock-to-desktop-blur .lock-hint {
    transform: translateX(-50%) scale(0.96) translateY(8px);
}

body.lock-desktop-depth-transition #desktop-screen,
body.lock-desktop-depth-transition #lock-screen {
    will-change: opacity;
}

/* ============ 窗口全屏时壁纸景深放大+非线性模糊效果 ============ */
/* 仅在开启模糊效果时生效 */
body:not(.blur-disabled).has-maximized-window .desktop-wallpaper {
    filter: blur(25px) brightness(0.85) saturate(1.2);
    transform: scale(1.1);
    transition: filter 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 深色模式下的效果 */
body.dark-mode:not(.blur-disabled).has-maximized-window .desktop-wallpaper {
    filter: blur(25px) brightness(0.7) saturate(1.1);
}

/* 还原时的平滑过渡 */
body:not(.blur-disabled):not(.has-maximized-window) .desktop-wallpaper {
    transition: filter 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============ 响应式设计 ============ */
body.fullscreen-close-sync:not(.blur-disabled):not(.has-maximized-window) .desktop-wallpaper {
    filter: none;
    transform: scale(1);
    transition: filter 250ms cubic-bezier(0.4, 0, 1, 1),
                transform 250ms cubic-bezier(0.4, 0, 1, 1);
}

body.fullscreen-unmaximize-sync:not(.blur-disabled):not(.has-maximized-window) .desktop-wallpaper {
    filter: none;
    transform: scale(1);
    transition: filter 440ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 440ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
    .start-menu {
        width: 90%;
    }
    
    .notification-center {
        width: 100%;
    }
}

/* 仅背景虚化：任务视图时窗口与任务栏保持清晰 */
.in-taskview .window { filter: none !important; }
.in-taskview .taskbar { filter: none !important; }

/* ============================================================
   App Shop 应用商店样式
============================================================ */
.appshop {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
}

.appshop-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
}

.appshop-search-input::placeholder {
    color: var(--text-secondary);
}

/* 分类标签 */
.appshop-categories {
    margin-bottom: 24px;
}

.appshop-category-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.appshop-category-tabs::-webkit-scrollbar {
    height: 4px;
}

.appshop-category-tabs::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.appshop-category-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.appshop-category-tab.active {
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent);
    font-weight: 700;
}

/* 应用网格 */
.appshop-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.appshop-app-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.appshop-app-card:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.appshop-app-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.appshop-app-icon img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.appshop-app-info {
    flex: 1;
    min-width: 0;
}

.appshop-app-name {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appshop-app-developer {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.appshop-app-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-tertiary);
}

.appshop-app-rating {
    display: flex;
    align-items: center;
    gap: 3px;
}

.appshop-app-rating img {
    width: 12px;
    height: 12px;
    filter: invert(70%) sepia(80%) saturate(600%) hue-rotate(5deg);
}

/* 旧版按钮样式（不含 tuos-btn 类时） */
.appshop-app-install:not(.tuos-btn) {
    padding: 8px 18px;
    background: var(--accent);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.appshop-app-install:not(.tuos-btn):hover {
    background: var(--accent-hover);
    transform: scale(1.02);
}

.appshop-app-install:not(.tuos-btn).installed {
    background: #107c10;
}

.appshop-app-install:not(.tuos-btn).installed:hover {
    background: #0e6b0e;
}

/* TuOSUI 按钮样式保留 flex-shrink */
.appshop-app-install.tuos-btn {
    flex-shrink: 0;
}

/* 空状态 */
.appshop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--text-secondary);
}

.appshop-empty img {
    width: 48px;
    height: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
}

/* 深色模式适配 */
.dark-mode .appshop {
    background: var(--bg-primary);
}

.dark-mode .appshop-app-icon {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
}

/* V2 模式适配 */
body.tuos-v2 .appshop-app-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
}

body.tuos-v2.dark-mode .appshop-app-card {
    background: rgba(255, 255, 255, 0.08);
}

body.tuos-v2 .appshop-category-tab {
    backdrop-filter: blur(10px);
}


/* ==================== PWA 应用样式 ==================== */

.pwa-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    overscroll-behavior: none;   /* 阻止纵向橡皮筋/下拉刷新连锁到宿主 */
}

.pwa-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: white;
    touch-action: none;          /* 关键：iframe 上的手势不再被顶层文档当作翻页/导航 */
}

/* 含内嵌网页/游戏 iframe 的窗口：轻量通道优化 + 安卓触摸掉线修复
   - .window-content 全屏内嵌内容无需滚动容器，overflow:hidden 去掉父层
     滚动/overscroll 合成路径（也消除安卓父层抢手势的隐患）；contain:paint
     做绘制隔离，是零额外合成层的性能优化。
   - 失焦态 transform/filter 置空：安卓 WebView 在祖先变换时会重建 iframe
     命中测试层并丢失后续触摸路由（"拖动正常、松手后再点不动"）。
   transform 用 !important 压过 animations.css 特异性更高的失焦 transform 规则；
   排除最小化/还原/最大化/关闭等动画态，保留这些过渡动画。 */
.window.has-embedded-frame .window-content {
    overflow: hidden;
    contain: paint;
}
.window.has-embedded-frame.window-inactive:not(.minimizing):not(.restoring):not(.maximizing):not(.closing) {
    transform: none !important;
    filter: none !important;
}

.pwa-frozen-surface {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background:
        linear-gradient(135deg, rgba(248, 248, 248, 0.9), rgba(210, 214, 222, 0.9)),
        var(--bg-secondary);
    color: var(--text-secondary);
    z-index: 2;
    filter: grayscale(1);
}

.pwa-frozen-surface img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    opacity: 0.58;
}

.pwa-frozen-surface span {
    max-width: min(72%, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.72;
}

body.dark-mode .pwa-frozen-surface {
    background:
        linear-gradient(135deg, rgba(52, 52, 56, 0.94), rgba(26, 28, 34, 0.94)),
        var(--bg-secondary);
    color: rgba(255, 255, 255, 0.74);
}

.pwa-content-frozen .pwa-frozen-surface {
    display: flex;
}

.window.window-frozen .window-content,
.pwa-content-frozen {
    pointer-events: none;
    user-select: none;
}

.window.window-frozen .pwa-iframe,
.pwa-content-frozen .pwa-iframe {
    display: none;
    pointer-events: none;
}

.start-menu.start-returning-home .start-search-results-view {
    top: 114px;
}

body.in-taskview .window.taskview-window-active .pwa-content-frozen .pwa-frozen-surface {
    display: none;
}

body.in-taskview .window.taskview-window-active .pwa-content-frozen .pwa-iframe {
    display: block;
    pointer-events: none;
}

/* ==================== App Shop 详情弹窗 ==================== */

.appshop-detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

.appshop-detail-overlay.show {
    opacity: 1;
}

.appshop-detail-modal {
    width: 420px;
    max-width: 90vw;
    max-height: 85vh;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    position: relative;
}

/* 详情卡片信息区域固定背景 - 不受外观切换影响 */
.appshop-detail-info {
    background: #1a1a1a !important;
}

/* 浅色模式下的详情卡片 */
body:not(.dark-mode) .appshop-detail-modal {
    background: #ffffff;
}

body:not(.dark-mode) .appshop-detail-info {
    background: #ffffff !important;
}

body:not(.dark-mode) .appshop-detail-app-info h3,
body:not(.dark-mode) .appshop-detail-desc p,
body:not(.dark-mode) .appshop-detail-meta-item .meta-value {
    color: #1a1a1a;
}

body:not(.dark-mode) .appshop-detail-app-info span,
body:not(.dark-mode) .appshop-detail-meta-item .meta-label {
    color: #666666;
}

.appshop-detail-overlay.show .appshop-detail-modal {
    transform: scale(1) translateY(0);
}

.appshop-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s;
}

.appshop-detail-close:hover {
    background: rgba(0, 0, 0, 0.5);
}

.appshop-detail-close img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.appshop-detail-header {
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.appshop-detail-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 40%, var(--theme-color) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--theme-color) 70%, #ff6b6b) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--theme-color) 50%, #4ecdc4) 0%, transparent 40%),
        linear-gradient(135deg, var(--theme-color) 0%, color-mix(in srgb, var(--theme-color) 60%, #000) 100%);
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(2deg);
    }
    50% {
        transform: scale(1.05) rotate(-1deg);
    }
    75% {
        transform: scale(1.15) rotate(1deg);
    }
}

.appshop-detail-icon-wrapper {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.appshop-detail-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
}

.appshop-detail-info {
    padding: 20px;
}

.appshop-detail-app-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.appshop-detail-small-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.appshop-detail-app-info {
    flex: 1;
}

.appshop-detail-app-info h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.appshop-detail-app-info span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 旧版详情按钮样式（不含 tuos-btn 类时） */
.appshop-detail-btn:not(.tuos-btn) {
    padding: 10px 28px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.appshop-detail-btn:not(.tuos-btn):hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.appshop-detail-btn:not(.tuos-btn).installed {
    color: #4cc764;
}

.appshop-detail-btn:not(.tuos-btn).installed:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* 浅色模式下的旧版按钮样式 */
body:not(.dark-mode) .appshop-detail-btn:not(.tuos-btn) {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.06);
}

body:not(.dark-mode) .appshop-detail-btn:not(.tuos-btn):hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

.appshop-detail-desc {
    padding: 16px 0;
}

.appshop-detail-desc p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.appshop-detail-link-note {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(64, 156, 255, 0.28);
    border-radius: 8px;
    background: rgba(64, 156, 255, 0.1);
    color: var(--accent);
    font-size: 13px;
    line-height: 1.45;
}

.appshop-detail-meta {
    display: flex;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
}

.appshop-detail-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.appshop-detail-meta-item .meta-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.appshop-detail-meta-item .meta-label {
    font-size: 12px;
    color: var(--text-tertiary);
}

.appshop-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.appshop-detail-add-desktop {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.appshop-detail-add-desktop:hover {
    background: rgba(0, 120, 212, 0.1);
}

.appshop-detail-uninstall {
    flex: 1;
    padding: 10px;
    margin-top: 0;
    border: 1px solid var(--border-color);
    background: transparent;
    color: #d13438;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.appshop-detail-uninstall:hover {
    background: rgba(209, 52, 56, 0.1);
    border-color: #d13438;
}

/* 应用商店：插件「配置」按钮（列表行） */
.appshop-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.appshop-config-btn.tuos-btn {
    flex: 0 0 auto;
}

.appshop-detail-configure {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.appshop-detail-configure:hover {
    background: rgba(0, 120, 212, 0.1);
}

/* 应用商店：插件配置面板 */
/* 配置弹窗遮罩：与系统 TuOSUI.Dialog/Modal 统一约定保持一致（rgba(0,0,0,0.35) + blur(12px)）*/
.appshop-config-overlay {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.appshop-config-modal {
    width: 460px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #1a1a1a;
}

body:not(.dark-mode) .appshop-config-modal {
    background: #ffffff;
}

.appshop-config-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.appshop-config-header img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.appshop-config-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
}

.appshop-config-header span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.appshop-config-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.appshop-config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.appshop-config-label {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-secondary);
}

.appshop-config-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.appshop-config-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

body:not(.dark-mode) .appshop-config-input {
    background: #f5f5f5;
    color: #1a1a1a;
}

.appshop-config-empty {
    text-align: center;
    color: var(--text-tertiary);
    padding: 20px 0;
    font-size: 13px;
}

.appshop-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.appshop-config-save.tuos-btn {
    min-width: 90px;
}

body:not(.dark-mode) .appshop-config-header,
body:not(.dark-mode) .appshop-config-actions {
    border-color: rgba(0, 0, 0, 0.08);
}

/* TuOS V2 模式 - 增加背景模糊度 */
body.tuos-v2 .appshop-detail-overlay {
    backdrop-filter: blur(20px);
}

/* TuOS V2 胶囊按钮样式 - 与设置里的按钮一致 */
body.tuos-v2 .appshop-detail-btn {
    border-radius: 20px;
    padding: 10px 28px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

body.tuos-v2 .appshop-detail-btn.installed {
    background: #107c10;
}

body.tuos-v2 .appshop-detail-add-desktop {
    border-radius: 20px;
    padding: 10px 0;
    font-weight: 500;
}

body.tuos-v2 .appshop-detail-add-desktop:hover {
    background: rgba(0, 120, 212, 0.1);
}

body.tuos-v2 .appshop-detail-uninstall {
    border-radius: 20px;
    padding: 10px 0;
    font-weight: 500;
}

/* TuOS V2 应用列表卡片按钮 */
body.tuos-v2 .appshop-app-install {
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 13px;
}

/* TuOS V2 应用卡片圆角 */
body.tuos-v2 .appshop-app-card {
    border-radius: 12px;
}

body.tuos-v2 .appshop-app-icon {
    border-radius: 12px;
}

body.tuos-v2 .appshop-category-tab {
    border-radius: 20px;
}

body.tuos-v2 .appshop-category-tab.active {
    border-radius: 20px;
}

body.tuos-v2 .appshop-search-input {
    border-radius: 20px;
}

/* TuOS V2 详情弹窗高斯模糊（与旧版一致） */
body.tuos-v2 .appshop-detail-overlay {
    backdrop-filter: blur(10px);
}

/* App Shop 按钮使用 TuOSUI 样式 */
.appshop-app-install.tuos-btn,
.appshop-detail-btn.tuos-btn {
    padding: 8px 20px;
}

/* 新版外观浅色模式按钮颜色 */
body.tuos-v2:not(.dark-mode) .appshop-app-install.tuos-btn,
body.tuos-v2:not(.dark-mode) .appshop-detail-btn.tuos-btn {
    color: var(--accent);
}

body.tuos-v2:not(.dark-mode) .appshop-app-install.tuos-btn.installed,
body.tuos-v2:not(.dark-mode) .appshop-detail-btn.tuos-btn.installed {
    color: #1a8a3e;
}

/* 深色模式按钮颜色 */
.dark-mode .appshop-app-install.tuos-btn,
.dark-mode .appshop-detail-btn.tuos-btn {
    color: var(--accent);
}

.dark-mode .appshop-app-install.tuos-btn.installed,
.dark-mode .appshop-detail-btn.tuos-btn.installed {
    color: #4cc764;
}

/* 旧版外观按钮背景色 */
body:not(.tuos-v2) .appshop-app-install.tuos-btn,
body:not(.tuos-v2) .appshop-detail-btn.tuos-btn {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    color: var(--accent);
}

body:not(.tuos-v2) .appshop-app-install.tuos-btn:hover,
body:not(.tuos-v2) .appshop-detail-btn.tuos-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

body:not(.tuos-v2) .appshop-app-install.tuos-btn.installed,
body:not(.tuos-v2) .appshop-detail-btn.tuos-btn.installed {
    color: #1a8a3e;
}

body:not(.tuos-v2).dark-mode .appshop-app-install.tuos-btn,
body:not(.tuos-v2).dark-mode .appshop-detail-btn.tuos-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
}

body:not(.tuos-v2).dark-mode .appshop-app-install.tuos-btn:hover,
body:not(.tuos-v2).dark-mode .appshop-detail-btn.tuos-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

body:not(.tuos-v2).dark-mode .appshop-app-install.tuos-btn.installed,
body:not(.tuos-v2).dark-mode .appshop-detail-btn.tuos-btn.installed {
    color: #4cc764;
}

/* 新版外观浅色模式分类标签选中状态 */
body.tuos-v2:not(.dark-mode) .appshop-category-tab.active {
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent);
    font-weight: 700;
}

body.tuos-v2:not(.dark-mode) .appshop-category-tab.active img {
    opacity: 1;
}
/* ============ Alt+C App Switcher ============ */
.app-switcher {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: auto;
}

.app-switcher.hidden {
    display: none !important;
}

.app-switcher-panel {
    max-width: min(1120px, calc(100vw - 48px));
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 18px;
    background: rgba(245, 248, 252, 0.72);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
}

.dark-mode .app-switcher-panel {
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(32, 32, 32, 0.72);
    box-shadow: 0 24px 76px rgba(0, 0, 0, 0.54);
}

.app-switcher-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 248px;
    gap: 10px;
    max-width: calc(100vw - 76px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    scrollbar-width: none;
}

.app-switcher-list::-webkit-scrollbar {
    display: none;
}

.app-switcher-item {
    width: 248px;
    height: 190px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.app-switcher-item:hover {
    background: rgba(255, 255, 255, 0.58);
}

.app-switcher-item.selected {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 0, 120, 212), 0.18), 0 12px 30px rgba(var(--accent-rgb, 0, 120, 212), 0.18);
    transform: translateY(-2px);
}

.dark-mode .app-switcher-item {
    background: rgba(255, 255, 255, 0.08);
}

.dark-mode .app-switcher-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.dark-mode .app-switcher-item.selected {
    background: rgba(255, 255, 255, 0.17);
    box-shadow: 0 0 0 1px rgba(96, 205, 255, 0.18), 0 14px 34px rgba(0, 0, 0, 0.42);
}

.app-switcher-preview {
    width: 100%;
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.08);
}

.dark-mode .app-switcher-preview {
    background: rgba(0, 0, 0, 0.28);
}

.app-switcher-preview-frame {
    position: relative;
    overflow: hidden;
    border-radius: 9px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
    background: var(--bg-primary);
}

.app-switcher-window-clone,
.app-switcher-window-clone * {
    pointer-events: none !important;
}

.app-switcher-window-clone .window-resize-handle,
.app-switcher-window-clone .window-snap-layout-menu {
    display: none !important;
}

.app-switcher-embed-placeholder {
    width: 100%;
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 0, 120, 212), 0.12), rgba(0, 0, 0, 0.04));
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.dark-mode .app-switcher-embed-placeholder {
    background: linear-gradient(135deg, rgba(96, 205, 255, 0.16), rgba(255, 255, 255, 0.06));
}

.app-switcher-embed-placeholder img {
    width: 34px;
    height: 34px;
}

.app-switcher-label {
    min-width: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 4px;
}

.app-switcher-label img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.app-switcher-label span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .app-switcher {
        padding: 16px;
    }

    .app-switcher-panel {
        max-width: calc(100vw - 32px);
        padding: 10px;
    }

    .app-switcher-list {
        grid-auto-columns: 212px;
        max-width: calc(100vw - 52px);
    }

    .app-switcher-item {
        width: 212px;
        height: 168px;
    }

    .app-switcher-preview {
        height: 116px;
    }
}

/* ── 访客模式 (Guest Mode) ─────────────────────────── */

/* 访客模式：所有功能均可操作，改动仅存在于内存中 */
body.guest-mode {
    overflow: hidden;
}

/* 错误界面 */
.guest-error {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #1a1a1a);
    color: var(--text-primary, #fff);
    z-index: 100001;
    font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
    text-align: center;
}

.guest-error-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.guest-error h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.guest-error p {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 24px;
}

.guest-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.guest-error-back {
    font-size: 14px;
    color: var(--accent, #0078d4);
    text-decoration: none;
}

/* ── 通用表单（设置页 APP SHOP 使用） ──────────── */

/* 表单容器 */
.tag-inline-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

/* 表单标题 */
.tag-form-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* 字段容器（默认小间距） */
.tag-form-field {
    margin-bottom: 12px;
}

/* 字段容器（大间距） */
.tag-form-field-lg {
    margin-bottom: 16px;
}

/* 字段标签 */
.tag-form-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* 必填星号 */
.tag-form-required {
    color: #e81123;
}

/* 输入框 / 文本域 / 下拉框 通用 */
.tag-form-input,
.tag-form-textarea,
.tag-form-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}

/* 输入框（限宽 400px） */
.tag-form-input {
    max-width: 400px;
}

/* 输入框（flex 拉伸，用于图标 URL 行） */
.tag-form-input--flex {
    flex: 1;
    min-width: 0;
    max-width: none;
}

/* 输入框（强调边框，新增分类） */
.tag-form-input--accent {
    border-color: var(--accent);
}

/* 文本域 */
.tag-form-textarea {
    max-width: 400px;
    resize: vertical;
}

/* 下拉框 */
.tag-form-select {
    max-width: 300px;
}

/* 双列布局 */
.tag-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.tag-form-col {
    flex: 1;
    max-width: 190px;
}

/* 行内组合 */
.tag-form-inline {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* 图标预览 */
.tag-form-icon-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tag-form-icon-preview {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.tag-form-icon-preview img,
.tag-form-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图标预览占位文字 */
.tag-form-icon-placeholder {
    color: var(--text-secondary);
}

.tag-form-icon-fields {
    flex: 1;
    max-width: 352px;
}

/* 上传按钮 */
.tag-form-btn-upload {
    font-size: 12px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
}

/* 隐藏的文件输入 */
.tag-form-file {
    display: none;
}

/* 状态提示 */
.tag-form-status {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    display: none;
}

/* 辅助提示 */
.tag-form-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}

/* 分类行 */
.tag-form-cat-row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

/* 虚线按钮（新增分类） */
.tag-form-btn-dashed {
    font-size: 12px;
    padding: 7px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    flex-shrink: 0;
}

/* 新分类输入容器 */
.tag-form-newcat {
    display: none;
    flex: 1;
    max-width: 240px;
}

/* 按钮组（新分类确认/取消） */
.tag-form-btn-group {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* 小按钮 */
.tag-form-btn-sm {
    font-size: 11px;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.tag-form-btn-sm-primary {
    font-size: 11px;
    padding: 3px 10px;
    border: none;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

/* 复选框行（加入精选） */
.tag-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

/* 单选/复选着色 */
.tag-form-radio input,
.tag-form-option input,
.tag-form-check input {
    accent-color: var(--accent);
}

/* 打开方式单选组 */
.tag-form-options {
    display: flex;
    gap: 20px;
    padding: 4px 0;
}

.tag-form-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

/* 窗口模式：垂直复选组 */
.tag-form-options--v {
    flex-direction: column;
    gap: 8px;
}

/* 窗口模式：提示文字 */
.tag-form-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* 底部操作区 */
.tag-form-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.tag-form-btn-primary {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}

.tag-form-btn-secondary {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

/* 添加/编辑应用：类型选择卡片（PWA / 专业 APP） */
.tag-form-type-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.tag-form-type-card {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.tag-form-type-card:hover {
    border-color: var(--accent);
}
.tag-form-type-card.active {
    border-color: var(--accent);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.tag-form-type-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.tag-form-type-card-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

/* 专业 APP 配置区 */
.tag-form-professional {
    border-top: 1px dashed var(--border-color);
    margin-top: 4px;
    padding-top: 12px;
}
.tag-form-professional .tag-form-config-title {
    margin-bottom: 10px;
}
.tag-form-code {
    font-family: var(--font-mono, 'Cascadia Code', 'Consolas', monospace);
    font-size: 12px;
    line-height: 1.5;
    min-height: 120px;
    white-space: pre;
    tab-size: 4;
    resize: vertical;
}

/* 高级选项折叠区（普通用户默认收起） */
.tag-form-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.tag-form-advanced-toggle:hover {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.08);
}

.tag-form-advanced-toggle .tag-form-advanced-arrow {
    display: inline-block;
    font-size: 10px;
    color: var(--accent);
    transition: transform 0.15s ease;
}

.tag-form-advanced-toggle.open .tag-form-advanced-arrow {
    transform: rotate(90deg);
}

.tag-form-advanced {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

.tag-form-advanced.open {
    display: block;
}

/* WebApp 开关（开启WEBAPP） */
.tag-form-switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tag-form-switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.tag-form-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tag-form-switch-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--border-color);
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.tag-form-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.tag-form-switch-input:checked + .tag-form-switch-track {
    background: var(--accent);
}

.tag-form-switch-input:checked + .tag-form-switch-track::after {
    transform: translateX(20px);
}

.tag-form-switch-label {
    font-size: 13px;
    color: var(--text-primary);
}

/* WebApp 自定义配置面板 */
.tag-form-webapp-config {
    margin-top: 4px;
}

.tag-form-config-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border-color);
}

.tag-form-config-panel {
    background: rgba(var(--accent-rgb, 0, 120, 212), 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 12px 2px;
    margin-bottom: 12px;
}

/* 4 列网格 */
.tag-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 10px;
}

.tag-form-grid .tag-form-field {
    margin-bottom: 0;
}

/* 输入框 + 单位后缀 */
.tag-form-input-unit {
    display: flex;
    align-items: center;
}

.tag-form-input-unit .tag-form-input {
    max-width: none;
}

.tag-form-unit {
    margin-left: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* 禁用输入（占位即将推出） */
.tag-form-input--disabled {
    color: var(--text-secondary);
    opacity: 0.7;
    cursor: not-allowed;
}