:root{
  --bg:#1A1A1D;
  --text:#F2F2F2;
  --muted:rgba(242,242,242,.66);
  --gold:#E8C268;
  --accent:#E8C268;
  --overlay:rgba(15,14,14,.50);

  /* 默认关闭毛玻璃：面板/弹层统一使用深灰实底 */
  --surface:rgba(30,30,34,.90);
  --surface-2:rgba(38,38,43,.92);
  --surface-hover:rgba(48,48,54,.95);

  /* 毛玻璃开启时才使用的半透明白 */
  --glass:rgba(255,255,255,.10);
  --glass-strong:rgba(255,255,255,.14);

  --stroke:rgba(242,242,242,.16);
  --stroke-soft:rgba(242,242,242,.12);
  --shadow:0 16px 32px rgba(0,0,0,.40);

  /* 链接卡片：颜色 + 透明度（默认深灰半透明），可在设置里全局调整 */
  --card-bg:rgba(42,42,46,.50);
  --card-bg-hover:rgba(42,42,46,.66);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:"Inter","Segoe UI",system-ui,sans-serif;}

/* ===== 背景层 + 遮罩（遮罩色随配色主题变化） ===== */
#bg{
  position:fixed; inset:0; z-index:0;
  background-color:var(--bg); background-size:cover; background-position:center;
  transition:background-image .5s ease, background-color .5s ease;
}
#bg::after{ content:""; position:absolute; inset:0; background:var(--overlay); transition:background .4s ease; }

/* 天气特效画布：在背景之上、内容之下 */
.fx-canvas{ position:fixed; inset:0; z-index:5; pointer-events:none; }

/* ===== 顶部栏 ===== */
.topbar{
  position:fixed; top:32px; right:32px; z-index:50;
  width:384px; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.btn-icon{
  width:44px; height:44px; border-radius:22px; flex:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--stroke); color:var(--text);
  box-shadow:0 8px 20px rgba(0,0,0,.30);
  transition:background .2s ease, transform .2s ease;
}
.btn-icon:hover{background:var(--surface-hover);}
.btn-icon svg{stroke:currentColor;}
.btn-icon:active{transform:scale(.94);}
.btn-icon svg{width:22px;height:22px;}

