/* ============================================================
   base.css —— 全局基础样式
   重置、页面布局、时间/日期、每日一言、壁纸交叉淡入淡出层、
   各弹窗共享的弹窗动画 keyframes。
   ============================================================ */

/* 全局设计变量：品牌橙、深色玻璃、阴影等，供各模块复用 */
:root {
    --brand: #ff8c1a;
    --brand-2: #ff7a1a;
    --brand-grad: linear-gradient(135deg, #ff9a3d, #ff7a1a);
    --glass-bg: rgba(20, 20, 25, 0.42);
    --glass-border: rgba(255, 255, 255, 0.14);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.22);
    --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.32);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* 组件看板与网址图标区共用的轨道宽度。
       注意：这里必须用 vw 而非 %——由它派生的 --icon-cell 等变量会被用在
       组件卡片“自身的 width”上；若用 %，该百分比会相对卡片的包含块（网格列）
       解析而非视口，形成循环依赖导致 calc 坍缩、卡片宽度被 min-width 钳错。
       body 无 padding/margin，94vw 与容器上的 94% 视觉等价。 */
    --track-w: min(988px, 94vw);
    /* 网址图标每行个数：默认 14 列，由 shortcuts.js 按所选最大列数与轨道宽动态内联覆盖 */
    --icon-cols: 14;
    /* 网址图标尺寸 / 图标与名称间距 / 名称行高 / 行间距（与 shortcuts.css 保持一致）。
       带“图标设置”个性化含义的变量（圆角/透明度/名称字号颜色等）可被
       shortcuts.js 按 localStorage 配置在 <html> 内联覆盖。 */
    --icon-size: 52px;  /* 14 列在默认轨道下：14×52 + 13×20 = 988px，居中留白 */
    --icon-radius: 16px;/* 图标圆角（圆形样式时 CSS 强制 50%） */
    --icon-opacity: 1;  /* 图标不透明度 0.2~1 */
    --icon-gap: 8px;    /* 图标与名称之间 */
    --icon-name-h: 16px;/* 图标名称文字行高 */
    --icon-name-size: 12px;  /* 图标名称字号 */
    --icon-name-color: rgba(255, 255, 255, 0.92); /* 图标名称颜色 */
    --icon-colgap: 20px;/* 两列图标之间（网格 column-gap） */
    --icon-rowgap: 20px;/* 两排图标之间（网格 row-gap） */
    --icon-row-h: 76px; /* 一个图标行高 = 图标 52 + 图标/名称间距 8 + 名称行 16 */
    /* 一个网址图标所占格子宽度（1fr 列，列间距 --icon-colgap） */
    --icon-cell: calc((var(--track-w) - var(--icon-colgap) * (var(--icon-cols) - 1)) / var(--icon-cols));
    /* 图标在其等宽格子中居中，视觉左缘比轨道左缘内缩“半格空白”；
       组件看板左右各留同样的内边距，组件首位即与第一个网址图标左对齐 */
    --icon-inset: calc((var(--icon-cell) - var(--icon-size)) / 2);
    /* 组件卡片宽度 = 占满 N 个网址图标格子（整格宽，含格内留白），与图标所占据的
       网格区等宽。大卡片 = 4 格；中/小卡片 = 2 格。
       注意：不能按“图标图形视觉边缘”(N*格宽-(N-1)*列距-2*内缩) 来算——那会比
       整数个格子窄 2*内缩，16 列下内缩变大后卡片明显小于对应图标占位。 */
    --widget-w: calc(var(--icon-cell) * 4 + var(--icon-colgap) * 3);
    --widget-w-2: calc(var(--icon-cell) * 2 + var(--icon-colgap));
    /* 组件卡片高度 = 两排网址图标中“两个图标方块 + 中间的名称行与行距”的高度；
       卡片下方名称（间距 --icon-gap + 名称行）正好落在第二排图标的名称行上 */
    --widget-h: calc(var(--icon-size) * 2 + var(--icon-gap) + var(--icon-name-h) + var(--icon-rowgap));

    /* ===== 弹窗主题令牌（深色为默认）=====
       全站深色弹窗（账号、编辑资料、更新日志、扩展引导、添加分类、右键菜单）
       共用这套变量。主题偏好 light/dark/auto 由 wallpaper.js 计算后写到
       <html data-theme>；浅色值见 :root[data-theme="light"] 覆盖。 */
    --auth-bg: #11141c;            /* 最深层：输入框底、品牌徽章圈底 */
    --auth-card: #151924;          /* 弹窗卡片底 */
    --auth-card-2: #1b2030;        /* 次级卡片 / hover 底 */
    --auth-line: rgba(255, 255, 255, 0.08);  /* 边框、分割线 */
    --auth-text: #eef1f7;          /* 主文字 */
    --auth-muted: #98a2b8;         /* 次要文字 */
    --auth-brand: #5b8cff;         /* 品牌蓝 / 主按钮 */
    --auth-brand-hover: #4472e8;   /* 品牌蓝 hover */
    --auth-brand-text: #9dbbff;    /* 深色底上的强调文字（浅底时变深） */
    --auth-sel-bg: rgba(91, 140, 255, 0.18);  /* 选中项底色（图标网格等） */
    --auth-sel-border: rgba(91, 140, 255, 0.45); /* 选中项描边 */
    --auth-input-hover: rgba(255, 255, 255, 0.18);  /* 输入框 hover 边框 */
    --auth-on-white: rgba(255, 255, 255, 0.72);  /* 落在“深色块/白底”上的图标文字 */
    --auth-tip-bg: rgba(20, 24, 34, 0.96);       /* 深色小气泡 / tooltip 底 */
    --auth-danger: #ff5f6d;
    --auth-danger-bg: rgba(255, 95, 109, 0.12);
    --auth-danger-border: rgba(255, 95, 109, 0.35);
    --auth-ok: #34d399;
    --auth-shadow: rgba(0, 0, 0, 0.5);           /* 弹窗投影 */
    --auth-mask: rgba(10, 12, 20, 0.55);         /* 带遮罩弹窗的遮罩底 */
    --auth-menu-bg: rgba(24, 27, 38, 0.98);      /* 右键菜单底 */
    --auth-menu-hover: rgba(91, 140, 255, 0.22); /* 右键菜单 hover 底 */
    --auth-danger-hover: rgba(255, 95, 109, 0.22);
    /* 品牌蓝半透明投影（color-mix 的兼容替代，Chrome 111 前不支持 color-mix） */
    --auth-brand-shadow-18: rgba(91, 140, 255, 0.18);
    --auth-brand-shadow-30: rgba(91, 140, 255, 0.30);
}

