:root{
  --bg-blur: 6px;
  --bg-blur-zoom: 18px;
  --bg-zoom-scale: 1.3;
  --dim: 0.30;
  --bg-image: none;
  --nav-w: 70;
  --nav-h: 62;
  --nav-card-min: 104px;
  --nav-icon: 38px;
  --nav-gap: 11px;
  --clock-size: 96px;
  --clock-weight: 200;
  --date-size: 15px;
  --date-weight: 400;
  --breath-duration: 1s;
  --t-dur: .42s;
  --t-ease: cubic-bezier(.22,1,.36,1);
  --wall-w: 340px;
  --wall-h: 440px;
}
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color:#fff;
  background:#0b0d12;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
}
#bg{
  position:fixed; inset:-15%; z-index:-2;
  background-image: var(--bg-image), linear-gradient(135deg,#1b2434 0%,#0c1018 55%,#1a1a2e 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  filter: blur(var(--bg-blur));
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--t-dur) var(--t-ease),
              filter    var(--t-dur) var(--t-ease);
  will-change: transform, filter;
}
body.zoomed #bg{
  transform: scale(var(--bg-zoom-scale, 1.3));
  filter: blur(var(--bg-blur-zoom));
}
#scrim{
  position:fixed; inset:0; z-index:-1;
  background: rgba(0,0,0,var(--dim));
  transition: background .3s linear;
}

/* 首页：时钟 / 日期 / 搜索框 一体化 */
#home{
  flex: 1 1 auto;
  min-height: 0;
  position: relative; z-index: 1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap: clamp(14px, 2.4vh, 26px);
  padding: clamp(16px, 3vh, 32px) 20px;
  text-align:center;
  overflow-y: auto;
  overflow-x: hidden;
  transition: opacity var(--t-dur) ease,
              transform var(--t-dur) var(--t-ease),
              filter var(--t-dur) ease;
  will-change: opacity, transform, filter;
}
.foot{
  flex: 0 0 auto;
  text-align: center;
  padding: clamp(8px, 1.6vh, 18px) 18px clamp(10px, 2vh, 22px);
  font-size: clamp(11px, 1.15vw, 12.5px);
  line-height: 1.7;
  color: rgba(255,255,255,.46);
  letter-spacing: .04em;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
  user-select: none;
  position: relative;
  z-index: 1;
  transition: opacity var(--t-dur) ease,
              transform var(--t-dur) var(--t-ease),
              filter var(--t-dur) ease;
}
body.nav-open #home,
body.nav-open .foot{
  opacity: 0;
  transform: scale(.94);
  filter: blur(8px);
  pointer-events: none;
}

/* 时钟 */
#clock{
  font-size: var(--clock-size);
  font-weight: var(--clock-weight);
  line-height: 1;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  user-select: none;
  max-width: 100%;
  position: relative;
  color: rgba(255,255,255,.93);
  animation: clockGlow var(--breath-duration, 1s) cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: text-shadow, color;
}
@keyframes clockGlow{
  0%, 100%{
    text-shadow:
      0 0 1px   rgba(255,255,255,.90),
      0 0 5px   rgba(255,255,255,.40),
      0 0 13px  rgba(210,230,255,.22),
      0 0 32px  rgba(160,200,255,.13),
      0 0 68px  rgba(120,170,255,.07),
      0 3px 40px rgba(0,0,0,.35);
    color: rgba(255,255,255,.92);
  }
  50%{
    text-shadow:
      0 0 2px   rgba(255,255,255,1),
      0 0 16px  rgba(255,255,255,.90),
      0 0 44px  rgba(210,230,255,.68),
      0 0 92px  rgba(160,200,255,.48),
      0 0 180px rgba(120,170,255,.32),
      0 3px 40px rgba(0,0,0,.35);
    color: #fff;
  }
}
@media (prefers-reduced-motion: reduce){
  #clock{ animation: none; }
}
#dateline{
  font-size: var(--date-size);
  font-weight: var(--date-weight);
  letter-spacing: .14em;
  opacity: .88;
  text-shadow:
    0 0 10px rgba(255,255,255,.16),
    0 2px 16px rgba(0,0,0,.55);
  user-select:none;
  min-height:1.4em;
}