.panel{
  width:384px; max-height:calc(100vh - 80px); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; padding:18px; border-radius:16px;
  background:var(--surface); border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  display:none; flex-direction:column; gap:14px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.panel::-webkit-scrollbar{width:0;height:0;display:none;}
.panel.open{display:flex; animation:pop .22s ease;}
@keyframes pop{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.panel h4{font-size:15px; font-weight:600;}
.set-section{display:flex; flex-direction:column; gap:10px;}
.set-label{font-size:12px; color:var(--muted); font-weight:500; letter-spacing:.5px;}

.preset-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.preset{
  height:64px; border-radius:10px; cursor:pointer; position:relative;
  border:1px solid rgba(255,255,255,.2); background-size:cover; background-position:center;
  transition:transform .15s ease;
}
.preset:hover{transform:translateY(-2px);}
.preset.active{border:2px solid #fff; box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.preset .check{position:absolute; right:5px; bottom:5px; width:20px;height:20px; display:none;}
.preset.active .check{display:block;}

.upload-row{
  display:flex; align-items:center; gap:8px; padding:0 12px; height:42px;
  border-radius:10px; border:1.5px dashed rgba(255,255,255,.30);
  color:var(--muted); cursor:pointer; font-size:13px;
}
.upload-row:hover{color:var(--text); border-color:rgba(255,255,255,.5);}
.upload-row svg{width:18px;height:18px;}

.theme-grid{display:flex; flex-wrap:wrap; gap:12px;}
.theme-item{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;}
.theme-dot{
  width:38px;height:38px;border-radius:50%;
  border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.theme-item.active .theme-dot{border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.theme-item .tname{font-size:11px; color:var(--muted);}

/* ===== 全局配色：文字颜色 / 卡片颜色 / 卡片透明度 ===== */
.swatch-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.swatch{
  width:26px; height:26px; border-radius:8px; cursor:pointer; flex:none;
  border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 0 0 1px rgba(0,0,0,.20);
  transition:transform .15s ease;
}
.swatch:hover{transform:translateY(-2px);}
.swatch.active{box-shadow:0 0 0 2px var(--accent);}
/* 自定义取色按钮 */
.swatch-pick{
  width:26px; height:26px; border-radius:8px; flex:none; padding:0; cursor:pointer;
  border:1px dashed rgba(255,255,255,.36); background:transparent;
  -webkit-appearance:none; appearance:none; overflow:hidden;
}
.swatch-pick::-webkit-color-swatch-wrapper{padding:0;}
.swatch-pick::-webkit-color-swatch{border:none; border-radius:7px;}
.swatch-pick::-moz-color-swatch{border:none; border-radius:7px;}

/* 透明度滑杆 */
.range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px;
  background:linear-gradient(90deg, rgba(255,255,255,.10), var(--accent));
  outline:none; cursor:pointer;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--accent); cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid var(--accent); cursor:pointer;
}
/* 恢复默认按钮 */
.reset-btn{
  margin-top:4px; padding:8px 12px; border-radius:10px; font-size:13px; cursor:pointer;
  background:var(--surface-hover); border:1px solid var(--stroke); color:var(--text);
  font-family:inherit;
}
.reset-btn:hover{filter:brightness(1.15);}

.switch-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 2px; font-size:14px; cursor:pointer; border-top:1px solid rgba(255,255,255,.08);
}
.switch-row input{
  appearance:none; -webkit-appearance:none; width:42px; height:24px; border-radius:12px;
  background:rgba(255,255,255,.22); position:relative; cursor:pointer; transition:.2s; flex:none;
}
.switch-row input::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:.2s;
}
.switch-row input:checked{background:var(--accent);}
.switch-row input:checked::after{left:20px;}
/* 分区里的首个开关不需要顶部分隔线 */
.set-inner > .switch-row:first-child{border-top:none; padding-top:2px;}
/* 必应壁纸：带副标题的开关行 */
.bing-row .sw-text{display:flex; flex-direction:column; gap:2px; text-align:left;}
.bing-row .sw-text em{font-style:normal; font-size:11px; color:var(--muted); line-height:1.4;}
/* 必应壁纸开启时，预设图与上传入口降权（仍可点，点了即切回） */
.set-inner.bing-on .preset-grid{opacity:.45;}

/* 设置分区：可折叠。flex:none 防止被面板压缩导致展开内容显示不完整 */
.set-group{
  flex:0 0 auto;
  background:var(--surface-2); border:1px solid var(--stroke-soft);
  border-radius:12px; overflow:hidden;
}
.set-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; cursor:pointer; font-size:14px; font-weight:600; user-select:none; color:var(--text);
}
.set-head:hover{opacity:.85;}
.set-caret{width:16px; height:16px; flex:none; transition:transform .25s ease; color:var(--muted);}
.set-group[data-open="0"] .set-caret{transform:rotate(-90deg);}
/* 折叠动画：0fr <-> 1fr。展开态额外给 min-height:min-content，避免内容被裁切 */
.set-body{display:grid; grid-template-rows:1fr; transition:grid-template-rows .28s ease; min-height:0;}
.set-group[data-open="1"] .set-body{min-height:min-content;}
.set-group[data-open="0"] .set-body{grid-template-rows:0fr; min-height:0;}
.set-inner{
  overflow:hidden; min-height:0; padding:0 14px 14px;
  display:flex; flex-direction:column; gap:10px;
}
/* 分区内小标题 */
.set-sub{
  font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.4px;
  display:flex; justify-content:space-between; align-items:center; margin-top:2px;
}
.set-sub b{color:var(--accent); font-weight:600;}