/* ===== 浅色主题：弹窗令牌覆盖 ===== */
:root[data-theme="light"] {
    --auth-bg: #e9edf5;            /* 输入框/分段器底（浅灰） */
    --auth-card: #ffffff;          /* 卡片白底 */
    --auth-card-2: #f0f3fa;        /* hover / 次级底 */
    --auth-line: #e4e8f2;
    --auth-text: #1f2637;
    --auth-muted: #7a849a;
    --auth-brand: #3b72f0;
    --auth-brand-hover: #2f60cf;
    --auth-brand-text: #3b72f0;
    --auth-sel-bg: rgba(59, 114, 240, 0.12);
    --auth-sel-border: rgba(59, 114, 240, 0.4);
    --auth-input-hover: rgba(31, 38, 55, 0.22);
    --auth-on-white: #4a5266;      /* 白底图标块上的图标文字（深色） */
    --auth-tip-bg: #2b3140;        /* 小气泡保持深色对比 */
    --auth-danger: #e5484d;
    --auth-danger-bg: rgba(229, 72, 77, 0.1);
    --auth-danger-border: rgba(229, 72, 77, 0.32);
    --auth-ok: #16a34a;
    --auth-shadow: rgba(31, 45, 90, 0.22);
    --auth-mask: rgba(30, 38, 60, 0.35);
    --auth-menu-bg: #ffffff;
    --auth-menu-hover: rgba(59, 114, 240, 0.1);
    --auth-danger-hover: rgba(229, 72, 77, 0.12);
    --auth-brand-shadow-18: rgba(59, 114, 240, 0.18);
    --auth-brand-shadow-30: rgba(59, 114, 240, 0.30);
    /* 浅底弹窗内的头像/Logo 白色圆盘加一圈描边，避免在白卡上“化掉” */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全局键盘焦点环：:focus-visible 只在键盘导航时出现，鼠标点击不显示。
   各模块零散的 outline:none 不必逐一修补；深色背景控件在下方单独覆写为白色环。 */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}
/* 深色背景上的控件改用白色环，橙色在壁纸上对比不足 */
.sidebar-item:focus-visible,
#time:focus-visible,
.corner-spinner:focus-visible {
    outline-color: #fff;
}

/* 片段挂载点：不生成盒子，注入的元素如同直接写在 body 中，
   保证 flex 居中、绝对定位以及 ~ 兄弟选择器不受包裹 div 影响 */
[id$="Mount"] {
    display: contents;
}

body {
    /* 跨系统 CJK 字体栈：Win 微软雅黑 → macOS 苹方/黑体 → Linux/Android 文泉驿/Noto，
       西文沿用 Arial；缺中文环境时回退系统无衬线，避免 Linux 精简系统出现方块 */
    font-family: 'Arial', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB',
        'WenQuanYi Micro Hei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #ffffff;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: black;
    position: relative;
    padding-top: 120px;
}