/* 搜索框 */
#searchWrap{
  position: relative;
  width: min(620px, 88vw);
}
.all-search{
  position: relative;
  display:flex;
  align-items:center;
  height: clamp(50px, 7vh, 56px);
  padding: 0 9px;
  border-radius: 999px;
  isolation: isolate;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 6px 24px rgba(0,0,0,.20),
    0 1px 0 rgba(255,255,255,.06);
  transition: background .45s ease, border-color .45s ease,
              box-shadow .45s ease, backdrop-filter .45s ease;
}
.all-search:focus-within{
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    0 10px 38px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.10);
}
.se, .s{
  position: relative;
  z-index: 2;
  flex:none;
  width: clamp(38px, 5.4vh, 44px);
  height: clamp(38px, 5.4vh, 44px);
  border-radius: 50%;
  display:grid; place-items:center;
  cursor: pointer;
  color: rgba(255,255,255,.88);
  background: transparent;
  border: none;
  transition: color .2s, background .2s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}
.se:hover, .s:hover{ color:#fff; background: rgba(255,255,255,.13); }
.se:active, .s:active{ transform: scale(.9); }
.se i{ font-size: 21px; line-height: 1; }
.s  i{ font-size: 20px; line-height: 1; }
.wd{
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #fff;
  font-size: clamp(15px, 1.6vh + 8px, 16.5px);
  font-family: inherit;
  line-height: normal;
  letter-spacing: .02em;
}
.wd::placeholder{ color: rgba(255,255,255,.52); }
.wd:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color:#fff;
}
#suggestBox{
  position:absolute;
  top: calc(100% + 10px); left:0; right:0;
  background: rgba(20,22,30,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  overflow: hidden;
  max-height: min(300px, 34vh);
  overflow-y: auto;
  z-index: 40;
  text-align: left;
  transition: opacity .16s, transform .16s, visibility .16s;
}
#suggestBox.hidden{ opacity:0; visibility:hidden; pointer-events:none; transform: translateY(-6px); }
.sug-item{
  padding: 11px 22px;
  font-size: 14px;
  color:#d7dce8;
  cursor: pointer;
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
  transition: background .12s;
}
.sug-item:hover, .sug-item.active{ background: rgba(255,255,255,.11); color:#fff; }
.foot .power{ display: block; }
.foot a{ color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s; }
.foot a:hover{ color: #fff; text-decoration: underline; }

/* 设置按钮 */
#settingsBtn{
  position: fixed; top: clamp(12px, 2vh, 18px); right: clamp(12px, 2vh, 18px); z-index: 90;
  width: clamp(38px, 5.4vh, 44px);
  height: clamp(38px, 5.4vh, 44px);
  display: grid; place-items: center;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: color .22s, transform .5s cubic-bezier(.3,1.4,.5,1),
              text-shadow .22s, opacity var(--t-dur) ease;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
#settingsBtn:hover{
  color:#fff;
  transform: rotate(90deg);
  text-shadow: 0 2px 20px rgba(0,0,0,.85);
}
#settingsBtn:active{ transform: rotate(90deg) scale(.9); }
#settingsBtn i{ font-size: clamp(20px, 2.8vh, 24px); line-height: 1; }
body.nav-open #settingsBtn{ opacity: 0; pointer-events: none; }

/* 设置面板 */
#settingsPanel{
  position: fixed;
  top: clamp(58px, 8vh, 72px);
  right: 18px;
  z-index: 95;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  width: min(410px, calc(100vw - 36px));
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow: hidden;
  border-radius: 18px;
  background: rgba(18,20,26,.88);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  color: #e8eaf0;
  font-size: 14px;
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.96) translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
#settingsPanel.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.panel-head{
  padding: 18px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-head span{ font-size:15px; font-weight:600; letter-spacing:.08em; }