/* ===== 中心区 ===== */
.center{
  position:relative; z-index:10;
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; padding:40px 20px;
}
/* 问候文案（时间下方已有日期，此处不再重复显示日期） */
/* 整体做半透明处理，不抢时钟与搜索栏的视觉重心；hover 时轻微提亮 */
.greeting-wrap{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.greeting{
  font-size:22px; font-weight:500; letter-spacing:.5px;
  color:rgba(255,255,255,.55); transition:color .3s ease;
}
.greeting:hover{color:rgba(255,255,255,.78);}
.greeting .g-hi{color:var(--accent); opacity:.62; font-weight:600; transition:opacity .3s ease;}
.greeting:hover .g-hi{opacity:.85;}

/* 模块显示开关：关闭后彻底移出布局 */
body.hide-greeting .greeting-wrap,
body.hide-time .time-wrap,
body.hide-search .searchbar,
body.hide-links .links-section{display:none !important;}

/* ===== 时间 + 弹层 ===== */
/* z-index 高于搜索栏(30/展开100)，确保弹出的时间详情绝对不被搜索框遮挡 */
.time-wrap{position:relative; z-index:120; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:default;}
.time-wrap::after{content:""; position:absolute; top:100%; left:-40px; right:-40px; height:14px; z-index:1;}
.clock{font-size:64px; font-weight:700; letter-spacing:1px;}
.time-sub{font-size:14px; color:var(--muted);}
.popover{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:340px; padding:12px; border-radius:16px; display:none;
  flex-direction:column; gap:8px; z-index:40;
  background:var(--surface); border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}
.time-wrap:hover .popover, .time-wrap.pinned .popover{display:flex; animation:pop .2s ease;}
.popover .lunar{font-size:14px; font-weight:500; color:var(--gold); text-align:center;}
.divider{height:1px; background:rgba(255,255,255,.14);}
.city-rows{display:flex; flex-direction:column; gap:10px;}
.city-row{display:flex; justify-content:space-between; align-items:center;}
.city-row .c-name{font-size:14px; color:var(--muted);}
.city-row .c-time{font-size:16px; font-weight:700;}

/* ===== 搜索栏（z-index 高于网址区，避免下拉被遮挡） ===== */
.searchbar{
  position:relative; z-index:30;
  width:640px; max-width:92vw; height:60px; padding:8px;
  display:flex; align-items:center; gap:10px; border-radius:30px;
  background:var(--card-bg); border:1px solid var(--stroke-soft);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* 未聚焦时较低调，聚焦时提亮边框与底色，给出明确反馈 */
.searchbar:focus-within{ background:var(--card-bg-hover); border-color:var(--stroke); }
.engine-wrap{position:relative; display:flex; align-items:center; height:100%;}
.engine-btn{
  display:flex; align-items:center; gap:4px; padding:6px; border-radius:14px;
  cursor:pointer; background:transparent; border:none; height:100%;
}
.engine-btn:hover{background:rgba(255,255,255,.08);}
.engine-btn:active{transform:scale(.97);}
.engine-chip{display:flex; width:36px; height:36px; border-radius:10px; align-items:center; justify-content:center;}
.engine-chip svg{width:24px; height:24px;}
.caret{width:14px; height:14px;}
.search-input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-size:16px; font-family:inherit; min-width:0;
}
.search-input::placeholder{color:var(--muted);}
.search-go{
  width:44px; height:44px; border-radius:22px; flex:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.20);
}
.search-go:hover{background:rgba(255,255,255,.22);}
.search-go svg{width:20px; height:20px;}