/* 壁纸遮罩 + 模糊：由 wallpaper.js 动态注入 #wallpaperOverlay 元素
   使用 CSS 变量 --wp-mask（0~1 黑色遮罩浓度）、--wp-blur（模糊像素） */
:root {
    --wp-mask: 0;
    --wp-blur: 0px;
}

/* 壁纸交叉淡入淡出层：新壁纸覆盖在旧壁纸之上透明淡入 */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--wallpaper-next, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    z-index: -1;
}

body.wallpaper-fade-in::after {
    opacity: 1;
}

.time {
    font-size: 4.2rem;
    font-weight: 200;
    letter-spacing: 2px;
    line-height: 1.1;
    margin-bottom: 0.4rem;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
    font-variant-numeric: tabular-nums;
}

.date {
    font-size: 1rem;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    opacity: 0.92;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

/* 设置中关闭“时间/日期”显示时隐藏；!important 以覆盖休闲模式等写入的内联 display */
.time.clock-hidden,
.date.clock-hidden {
    display: none !important;
}

/* 每日一言：固定在视口底部，不随页面内容滚动/移动。
   悬停一言区域时显示“换一句”按钮 */
.quote {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 30px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    opacity: 0.82;
    text-align: center;
    width: 100%;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: none;
}
/* 设置中关闭“每日一言”时隐藏；!important 以覆盖休闲模式等写入的内联 display */
.quote.quote-hidden {
    display: none !important;
}
.quote-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}
.quote-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), background 0.2s;
}
.quote-inner:hover .quote-refresh,
.quote-refresh:focus-visible {
    opacity: 1;
    transform: scale(1);
}
.quote-refresh:hover {
    background: rgba(255, 255, 255, 0.25);
}
.quote-refresh:disabled {
    cursor: default;
}
.quote-refresh:disabled svg {
    animation: quote-spin 0.8s linear infinite;
}
@keyframes quote-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* 换一句失败：按钮左右抖动提示，句子保持不变 */
.quote-refresh-fail {
    animation: quote-shake 0.4s var(--ease-out);
    background: rgba(255, 120, 120, 0.35);
}
@keyframes quote-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* 右下角方块轮转图标：固定于视口右下角，桌面切换壁纸入口。
   外观保持装饰性静态图标；SMIL 动画默认静止（wallpaper.js 冻结），切换壁纸时轮转、完成后复位。 */
.corner-spinner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
    z-index: 20;
    cursor: pointer;
    opacity: 0;
    animation: rise-in 0.6s var(--ease-out) 0.3s both;
    transition: color 0.15s ease, transform 0.15s var(--ease-out);
}
.corner-spinner:hover {
    color: #fff;
    transform: translateY(-2px);
}
/* 切换中禁止重复点击（wallpaper.js 同时以 loading 标志拦截） */
.corner-spinner.is-loading {
    pointer-events: none;
    color: #fff;
}
.corner-spinner svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 复用 toolbar.css 的 .tooltip 气泡，但右下角按钮需向上弹出、右对齐。
   选择器额外带上 .tooltip 类以提高特异性，否则与 toolbar.css 中
   .tooltip .tooltip-text 特异性相同，且 toolbar.css 后加载，
   其中的 top:130% 会压过这里的 top:auto，导致气泡仍向下弹出。 */
.corner-spinner.tooltip .tooltip-text {
    top: auto;
    bottom: 130%;
    transform: translateY(6px);
}
.corner-spinner.tooltip .tooltip-text::before {
    top: auto;
    bottom: -5px;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotate(-135deg);
}
.corner-spinner.tooltip:hover .tooltip-text {
    transform: translateY(0);
}

/* ===== 首屏内容入场动画：自下而上依次淡入 ===== */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.time,
.date,
#searchMount,
.main-grid,
.quote {
    animation: rise-in 0.6s var(--ease-out) both;
}
.date { animation-delay: 0.06s; }
#searchMount { animation-delay: 0.12s; }
/* .main-grid 用 backwards 而非 both：动画结束后不保留填充，
   否则 Chrome 会把动画元素当作 fixed 后代的包含块，导致拖拽时
   被拖卡片/图标（position:fixed）坐标被二次偏移而掉到页面底部 */
.main-grid { animation-delay: 0.18s; animation-fill-mode: backwards; }
.quote { animation-delay: 0.24s; }

/* 弹窗入场动画：账号弹窗、编辑资料、分类/网站小弹窗共用 */
@keyframes auth-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}