/* AuroraUs 导航页样式（由 index.html 拆分而来，2026-10-25）
为什么单独成文件：/assets/* 有 CDN 边缘缓存（实测 50KB 0.65s），
而 HTML 走源站很慢（≈3KB/s）；样式与脚本放这里可被长期缓存、并行下载。
改动后必须跑：python tools/sync_asset_versions.py（更新 ?v= 版本号） */
:root {
--bg: #f1f5f9;
--bg2: #ffffff;
--bg3: #e2e8f0;
--ink: #0f172a;
--muted: #475569;
--rule: #cbd5e1;
--accent: #2563eb;
--accent2: #7c3aed;
--accent3: #059669;
--accent4: #db2777;
--accent5: #d97706;
--accent6: #ea580c;
--accent7: #7c3aed;
--accent8: #dc2626;
--accent9: #0d9488;
--accent10: #9333ea;
--sidebar-w: 220px;
--font: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
--max: 1400px;
--card-shadow: 0 4px 16px rgba(0,0,0,0.08);
--hero-overlay: linear-gradient(180deg, rgba(241,245,249,0.05) 0%, rgba(241,245,249,0.70) 100%);
--search-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
body.dark {
--bg: #070e1a;
--bg2: #111827;
--bg3: #1e293b;
--ink: #f1f5f9;
--muted: #94a3b8;
--rule: #374151;
--card-shadow: 0 4px 16px rgba(0,0,0,0.35);
--hero-overlay: linear-gradient(180deg, rgba(7,14,26,0.05) 0%, rgba(7,14,26,0.72) 100%);
--search-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
body.dark .hero-bg { opacity: 0.25; }
body.dark .hero-overlay { background: var(--hero-overlay); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.6;
min-height: 100vh;
transition: background 0.3s, color 0.3s;
}
/* === Theme Toggle === */
.theme-toggle {
position: absolute; top: 1rem; right: 1.5rem; z-index: 10;
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule);
background: var(--bg2); color: var(--muted); font-size: 1.1rem;
cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* === Settings Panel === */
.settings-btn {
position: absolute; top: 1rem; left: 1.5rem; z-index: 10;
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule);
background: var(--bg2); color: var(--muted); font-size: 1.1rem;
cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.settings-btn:hover { border-color: var(--accent); color: var(--accent); }
.settings-overlay {
display: none; position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,0.4);
/* 必须是纵向 flex：否则面板与「关闭」按钮会被排成一行，整体看起来偏左 */
flex-direction: column;
align-items: center; justify-content: center;
padding: 1.25rem; overflow: hidden; /* 不产生自身滚动条，保证严格居中 */
animation: fadeIn 0.2s ease;
}
.settings-overlay.visible { display: flex; }
/* 打开设置时锁滚动：配合 scrollbar-gutter，宽度不跳动且遮罩占满视口 */
body.modal-open { overflow: hidden; }
.settings-panel {
background: var(--bg2); border: 1px solid var(--rule); border-radius: 16px;
width: 94%; max-width: 940px; padding: 1.1rem 1.2rem 0.9rem;
max-height: calc(100vh - 2.5rem); overflow-y: auto;
box-shadow: 0 12px 40px rgba(0,0,0,0.15); animation: modalIn 0.25s ease;
margin: auto; /* 双保险：flex 居中 + auto margin 居中 */
scrollbar-gutter: stable; /* 面板自身滚动条不引起横向跳动 */
}
.settings-panel h3 { font-size: 1rem; color: var(--ink); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.settings-section { margin-bottom: 1.1rem; }
.settings-section h4 { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule); }
.settings-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.settings-chip {
display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.55rem;
border-radius: 14px; font-size: 0.72rem; background: var(--bg3); border: 1px solid var(--rule);
color: var(--muted); cursor: pointer; transition: all 0.15s; user-select: none;
}
.settings-chip:hover { border-color: var(--accent); color: var(--accent); }
.settings-chip.on { background: rgba(59,130,246,0.1); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.settings-action-btn {
padding: 0.4rem 0.9rem; border: 1px solid var(--rule); border-radius: 8px;
background: var(--bg2); color: var(--ink); font-size: 0.78rem; cursor: pointer; transition: all 0.2s;
}
.settings-action-btn:hover { border-color: var(--accent); background: rgba(59,130,246,0.05); }
.settings-action-btn.danger { color: #dc2626; }
.settings-action-btn.danger:hover { border-color: #dc2626; background: rgba(220,38,38,0.05); }
.settings-hint { font-size: 0.7rem; color: var(--muted); margin-top: 0.3rem; }
.settings-help-link {
font-size: 0.8rem; color: var(--muted); text-decoration: none;
padding: 0.25rem 0.6rem; border: 1px solid var(--rule); border-radius: 8px;
transition: all 0.2s; white-space: nowrap;
}
/* 设置面板顶部的「✉️ 意见与反馈」是 button，需要清掉浏览器默认样式 */
button.settings-help-link {
background: var(--bg2); cursor: pointer; font-family: var(--font); line-height: 1.5;
}
button.settings-help-link:hover { background: rgba(59,130,246,0.05); }
.settings-help-link:hover { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,0.05); }
.settings-input {
padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 8px;
background: var(--bg2); color: var(--ink); font-size: 0.78rem; outline: none;
min-width: 0;
}
.settings-input:focus { border-color: var(--accent); }
.settings-toggle {
display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ink); cursor: pointer; user-select: none;
}
.settings-toggle .sw {
width: 38px; height: 22px; border-radius: 11px; background: var(--rule);
position: relative; transition: background 0.2s; flex-shrink: 0;
}
.settings-toggle .sw::after {
content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
border-radius: 50%; background: #fff; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle.on .sw { background: var(--accent); }
.settings-toggle.on .sw::after { left: 19px; }
.settings-num {
width: 48px; padding: 0.25rem 0.35rem; border: 1px solid var(--rule); border-radius: 8px;
background: var(--bg); color: var(--ink); font-size: 0.8rem; text-align: center;
font-family: var(--font); outline: none; margin-left: 0.3rem;
}
.settings-num:focus { border-color: var(--accent); }
/* 分类排序模式 —— 手动调序列表 */
.cat-order-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.28rem; max-height: 15rem; overflow-y: auto; }
.cat-order-item {
display: flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.45rem;
border: 1px solid var(--rule); border-radius: 8px; background: var(--bg);
font-size: 0.76rem; color: var(--ink);
}
.cat-order-item .cat-order-idx { width: 1.5rem; color: var(--muted); font-size: 0.7rem; }
.cat-order-item .cat-order-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-order-move {
border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
border-radius: 6px; width: 1.5rem; height: 1.4rem; line-height: 1; cursor: pointer;
font-size: 0.72rem; padding: 0; transition: border-color 0.15s, color 0.15s;
}
.cat-order-move:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cat-order-move:disabled { opacity: 0.35; cursor: default; }
.cat-order-list.locked .cat-order-item { opacity: 0.6; }
.cat-order-lock-hint { font-size: 0.7rem; color: var(--muted); }
.settings-close {
display: block; margin: 1rem auto 0; padding: 0.45rem 1.5rem;
background: linear-gradient(135deg, var(--accent), var(--accent2));
border: none; color: #fff; border-radius: 12px; font-size: 0.85rem;
font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.settings-close:hover { opacity: 0.88; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; align-items: start; }
/* 紧凑化：让设置面板整体更短，减少滚动 */
.settings-section { margin-bottom: 0.7rem; }
.settings-section.wide { grid-column: span 2; }
.settings-section h4 { font-size: 0.78rem; margin-bottom: 0.32rem; padding-bottom: 0.25rem; }
.settings-row { gap: 0.32rem; flex-wrap: wrap; }
.settings-chip { padding: 0.2rem 0.55rem; font-size: 0.76rem; }
.settings-hint { font-size: 0.68rem; margin-top: 0.18rem; line-height: 1.35; }
.settings-toggle { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
.settings-action-btn { padding: 0.28rem 0.6rem; font-size: 0.78rem; }
.settings-grid .settings-section { break-inside: avoid; }
/* wide = 两列宽（导入导出/壁纸用 .settings-section.wide.full） */
.settings-section.wide { grid-column: span 2; }
.settings-section.full { grid-column: 1 / -1; }
@media (max-width: 1023px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* === Right Quick Links === */
/* Edge icon bar */
.rt-edge { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:180; display:flex; flex-direction:column; }
/* 工具条内容容器：正常时与旧版一致（贴右、竖排、3px 间距）；
工具过多时高度封顶并允许滚动 —— 保证第一条工具永远落在「右上角时钟区」下方，不会和它重叠。 */
.rt-tabs { display:flex; flex-direction:column; gap:3px; max-height:calc(100vh - 18rem); overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.rt-tabs::-webkit-scrollbar { width:0; height:0; display:none; }
.rt-tab { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--bg2); border:1px solid var(--rule); border-right:none; border-radius:7px 0 0 7px; cursor:pointer; font-size:1rem; color:var(--ink); transition:all .15s; position:relative; }
.rt-tab:hover { background:rgba(37,99,235,.08); color:var(--accent); border-color:var(--accent); }
.rt-tab .rt-label { display:none; }
.rt-tab:hover .rt-label { display:block; position:absolute; right:44px; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.78); color:#fff; font-size:.72rem; padding:.2rem .55rem; border-radius:4px; white-space:nowrap; pointer-events:none; }
/* 用户要求：只有横向分辨率低于 600px 才隐藏快捷工具（600~1023 仍然显示，页面留出让位内边距） */
@media (max-width:599px) { .rt-edge { display:none !important; } }
/* === 清爽模式（Ctrl + 空格）：只留搜索框 + 站点卡片 === */
body.clean-ui .rt-edge,
body.clean-ui .hero-corner,
body.clean-ui .settings-btn { display: none !important; }
/* 切换时的轻提示（1.6 秒后自己消失，不挡住任何东西） */
.mode-toast {
position: fixed; left: 50%; bottom: 2.2rem; transform: translateX(-50%) translateY(10px);
z-index: 460; max-width: min(92vw, 540px); padding: 0.55rem 0.95rem;
background: rgba(17, 24, 39, 0.88); color: #fff; font-size: 0.8rem; line-height: 1.5;
border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.mode-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width:600px) and (max-width:1023px) {
body.rt-right-on .page-wrapper { padding-right: 3.4rem; }
body.rt-left-on .page-wrapper { padding-left: 3.4rem; }
body.rt-right-on .ix-actions { right: 3.1rem; }
}
/* === Hero === */
.hero {
position: relative; width: 100%; min-height: 280px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; overflow: hidden; padding: 3rem 1rem;
}
.hero-bg {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: url('assets/hero_bg_light.jpg') center/cover no-repeat;
opacity: 0.50; z-index: 0;
}
.hero-overlay {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: var(--hero-overlay);
z-index: 1;
}
/* 地球实况：折叠状态（只有搜索框时）首屏占满一屏；展开导航后恢复常高，卡片立刻可见 */
body.wp-earth .hero { min-height: clamp(380px, 42vw, 720px); }
body.all-hidden.wp-earth .hero { min-height: 100vh; }
/* 展开导航时主角是站点卡片：地球实况只保留「横幅」高度，别把导航挤出首屏（用户 2026-10-17 要求） */
body.wp-earth:not(.all-hidden) .hero { min-height: clamp(230px, 22vw, 360px); }
body.wp-earth .hero-bg { background-size: cover; background-position: center center; }
/* 遮罩压淡：用户要求"清晰度高一点"，卫星云图直接看清 */
body.wp-earth .hero-overlay {
background: linear-gradient(180deg, rgba(241,245,249,0.02) 0%, rgba(241,245,249,0.42) 100%);
}
body.dark.wp-earth .hero-overlay {
background: linear-gradient(180deg, rgba(7,14,26,0.02) 0%, rgba(7,14,26,0.46) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 680px; width: 100%; }
/* 大屏把搜索框放宽：分辨率越大越宽（内容仍是居中的一列，不会散） */
@media (min-width: 1200px) { .hero-content { max-width: 760px; } }
@media (min-width: 1500px) { .hero-content { max-width: 820px; } }
@media (min-width: 1800px) { .hero-content { max-width: 860px; } }
.hero h1 {
font-size: 2.2rem; font-weight: 700; margin-bottom: 1.2rem;
background: linear-gradient(135deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.search-box {
display: flex; max-width: 680px; margin: 0 auto; position: relative;
background: var(--bg2); border: 1px solid var(--rule); border-radius: 50px; padding: 0.35rem;
box-shadow: var(--search-shadow); transition: border-color 0.3s, box-shadow 0.3s, max-width 0.35s;
}
/* 放在 .search-box 之后才能覆盖它的 680px（同优先级，后写生效）
比原来的 680 宽一点、但没到 960 那么夸张：1200→760 / 1500→820 / 1800→860 */
@media (min-width: 1200px) { .search-box { max-width: 760px; } }
@media (min-width: 1500px) { .search-box { max-width: 820px; } }
@media (min-width: 1800px) { .search-box { max-width: 860px; } }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.search-box.expanded { max-width: 840px; }
.search-box.tall { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.search-box.tall input { white-space: normal; }
.search-box.multiline {
max-width: 840px; border-radius: 24px; align-items: flex-start;
}
.search-box.multiline textarea {
flex-basis: 100%; padding: 0.55rem 0.8rem;
}
.search-box.multiline > button:last-child {
margin-top: 0.62rem; /* 与 textarea 首行文字对齐 */
}
.search-box input,
.search-box textarea {
flex: 1; background: transparent; border: none; outline: none;
color: var(--ink); font-size: 1rem; padding: 0.55rem 1.2rem;
}
.search-box textarea {
display: block; resize: none; font-family: var(--font); line-height: 1.4;
height: 2.42rem; /* 单行高度与原 input 一致 */
min-height: 2.42rem; max-height: 16.4rem; /* 约 10 行封顶（1.4×10 + 上下 padding） */
overflow-y: hidden; overflow-x: hidden; scrollbar-width: thin;
word-break: break-all; white-space: pre-wrap;
transition: height 0.12s ease;
}
.search-box textarea::selection { background: rgba(37, 99, 235, 0.25); }
.search-box input::placeholder { color: var(--muted); }
.search-box button {
background: linear-gradient(135deg, var(--accent), var(--accent2));
border: none; color: #fff; padding: 0.55rem 1.6rem; border-radius: 50px;
font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, opacity 0.2s;
}
.search-box button:hover { transform: scale(1.03); opacity: 0.92; }
/* === Search Engines === */
.search-engines {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem;
max-width: 620px; margin: 0.8rem auto 0;
}
.engine-option {
position: relative; display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.3rem 0.65rem; border-radius: 20px; font-size: 0.76rem;
background: var(--bg2); border: 1px solid var(--rule); color: var(--muted);
cursor: pointer; transition: all 0.2s; user-select: none; white-space: nowrap;
}
.engine-option:hover { border-color: var(--accent); color: var(--accent); }
.engine-option.active {
background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.12));
border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.engine-option.engine-custom-btn { cursor: pointer; }
.engine-option.engine-custom-btn.active { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.12)); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.engine-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
/* === 右上角两行：第一行 需VPN开关 + 主题切换；第二行 日期时间 + 天气按钮 === */
.hero-corner {
position: absolute; top: 0.9rem; right: 1.4rem; z-index: 12;
display: flex; flex-direction: column; align-items: flex-end; gap: 0.42rem;
max-width: calc(100% - 7rem);
padding: 0.42rem 0.5rem; border-radius: 18px;
background: color-mix(in srgb, var(--bg2) 58%, transparent);
border: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.dark .hero-corner { background: rgba(15, 23, 42, 0.52); border-color: rgba(148, 163, 184, 0.22); }
/* 右侧工具条常显时，右上角整块再往左让 40px：与图标列横向完全错开，任何工具数量都不会压在一起。
（<600px 时工具条本身是隐藏的，不需要让位，所以只在大屏生效） */
@media (min-width: 600px) { body.rt-right-on .hero-corner { right: calc(1.4rem + 40px); } }
.hc-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; min-height: 40px; }
.hero-corner > *, .hero-corner .hc-row > * {
position: static !important; top: auto !important; right: auto !important; left: auto !important;
}
/* 右上角圆形按钮（主题 / 天气）：同尺寸，天气图标更大更醒目 */
.hero-corner .theme-toggle, .hero-tool-btn {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule);
background: var(--bg2); color: var(--muted); font-size: 1.18rem;
cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
padding: 0; line-height: 1; flex-shrink: 0;
}
.hero-tool-btn { font-size: 1.42rem; }
.hero-corner .theme-toggle:hover, .hero-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.hero-tool-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,0.12); }
/* === 需 VPN 站点：右上角（时钟左侧）的两态快捷开关 === */
.vpn-quick {
display: flex; align-items: center; gap: 0.35rem;
font-size: 0.72rem; color: var(--muted); user-select: none; line-height: 1;
}
.vpn-quick .vpn-quick-label { white-space: nowrap; font-size: 0.76rem; }
.vpn-quick-seg {
display: inline-flex; align-items: center; padding: 2px; border-radius: 999px;
background: var(--bg2); border: 1px solid var(--rule);
}
.vpn-quick-btn {
border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.72rem;
padding: 0.22rem 0.6rem; border-radius: 999px; cursor: pointer; transition: background .16s, color .16s;
line-height: 1.2;
}
.vpn-quick-btn:hover { color: var(--ink); }
.vpn-quick-btn.on { background: var(--accent); color: #fff; font-weight: 600; }
.vpn-quick-btn.on.muted-on { background: #64748b; }
@media (max-width: 640px) {
.hero-corner { top: 0.5rem; right: 0.55rem; gap: 0.3rem; padding: 0.3rem 0.36rem; border-radius: 14px; max-width: calc(100% - 4.5rem); }
.hero-corner .hc-row { gap: 0.3rem; min-height: 34px; }
.hero-corner .theme-toggle, .hero-tool-btn { width: 34px; height: 34px; font-size: 1rem; }
.hero-tool-btn { font-size: 1.2rem; }
.vpn-quick { font-size: 0.68rem; }
.vpn-quick .vpn-quick-label { display: none; }
/* 手机端：不显示日期时间与天气，连外面那个圆角玻璃框也不要（只留主题/需VPN 两个按钮本身） */
.hero-clock, #heroWeatherBtn, #hcRowBottom { display: none !important; }
.hero-corner, body.dark .hero-corner {
background: none; border: 0; box-shadow: none; padding: 0;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
}
/* === 右上角：日期 / 周几 / 当地时间（在需VPN开关与主题切换之间） === */
.hero-clock {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.86rem; color: var(--muted); line-height: 1;
background: color-mix(in srgb, var(--bg2) 78%, transparent);
border: 1px solid var(--rule); border-radius: 999px;
padding: 0.36rem 0.82rem; user-select: none; backdrop-filter: blur(6px);
white-space: nowrap;
}
body.dark .hero-clock { background: rgba(17,24,39,0.55); }
.hero-clock .hc-date { font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.hero-clock .hc-week { color: var(--accent); font-weight: 700; }
.hero-clock .hc-time { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; font-weight: 600; color: var(--ink); }
.hero-clock .hc-sep { opacity: 0.45; }
@media (max-width: 1023px) {
.hero-clock { font-size: 0.8rem; padding: 0.3rem 0.62rem; gap: 0.38rem; }
.hero-clock .hc-sep { display: none; }
}
/* === 地球实况图源说明（右下角，浅淡不抢眼；可点开原始图源） === */
.earth-credit {
display: none; position: absolute; right: 1rem; bottom: 0.6rem; z-index: 4;
font-size: 0.64rem; letter-spacing: 0.01em;
color: var(--muted); opacity: 0.72; cursor: pointer; user-select: none;
text-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: opacity .16s, color .16s;
}
.earth-credit:hover { opacity: 1; color: var(--accent); }
body.wp-earth .earth-credit { display: block; }
/* 风云四号B 中国区域云图是 16:9 横图：首屏加高一点，中国主体就不会被裁掉 */
body.dark .earth-credit { opacity: 0.62; }
body.dark .earth-credit:hover { opacity: 1; }
@media (max-width: 640px) { .earth-credit { font-size: 0.58rem; right: 0.6rem; bottom: 0.4rem; } }
/* === 待办未完成：工具条徽标 + 顶部提醒条 === */
.rt-tab .rt-badge {
position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px;
border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; line-height: 1;
box-shadow: 0 1px 4px rgba(239,68,68,0.55); pointer-events: none;
}
.rt-tab.rt-has-todo { animation: rtTodoPulse 2.4s ease-in-out infinite; }
@keyframes rtTodoPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
50% { box-shadow: 0 0 0 3px rgba(239,68,68,0.22); }
}
.todo-alert {
position: fixed; top: 0.9rem; left: 50%; transform: translateX(-50%) translateY(-8px);
z-index: 320; display: none; align-items: center; gap: 0.55rem;
background: linear-gradient(135deg, #ef4444, #f97316); color: #fff;
border-radius: 999px; padding: 0.42rem 0.6rem 0.42rem 0.9rem; font-size: 0.78rem; font-weight: 600;
box-shadow: 0 8px 22px rgba(239,68,68,0.35); cursor: pointer;
opacity: 0; transition: opacity .3s, transform .3s;
}
.todo-alert.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.todo-alert .ta-x {
background: rgba(255,255,255,0.22); border: 0; color: #fff; width: 20px; height: 20px;
border-radius: 50%; cursor: pointer; font-size: 0.7rem; line-height: 1; display: flex;
align-items: center; justify-content: center;
}
.todo-alert .ta-x:hover { background: rgba(255,255,255,0.38); }
/* === 高级搜索：搜索框里的 🔬 按钮 + 浮层面板（不占布局高度、不进设置窗口） === */
/* 未启用：淡灰无底；启用：实心强调色 + 阴影 —— 一眼看出开关。选择器必须带上 .search-box，
否则会被 `.search-box button`（特异性 0-1-1）的渐变底色盖掉。 */
.search-box .adv-btn {
flex-shrink: 0; width: 34px; height: 34px; min-width: 34px; padding: 0; margin-right: 0.28rem;
border-radius: 50%; border: 1px solid transparent; background: transparent; box-shadow: none;
color: var(--muted); font-size: 0.95rem; font-weight: 400; cursor: pointer; opacity: 0.55;
display: flex; align-items: center; justify-content: center;
transition: color .16s, background .16s, border-color .16s, box-shadow .16s, transform .16s, opacity .16s;
}
.search-box .adv-btn:hover {
opacity: 1; color: var(--accent); background: var(--bg3); border-color: var(--rule); transform: none;
}
.search-box .adv-btn.on {
opacity: 1; color: #fff; border-color: transparent;
background: linear-gradient(135deg, var(--accent), var(--accent2));
box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.search-box .adv-btn.on:hover { transform: scale(1.05); box-shadow: 0 3px 12px rgba(59,130,246,0.45); }
body.dark .search-box .adv-btn.on { color: #fff; box-shadow: 0 2px 10px rgba(59,130,246,0.5); }
.adv-panel {
display: none; position: fixed; z-index: 260; width: min(620px, 92vw);
background: var(--bg2); border: 1px solid var(--rule); border-radius: 14px;
box-shadow: 0 18px 44px rgba(0,0,0,0.22); padding: 0.9rem 1rem;
overflow-y: auto;
}
.adv-panel.open { display: block; }
.adv-panel .adv-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; font-size: 0.85rem; color: var(--ink); }
.adv-panel .adv-sub { font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.adv-panel .adv-close { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 0 0.2rem; }
.adv-panel .adv-close:hover { color: var(--accent); }
.adv-panel .adv-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; padding-bottom: 0.55rem; border-bottom: 1px dashed var(--rule); }
.adv-panel .adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.6rem; margin-bottom: 0.2rem; }
.adv-panel .adv-field { display: flex; flex-direction: column; gap: 0.22rem; font-size: 0.74rem; color: var(--muted); }
.adv-panel .adv-field .settings-input { width: 100%; }
.adv-panel .adv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.5rem; }
.adv-panel .adv-cap { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.adv-panel .adv-date { width: auto; min-width: 8.2rem; padding: 0.25rem 0.4rem; }
@media (max-width: 640px) {
.adv-panel { padding: 0.75rem; }
.adv-panel .adv-grid { grid-template-columns: 1fr; }
.adv-panel .adv-date { min-width: 0; flex: 1; }
}
/* === Frequent Sites === */
/* 常用站点：已挪到内容区顶部（不再是 hero 里的搜索区元素），做成一条轻量横条 */
.frequent-section {
margin: 0 0 1.6rem; padding: 0 0 0.9rem; display: none;
border-bottom: 1px dashed var(--rule);
}
.frequent-section.visible { display: block; }
/* 无 JS 时的提示（卡片标记外置后，需要脚本才能渲染站点卡片） */
.nojs-note {
margin: 1.2rem auto; max-width: 520px; padding: 0.9rem 1.1rem;
font-size: 0.85rem; line-height: 1.6; color: var(--muted); text-align: center;
background: var(--bg2); border: 1px solid var(--rule); border-radius: 12px;
}
.frequent-title {
font-size: 0.7rem; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.06em; margin-bottom: 0.5rem; text-align: left;
}
.frequent-grid {
display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem;
}
.frequent-chip {
display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem;
background: var(--bg2); border: 1px solid var(--rule); border-radius: 20px;
font-size: 0.76rem; color: var(--muted); cursor: pointer; transition: all 0.2s;
text-decoration: none; white-space: nowrap;
}
.frequent-chip:hover { border-color: var(--accent); color: var(--accent); }
/* === Layout === */
.page-wrapper { display: flex; max-width: var(--max); margin: 0 auto; padding: 0 1rem 3rem; gap: 1.5rem; }
/* === Sidebar === */
.sidebar {
display: none; position: sticky; top: 1rem; width: var(--sidebar-w); flex-shrink: 0;
align-self: flex-start; max-height: calc(100vh - 2rem); overflow-y: auto;
background: var(--bg2); border: 1px solid var(--rule); border-radius: 16px;
padding: 0.85rem 0.6rem; box-shadow: var(--card-shadow); transition: width 0.3s, padding 0.3s;
}
.sidebar.collapsed { width: 48px; padding: 0.85rem 0.35rem; }
.sidebar.collapsed .sidebar-title { display: none; }
.sidebar.collapsed a span { display: none; }
.sidebar.collapsed a { justify-content: center; padding: 0.45rem 0; }
.sidebar.collapsed .sidebar-toggle-btn { margin: 0 auto 0.4rem; display: block; }
.sidebar-title {
font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.08em; padding: 0.2rem 0.65rem 0.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.4rem;
}
.sidebar-toggle-btn {
background: none; border: none; color: var(--muted); cursor: pointer;
font-size: 0.85rem; padding: 0.15rem 0.3rem; border-radius: 6px; transition: all 0.2s;
margin-right: 0.65rem; margin-bottom: 0.5rem; float: right;
}
.sidebar-toggle-btn:hover { background: var(--bg3); color: var(--accent); }
.sidebar a {
display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.65rem;
border-radius: 10px; color: var(--muted); font-size: 0.82rem;
text-decoration: none; transition: all 0.2s; margin-bottom: 1px;
}
.sidebar a:hover { background: var(--bg3); color: var(--ink); }
.sidebar a.active { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1)); color: var(--accent); font-weight: 600; }
.sidebar a img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; }
/* === Main === */
.main-content { flex: 1; min-width: 0; }
/* === Mobile Tabs === */
.mobile-tabs { display: none; }
.mobile-tab {
display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem;
background: var(--bg2); border: 1px solid var(--rule); border-radius: 20px;
color: var(--muted); font-size: 0.82rem; cursor: pointer; transition: all 0.2s;
text-decoration: none; white-space: nowrap;
}
.mobile-tab:hover, .mobile-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mobile-tab img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
/* === Category === */
/* 曾经试过给 .category-section 加 content-visibility: auto（布局增量 176ms→13ms），
但实测「点左侧分类跳转」会因高度估算而落偏（sec.top 跑到 -880px），
为了不牺牲「快速选站点」这个核心功能，这里放弃该优化，只靠去掉 backdrop-filter 提速。 */
.category-section { margin-bottom: 2.5rem; scroll-margin-top: 80px; }
.category-header {
display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem;
padding-bottom: 0.7rem; border-bottom: 2px solid var(--rule);
}
.category-header img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.category-header h2 { font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.category-header .count { margin-left: auto; font-size: 0.78rem; color: var(--muted); background: var(--bg3); padding: 0.2rem 0.6rem; border-radius: 12px; }
/* === Cards === */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.85rem; }
.nav-card {
display: flex; align-items: flex-start; gap: 0.8rem;
background: var(--bg2); border: 1px solid var(--rule); border-radius: 12px;
padding: 0.9rem 1rem; text-decoration: none; color: inherit; transition: all 0.25s; cursor: pointer;
}
.nav-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.nav-card .icon {
width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
justify-content: center; font-size: 1.2rem; font-weight: 700; flex-shrink: 0;
}
.nav-card .info { flex: 1; min-width: 0; }
.nav-card .info h3 { font-size: 0.92rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-card .info p { font-size: 0.76rem; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nav-card .info .url { font-size: 0.7rem; color: var(--muted); margin-top: 0.25rem; font-family: 'Segoe UI', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* === Icon Colors === */
.icon-teal { background: rgba(20,184,166,0.12); color: #0d9488; }
.icon-blue { background: rgba(59,130,246,0.12); color: #2563eb; }
.icon-purple { background: rgba(139,92,246,0.12); color: #7c3aed; }
.icon-orange { background: rgba(249,115,22,0.12); color: #ea580c; }
.icon-green { background: rgba(16,185,129,0.12); color: #059669; }
.icon-red { background: rgba(239,68,68,0.12); color: #dc2626; }
.icon-yellow { background: rgba(245,158,11,0.12); color: #d97706; }
.icon-pink { background: rgba(236,72,153,0.12); color: #db2777; }
.icon-cyan { background: rgba(6,182,212,0.12); color: #0891b2; }
.icon-indigo { background: rgba(99,102,241,0.12); color: #4f46e5; }
/* === 右下角操作按钮组：返回顶部 + 意见反馈 === */
.ix-actions {
/* 右移留出工具条宽度、抬高避开工具条底部，保证与工具条不重叠 */
position: fixed; bottom: 1.1rem; right: 3.1rem; z-index: 300;
display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
}
@media (max-width: 599px) { .ix-actions { right: 1rem; bottom: 1rem; } }
.ix-btn {
width: 40px; height: 40px; border-radius: 50%; background: var(--bg2);
border: 1px solid var(--rule); color: var(--muted); font-size: 1.05rem;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: all 0.2s; box-shadow: var(--card-shadow); padding: 0;
}
.ix-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.ix-top { opacity: 0; visibility: hidden; transform: translateY(6px); }
.ix-top.show { opacity: 1; visibility: visible; transform: none; }
/* === VPN badge on cards === */
.nav-card { position: relative; }
.vpn-badge {
position: absolute; top: 6px; right: 30px; z-index: 2; /* 右移给收藏星标让位 */
font-size: 0.6rem; line-height: 1; letter-spacing: 0.03em;
padding: 0.16rem 0.34rem; border-radius: 999px; font-weight: 600;
color: #b45309; background: rgba(245, 158, 11, 0.16);
border: 1px solid rgba(245, 158, 11, 0.35);
opacity: 0.85; transition: opacity 0.15s;
}
.nav-card:hover .vpn-badge { opacity: 1; }
[data-tone="dark"] .vpn-badge, body.dark .vpn-badge {
color: #fcd34d; background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.42);
}
/* === 收藏星标 === */
.fav-star {
position: absolute; top: 4px; right: 6px; z-index: 3;
font-size: 1rem; line-height: 1; color: #cbd5e1; cursor: pointer;
transition: color 0.15s, transform 0.15s; user-select: none;
}
.fav-star:hover { transform: scale(1.25); color: #f59e0b; }
.fav-star.on { color: #f59e0b; }
body.dark .fav-star { color: #475569; }
body.dark .fav-star.on { color: #fbbf24; }
.fav-emoji { font-style: normal; }
/* === 单分类模式 === */
body.only-active .category-section.not-active { display: none !important; }
/* === 工具条：左/右两条独立渲染（每个工具一个侧别） === */
/* 关键：左条必须清掉 .rt-edge 的 right:0，否则 left+right 同时生效会横向铺满视口，
变成一层看不见的全宽遮罩 → 搜索框点不动、导航展开按钮点不动。 */
#rtEdgeLeft { left: 0; right: auto; width: 38px; align-items: flex-start; display: none; }
#rtEdgeLeft .rt-tab { border-right: 1px solid var(--rule); border-left: none; border-radius: 0 7px 7px 0; }
#rtEdgeLeft .rt-tab .rt-label { right: auto; left: 44px; }
body.rt-left-on #rtEdgeLeft { display: flex; }
/* 仅在「视口不足以把工具条容纳进页面留白」时才让位，宽屏保持原版 4 列卡片观感 */
@media (min-width: 1024px) and (max-width: 1499px) {
.page-wrapper { padding-left: 56px; padding-right: 56px; }
}
@media (max-width: 599px) { #rtEdgeLeft { display: none !important; } }
/* === Feedback === */
.feedback-link {
position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
width: 40px; height: 40px; border-radius: 50%; background: var(--bg2);
border: 1px solid var(--rule); color: var(--muted); font-size: 1.1rem;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: all 0.2s; box-shadow: var(--card-shadow);
}
.feedback-link:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
/* === Feedback Modal === */
.modal-overlay {
display: none; position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,0.35); align-items: center; justify-content: center;
animation: fadeIn 0.2s ease;
}
/* 意见反馈弹窗是从设置面板里打开的，必须压在设置面板（z-index 200）之上 */
#feedbackModal { z-index: 420; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay.visible { display: flex; }
.modal-box {
background: var(--bg2); border: 1px solid var(--rule); border-radius: 16px;
padding: 1.8rem; max-width: 380px; width: 90%; text-align: center;
box-shadow: 0 12px 40px rgba(0,0,0,0.15); animation: modalIn 0.25s ease;
}
@keyframes modalIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-box h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 0.5rem; }
.modal-box p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
.modal-box .modal-email {
display: inline-block; font-size: 0.95rem; color: var(--accent); font-weight: 600;
text-decoration: none; padding: 0.3rem 0.8rem; border: 1px solid var(--accent);
border-radius: 20px; transition: all 0.2s;
}
.modal-box .modal-email:hover { background: var(--accent); color: #fff; }
.modal-close-btn {
margin-top: 0.8rem; background: var(--bg3); border: none; color: var(--muted);
font-size: 0.8rem; padding: 0.35rem 1.2rem; border-radius: 20px; cursor: pointer;
transition: all 0.2s;
}
.modal-close-btn:hover { background: var(--rule); color: var(--ink); }
/* === Custom Engine Modal === */
.engine-modal-overlay {
display: none; position: fixed; inset: 0; z-index: 210;
background: rgba(0,0,0,0.4); align-items: center; justify-content: center;
animation: fadeIn 0.2s ease;
}
.engine-modal-overlay.visible { display: flex; }
.engine-modal-box {
background: var(--bg2); border: 1px solid var(--rule); border-radius: 16px;
padding: 1.5rem; max-width: 440px; width: 92%; text-align: left;
box-shadow: 0 12px 40px rgba(0,0,0,0.15); animation: modalIn 0.25s ease;
}
.engine-modal-box h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 0.8rem; }
.engine-modal-box label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.3rem; }
.engine-modal-box .eng-input {
width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--rule);
border-radius: 10px; background: var(--bg); color: var(--ink);
font-size: 0.85rem; font-family: var(--font); margin-bottom: 0.8rem;
outline: none; transition: border-color 0.2s;
}
.engine-modal-box .eng-input:focus { border-color: var(--accent); }
.engine-modal-box .eng-hint {
font-size: 0.73rem; color: var(--muted); margin-bottom: 0.9rem;
padding: 0.45rem 0.65rem; background: var(--bg3); border-radius: 8px;
}
.engine-modal-box .eng-hint code { color: var(--accent); font-weight: 600; }
.engine-modal-btns { display: flex; gap: 0.5rem; justify-content: flex-end; }
.eng-save-btn {
background: linear-gradient(135deg, var(--accent), var(--accent2));
border: none; color: #fff; padding: 0.45rem 1.2rem; border-radius: 10px;
font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.eng-save-btn:hover { opacity: 0.88; }
.eng-cancel-btn {
background: var(--bg3); border: none; color: var(--muted); padding: 0.45rem 1rem;
border-radius: 10px; font-size: 0.85rem; cursor: pointer; transition: background 0.2s;
}
.eng-cancel-btn:hover { background: var(--rule); color: var(--ink); }
.eng-delete-btn {
background: transparent; border: 1px solid #ef4444; color: #ef4444; padding: 0.4rem 0.9rem;
border-radius: 10px; font-size: 0.8rem; cursor: pointer; margin-right: auto; transition: all 0.2s;
}
.eng-delete-btn:hover { background: rgba(239,68,68,0.08); }
/* === Sticky Search === */
.sticky-search {
position: fixed; top: 0; left: 0; right: 0; z-index: 99;
background: var(--bg); padding: 0.7rem 1rem;
border-bottom: 1px solid var(--rule); box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transform: translateY(-100%); transition: transform 0.25s ease;
display: flex; justify-content: center; gap: 0.5rem; align-items: center;
}
.sticky-search.visible { transform: translateY(0); }
.sticky-search .sticky-engine {
font-size: 0.75rem; color: var(--muted); white-space: nowrap;
padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 12px;
cursor: pointer; min-width: 80px; text-align: center;
transition: border-color 0.2s, color 0.2s;
}
.sticky-search .sticky-engine:hover { border-color: var(--accent); color: var(--accent); }
.sticky-search .sticky-input {
flex: 1; max-width: 500px; padding: 0.5rem 0.9rem;
border: 1px solid var(--rule); border-radius: 20px; background: var(--bg2);
color: var(--ink); font-size: 0.92rem; outline: none;
transition: border-color 0.2s;
}
.sticky-search .sticky-input:focus { border-color: var(--accent); }
.sticky-search .sticky-btn {
background: linear-gradient(135deg, var(--accent), var(--accent2));
border: none; color: #fff; padding: 0.5rem 1.3rem; border-radius: 20px;
font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
/* === Category Collapse === */
.category-section .card-grid { overflow: hidden; transition: opacity 0.3s ease; }
.category-section.collapsed .card-grid { display: none; }
.category-section.collapsed .category-header { margin-bottom: 0.3rem; padding-bottom: 0.5rem; }
.category-header { cursor: pointer; user-select: none; transition: margin-bottom 0.3s; }
.category-header:hover { opacity: 0.85; }
.toggle-arrow {
margin-left: 0.5rem; font-size: 0.7rem; color: var(--muted);
transition: transform 0.3s ease; display: inline-flex; align-items: center;
}
.category-section.collapsed .toggle-arrow { transform: rotate(-90deg); }
/* === Hero Collapse Toggle === */
.hero-toggle-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
margin-top: 0.9rem; padding: 0.4rem 1rem;
background: transparent; border: 1px solid var(--rule); border-radius: 20px;
color: var(--muted); font-size: 0.78rem; cursor: pointer;
transition: all 0.25s; font-family: var(--font);
}
.hero-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.hero-toggle-btn .toggle-icon { font-size: 0.85rem; transition: transform 0.3s ease; }
body.all-hidden .hero-toggle-btn .toggle-icon { transform: rotate(180deg); }
/* === All Hidden State === */
body.all-hidden .sticky-search { display: none; }
body.all-hidden .hero { min-height: 100vh; }
body.all-hidden .page-wrapper { display: none; }
body.all-hidden footer { display: none; }
/* === Footer === */
footer { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--rule); max-width: var(--max); margin: 0 auto; }
/* === Responsive === */
@media (min-width: 1024px) { .sidebar { display: block; } .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
@media (max-width: 1023px) { .hero h1 { font-size: 1.6rem; } .hero { min-height: 220px; padding: 2rem 1rem; } .page-wrapper { flex-direction: column; padding: 0 0.75rem 2rem; } .desktop-only { display: none; } .category-header h2 { font-size: 1.05rem; } .category-header img { width: 28px; height: 28px; } .settings-btn { top: 0.5rem; left: 0.5rem; width: 32px; height: 32px; font-size: 0.95rem; } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 1.4rem; } .search-box input { font-size: 0.85rem; padding: 0.5rem 0.7rem; } .search-box button { font-size: 0.8rem; padding: 0.5rem 1rem; } .settings-btn { width: 30px; height: 30px; font-size: 0.85rem; } .settings-grid { grid-template-columns: 1fr; } .settings-panel { padding:1rem; } }
/* === Todo Floating Window === */
.todo-window {
display: none; position: fixed; top: 80px; right: 60px; width: 400px; height: 500px;
min-width: 300px; min-height: 340px; max-height: 85vh;
z-index: 190; background: rgba(255,255,255,0.9); border: 1px solid var(--rule);
border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
overflow: hidden; flex-direction: column;
}
body.dark .todo-window { background: rgba(17,24,39,0.9); }
.todo-window.visible { display: flex; }
.todo-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule);
cursor: move; user-select: none; gap: 0.4rem; flex-shrink: 0;
}
.todo-header span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.todo-header-actions { display: flex; gap: 0.25rem; }
.todo-btn-icon {
width: 26px; height: 26px; border: none; background: transparent;
cursor: pointer; font-size: 0.85rem; color: var(--muted); border-radius: 6px;
display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.todo-btn-icon:hover { background: var(--bg3); color: var(--accent); }
.todo-btn-icon.todo-close:hover { color: #dc2626; }
.todo-input-row {
display: flex; gap: 0.3rem; padding: 0.45rem 0.6rem;
border-bottom: 1px solid var(--rule); flex-shrink: 0; flex-wrap: wrap;
}
.todo-input-row input {
flex: 1; padding: 0.38rem 0.55rem; border: 1px solid var(--rule);
border-radius: 8px; font-size: 0.8rem; background: var(--bg2); color: var(--ink);
outline: none; font-family: var(--font); min-width: 0;
}
.todo-input-row input:focus { border-color: var(--accent); }
.todo-input-row button {
padding: 0.38rem 0.75rem; border: none; border-radius: 8px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #fff; font-size: 0.78rem; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: opacity 0.2s;
}
.todo-input-row button:hover { opacity: 0.88; }
.todo-input-extras {
display: flex; gap: 0.35rem; padding: 0.3rem 0.6rem 0.45rem; align-items: center;
border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.todo-priority-select {
padding: 0.2rem 0.4rem; border: 1px solid var(--rule); border-radius: 6px;
font-size: 0.7rem; background: var(--bg2); color: var(--ink); outline: none;
font-family: var(--font); cursor: pointer;
}
.todo-priority-select:focus { border-color: var(--accent); }
.todo-date-input {
padding: 0.2rem 0.4rem; border: 1px solid var(--rule); border-radius: 6px;
font-size: 0.7rem; background: var(--bg2); color: var(--ink); outline: none;
font-family: var(--font); width: 115px; min-width: 0;
}
.todo-date-input:focus { border-color: var(--accent); }
.todo-date-label { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.todo-tabs {
display: flex; gap: 0; padding: 0 0.4rem; border-bottom: 1px solid var(--rule);
flex-shrink: 0;
}
.todo-tab {
padding: 0.4rem 0.6rem; font-size: 0.74rem; cursor: pointer;
color: var(--muted); border-bottom: 2px solid transparent;
transition: all 0.15s; background: none; border-top: none;
border-left: none; border-right: none; font-family: var(--font);
}
.todo-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.todo-tab:hover { color: var(--accent); }
.todo-list {
flex: 1; overflow-y: auto; padding: 0.35rem 0.45rem;
min-height: 60px;
}
.todo-list::-webkit-scrollbar { width: 4px; }
.todo-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.todo-item {
display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.35rem;
border-radius: 8px; transition: background 0.15s; font-size: 0.8rem;
}
.todo-item:hover { background: var(--bg3); }
.todo-item.completed .todo-text { text-decoration: line-through; opacity: 0.55; }
.todo-item.completed .todo-pri-badge { opacity: 0.4; }
.todo-item.completed .todo-deadline { opacity: 0.4; }
.todo-check {
width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--rule);
cursor: pointer; flex-shrink: 0; display: flex; align-items: center;
justify-content: center; transition: all 0.15s; background: transparent; padding: 0;
}
.todo-check:hover { border-color: var(--accent); }
.todo-item.completed .todo-check { background: var(--muted); border-color: var(--muted); }
.todo-item.completed .todo-check::after {
content: '✓'; color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 1;
}
.todo-text { flex: 1; word-break: break-word; line-height: 1.4; font-weight: 500; min-width: 0; }
.todo-meta { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.todo-pri-badge {
padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.6rem;
font-weight: 600; white-space: nowrap; line-height: 1.4;
}
.todo-pri-badge.low { background: rgba(37,99,235,0.1); color: #2563eb; }
.todo-pri-badge.mid { background: rgba(217,119,6,0.1); color: #d97706; }
.todo-pri-badge.high { background: rgba(220,38,38,0.1); color: #dc2626; }
.todo-deadline {
font-size: 0.62rem; white-space: nowrap; font-weight: 500; line-height: 1;
}
.todo-deadline.overdue { color: #dc2626; }
.todo-deadline.soon { color: #d97706; }
.todo-deadline.normal { color: var(--muted); }
.todo-del {
width: 22px; height: 22px; border: none; background: transparent;
cursor: pointer; font-size: 0.8rem; color: var(--muted); border-radius: 4px;
display: flex; align-items: center; justify-content: center; opacity: 0;
transition: all 0.15s; flex-shrink: 0;
}
.todo-item:hover .todo-del { opacity: 1; }
.todo-del:hover { background: rgba(220,38,38,0.1); color: #dc2626; }
.todo-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 0.4rem 0.7rem; border-top: 1px solid var(--rule);
font-size: 0.7rem; color: var(--muted); flex-shrink: 0;
}
.todo-footer-left { display: flex; align-items: center; gap: 0.5rem; }
.todo-footer-btns { display: flex; gap: 0.25rem; }
.todo-footer-btns button {
padding: 0.25rem 0.5rem; font-size: 0.68rem; border: 1px solid var(--rule);
border-radius: 6px; background: var(--bg2); color: var(--muted);
cursor: pointer; transition: all 0.15s; font-family: var(--font);
}
.todo-footer-btns button:hover { border-color: var(--accent); color: var(--accent); }
.todo-empty { text-align: center; padding: 1.5rem 0.5rem; color: var(--muted); font-size: 0.82rem; }
/* resize handle */
.todo-resize-handle {
position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
cursor: nwse-resize; z-index: 5;
background: linear-gradient(135deg, transparent 50%, var(--rule) 50%, var(--rule) 60%, transparent 60%);
}
.todo-resize-handle:hover { background: linear-gradient(135deg, transparent 50%, var(--accent) 50%, var(--accent) 60%, transparent 60%); }
@media (max-width: 599px) { .todo-window { display: none !important; } }
/* === Notepad Floating Window === */
.note-window {
display: none; position: fixed; top: 80px; right: 60px; width: 480px; height: 540px;
min-width: 340px; min-height: 380px; max-height: 85vh;
z-index: 189; background: rgba(255,255,255,0.9); border: 1px solid var(--rule);
border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
overflow: hidden; flex-direction: column;
}
body.dark .note-window { background: rgba(17,24,39,0.9); }
.note-window.visible { display: flex; }
.note-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule);
cursor: move; user-select: none; gap: 0.4rem; flex-shrink: 0;
}
.note-header span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.note-header-actions { display: flex; gap: 0.25rem; }
.note-toolbar {
display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem;
border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.note-toolbar button {
padding: 0.2rem 0.5rem; font-size: 0.7rem; border: 1px solid var(--rule);
border-radius: 6px; background: var(--bg2); color: var(--muted);
cursor: pointer; transition: all 0.15s; font-family: var(--font);
}
.note-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.note-toolbar button.active { background: rgba(59,130,246,0.1); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.note-editor-area {
flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.note-textarea {
flex: 1; width: 100%; border: none; outline: none; resize: none;
padding: 0.6rem 0.7rem; font-family: Consolas, 'PingFang SC', 'Microsoft YaHei', monospace;
font-size: 0.82rem; line-height: 1.5; background: transparent; color: var(--ink);
}
.note-textarea::placeholder { color: var(--muted); font-family: var(--font); }
.note-preview {
flex: 1; overflow-y: auto; padding: 0.6rem 0.7rem;
}
.note-preview::-webkit-scrollbar { width: 4px; }
.note-preview::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.note-preview > *:first-child { margin-top: 0; }
.note-preview h1, .note-preview h2, .note-preview h3 { margin: 0.8em 0 0.4em; }
.note-preview h1 { font-size: 1.2rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.3em; }
.note-preview h2 { font-size: 1.05rem; }
.note-preview h3 { font-size: 0.9rem; }
.note-preview p { margin: 0.4em 0; }
.note-preview ul, .note-preview ol { padding-left: 1.5em; margin: 0.4em 0; }
.note-preview li { margin: 0.2em 0; }
.note-preview code { background: var(--bg3); padding: 0.1em 0.35em; border-radius: 3px; font-family: Consolas, monospace; font-size: 0.85em; }
.note-preview pre { background: var(--bg3); padding: 0.6em 0.8em; border-radius: 6px; overflow-x: auto; }
.note-preview pre code { background: none; padding: 0; }
.note-preview blockquote { border-left: 3px solid var(--accent); padding-left: 0.6em; color: var(--muted); margin: 0.4em 0; }
.note-preview a { color: var(--accent); }
.note-preview hr { border: none; border-top: 1px solid var(--rule); margin: 0.6em 0; }
.note-preview strong { font-weight: 600; }
.note-preview em { font-style: italic; }
.note-preview del { text-decoration: line-through; opacity: 0.6; }
.note-preview table { border-collapse: collapse; margin: 0.4em 0; font-size: 0.8rem; }
.note-preview th, .note-preview td { border: 1px solid var(--rule); padding: 0.3em 0.5em; text-align: left; }
.note-preview th { background: var(--bg3); }
.note-resize-handle {
position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
cursor: nwse-resize; z-index: 5;
background: linear-gradient(135deg, transparent 50%, var(--rule) 50%, var(--rule) 60%, transparent 60%);
}
.note-resize-handle:hover { background: linear-gradient(135deg, transparent 50%, var(--accent) 50%, var(--accent) 60%, transparent 60%); }
@media (max-width: 599px) { .note-window { display: none !important; } }
/* === Pomodoro Floating Window === */
.pomo-window {
display: none; position: fixed; top: 80px; right: 60px; width: 320px; height: 420px;
min-width: 280px; min-height: 360px; max-height: 85vh;
z-index: 188; background: rgba(255,255,255,0.9); border: 1px solid var(--rule);
border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
overflow: hidden; flex-direction: column;
}
body.dark .pomo-window { background: rgba(17,24,39,0.9); }
.pomo-window.visible { display: flex; }
.pomo-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule);
cursor: move; user-select: none; gap: 0.4rem; flex-shrink: 0;
}
.pomo-header span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.pomo-header-actions { display: flex; gap: 0.25rem; }
.pomo-tabs {
display: flex; gap: 0; padding: 0.4rem; border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.pomo-tab {
flex: 1; padding: 0.35rem; font-size: 0.74rem; cursor: pointer;
color: var(--muted); border: 1px solid var(--rule); border-radius: 8px;
transition: all 0.15s; background: var(--bg2); font-family: var(--font); margin: 0 0.2rem;
}
.pomo-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: var(--accent); font-weight: 600; }
.pomo-tab:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.pomo-timer-area {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0.5rem; gap: 0.6rem;
}
.pomo-circle {
width: 160px; height: 160px; border-radius: 50%; position: relative;
display: flex; align-items: center; justify-content: center;
background: conic-gradient(var(--accent) 0deg, var(--accent) 0deg, var(--bg3) 0deg, var(--bg3) 360deg);
transition: background 0.3s;
}
.pomo-circle.break { background: conic-gradient(#16a34a 0deg, #16a34a 0deg, var(--bg3) 0deg, var(--bg3) 360deg); }
.pomo-circle-inner {
width: 140px; height: 140px; border-radius: 50%; background: var(--bg2);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
}
.pomo-time { font-size: 2rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.pomo-phase { font-size: 0.72rem; color: var(--muted); }
.pomo-controls { display: flex; gap: 0.4rem; }
.pomo-btn {
padding: 0.4rem 1rem; border: none; border-radius: 8px; font-size: 0.8rem;
font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: var(--font);
}
.pomo-btn-start { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.pomo-btn-reset { background: var(--bg3); color: var(--muted); }
.pomo-btn:hover { opacity: 0.85; }
.pomo-footer {
display: flex; align-items: center; justify-content: center; gap: 0.8rem;
padding: 0.4rem 0.7rem; border-top: 1px solid var(--rule);
font-size: 0.72rem; color: var(--muted); flex-shrink: 0;
}
.pomo-stat { display: flex; align-items: center; gap: 0.25rem; }
.pomo-stat strong { color: var(--accent); font-size: 0.9rem; }
.pomo-resize-handle {
position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
cursor: nwse-resize; z-index: 5;
background: linear-gradient(135deg, transparent 50%, var(--rule) 50%, var(--rule) 60%, transparent 60%);
}
.pomo-resize-handle:hover { background: linear-gradient(135deg, transparent 50%, var(--accent) 50%, var(--accent) 60%, transparent 60%); }
@media (max-width: 599px) { .pomo-window { display: none !important; } }
/* === Unit Converter Floating Window === */
.conv-window {
display: none; position: fixed; top: 80px; right: 60px; width: 360px; height: 460px;
min-width: 300px; min-height: 360px; max-height: 85vh;
z-index: 186; background: rgba(255,255,255,0.9); border: 1px solid var(--rule);
border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
overflow: hidden; flex-direction: column;
}
body.dark .conv-window { background: rgba(17,24,39,0.9); }
.conv-window.visible { display: flex; }
.conv-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule);
cursor: move; user-select: none; gap: 0.4rem; flex-shrink: 0;
}
.conv-header span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.conv-header-actions { display: flex; gap: 0.25rem; }
.conv-tabs {
display: flex; gap: 0; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--rule); flex-shrink: 0;
flex-wrap: wrap;
}
.conv-tab {
padding: 0.3rem 0.5rem; font-size: 0.72rem; cursor: pointer;
color: var(--muted); border-bottom: 2px solid transparent;
transition: all 0.15s; background: none; border-top: none; border-left: none;
border-right: none; font-family: var(--font);
}
.conv-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.conv-tab:hover { color: var(--accent); }
.conv-input-area {
display: flex; gap: 0.35rem; padding: 0.45rem 0.6rem; align-items: center;
border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.conv-input-area input {
flex: 1; padding: 0.38rem 0.55rem; border: 1px solid var(--rule);
border-radius: 8px; font-size: 0.82rem; background: var(--bg2); color: var(--ink);
outline: none; font-family: var(--font); min-width: 0;
}
.conv-input-area input:focus { border-color: var(--accent); }
.conv-input-area select {
padding: 0.38rem 0.4rem; border: 1px solid var(--rule); border-radius: 8px;
font-size: 0.76rem; background: var(--bg2); color: var(--ink); outline: none;
font-family: var(--font); cursor: pointer;
}
.conv-input-area select:focus { border-color: var(--accent); }
.conv-results {
flex: 1; overflow-y: auto; padding: 0.35rem 0.45rem;
}
.conv-results::-webkit-scrollbar { width: 4px; }
.conv-results::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.conv-result-item {
display: flex; align-items: center; justify-content: space-between;
padding: 0.35rem 0.45rem; border-radius: 7px; transition: background 0.15s;
gap: 0.3rem; margin-bottom: 0.15rem;
}
.conv-result-item:hover { background: var(--bg3); }
.conv-result-label { font-size: 0.76rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.conv-result-value {
font-size: 0.8rem; font-weight: 600; color: var(--ink); text-align: right;
font-variant-numeric: tabular-nums; word-break: break-all; cursor: pointer;
}
.conv-result-value:hover { color: var(--accent); }
.conv-empty { text-align: center; padding: 1.5rem 0.5rem; color: var(--muted); font-size: 0.82rem; }
.conv-resize-handle {
position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
cursor: nwse-resize; z-index: 5;
background: linear-gradient(135deg, transparent 50%, var(--rule) 50%, var(--rule) 60%, transparent 60%);
}
.conv-resize-handle:hover { background: linear-gradient(135deg, transparent 50%, var(--accent) 50%, var(--accent) 60%, transparent 60%); }
@media (max-width: 599px) { .conv-window { display: none !important; } }
/* === Weather Floating Window === */
.weather-window {
display: none; position: fixed; top: 80px; right: 60px; width: 366px;
z-index: 187; background: rgba(255,255,255,0.95); border: 1px solid var(--rule);
border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.2);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
overflow: hidden; flex-direction: column;
}
body.dark .weather-window { background: rgba(17,24,39,0.95); }
.weather-window.visible { display: flex; }
.weather-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule);
cursor: move; user-select: none; gap: 0.35rem; flex-shrink: 0;
background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(139,92,246,0.10));
}
.weather-header > span { font-size: 0.86rem; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.weather-header-actions { display: flex; gap: 0.2rem; align-items: center; }
.weather-msn-btn {
border: 1px solid var(--rule); background: var(--bg2); color: var(--muted);
border-radius: 999px; font-size: 0.66rem; padding: 0.18rem 0.5rem; cursor: pointer; font-family: var(--font);
}
.weather-msn-btn:hover { color: var(--accent); border-color: var(--accent); }
.weather-body { padding: 0.75rem 0.85rem 0.55rem; max-height: min(70vh, 520px); overflow-y: auto; }
.weather-body::-webkit-scrollbar { width: 4px; }
.weather-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.weather-hero { display: flex; align-items: center; gap: 0.7rem; }
.weather-emoji { font-size: 2.6rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.14)); }
.weather-hero-main { flex: 1; min-width: 0; }
.weather-temp { font-size: 2.1rem; font-weight: 800; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.weather-temp small { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.weather-desc { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.weather-city { font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.weather-feels {
font-size: 0.66rem; padding: 0.06rem 0.34rem; border-radius: 999px;
background: var(--bg3); border: 1px solid var(--rule); color: var(--muted);
}
.weather-range-box {
display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem;
padding: 0.32rem 0.5rem; border-radius: 12px; background: var(--bg3); border: 1px solid var(--rule);
flex-shrink: 0;
}
.weather-range-box .wr-k { font-size: 0.6rem; color: var(--muted); }
.weather-range-box .wr-v { font-size: 0.74rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.weather-range { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.weather-sec-title {
font-size: 0.64rem; color: var(--muted); font-weight: 700; letter-spacing: 0.06em;
margin: 0.62rem 0 0.32rem; padding-top: 0.5rem; border-top: 1px dashed var(--rule);
}
.weather-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.5rem;
}
.weather-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem; font-size: 0.72rem; }
.weather-cell .wc-k { color: var(--muted); white-space: nowrap; }
.weather-cell .wc-v { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.weather-aqi { display: inline-flex; align-items: center; gap: 0.25rem; }
.weather-aqi .aqi-dot, .weather-rows .aqi-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.weather-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.weather-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; font-size: 0.72rem; }
.weather-row .wr-label { color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.weather-row .wr-val {
color: var(--ink); font-weight: 700; text-align: right; display: inline-flex; align-items: center;
gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end;
}
.weather-row .wr-val.wr-na { font-weight: 600; color: var(--muted); flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.wr-sub { display: block; width: 100%; font-size: 0.64rem; font-weight: 500; color: var(--muted); margin-top: 0.1rem; }
.weather-cloth {
display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.74rem; color: var(--ink);
background: var(--bg3); border: 1px solid var(--rule); border-radius: 12px; padding: 0.45rem 0.55rem;
line-height: 1.45;
}
.weather-cloth .wc-icon { font-size: 1.05rem; line-height: 1.1; }
.weather-updated { font-size: 0.62rem; color: var(--muted); text-align: right; margin-top: 0.45rem; opacity: 0.8; }
.weather-foot {
display: flex; gap: 0.3rem; padding: 0.45rem 0.55rem 0.55rem; border-top: 1px solid var(--rule);
align-items: center; flex-shrink: 0;
}
.weather-foot input {
flex: 1; min-width: 0; padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 8px;
background: var(--bg2); color: var(--ink); font-size: 0.72rem; outline: none; font-family: var(--font);
}
.weather-foot input:focus { border-color: var(--accent); }
.weather-mini-btn {
border: 1px solid var(--rule); background: var(--bg2); color: var(--muted); border-radius: 8px;
font-size: 0.7rem; padding: 0.28rem 0.5rem; cursor: pointer; white-space: nowrap; font-family: var(--font);
}
.weather-mini-btn:hover { color: var(--accent); border-color: var(--accent); }
.weather-loading { font-size: 0.74rem; color: var(--muted); text-align: center; padding: 1.2rem 0; }
@media (max-width: 599px) { .weather-window { display: none !important; } }