/* 搜索引擎下拉（在 .engine-wrap 内，绝对定位于按钮下方） */
/* 下拉展开时，把整个搜索栏临时抬到最高层，确保绝对不被网址区遮挡 */
.searchbar.dp-open{z-index:100;}
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; width:200px;
  padding:8px; border-radius:16px; display:none; flex-direction:column; gap:4px;
  background:var(--surface); border:1px solid var(--stroke);
  box-shadow:var(--shadow); z-index:100;
}
.dropdown.open{display:flex; animation:pop .18s ease;}
/* 选项带灰底，避免后方图标透过影响视觉 */
.engine-item{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; background:var(--surface-2);}
.engine-item:hover{background:var(--surface-hover);}
.engine-item.active{background:var(--surface-hover); box-shadow:inset 0 0 0 1px var(--accent);}
.engine-item .e-chip{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
.engine-item .e-chip svg{width:16px; height:16px;}
.engine-item .e-name{font-size:14px;}

/* ===== 网址（轮播 + 多种显示方式） ===== */
.links-section{display:flex; flex-direction:column; align-items:center; gap:14px; width:760px; max-width:94vw;}
.links-title{font-size:14px; font-weight:500; color:var(--muted);}
/* 排序模式提示条（默认隐藏，进入排序模式时显示） */
.sort-banner{
  display:none; align-items:center; gap:12px;
  padding:7px 14px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--stroke);
}
.sort-tip{font-size:13px; color:var(--text);}
.sort-done{
  padding:5px 14px; border-radius:14px; font-size:13px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#111; font-weight:600;
}
.sort-done:hover{filter:brightness(1.08);}
.links-carousel{position:relative; display:flex; align-items:center; gap:10px; width:100%;}
.links-viewport{
  overflow:hidden; flex:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}
/* 列优先流：严格两行，溢出走右侧翻页。列宽由 grid-auto-columns 统一控制 */
.links-strip{
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto);
  grid-auto-columns:100px; gap:16px; padding:6px;
  transition:transform .35s ease; will-change:transform;
}
.links-strip.mode-icon{grid-auto-columns:72px;}
/* 全名称：列宽由 JS 按最长名称测量后写入 --name-col，所有卡片等宽居中对称 */
.links-strip.mode-name{grid-auto-columns:var(--name-col,150px);}
/* 竖型半透明右侧箭头：点击滑动显示其他网址 */
.links-arrow{
  flex:none; width:30px; align-self:stretch; min-height:92px; border-radius:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text);
  background:var(--card-bg); border:1px solid var(--stroke-soft);
  transition:background .2s ease;
}
.links-arrow:hover{background:var(--card-bg-hover);}
.links-arrow svg{width:18px; height:18px;}
.links-arrow svg path{stroke:currentColor;}
.links-arrow.disabled{opacity:.28; pointer-events:none; cursor:default;}