.icon-btn{
  background:none; border:none; color:#9aa3b8; font-size:22px; line-height:1;
  cursor:pointer; padding:0 6px; border-radius:6px; transition:.15s;
}
.icon-btn:hover{ background: rgba(255,255,255,.1); color:#fff; }
.panel-inner{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 18px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.panel-inner::-webkit-scrollbar{ width: 8px; }
.panel-inner::-webkit-scrollbar-track{ background: transparent; margin: 8px 0; }
.panel-inner::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.panel-inner::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.30);
  background-clip: padding-box;
}
.hidden{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }

.sec{ margin-bottom: 22px; }
.sec > h3{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px;
  font-size: 11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:#7c86a0;
}
.sec > h3::after{ content:''; flex:1; height:1px; background: rgba(255,255,255,.08); }
label.lb{ display:block; font-size:12px; color:#95a0b6; margin:0 0 6px; }
.lb b{ color:#8fb2ff; font-weight:600; }
.hint{ font-size:11.5px; color:#6a7386; line-height:1.6; margin:8px 0 0; }
.hint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(255,255,255,.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: #a9b6cc;
}
input[type=text], input[type=url], select, textarea{
  width:100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color:#e8eaf0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
}
input[type=text]:focus, select:focus, textarea:focus{
  border-color: rgba(110,150,255,.65);
  background: rgba(255,255,255,.10);
}
input::placeholder{ color:#5c6478; }
select option{ background:#1b1e26; color:#e8eaf0; }
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px; margin:6px 0 0;
  background: rgba(255,255,255,.15); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#6f9dff; cursor:pointer; border:none;
  box-shadow: 0 0 0 3px rgba(111,157,255,.18);
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#6f9dff; cursor:pointer; border:none;
}
.switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; inset:0; cursor:pointer;
  background: rgba(255,255,255,.18); border-radius:22px; transition:.2s;
}
.switch .slider::before{
  content:''; position:absolute; width:16px; height:16px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background:#5b8cff; }
.switch input:checked + .slider::before{ transform: translateX(18px); }
button.btn{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color:#dfe4ee;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
button.btn:hover{ background: rgba(255,255,255,.16); }
button.btn:active{ transform: scale(.97); }
button.btn.primary{ background: rgba(88,126,255,.85); border-color: transparent; color:#fff; }
button.btn.primary:hover{ background: rgba(108,146,255,.95); }
button.btn.block{ width:100%; }
button.btn:disabled{ opacity:.5; cursor:not-allowed; }
.row{ display:flex; gap:8px; align-items:center; }
.row.mt{ margin-top: 12px; }
.engine-row{
  display:grid; gap:6px; margin-bottom:10px; padding-bottom:10px;
  grid-template-columns: 1fr 78px 28px;
  grid-template-areas:
    "name kw del"
    "url  url url"
    "icon sug sug";
  border-bottom: 1px dashed rgba(255,255,255,.07);
}
.engine-row .e-name{ grid-area:name; }
.engine-row .e-kw{ grid-area:kw; }
.engine-row .e-url{ grid-area:url; }
.engine-row .e-icon{ grid-area:icon; }
.engine-row .e-sug{ grid-area:sug; }
.engine-row .del{ grid-area:del; }
.group-row{
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  grid-template-columns: 24px 1fr 34px;
  align-items: center;
  padding: 3px 4px;
  border-radius: 8px;
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.group-row.dragging{ opacity: .35; }
.group-row.drag-over{
  background: rgba(110,150,255,.16);
  box-shadow: 0 0 0 1px rgba(110,150,255,.42) inset;
}
.drag-handle{
  display: grid; place-items: center;
  width: 24px; height: 32px;
  color: #7c86a0; cursor: grab;
  border-radius: 6px;
  transition: color .15s, background .15s;
  user-select: none;
}
.drag-handle:hover{ color: #fff; background: rgba(255,255,255,.09); }
.drag-handle:active{ cursor: grabbing; }
.drag-handle i{ font-size: 15px; line-height: 1; }
button.del{
  height:32px; padding:0;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#8b93a7; border-radius:6px;
  font-size:15px; line-height:1; cursor:pointer;
  transition:.15s;
}
button.del:hover{
  background: rgba(255,80,80,.18);
  border-color: rgba(255,80,80,.35);
  color:#ff9c9c;
}
.status{
  margin-top:10px; font-size:12px; line-height:1.6;
  color:#7c86a0; min-height:1.2em; word-break:break-all;
}
.status.ok{ color:#6ee7a8; }
.status.err{ color:#ff8f8f; }
.status.warn{ color:#ffc46b; }

/* =========================================================
   土墙
   ========================================================= */
#wall{
  position: fixed;
  bottom: 0;
  width: var(--wall-w, 340px);
  height: var(--wall-h, 440px);
  z-index: 2;
  user-select: none;
  overflow: visible;
  transition: opacity var(--t-dur) ease,
              transform var(--t-dur) var(--t-ease);
}
#wall.side-left{  left:  clamp(8px, 2vw, 40px); }
#wall.side-right{ right: clamp(8px, 2vw, 40px); }
#wall.hidden-wall{ opacity: 0; pointer-events: none; }
body.nav-open #wall{
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none;
}
#wallCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.58));
}
.wall-notes{
  position: absolute;
  inset: 0;
}
.wall-note{
  position: absolute;
  border-radius: 2px;
  padding: 16px 10px 10px;
  background: var(--c, #fff9c4);
  color: #3a2d16;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  cursor: grab;
  overflow: visible;
  box-sizing: border-box;
  transform-origin: 50% 0;
  transform: translate(-50%, 0) rotate(var(--rot, 0deg));
  animation: wallNoteSway var(--dur, 4.2s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
  box-shadow:
    0 4px 14px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -14px 24px -14px rgba(0,0,0,.28) inset;
  transition: box-shadow .2s;
}
@keyframes wallNoteSway{
  0%, 100% { transform: translate(-50%, 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate(-50%, 0) rotate(calc(var(--rot, 0deg) + var(--sway, 1.6deg))); }
}
.wall-note:hover{
  box-shadow:
    0 8px 22px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -14px 24px -14px rgba(0,0,0,.28) inset;
}
.wall-note.dragging,
.wall-note.resizing{
  animation: none;
  transform: translate(-50%, 0) rotate(var(--rot, 0deg));
  cursor: grabbing;
}
.wall-note.editing{
  animation: none;
  transform: translate(-50%, 0) rotate(0deg);
  cursor: text;
  box-shadow:
    0 10px 32px rgba(0,0,0,.6),
    0 0 0 2px rgba(255,255,255,.62) inset;
}
.wall-note.done{
  opacity: .70;
  filter: grayscale(.55);
}
.wall-note.done .wall-note-text{
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(0,0,0,.55);
}
.wall-note-pin{
  position: absolute;
  left: 50%;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8080 0%, #e53935 45%, #8b1a1a 100%);
  transform: translateX(-50%);
  box-shadow:
    0 1px 3px rgba(0,0,0,.45),
    inset -1px -1px 2px rgba(0,0,0,.30),
    inset 1px 1px 2px rgba(255,255,255,.35);
  pointer-events: none;
  z-index: 2;
}
.wall-note.done .wall-note-pin{
  background: radial-gradient(circle at 35% 30%, #b8b8b8 0%, #787878 45%, #383838 100%);
}
.wall-note-text{
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  white-space: pre-wrap;
  pointer-events: none;
  height: 100%;
}
.wall-note-input{
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: none; outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  resize: none;
  overflow: auto;
  box-sizing: border-box;
}
.wall-note-resize{
  position: absolute;
  right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s;
}
.wall-note:hover .wall-note-resize{ opacity: .78; }
.wall-note-resize::before{
  content: '';
  position: absolute;
  right: 4px; bottom: 4px;
  width: 7px; height: 7px;
  border-right: 1.5px solid rgba(0,0,0,.60);
  border-bottom: 1.5px solid rgba(0,0,0,.60);
  border-radius: 0 0 2px 0;
}
.wall-note-resize:hover{ opacity: 1 !important; }
.wall-note-resize:hover::before{ border-color: rgba(0,0,0,.88); }

/* 便签右键菜单 */
.wall-context-menu{
  position: fixed;
  z-index: 200;
  min-width: 138px;
  padding: 6px 0;
  background: rgba(28,30,38,.96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.58);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  font-size: 13px;
  color: #e8eaf0;
  user-select: none;
  animation: wallMenuIn .12s ease-out;
}
@keyframes wallMenuIn{
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wall-menu-item{
  padding: 8px 16px;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.wall-menu-item:hover{
  background: rgba(255,255,255,.10);
}
.wall-menu-item.danger{
  color: #ff9c9c;
}
.wall-menu-item.danger:hover{
  background: rgba(255,80,80,.20);
}
.wall-menu-sep{
  height: 1px;
  margin: 4px 8px;
  background: rgba(255,255,255,.08);
}

/* 导航面板 */
#navOverlay{
  position: fixed; inset:0; z-index: 80;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 20px;
  background: rgba(8,10,15,.14);
  opacity: 0;
  visibility: hidden;
}
#navOverlay:not(.hidden){
  opacity: 1;
  visibility: visible;
}
#navPanel{
  display:flex; flex-direction:column;
  width: calc(var(--nav-w) * 1vw);
  height: calc(var(--nav-h) * 1vh);
  max-width: 94vw;
  max-height: 90vh;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 90px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.16),
              inset 0 -1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  opacity: 0;
  transition: opacity var(--t-dur) var(--t-ease);
}
#navOverlay:not(.hidden) #navPanel{ opacity: 1; }
.nav-tabs{
  flex:none;
  display:flex; gap:8px;
  overflow-x:auto;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{ display:none; }
.nav-tab{
  flex:none;
  padding: 7px 17px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.nav-tab:hover{ color:#fff; background: rgba(255,255,255,.12); }
.nav-tab.active{
  color:#fff;
  background: rgba(255,255,255,.19);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 4px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.22);
}
#navBody{
  flex:1 1 auto;
  min-height: 0;
  overflow-y:auto;
  padding: 4px;
}
#navBody::-webkit-scrollbar{ width:6px; }
#navBody::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }
.nav-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--nav-card-min, 104px), 1fr));
  gap: var(--nav-gap, 11px);
}
.nav-card{
  position: relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 9px;
  padding: 16px 8px 14px;
  border-radius: 15px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff; text-decoration:none;
  font-size: 12.5px;
  text-align:center;
  transition: background .16s, transform .16s, border-color .16s, box-shadow .16s;
  overflow: hidden;
  cursor: pointer;
}
.nav-card:hover{
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.nav-card .fav{
  position: relative;
  width: var(--nav-icon, 38px);
  height: var(--nav-icon, 38px);
  border-radius: 11px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.09);
  overflow: hidden;
  flex: none;
}
.nav-card .fav img{
  width: calc(var(--nav-icon, 38px) * 0.63);
  height: calc(var(--nav-icon, 38px) * 0.63);
  object-fit: contain;
  opacity: 0;
  transition: opacity .28s ease;
  position: relative;
  z-index: 1;
}
.nav-card .fav img.ready{ opacity: 1; }
.nav-card .fav .fallback{
  position: absolute; inset:0;
  display:grid; place-items:center;
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.88);
  transition: opacity .28s ease;
}
.nav-card .fav img.ready + .fallback{ opacity: 0; }

/* 标题：溢出时悬停左右往返滚动 */
.nav-card .nm{
  width: 100%;
  max-width: 100%;
  padding: 0 4px;
  overflow: hidden;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  flex: none;
}
.nav-card .nm .nm-inner{
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-block;
  will-change: transform;
}
.nav-card .nm.is-overflow{
  justify-content: flex-start;
}
.nav-card .nm.is-overflow .nm-inner{
  animation: nmMarquee var(--nm-dur, 2.4s) ease-in-out infinite alternate;
  animation-play-state: paused;
}
.nav-card:hover .nm.is-overflow .nm-inner{
  animation-play-state: running;
}
@keyframes nmMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(var(--nm-shift, 0)); }
}
@media (prefers-reduced-motion: reduce){
  .nav-card .nm.is-overflow .nm-inner{ animation: none; }
}

.nav-del,
.nav-edit{
  position:absolute; top:5px;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  line-height:1;
  color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.28);
  opacity:0; transition:.15s;
  cursor:pointer;
  z-index: 2;
}
.nav-del{ right:5px; font-size:14px; }
.nav-edit{ right:29px; font-size:12px; }
.nav-card:hover .nav-del,
.nav-card:hover .nav-edit{ opacity:1; }
.nav-del:hover{ background: rgba(255,70,70,.8); color:#fff; }
.nav-edit:hover{ background: rgba(88,126,255,.85); color:#fff; }
.nav-add{
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.22);
  color: rgba(255,255,255,.5);
}
.nav-add:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.45);
  color:#fff;
}
.nav-add .plus{ font-size: 22px; font-weight: 300; line-height: 1; }
.nav-empty{
  grid-column: 1 / -1;
  text-align:center; color:#7c86a0; font-size:13px; padding: 40px 0;
}
#miniModal{
  position: fixed; inset:0; z-index: 120;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .18s, visibility .18s;
}
#miniModal.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.mini-box{
  width: min(360px, calc(100vw - 40px));
  padding: 22px;
  border-radius: 16px;
  background: rgba(24,27,34,.97);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  transform: scale(.96);
  transition: transform .18s;
}
#miniModal:not(.hidden) .mini-box{ transform: scale(1); }
.mini-box h4{ margin:0 0 16px; font-size:14px; font-weight:600; letter-spacing:.06em; }
.mini-box input{ margin-bottom:10px; font-size:13.5px; padding:10px 12px; }
.mini-actions{ display:flex; gap:10px; margin-top:16px; }
.mini-actions button{ flex:1; padding:9px 0; }