/* 卡片基础 */
.site-card{
  width:100%; min-width:0; height:92px; border-radius:16px; padding:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--card-bg); border:1px solid var(--stroke-soft);
  cursor:pointer; position:relative; text-decoration:none; color:inherit;
  transition:transform .15s ease, background .2s ease;
}
/* 可拖动排序（默认不拖动：保持正常点击跳转指针；仅排序模式下才可拖） */
.site-card[draggable="true"]{cursor:grab;}
.site-card[draggable="true"]:active{cursor:grabbing;}
.site-card.dragging{opacity:.4;}
.site-card.drag-over{outline:2px solid var(--accent); outline-offset:2px; background:rgba(255,255,255,.12);}
/* 排序模式：整条 strip 进入可拖状态，并给出入口视觉提示 */
.links-strip.sorting .site-card{cursor:grab;}
.links-strip.sorting .site-card::before{
  content:""; position:absolute; top:6px; left:6px; width:14px; height:10px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 2px, transparent 2px 4px);
  border-radius:3px; opacity:.7; pointer-events:none;
}
.site-card:hover{transform:translateY(-3px); background:var(--card-bg-hover);}
.site-card .s-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none;}
.site-card .s-icon svg{width:22px; height:22px;}
.site-card .s-name{
  font-size:13px; text-align:center; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 图标类型：图片（favicon / 自定义）与 文字首字 */
.s-icon.img{background:rgba(255,255,255,.10) !important; overflow:hidden; padding:5px;}
.s-icon.img img{width:100%; height:100%; object-fit:contain; display:block; border-radius:6px;}
.s-icon.letter{
  color:#fff; font-weight:700; font-size:20px; line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.links-strip.mode-name .s-icon.letter{font-size:13px;}
.links-strip.mode-name .s-icon.img{padding:3px;}
.site-card.add{border:1.5px dashed var(--stroke); background:transparent; justify-content:center;}
.site-card.add:hover{background:var(--card-bg);}
.site-card.add .s-icon{border:1.5px dashed var(--stroke); width:40px; height:40px;}
.site-card.add .s-icon svg{stroke:var(--muted);}
.site-card.add .s-name{color:var(--muted);}
.site-card .del{
  position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  background:#e2483a; color:#fff; border:none; cursor:pointer; display:none;
  align-items:center; justify-content:center; font-size:13px; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.site-card.custom:hover .del{display:flex;}

/* 仅图标 */
.links-strip.mode-icon .site-card{width:100%; height:72px; padding:0; gap:0; justify-content:center;}
.links-strip.mode-icon .site-card .s-icon{width:44px; height:44px;}
.links-strip.mode-icon .site-card .s-name{display:none;}
/* 全名称：所有卡片等宽（宽度=最长名称，由 JS 测量），内容水平居中对称 */
.links-strip.mode-name .site-card{
  width:100%; height:48px; flex-direction:row; gap:10px; padding:0 14px; justify-content:center;
}
.links-strip.mode-name .site-card .s-icon{width:26px; height:26px;}
.links-strip.mode-name .site-card .s-icon svg{width:16px; height:16px;}
.links-strip.mode-name .site-card .s-name{font-size:13px; flex:0 1 auto;}
.links-strip.mode-name .site-card.add{padding:0 14px;}
/* 测量阶段：临时按内容撑开，量完即恢复 */
.links-strip.mode-name.measuring{grid-auto-columns:max-content;}
.links-strip.mode-name.measuring .site-card{width:max-content;}
.links-strip.mode-name.measuring .site-card .s-name{max-width:none; overflow:visible; text-overflow:clip;}

/* 网址显示方式选择 */
.mode-grid{display:flex; flex-wrap:wrap; gap:8px;}
.mode-opt{
  padding:7px 12px; border-radius:10px; font-size:13px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--muted);
  transition:all .15s ease;
}
.mode-opt:hover{color:var(--text); border-color:rgba(255,255,255,.28);}
.mode-opt.active{background:var(--accent); color:#111; border-color:var(--accent); font-weight:600;}
/* 设置项下方的说明小字 */
.set-hint{font-size:11px; line-height:1.6; color:var(--muted);}

/* 仅供 SEO 的视觉隐藏文本（仍可被搜索引擎读取） */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 版权信息（上方带一行提示小字，字号与效果与版权一致） */
.site-footer{
  position:fixed; left:0; right:0; bottom:14px; z-index:20;
  text-align:center; font-size:12px; color:rgba(255,255,255,.30);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  pointer-events:none; transition:color .25s ease;
}
.footer-main{display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;}
.footer-tip{font-size:12px; color:inherit; letter-spacing:.2px;}
.site-footer:hover{color:rgba(255,255,255,.62);}
.site-footer a{color:rgba(255,255,255,.38); text-decoration:none; pointer-events:auto; transition:color .2s ease;}
.site-footer:hover a{color:rgba(255,255,255,.70);}
.site-footer a:hover{color:#fff; text-decoration:underline;}
.footer-link{
  pointer-events:auto; cursor:pointer; font-size:12px; color:rgba(255,255,255,.38);
  background:transparent; border:none; padding:0; font-family:inherit; transition:color .2s ease;
}
.site-footer:hover .footer-link{color:rgba(255,255,255,.70);}
.footer-link:hover{color:#fff; text-decoration:underline;}
.footer-sep{color:rgba(255,255,255,.22);}
.site-footer:hover .footer-sep{color:rgba(255,255,255,.40);}

/* 右键菜单 */
.ctx-menu{
  position:fixed; z-index:200; min-width:118px; padding:6px; border-radius:12px;
  background:var(--surface); border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}
.ctx-menu[hidden]{display:none;}
.ctx-item{padding:9px 12px; border-radius:8px; font-size:13px; cursor:pointer; color:var(--text); transition:background .15s ease;}
.ctx-item:hover{background:rgba(255,255,255,.10);}
.ctx-item.ctx-del{color:#ff7a6e;}
.ctx-item.ctx-del:hover{background:rgba(226,72,58,.20);}

/* ===== 添加弹窗 ===== */
.modal-mask{
  position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.modal-mask.open{display:flex;}
.modal{
  width:340px; padding:22px; border-radius:18px;
  background:var(--surface); border:1px solid var(--stroke);
  box-shadow:0 24px 48px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:14px;
}
.modal h3{font-size:16px; font-weight:600;}
.modal label{font-size:12px; color:var(--muted); margin-bottom:4px; display:block;}
.modal input{
  width:100%; padding:10px 12px; border-radius:10px; font-size:14px;
  background:rgba(255,255,255,.08); border:1px solid var(--stroke);
  color:var(--text); outline:none; font-family:inherit;
}
.modal input:focus{border-color:rgba(255,255,255,.4);}
/* 自定义图标输入行：预览 + 链接输入 + 上传 */
.icon-row{display:flex; align-items:center; gap:8px;}
.icon-row input[type="text"], .icon-row input#siteIcon{flex:1; min-width:0;}
.icon-preview{
  width:38px; height:38px; flex:none; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.24);
  font-size:11px; color:var(--muted);
}
.icon-preview img{width:100%; height:100%; object-fit:contain; padding:4px;}
.icon-up{
  flex:none; padding:9px 12px !important; font-size:13px !important; white-space:nowrap;
}
.icon-hint{font-size:11px; line-height:1.6; color:var(--muted); margin-top:6px;}
.modal .row{display:flex; gap:10px; justify-content:flex-end; margin-top:4px;}
.modal button{
  padding:9px 16px; border-radius:10px; font-size:14px; cursor:pointer;
  border:1px solid var(--stroke); background:rgba(255,255,255,.10); color:var(--text);
}
.modal button.primary{background:#3a6df0; border-color:#3a6df0;}
.modal button:hover{filter:brightness(1.1);}

/* ===== 使用说明弹窗 ===== */
.help-modal{width:440px; max-width:92vw; max-height:84vh; overflow:auto; gap:16px; scrollbar-width:none; -ms-overflow-style:none;}
.help-modal::-webkit-scrollbar{width:0; height:0; display:none;}
.help-modal h3{font-size:17px; font-weight:600;}
.help-body{display:flex; flex-direction:column; gap:14px;}
.help-sec h4{font-size:14px; font-weight:600; margin-bottom:5px; color:var(--text);}
.help-sec p{font-size:13px; line-height:1.7; color:rgba(255,255,255,.78);}
.help-sec b{color:var(--accent); font-weight:600;}

/* ===== 毛玻璃效果 =====
 * 默认（body.glass-off）为深灰实底：不模糊、不透出壁纸，整体是深灰色调。
 * 用户开启“毛玻璃效果”后，仅把 surface 系列调成半透明并叠加模糊，
 * 不影响用户自定义的卡片颜色 / 文字颜色（它们是相互独立的 CSS 变量）。 */
body:not(.glass-off){
  --surface:rgba(30,30,34,.55);
  --surface-2:rgba(38,38,43,.60);
  --surface-hover:rgba(48,48,54,.72);
}
body:not(.glass-off) .panel,
body:not(.glass-off) .popover,
body:not(.glass-off) .dropdown,
body:not(.glass-off) .btn-icon,
body:not(.glass-off) .searchbar,
body:not(.glass-off) .site-card,
body:not(.glass-off) .links-arrow,
body:not(.glass-off) .ctx-menu,
body:not(.glass-off) .modal,
body:not(.glass-off) .sort-banner{
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

@media (max-width:520px){
  .searchbar,.links-section{width:92vw;}
  .clock{font-size:52px;}
  .topbar{width:auto; right:16px; left:16px; align-items:flex-end;}
  .panel{width:auto;}
}