/* 导航卡片拖拽排序 */
.nav-card[draggable="true"]{
  cursor: grab;
}
.nav-card.dragging{
  opacity: .35;
  transform: scale(.96);
  cursor: grabbing;
}
.nav-card.drag-over{
  box-shadow:
    0 0 0 2px rgba(110,150,255,.85),
    0 10px 26px rgba(0,0,0,.28);
  background: rgba(110,150,255,.14);
}
/* 拖拽时禁止内部图片被拖动 */
.nav-card img{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* =========================================================
   导航过滤徽章（浮动提示）
   ========================================================= */
#navFilterHint{
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(110,150,255,.16);
  border: 1px solid rgba(110,150,255,.36);
  color: #cfe0ff;
  font-size: 12.5px;
  letter-spacing: .02em;
  align-self: flex-start;
  max-width: 100%;
  box-shadow: 0 4px 18px rgba(88,126,255,.22);
  animation: navHintIn .2s ease-out;
}
#navFilterHint.hidden{
  display: none;
}
@keyframes navHintIn{
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#navFilterHint > i{
  flex: none;
  font-size: 14px;
  line-height: 1;
  color: rgba(170,195,255,.95);
}
#navFilterText{
  font-weight: 600;
  color: #fff;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-filter-count{
  flex: none;
  font-size: 11.5px;
  color: rgba(170,195,255,.85);
  letter-spacing: .02em;
}
.nav-filter-tip{
  flex: none;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.68);
  letter-spacing: .02em;
}
#navPanel.filtering .nav-tabs{ display: none; }

/* 过滤结果网格 */
.nav-search-grid .nav-card{ cursor: pointer; }

/* 屏幕外隐藏输入框（承接导航过滤键盘输入） */
#navFilterInput{
  position: fixed;
  top: -200px;
  left: -200px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
  font-size: 16px;
}

@media (max-width: 900px){
  #wall { display: none; }
}
@media (max-width: 520px){
  #settingsPanel{ top:56px; right:10px; left:10px; width:auto; }
  .all-search{ padding: 0 6px; }
  .wd{ font-size: 15px; padding: 0 8px; }
  #navPanel{ padding: 16px 14px 14px; border-radius:18px; }
  .nav-grid{ grid-template-columns: repeat(auto-fill, minmax(var(--nav-card-min, 86px), 1fr)); gap: var(--nav-gap, 8px); }
  .nav-card{ padding: 13px 6px 11px; }
  #navFilterHint{ height: 30px; padding: 0 11px; margin-bottom: 10px; font-size: 12px; }
  #navFilterText{ max-width: 160px; }
}
.nav-grid.hidden{ display: none !important; }