/* 默认隐藏 app 容器，登录后通过 JS 显示 */
.app { display: none; }
/* ===== 花瓣飘落 ===== */
.petal{
  position:fixed;
  pointer-events:none;
  z-index:9998;
  opacity:0;
  will-change:transform;
  transform:translateZ(0);
  animation:petalFall linear infinite;
}
@keyframes petalFall{
  0%{opacity:0;transform:translateY(-30px)rotate(0deg)translateX(0)}
  10%{opacity:.5}
  50%{opacity:.4}
  90%{opacity:.3}
  100%{opacity:0;transform:translateY(calc(100vh + 60px))rotate(1080deg)translateX(120px)}
}
.petal:nth-child(1){left:3%;font-size:20px;animation-duration:14s;animation-delay:0s;color:#f9a8d4}
.petal:nth-child(2){left:12%;font-size:12px;animation-duration:18s;animation-delay:-4s;color:#fbcfe8;transform:scaleX(-1)}
.petal:nth-child(3){left:22%;font-size:24px;animation-duration:11s;animation-delay:-7s;color:#e9d5ff}
.petal:nth-child(4){left:35%;font-size:14px;animation-duration:16s;animation-delay:-2s;color:#f9a8d4}
.petal:nth-child(5){left:48%;font-size:18px;animation-duration:13s;animation-delay:-9s;color:#fae8ff;transform:scaleX(-1)}
.petal:nth-child(6){left:58%;font-size:10px;animation-duration:20s;animation-delay:-5s;color:#fbcfe8}
.petal:nth-child(7){left:70%;font-size:22px;animation-duration:15s;animation-delay:-3s;color:#e9d5ff;transform:scaleX(-1)}
.petal:nth-child(8){left:80%;font-size:11px;animation-duration:19s;animation-delay:-8s;color:#fbcfe8}
.petal:nth-child(9){left:90%;font-size:16px;animation-duration:12s;animation-delay:-1s;color:#f9a8d4}
.petal:nth-child(10){left:96%;font-size:8px;animation-duration:22s;animation-delay:-6s;color:#fae8ff}
@keyframes bgFlow{
  0%{opacity:.3;transform:scale(1) rotate(0deg);}
  50%{opacity:.6;transform:scale(1.05) rotate(180deg);}
  100%{opacity:.3;transform:scale(1) rotate(360deg);}
}
/* ===== ROOT VARIABLES ===== */
:root{
  /* ---------- 品牌色 (HSL) ---------- */
  --brand-h:127;
  --brand-s:45%;
  --brand-l:55%;
  --brand:hsl(var(--brand-h),var(--brand-s),var(--brand-l));
  --brand-light:hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) + 20%));
  --brand-dark:hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) - 15%));
  --brand-soft:hsla(var(--brand-h),var(--brand-s),var(--brand-l),.08);
  /* ---------- 背景 ---------- */
  --bg-start:#e8f0e8;
  --bg-mid:#e0ece0;
  --bg-end:#e8f0e8;
  --bg:#e8f0e8;
  --bg2:#dce8dc;
  /* ---------- 卡片 ---------- */
  --card:rgba(255,255,255,.85);
  --panel-bg:var(--card);
  --card-border:rgba(0,0,0,.06);
  --card-border-hover:hsla(var(--brand-h),var(--brand-s),var(--brand-l),.2);
  --card-hover:rgba(255,255,255,.65);
  /* ---------- 文字 ---------- */
  --text:#1a1a2e;
  --text2:hsla(var(--brand-h),60%,35%,.85);
  --text3:rgba(24,24,40,.35);
  /* ---------- 功能色 ---------- */
  --accent:var(--brand);
  --accent-soft:var(--brand-soft);
  --accent2:#7c4dff;
  --accent2-soft:hsla(var(--brand-h),var(--brand-s),var(--brand-l),.04);
  --accent3:#e040fb;
  --danger:#d63a6a;
  --danger-soft:rgba(214,58,106,.08);
  --success:#2ecc71;
  --warning:#f39c12;
  /* ---------- 毛玻璃 ---------- */
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.15);
  --glass-blur:20px;
  /* ---------- 输入 & 线条 ---------- */
  --input-bg:rgba(255,255,255,.35);
  --line:rgba(0,0,0,.03);
  --scrollbar:rgba(79,130,200,.1);
  /* ---------- 阴影系统 ---------- */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.04);
  --shadow-md:0 2px 8px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 4px 16px rgba(0,0,0,.08),0 8px 32px rgba(0,0,0,.08);
  --shadow-xl:0 8px 32px rgba(0,0,0,.1),0 16px 48px rgba(0,0,0,.1);
  --shadow:rgba(0,0,0,0);
  --shadow-hover:rgba(79,130,200,.04);
  /* ---------- 圆角 ---------- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-full:9999px;
  /* ---------- 动画 ---------- */
  --duration-fast:.15s;
  --duration-normal:.25s;
  --duration-slow:.3s;
  --ease-out:cubic-bezier(.4,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  /* ---------- 字号 ---------- */
  --font-size-title:24px;
  --font-size-subtitle:18px;
  --font-size-body:13px;
  --font-size-small:11px;
  --font-size-caption:10px;
  --line-height-title:1.2;
  --line-height-body:1.5;
  --line-height-small:1.4;
}
/* ===== 深色模式 ===== */
:root[data-theme="dark"]{
    --bg-start:#0f0f1a;
    --bg-mid:#161625;
    --bg-end:#1a1a2e;
    --bg:#0f0f1a;
    --bg2:#1a1a2e;
    --card:rgba(30,30,50,.65);
    --card-border:rgba(255,255,255,.06);
    --card-hover:rgba(40,40,60,.75);
    --text:#e0e0f0;
    --text2:rgba(200,210,240,.8);
    --text3:rgba(160,170,200,.4);
    --panel-bg:var(--card);
    --glass-bg:rgba(20,20,40,.6);
    --glass-border:rgba(255,255,255,.08);
    --input-bg:rgba(255,255,255,.12);
    --line:rgba(255,255,255,.04);
    --scrollbar:rgba(160,170,200,.15);
    --shadow:rgba(0,0,0,0);
    --shadow-hover:rgba(100,120,255,.06);
  }
/* ===== 焦点环 ===== */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* ===== 字体声明 ===== */
@font-face{font-family:'HarmonyOS Sans SC';src:url('/fonts/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'HarmonyOS Sans SC';src:url('/fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'HarmonyOS Sans SC';src:url('/fonts/HarmonyOS_Sans_SC_Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'HarmonyOS Sans SC';src:url('/fonts/HarmonyOS_Sans_SC_Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
::-webkit-scrollbar{width:0px;display:none}
/*hidden*/
/*hidden*/
::selection{background:var(--accent);color:var(--bg-start)}
body{
  overflow-x:hidden;
  font-family:'ZCOOL WenYiTi','HarmonyOS Sans SC','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background-color:#eef0f8;
  background:linear-gradient(135deg,var(--bg-start,#eef0f8),var(--bg-mid,#e4e2f5),var(--bg-end,#f0eef8));
  color:var(--text);
  min-height:100vh;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  transition:background .4s ease,color .3s ease;
  background-attachment:fixed;
  scrollbar-width:none;-ms-overflow-style:none;
}
body::-webkit-scrollbar{display:none;}
/* 平板调试：显示视口宽度 */
body::after{content:attr(data-viewport);position:fixed;bottom:4px;right:4px;font-size:10px;color:var(--text3);opacity:.3;z-index:9999;pointer-events:none;}
/* 聚焦模式 */
body.focus-mode .sidebar,
body.focus-mode .main .top-bar,
body.focus-mode .main .search-area,
body.focus-mode .main .grid,
body.focus-mode .main #stats,
body.focus-mode .footer{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
body.focus-mode .app{min-height:100vh;}
/* 背景模式 */
body.bg-mode .sidebar{opacity:.85;transition:all .5s;}
body.bg-mode .main{opacity:.85;transition:all .5s;}
body.bg-mode .footer{opacity:.4;transition:all .5s;}
body.bg-mode .top-btn{opacity:.7;}
body.bg-mode #bgModeBtn{opacity:1 !important;color:var(--accent) !important;}
.app{
  display:flex;
  max-width:1400px;
  margin:24px auto;
  padding:24px 32px;
  gap:28px;
  min-height:calc(100vh - 48px);
  position:relative;
  z-index:2;
  scrollbar-width:none;
}
.app::-webkit-scrollbar{display:none;}
/* ===== 毛玻璃侧边栏 ===== */
.sidebar{
  width:225px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:stretch;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:16px;
  padding:0 14px 30px;
  border:1px solid var(--card-border);
  transition:all .3s ease;
  box-shadow:none;
  position:relative;
  overflow:hidden;
}
.sidebar.collapsed{width:52px;padding:0 6px 30px;}
.sidebar.collapsed .logo-main span:not(.logo-icon){display:none;}
.sidebar.collapsed .sub{display:none;}
.sidebar.collapsed .cat .cat-text,.sidebar.collapsed .cat .num{display:none;}
.sidebar.collapsed .cat{padding:8px;justify-content:center;border-radius:10px;}
.sidebar.collapsed .sidebar-actions button{font-size:0;padding:8px;text-align:center;border-radius:10px;}
.sidebar.collapsed .sidebar-actions button::first-letter{font-size:14px;}
.sidebar.collapsed #sidebarCollapseBtn{font-size:0;}
.sidebar.collapsed #sidebarCollapseBtn::before{content:"▶";font-size:12px;}
.sidebar .cat.recent{}
.sidebar .logo{
  font-size:18px;
  font-weight:700;
  font-family:'JetBrains Mono',monospace;
  padding:4px 0 8px 6px;
  letter-spacing:2px;
  display:flex;
  align-items:center;
  gap:6px;
}
.logo-main{display:flex;align-items:center;gap:4px;}
.logo-icon{display:flex;align-items:center;animation:starSpin 2s ease-in-out infinite;color:var(--accent)}
@keyframes starSpin{0%,100%{transform:rotate(0deg)scale(1);opacity:1}50%{transform:rotate(180deg)scale(1.2);opacity:.8}}
.sidebar .logo .logo-main .xhh-text{font-size:22px;font-weight:600;font-style:italic;letter-spacing:2px;color:#fff;}
.sidebar .logo .logo-main .xhh-space{font-size:22px;font-weight:600;letter-spacing:1px;color:#fff;opacity:.8;}
.sidebar .logo span{
  background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sidebar .sub{
  font-size:9px;
  color:var(--text3);
  padding:0 0 12px 6px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.sidebar .cat{
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-size:var(--font-size-body);
  line-height:var(--line-height-body);
  font-weight:500;
  color:var(--text2);
  transition:all .2s;
  display:flex;
  align-items:center;
  gap:6px;
  background:transparent;
}
.cat-emoji{width:24px;text-align:center;flex-shrink:0;font-size:14px;}
.cat-text{flex:1;min-width:0;}
.sidebar .cat:hover{
  color:var(--accent);
  background:var(--accent-soft);
}
.sidebar .cat.active{
  color:var(--accent);
  font-weight:600;
  background:var(--accent-soft);
}
.sidebar .cat .num{
  font-size:var(--font-size-caption);
  line-height:var(--line-height-small);
  color:var(--text3);
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
}
.sidebar-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:20px;
}
.sidebar-actions button{
  width:100%;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--accent);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  backdrop-filter:blur(var(--glass-blur));
  transition:all .25s;
}
.sidebar-actions button:hover{
  color:var(--accent);
  background:var(--accent-soft);
  transform:translateY(-1px);
}
/* ===== 底部固定系统操作区 ===== */
.sidebar-sticky-bottom{
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.sidebar-sticky-bottom .sidebar-section-divider{
  display:none;
}
.sidebar-bottom-actions{
  display:flex;
  gap:4px;
  margin-top:4px;
}
.sidebar-bottom-actions button{
  flex:1;
  padding:8px 6px;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--accent);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all .25s;
}
.sidebar-bottom-actions button:hover{
  color:var(--accent);
  background:var(--accent-soft);
  transform:translateY(-1px);
}
.sidebar.collapsed .sidebar-sticky-bottom{
  border-top-color:transparent;
}
.sidebar.collapsed .sidebar-bottom-actions button{
  font-size:0;
  padding:8px;
  text-align:center;
  border-radius:10px;
}
.sidebar.collapsed .sidebar-bottom-actions button::first-letter{
  font-size:14px;
}
/* ===== 折叠 emoji tooltip ===== */
.sidebar.collapsed .sidebar-actions button,
.sidebar.collapsed .sidebar-bottom-actions button{
  position:relative;
}
.sidebar.collapsed .sidebar-actions button[data-tooltip]:hover::after,
.sidebar.collapsed .sidebar-bottom-actions button[data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding:4px 10px;
  font-size:12px;
  border-radius:6px;
  background:rgba(255,255,255,.92);
  color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  z-index:1000;
  pointer-events:none;
}
/* ===== 常用分类 ===== */
/* ===== 分类搜索输入框 ===== */
.cat-search{
  margin:0;
  padding:6px 10px;
  border-radius:20px;
  border:1px solid var(--card-border);
  background:var(--input-bg);
  color:var(--text);
  font-size:11px;
  outline:none;
  width:100%;
  transition:all .2s;
  font-family:inherit;
}
.cat-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.cat-search::placeholder{color:var(--text3);opacity:.6;font-size:10px;}
.sidebar.collapsed .cat-search{display:none;}
.cat-search-wrap{position:relative;margin:0;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line);}
.cat-search-wrap .cat-search{padding-right:24px;}
.clear-search-btn{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:11px;color:var(--text3);padding:2px 4px;z-index:10;line-height:1;border-radius:4px;transition:color .2s;}
.clear-search-btn:hover{color:var(--accent);}
.clear-search-btn.visible{display:block;}
.sidebar.collapsed .cat-search-wrap{display:none;}
/* ===== 分类与操作按钮之间的分隔线 ===== */
.sidebar-section-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:10px 0 6px;
  display:block;
  position:relative;
}
.sidebar-section-label{
  font-size:9px;
  color:var(--text3);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:1.5px;
  padding:4px 10px 2px;
  text-transform:uppercase;
  opacity:.6;
  line-height:1;
  display:flex;
  align-items:center;
}
.sidebar.collapsed .sidebar-section-divider,
.sidebar.collapsed .sidebar-section-label{display:none;}
/* ===== 待办清单 ===== */
.todo-section{
  margin-top:2px;
  border-top:1px solid var(--line);
  padding-top:4px;
}
.todo-header{
  font-size:10px;
  font-weight:600;
  color:var(--text3);
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:4px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;
}
.todo-count{
  font-size:8px;
  background:var(--accent-soft);
  color:var(--accent);
  padding:1px 5px;
  border-radius:8px;
  font-weight:500;
}
.todo-list{
  max-height:100px;
  overflow-y:auto;
  margin-bottom:2px;
}
.todo-list::-webkit-scrollbar{width:2px;}
.todo-list::-webkit-scrollbar-thumb{background:var(--text3);border-radius:2px;}
.todo-item{
  display:flex;
  align-items:center;
  gap:3px;
  padding:2px 3px;
  border-radius:4px;
  font-size:10px;
  color:var(--text2);
  cursor:pointer;
  transition:all .2s;
  overflow:hidden;
}
.todo-item:hover{background:var(--accent-soft);}
.todo-item .todo-check{
  width:12px;height:12px;
  border-radius:3px;
  border:1.5px solid var(--card-border);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;
  transition:all .2s;
}
.todo-item.done .todo-check{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.todo-item.done .todo-text{
  text-decoration:line-through;
  opacity:.4;
}
.todo-item .todo-text{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.todo-item .todo-del{
  width:14px;height:14px;
  border-radius:3px;
  border:none;
  background:transparent;
  color:var(--text3);
  font-size:7px;
  cursor:pointer;
  opacity:0;
  transition:all .2s;
  flex-shrink:0;
}
.todo-item:hover .todo-del{opacity:1;}
.todo-item .todo-del:hover{color:var(--accent);}
.todo-input-row{
  display:flex;
  gap:3px;
  align-items:center;
}
.todo-input-row input{
  flex:1;
  padding:3px 6px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:10px;
  outline:none;
  min-width:0;
  font-family:inherit;
  transition:all .2s;
}
.todo-input-row input:focus{
  border-color:rgba(255,255,255,.5);
  box-shadow:0 0 0 1px rgba(255,255,255,.2);
}
.todo-input-row input::placeholder{color:rgba(255,255,255,.4);}
.todo-add-btn{
  width:22px;height:22px;
  border-radius:4px;
  border:none;
  background:rgba(255,255,255,.2);
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.todo-add-btn:hover{opacity:.85;transform:scale(1.05);}
.empty-todo{
  font-size:9px;
  color:rgba(255,255,255,.4);
  text-align:center;
  padding:8px 0;
  font-family:'JetBrains Mono',monospace;
}
/* ===== 主区域 ===== */
.main{flex:1;min-width:0;}
.top-bar{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:8px 12px;
  box-sizing:border-box;
  gap:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:12px;
}
.top-clock{
  height:34px;display:flex;align-items:center;
  font-size:var(--font-size-title);
  font-weight:600;
  font-family:'JetBrains Mono',monospace;
  color:#fff;
  letter-spacing:2px;
  line-height:var(--line-height-title);
}
.top-date{height:34px;display:flex;align-items:center;font-size:11px;color:rgba(255,255,255,.75);font-family:'JetBrains Mono',monospace;}
.top-greeting{font-size:12px;font-weight:500;color:rgba(255,255,255,.85);}
.countdown{height:34px;display:flex;align-items:center;font-size:12px;font-family:'JetBrains Mono',monospace;padding:6px 18px;border-radius:16px;white-space:nowrap;font-weight:800;letter-spacing:2px;box-shadow:0 0 12px rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.35);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.holiday{height:34px;display:flex;align-items:center;font-size:12px;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.9);background:rgba(255,255,255,.15);padding:4px 14px;border-radius:16px;white-space:nowrap;border:1px solid rgba(255,255,255,.3);}
.restday{height:34px;display:flex;align-items:center;font-size:12px;font-family:'JetBrains Mono',monospace;font-weight:700;padding:4px 14px;border-radius:16px;white-space:nowrap;letter-spacing:1px;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;}
.top-right{display:flex;align-items:center;gap:8px;}
.top-btn{
  min-width:34px;height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(var(--glass-blur));
  transition:all .25s;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;
}
.top-btn.square{border-radius:14px!important;border:1px solid rgba(255,255,255,.2);overflow:hidden;}
#profileBtn{width:34px;height:34px;overflow:visible;}
.weather-btn{width:auto;min-width:40px;padding:0 20px;gap:4px;font-size:12px;border-radius:14px !important;font-family:'JetBrains Mono',monospace;white-space:nowrap;font-weight:700;letter-spacing:1px;}
.fc-icon{color:#fff;background:none !important;-webkit-background-clip:unset !important;background-clip:unset !important;-webkit-text-fill-color:unset !important;}
.rest-status{color:rgba(255,255,255,.7);font-size:11px;}
.top-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.2);
}
.petals-toggle.active{opacity:1 !important;color:#fff !important;font-size:12px;padding:0 10px;transition:none!important;}
.petals-toggle,.petals-toggle:hover,.petals-toggle:active,.petals-toggle:focus{color:#fff!important;border-color:rgba(255,255,255,.25)!important;background:rgba(255,255,255,.12)!important;opacity:1!important;font-size:12px!important;padding:0 10px!important;transition:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;}
/* ===== 搜索 ===== */
.search-area{padding:4px 0 24px;margin-top:28px;}
.search-row{
  display:grid;
  grid-template-columns:auto auto auto auto auto auto auto auto auto;
  gap:12px;
  align-items:center;
}
.search-wrap{position:relative;}
.search-wrap .si{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  pointer-events:none;
  color:var(--accent);
  opacity:.7;
}
.search-wrap input{
  width:100%;
  padding:12px 20px 12px 46px;
  border-radius:40px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text);
  font-size:14px;
  outline:none;
  backdrop-filter:blur(var(--glass-blur));
  font-family:'JetBrains Mono',monospace;
  transition:all .3s;
}
.search-wrap input:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.engine-btn{
  padding:8px 22px;
  border-radius:40px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text2);
  cursor:pointer;
  font-size:12px;
  backdrop-filter:blur(var(--glass-blur));
  transition:all .25s;
}
.engine-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}
/* ===== 卡片 - 更透更轻盈，无投影 ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:20px 10px;              /* 卡片间上下20px、左右10px */
  padding:8px 0 40px;
  transition:transform .15s ease-out;
  will-change:transform;
}
.card{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  text-decoration:none;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--card-border);
  cursor:pointer;
  padding:5px 14px;
  position:relative;
  box-shadow:none;
  min-height:40px;
  animation:cardFadeIn .35s ease-out backwards;
}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card:hover{
  border-color:var(--card-border-hover);
  transform:translateY(-4px);
  box-shadow:0 4px 16px var(--shadow-hover),0 8px 24px rgba(0,0,0,.04);
}
.card-img{
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  background:rgba(255,255,255,.9);
  flex-shrink:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.card:hover .card-img{
  transform:scale(1.08);
}
.card-name{
  font-size:var(--font-size-body);
  line-height:var(--line-height-small);
  color:var(--text2);
  font-weight:500;
  transition:color .2s;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.card:hover .card-name{
  color:var(--text);
}
.del-btn{
  position:absolute;
  top:4px;
  right:4px;
  width:20px;
  height:20px;
  border-radius:6px;
  background:var(--card);
  border:1px solid var(--card-border);
  color:var(--text3);
  font-size:10px;
  cursor:pointer;
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .15s,background .15s,color .15s,border-color .15s;
}
.card:hover .del-btn{
  opacity:1;
}
.del-btn:hover{
  background:var(--danger)!important;
  color:#fff!important;
  border-color:var(--danger)!important;
}
.cat-bar{
  width:3px;height:20px;border-radius:2px;flex-shrink:0;margin-right:2px;transition:opacity .2s,transform .2s;opacity:0;
}
.card:hover .cat-bar{
  opacity:1;
}
.empty{
  text-align:center;
  padding:60px 20px;
  color:var(--text3);
  font-family:'JetBrains Mono',monospace;
}
#stats{
  font-size:var(--font-size-caption);
  line-height:var(--line-height-small);
  color:var(--text3);
  padding:0 0 8px;
  font-family:'JetBrains Mono',monospace;
}
/* ===== 个人中心 ===== */
.profile-panel{
  position:fixed;
  top:80px;
  right:24px;
  width:100%;
  max-width:320px;
  background:var(--bg2);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-radius:20px;
  border:1px solid var(--card-border);
  padding:0;
  z-index:160;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  opacity:0;
  transform:translateY(-8px) scale(.96);
  pointer-events:none;
  transition:all .2s ease;
  overflow:hidden;
}
.profile-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:all;
}
.profile-header{
  padding:24px 20px 16px;
  text-align:center;
  background:linear-gradient(135deg,var(--accent-soft),transparent);
}
.profile-avatar{
  width:52px;height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  margin:0 auto 10px;
  box-shadow:0 4px 12px var(--shadow-hover);
}
.profile-name{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
}
.profile-role{
  font-size:10px;
  color:var(--text3);
  margin-top:2px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:1px;
}
.profile-stats{
  display:flex;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.profile-stat{
  flex:1;
  text-align:center;
}
.stat-num{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  font-family:'JetBrains Mono',monospace;
}
.stat-label{
  display:block;
  font-size:9px;
  color:var(--text3);
  margin-top:2px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;
}
.profile-actions{
  padding:12px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.profile-actions button{
  width:100%;
  padding:9px;
  border-radius:10px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text2);
  font-size:12px;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
}
.profile-actions button:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}
.profile-actions .profile-logout:hover{
  color:var(--danger);
  border-color:var(--danger);
  background:var(--danger-soft);
}
.profile-close{
  position:fixed;
  top:90px;right:34px;
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text2);
  font-size:14px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s ease;
  z-index:2;
  backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 2px 8px var(--shadow);
}
.profile-close:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
  transform:rotate(90deg) scale(1.1);
  box-shadow:0 0 16px var(--shadow-hover);
}
.profile-close:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}
/* ===== 个人设置区域 ===== */
.profile-section{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.profile-section h4{
  font-size:11px;
  font-weight:600;
  color:var(--accent2);
  margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;
}
.profile-section input{
  width:100%;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--input-bg);
  color:var(--text);
  font-size:11px;
  outline:none;
  font-family:inherit;
  margin-bottom:3px;
}
.profile-section input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.profile-section .row{
  display:flex;gap:6px;
}
.profile-section .row button{
  flex:1;
  padding:7px;
  border-radius:8px;
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.profile-section .row button:hover{opacity:.85;transform:translateY(-1px);}
.profile-section .msg{
  font-size:10px;
  margin-top:4px;
  font-family:'JetBrains Mono',monospace;
  min-height:14px;
}
/* 登录页：星际探索（stellar-exploration） */
/* 返回按钮 */
.back-button {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(100, 50, 200, 0.3);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(100, 50, 200, 0.3);
}
.back-button:hover {
    background: rgba(100, 50, 200, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(100, 50, 200, 0.5);
}
/* 星际背景 */
.stellar-background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}
/* 星系 */
.galaxy {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    will-change:transform;
    transform:translateZ(0);
    animation: galaxyRotate 60s linear infinite;
}
.galaxy-1 {
    top: 10%;
    right: 10%;
    opacity: 0.6;
}
.galaxy-2 {
    bottom: 20%;
    left: 15%;
    width: 200px;
    height: 200px;
    opacity: 0.4;
    animation-duration: 80s;
    animation-direction: reverse;
}
.galaxy-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #ffffff 0%, #ffaa00 50%, #ff6600 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 30px #ffaa00;
    animation: pulse 3s ease-in-out infinite;
}
.galaxy-arm {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 170, 0, 0.8) 30%, rgba(255, 170, 0, 0.3) 70%, transparent 100%);
    transform-origin: 0 50%;
    border-radius: 2px;
}
.arm-1 { transform: translate(0, -50%) rotate(0deg); }
.arm-2 { transform: translate(0, -50%) rotate(120deg); }
.arm-3 { transform: translate(0, -50%) rotate(240deg); }
/* 行星轨道 */
.planet-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    will-change: transform;
    animation: orbitRotate linear infinite;
}
.orbit-1 {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 30s;
}
.orbit-2 {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 45s;
}
.orbit-3 {
    width: 800px;
    height: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 60s;
}
.planet {
    position: absolute;
    border-radius: 50%;
    top: -5px;
    left: -5px;
}
.planet-1 {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #4a90e2 0%, #2171b5 100%);
    box-shadow: 0 0 10px #4a90e2;
}
.planet-2 {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 0 8px #e74c3c;
}
.planet-3 {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #f39c12 0%, #e67e22 100%);
    box-shadow: 0 0 6px #f39c12;
}
/* 星星 */
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
}
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffffff !important;
    border-radius: 50%;
    animation: twinkle 2s ease-in-out infinite;
}
.star:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.star:nth-child(2) { top: 40%; left: 70%; animation-delay: 0.5s; }
.star:nth-child(3) { top: 60%; left: 20%; animation-delay: 1s; }
.star:nth-child(4) { top: 80%; left: 80%; animation-delay: 1.5s; }
.star:nth-child(5) { top: 10%; left: 60%; animation-delay: 2s; }
.star:nth-child(6) { top: 30%; left: 90%; animation-delay: 0.3s; }
/* 流星 */
.meteors {
    position: absolute;
    width: 100%;
    height: 100%;
}
.meteor {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, #ffffff 0%, transparent 70%);
    border-radius: 50%;
    animation: meteorFall 3s linear infinite;
}
.meteor:nth-child(1) {
    top: 10%;
    left: 90%;
    animation-delay: 0s;
}
.meteor:nth-child(2) {
    top: 30%;
    left: 80%;
    animation-delay: 1s;
}
.meteor:nth-child(3) {
    top: 50%;
    left: 70%;
    animation-delay: 2s;
}
/* 太空尘埃 */
.space-dust {
    position: absolute;
    width: 100%;
    height: 100%;
}
.dust-particle {
    position: absolute;
    width: 1px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: dustFloat 8s ease-in-out infinite;
}
.dust-particle:nth-child(1) { top: 25%; left: 15%; animation-delay: 0s; }
.dust-particle:nth-child(2) { top: 45%; left: 35%; animation-delay: 2s; }
.dust-particle:nth-child(3) { top: 65%; left: 55%; animation-delay: 4s; }
.dust-particle:nth-child(4) { top: 85%; left: 75%; animation-delay: 6s; }
.dust-particle:nth-child(5) { top: 35%; left: 85%; animation-delay: 1s; }
/* 表单容器 */
.login-container {
    position: relative;
    z-index: 100;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}
.space-capsule {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9) 0%, rgba(10, 10, 30, 0.95) 100%);
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid rgba(100, 50, 200, 0.3);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 
        0 0 50px rgba(100, 50, 200, 0.3),
        inset 0 0 50px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}
.space-capsule::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(100, 50, 200, 0.8) 50%, transparent 100%);
    animation: scanLine 3s ease-in-out infinite;
}
.capsule-header {
    text-align: center;
    margin-bottom: 30px;
}
.status-lights {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
.status-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}
.status-light.active {
    background: #00ff88;
    box-shadow: 0 0 15px #00ff88;
    animation: statusBlink 2s ease-in-out infinite;
}
.capsule-header h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 300;
}
/* 表单样式 */
.form-group {
    position: relative;
    margin-bottom: 25px;
}
.form-group input {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(100, 50, 200, 0.3);
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
    backdrop-filter: blur(var(--glass-blur));
}
.form-group input:focus {
    outline: none;
    border-color: #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    background: rgba(255, 255, 255, 0.1);
}
.form-group label {
    position: absolute;
    top: 15px;
    left: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
}
.form-group input:focus + label,
.form-group input:valid + label {
    top: -8px;
    left: 15px;
    font-size: 12px;
    color: #00ff88;
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9) 0%, rgba(10, 10, 30, 0.95) 100%);
    padding: 0 8px;
    border-radius: 4px;
}
/* 登录框样式（适配深色星空背景） */
.login-box {
    width: 90%;
    max-width: 320px;
    background: rgba(10, 0, 32, 0.8);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(100, 50, 200, 0.3);
    border-radius: 20px;
    padding: 24px 24px;
    box-shadow: 0 0 50px rgba(100, 50, 200, 0.2);
}
.login-header { text-align: center; margin-bottom: 20px; }
.login-avatar { font-size: 48px; width:60px;height:60px;border-radius:50%;overflow:hidden;margin:0 auto 12px;background-position:center;background-repeat:no-repeat;background-size:cover; }
.login-title { font-size: 22px; font-weight: 600; color: #ffffff; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: rgba(255,255,255,.6); }
.login-body { }
.login-field { margin-bottom: 16px; }
.login-label { display: block; font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 6px; font-weight: 500; }
.login-field input[type="text"],
.login-field input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #ffffff;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.login-field input[type="text"]:focus,
.login-field input[type="password"]:focus {
    border-color: rgba(100, 50, 200, 0.6);
}
.login-field input::placeholder { color: rgba(255,255,255,.35); }
.login-options { display: flex; align-items: center; margin-bottom: 16px; }
.login-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.6); cursor: pointer; }
.login-remember input[type="checkbox"] { accent-color: var(--accent3); }
.login-error { text-align: center; font-size: 12px; color: #ff6b6b; margin-top: 10px; min-height: 18px; }
.login-text { }
.login-spinner { display: none; }
/* 登录页链接适配深色背景 */
#registerLink, #registerLink:hover { color: var(--accent) !important; }
/* 按钮样式 */
.login-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(100, 50, 200, 0.3);
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(100, 50, 200, 0.4);
}
.login-btn:active {
    transform: translateY(0);
}
.btn-energy {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    transition: left 0.5s ease;
}
.login-btn:hover .btn-energy {
    left: 100%;
}
.verify-btn {
    padding: 12px 16px;
    background: linear-gradient(135deg, #00ff88 0%, #0088ff 100%);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.verify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}
.verification-group {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.verification-group input {
    flex: 1;
}
/* 链接样式 */
.additional-links {
    text-align: center;
    margin-top: 20px;
}
.additional-links a {
    color: #00ff88;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
.additional-links a:hover {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
}
.divider {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 15px;
}
/* 隐藏类 */
.hidden {
    display: none;
}
/* 动画关键帧 */
@keyframes galaxyRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes orbitRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}
@keyframes meteorFall {
    0% {
        transform: translate(0, 0) rotate(45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-200px, 200px) rotate(45deg);
        opacity: 0;
    }
}
@keyframes dustFloat {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
    25% { transform: translateY(-20px) translateX(10px); opacity: 0.6; }
    50% { transform: translateY(-10px) translateX(-5px); opacity: 0.9; }
    75% { transform: translateY(-30px) translateX(15px); opacity: 0.4; }
}
@keyframes scanLine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}
@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
/* 响应式设计 */
@media (max-width: 480px) {
    .login-container {
        width: 95%;
        padding: 0 10px;
    }
    
    .space-capsule {
        padding: 20px;
    }
    
    .capsule-header h2 {
        font-size: 20px;
    }
    
    .form-group input {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .form-group label {
        font-size: 14px;
        top: 12px;
        left: 15px;
    }
    
    .login-btn {
        padding: 12px;
        font-size: 14px;
    }
    
    .galaxy {
        width: 200px;
        height: 200px;
    }
    
    .galaxy-2 {
        width: 150px;
        height: 150px;
    }
    
    .orbit-1, .orbit-2, .orbit-3 {
        width: 300px;
        height: 300px;
    }
}
@media (max-width: 320px) {
    .space-capsule {
        padding: 15px;
    }
    
    .verification-group {
        gap: 8px;
    }
    .verify-btn {
        padding: 10px 12px;
        font-size: 11px;
        min-width: 70px;
    }
}
body.bg-animated .login-box{
  background:rgba(10,0,32,.85)!important;
  border:1px solid rgba(100,50,200,.3)!important;
  border-radius:20px!important;
  box-shadow:0 0 30px rgba(100,50,200,.3),0 0 60px rgba(100,50,200,.15),inset 0 1px 0 rgba(255,255,255,.05)!important;
  
  backdrop-filter:blur(var(--glass-blur));
  padding:24px 24px!important;
  max-width:320px!important;
}
body.bg-animated .login-box .login-header{
  text-align:center;margin-bottom:12px;
}
body.bg-animated .login-box .login-title{
  color:#fff!important;
  text-shadow:0 0 20px rgba(255,255,255,.5);
  -webkit-text-fill-color:initial!important;
  background:none!important;
  font-size:20px!important;
  font-weight:600!important;
  letter-spacing:normal!important;
}
body.bg-animated .login-box .login-sub{
  color:rgba(255,255,255,.7)!important;
  font-size:11px!important;
  margin-top:4px!important;
  font-weight:300!important;
}
body.bg-animated .login-box .login-avatar{
  width:48px;height:48px;border-radius:50%;font-size:24px;
  background:rgba(100,50,200,.2)!important;
  box-shadow:0 0 20px rgba(100,50,200,.3)!important;
  margin:0 auto 12px!important;
}
body.bg-animated .login-field{
  margin-bottom:10px;
  position:relative;
}
body.bg-animated .login-box .login-field .login-label{
  color:rgba(255,255,255,.6)!important;
  font-size:11px!important;
  margin-bottom:3px!important;
  display:block;
}
body.bg-animated .login-box input[type="text"],
body.bg-animated .login-box input[type="password"]{
  width:100%;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(100,50,200,.3)!important;
  color:#fff!important;
  border-radius:10px!important;
  padding:15px 20px!important;
  font-size:14px!important;
  box-shadow:none!important;
  transition:all .3s ease!important;
  outline:none!important;
  box-sizing:border-box;
}
body.bg-animated .login-box input:focus{
  border-color:#00ff88!important;
  box-shadow:0 0 20px rgba(0,255,136,.3)!important;
}
body.bg-animated .login-box input::placeholder{
  color:rgba(255,255,255,.25)!important;
}
body.bg-animated .login-btn{
  width:100%!important;
  padding:15px!important;
  background:linear-gradient(135deg,var(--accent),var(--accent2))!important;
  border:none!important;
  border-radius:10px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:normal!important;
  cursor:pointer!important;
  box-shadow:0 5px 20px rgba(100,50,200,.3)!important;
  transition:all .3s ease!important;
  position:relative;overflow:hidden;
}
body.bg-animated .login-btn:hover{
  box-shadow:0 8px 25px rgba(100,50,200,.4)!important;
  transform:translateY(-2px)!important;
}
body.bg-animated #registerLink, body.bg-animated [onclick*="showForgotPwd"]{
  color:#00ff88!important;
  font-size:11px!important;
  transition:color .3s;
}
body.bg-animated #registerLink:hover, body.bg-animated [onclick*="showForgotPwd"]:hover{
  color:#ffffff!important;
  text-shadow:0 0 15px rgba(0,255,136,.8)!important;
}
body.bg-animated .login-error{
  color:rgba(255,100,100,.8)!important;
  font-size:12px;text-align:center;margin-top:8px;
}
body.bg-animated .login-remember span{
  color:rgba(255,255,255,.4)!important;
  font-size:12px;
}
body.bg-animated .login-remember input[type="checkbox"]{
  accent-color: var(--accent3);
}
body.bg-animated #pwdToggle{
  color:rgba(255,255,255,.25)!important;
}
body.bg-animated #loginOverlay .login-box{
  
}
@keyframes cardFloat{
  0%{opacity:0;transform:translateY(20px)scale(.96)}
  to{opacity:1;transform:translateY(0)scale(1)}
}
/* 星际探索 - 登录卡片发光效果（适配导航站登录表单） */
body.bg-animated .login-box{
  background:linear-gradient(135deg,rgba(30,30,60,.92),rgba(10,10,30,.96))!important;
  backdrop-filter:blur(var(--glass-blur))!important;
  border:2px solid rgba(100,50,200,.3)!important;
  border-radius:20px!important;
  padding:30px!important;
  max-width:320px!important;
  box-shadow:0 0 50px rgba(100,50,200,.3),inset 0 0 50px rgba(255,255,255,.05)!important;
  
  position:relative;overflow:hidden;
}
body.bg-animated .login-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(100,50,200,.8),transparent);
  animation:scanLine 3s ease-in-out infinite;
}
body.bg-animated .login-box .login-header{
  text-align:center;margin-bottom:12px;
}
body.bg-animated .login-box .login-title{
  color:#fff!important;
  text-shadow:0 0 20px rgba(255,255,255,.5)!important;
  -webkit-text-fill-color:initial!important;
  background:none!important;
  font-size:20px!important;
  font-weight:600!important;
  letter-spacing:normal!important;
}
body.bg-animated .login-box .login-sub{
  color:rgba(255,255,255,.7)!important;
  font-size:11px!important;
  font-weight:300!important;
  margin-top:4px!important;
}
body.bg-animated .login-box .login-avatar{
  width:48px;height:48px;border-radius:50%;font-size:24px;
  background:rgba(100,50,200,.2)!important;
  box-shadow:0 0 20px rgba(100,50,200,.3)!important;
  margin:0 auto 12px!important;
}
body.bg-animated .login-field{
  margin-bottom:10px;
  position:relative;
}
body.bg-animated .login-box .login-field .login-label{
  color:rgba(255,255,255,.6)!important;
  font-size:11px!important;
  margin-bottom:3px!important;
  display:block;
}
body.bg-animated .login-box input[type="text"],
body.bg-animated .login-box input[type="password"]{
  width:100%;
  padding:15px 20px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(100,50,200,.3)!important;
  border-radius:10px!important;
  color:#fff!important;
  font-size:14px!important;
  box-sizing:border-box;
  backdrop-filter:blur(var(--glass-blur));
  transition:all .3s ease!important;
  outline:none!important;
  font-family:inherit;
}
body.bg-animated .login-box input:focus{
  border-color:#00ff88!important;
  box-shadow:0 0 20px rgba(0,255,136,.3)!important;
  background:rgba(255,255,255,.08)!important;
}
body.bg-animated .login-box input::placeholder{
  color:rgba(255,255,255,.25)!important;
}
body.bg-animated .login-btn{
  width:100%!important;
  padding:15px!important;
  background:linear-gradient(135deg,var(--accent),var(--accent2))!important;
  border:none!important;
  border-radius:10px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:normal!important;
  cursor:pointer!important;
  position:relative!important;
  overflow:hidden!important;
  box-shadow:0 5px 20px rgba(100,50,200,.3)!important;
  transition:all .3s ease!important;
  margin-bottom:10px!important;
}
body.bg-animated .login-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 25px rgba(100,50,200,.4)!important;
}
body.bg-animated .login-btn:active{
  transform:translateY(0)!important;
}
body.bg-animated .login-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .5s ease;
}
body.bg-animated .login-btn:hover::after{
  left:100%;
}
body.bg-animated .login-options{
  justify-content:space-between!important;
}
body.bg-animated [onclick*="showForgotPwd"],body.bg-animated [onclick*="showRegister"]{
  color:#00ff88!important;
  font-size:11px!important;
}
body.bg-animated [onclick*="showForgotPwd"]:hover,body.bg-animated [onclick*="showRegister"]:hover{
  color:#ffffff!important;
  text-shadow:0 0 15px rgba(0,255,136,.8)!important;
}
body.bg-animated .login-remember span{
  color:rgba(255,255,255,.4)!important;
  font-size:12px;
}
body.bg-animated .login-remember input[type="checkbox"]{
  accent-color: var(--accent3);
}
body.bg-animated #pwdToggle{
  color:rgba(255,255,255,.25)!important;
}
body.bg-animated .login-error{
  color:rgba(255,100,100,.8)!important;
  font-size:12px;text-align:center;margin-top:8px;
}
@keyframes scanLine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
@keyframes cardFloat{0%{opacity:0;transform:translateY(20px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}
body.bg-animated .login-box:hover{
  box-shadow:0 0 60px rgba(100,50,200,.4),0 0 80px rgba(100,50,200,.2),inset 0 0 50px rgba(255,255,255,.05)!important;
  border-color:rgba(100,50,200,.5)!important;
}
body.bg-animated .login-box .login-btn:hover::after {
  left: 100%;
}
body.bg-animated .login-box input:hover{
  border-color:rgba(100,50,200,.5)!important;
  box-shadow:0 0 15px rgba(100,50,200,.2)!important;
}
body.bg-animated .login-box{
  transition:all .4s ease!important;
}
/* 星空状态灯 */
body.bg-animated .login-box .login-header::before{
  content:'';display:block;
  width:44px;height:8px;margin:0 auto 14px;
  background:
    radial-gradient(circle at 4px 4px,#00ff88 4px,transparent 4px),
    radial-gradient(circle at 22px 4px,rgba(255,255,255,.2) 4px,transparent 4px),
    radial-gradient(circle at 40px 4px,rgba(255,255,255,.2) 4px,transparent 4px);
  animation:statusBlink 2s ease-in-out infinite;
}
/* ===== 软件选择列表 ===== */
.app-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:2px;}
.app-item:hover{background:var(--accent-soft);}
.app-item .app-item-icon{font-size:16px;flex-shrink:0;}
.app-item .app-item-name{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ===== 弹窗/面板 ===== */
.modal-overlay{
  display:none;
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  z-index:200;
  background:rgba(0,0,0,.2);
  backdrop-filter:blur(var(--glass-blur));
  justify-content:center;
  align-items:center;
}
.modal-overlay.show{display:flex;}
#loginOverlay{backdrop-filter:blur(12px);background:rgba(0,0,0,0.2);}
.modal-overlay.no-blur{backdrop-filter:none;background:rgba(0,0,0,.12);}
.modal-overlay.no-blur .modal{transition:opacity .15s;opacity:0;}
.modal-overlay.no-blur.show .modal{opacity:1;}
/* ===== 快捷键提示 ===== */
.shortcut-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
.shortcut-modal{background:var(--bg2);backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:16px;padding:24px 28px;max-width:400px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,.4)}
.shortcut-modal h3{font-size:16px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line)}
.shortcut-row:last-child{border-bottom:none}
.shortcut-key{background:var(--card);border:1px solid var(--card-border);border-radius:6px;padding:2px 8px;font-size:11px;font-family:monospace;white-space:nowrap}
.modal{
  position:relative;
  background:var(--panel-bg,var(--card));
  backdrop-filter:blur(var(--glass-blur));
  border-radius:16px;
  padding:28px;
  max-width:400px;
  width:90%;
  border:1px solid var(--card-border);
  box-shadow:0 20px 40px rgba(0,0,0,.2);
}
.modal h3{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.modal input, .modal textarea{
  width:100%;
  padding:12px 16px;
  margin-bottom:10px;
  border-radius:16px;
  border:1px solid var(--card-border);
  background:var(--input-bg);
  color:var(--text);
  font-size:13px;
  outline:none;
}
.modal input:focus, .modal textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.btns{display:flex;gap:10px;}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--bg-start);
  font-weight:600;
  padding:12px;
  border:none;
  border-radius:20px;
  cursor:pointer;
  flex:1;
  transition:all .2s;
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);}
.btn-cancel{
  background:var(--card);
  border:1px solid var(--card-border);
  color:var(--text2);
  flex:1;
  border-radius:20px;
  cursor:pointer;
  transition:all .2s;
}
.btn-cancel:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.admin-panel{
  position:fixed;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%) scale(.92);
  width:420px;
  max-height:70vh;
  background:var(--panel-bg,var(--card));
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  z-index:150;
  padding:0;
  border-radius:16px;
  border:1px solid var(--card-border);
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  visibility:hidden;
}
.admin-panel::-webkit-scrollbar{display:none;}
.admin-panel.open{
  opacity:1;
  transform:translateX(-50%) translateY(-50%) scale(1);
  visibility:visible;
}
.admin-panel .panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  cursor:grab;
  user-select:none;
}
.admin-panel .panel-header:active{cursor:grabbing;}
.admin-panel .panel-header h3{
  font-size:14px;
  font-weight:700;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:1px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.admin-panel .panel-header .close-btn{
  width:26px;height:26px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text2);
  font-size:14px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.admin-panel .panel-header .close-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}
.admin-panel .panel-body{
  padding:16px 20px 24px;
}
#allNotesPanel{width:85vw;min-width:620px;max-width:1200px;height:calc(83vh + 60px);max-height:calc(83vh + 60px);transform:translateX(-50%) translateY(-50%);display:flex;flex-direction:column;background:var(--bg2);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s;}
#allNotesPanel.open{opacity:1;visibility:visible;}
/* 全屏模式 */
#allNotesPanel.np-fullscreen{width:98vw!important;height:98vh!important;max-width:none!important;max-height:none!important;}
#filePanel.file-fullscreen{width:98vw!important;height:98vh!important;max-width:none!important;max-height:none!important;}
/* ===== 云盘面板 UI 美化 ===== */
#filePanel .panel-body{padding:20px 24px 100px !important;gap:0;}

/* 上传区域 */
#fileUploadZone{
  transition:all .25s cubic-bezier(.4,0,.2,1) !important;
}
#fileUploadZone:hover{
  border-color:var(--accent) !important;
  background:var(--accent-soft) !important;
  transform:translateY(-1px);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
#fileUploadZoneInner{transition:opacity .25s;}

/* 存储统计卡片 */
.file-storage-card{
  background:linear-gradient(135deg,var(--card),rgba(255,255,255,.4));
  border:1px solid var(--card-border);
  border-radius:var(--radius-md,12px);
  padding:12px 16px;
  margin-bottom:10px;
  flex-shrink:0;
  backdrop-filter:blur(10px);
  transition:box-shadow .25s;
}
.file-storage-card:hover{
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.04));
}
.file-storage-bar{
  height:8px;
  border-radius:4px;
  background:var(--card-border);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.file-storage-bar-fill{
  height:100%;
  border-radius:5px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .5s ease;
  position:relative;
}
.file-storage-bar-fill::after{
  content:'';
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:fileStorageShimmer 2s ease-in-out infinite;
}
@keyframes fileStorageShimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* 操作栏按钮统一 */
.file-action-btn{
  font-size:11px;
  padding:5px 12px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text2);
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  font-family:inherit;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  display:inline-flex;
  align-items:center;
  gap:4px;
  line-height:1.4;
  height:28px;
  box-sizing:border-box;
}
.file-action-btn:hover{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
}
.file-action-btn.primary{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
}
.file-action-btn.primary:hover{
  background:var(--accent);
  color:var(--bg-start);
}
.file-action-btn.danger{
  color:var(--danger);
  border-color:var(--danger);
  background:transparent;
}
.file-action-btn.danger:hover{
  background:var(--danger);
  color:#fff;
}
.file-action-btn.accent{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
}
.file-action-btn.accent:hover{
  background:var(--accent);
  color:var(--bg-start);
}

/* 排序/筛选下拉框统一 */
.file-select{
  font-size:10px;
  padding:4px 8px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
  cursor:pointer;
  font-family:inherit;
  flex-shrink:0;
  height:28px;
  transition:border-color .2s;
}
.file-select:focus{
  border-color:var(--accent);
}

/* 文件搜索框 */
#fileSearchInput{
  transition:all .2s cubic-bezier(.4,0,.2,1);
  height:34px;
}
#fileSearchInput:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* 文件列表网格 */
#fileListGrid{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:6px;
  align-content:start;
  padding:16px 14px;
  min-height:200px;
  user-select:none;
  -webkit-user-select:none;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar,rgba(128,128,128,.15)) transparent;
}
#fileListGrid::-webkit-scrollbar{width:4px;}
#fileListGrid::-webkit-scrollbar-thumb{background:var(--scrollbar,rgba(128,128,128,.15));border-radius:2px;}
#fileListGrid::-webkit-scrollbar-track{background:transparent;}

/* 面包屑导航 */
#fileBreadcrumb{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:var(--text2);
  cursor:default;
  flex-wrap:wrap;
}
#fileBreadcrumb span{
  padding:2px 6px;
  border-radius:4px;
  transition:background .15s;
}
#fileBreadcrumb span:not(.bc-sep):hover{
  background:var(--accent-soft,rgba(0,0,0,.03));
}
.bc-sep{color:var(--text3);font-size:10px;user-select:none;}
.bc-current{color:var(--accent);font-weight:600;}

/* 批量操作栏 */
#fileBatchBar{
  display:none;
  padding:10px 16px;
  background:linear-gradient(135deg,var(--accent-soft),var(--accent2-soft));
  border-radius:10px;
  margin-bottom:8px;
  flex-shrink:0;
  align-items:center;
  justify-content:space-between;
  transition:all .2s;
  border:1px solid rgba(124,77,255,.08);
}

/* 视图切换按钮组 */
.file-view-group{
  display:flex;
  gap:0;
  border:1px solid var(--card-border);
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
}
.file-view-btn{
  padding:5px 10px;
  border:none;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  transition:all .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  height:28px;
  box-sizing:border-box;
}
.file-view-btn:hover{
  background:var(--hover,rgba(128,128,128,.1));
}
.file-view-btn.active{
  background:var(--accent);
  color:var(--bg-start);
}

/* 上传进度条 */
#fileUploadProgressWrap{
  border-radius:12px;
  overflow:hidden;
}
#fileUploadProgressBar{
  border-radius:12px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
#fileUploadProgressText{
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* 空状态 */
.file-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:60px 20px;
}
.file-empty-icon{
  font-size:64px;
  opacity:.35;
  margin-bottom:8px;
  filter:grayscale(.3);
}
.file-empty-title{
  font-size:15px;
  font-weight:500;
  color:var(--text2);
}
.file-empty-desc{
  font-size:12px;
  color:var(--text3);
  opacity:.7;
}

/* 文件卡片 - grid 视图 */
@keyframes cardFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.file-card-grid{
  background:var(--card);
  border-radius:10px;
  padding:8px 6px 6px;
  cursor:pointer;
  text-align:center;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  animation:cardFadeIn .3s ease backwards;
  width:100% !important;
  height:140px !important;
  max-width:100%;
}
.file-card-grid:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  border-color:var(--card-border-hover,rgba(124,77,255,.15));
  background:var(--card-hover);
}
.file-card-grid:active{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.file-card-grid.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 4px 12px rgba(124,77,255,.12);
  background:var(--accent-soft);
}
.file-card-grid .fc-icon{
  font-size:36px;
  line-height:1;
  margin-bottom:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:48px;
}
.file-card-grid .fc-thumb{
  width:100%;
  height:0;
  padding-bottom:75%;
  border-radius:8px;
  overflow:hidden;
  background:var(--card-border);
  position:relative;
  display:block;
}
.file-card-grid .fc-thumb img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .3s;
}
.file-card-grid:hover .fc-thumb img{
  transform:scale(1.05);
}
.file-card-grid .fc-name{
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:6px;
  color:var(--text);
  font-weight:500;
}
.file-card-grid .fc-size{
  font-size:10px;
  color:var(--text3);
  margin-top:2px;
}
.file-card-grid .fc-checkbox{
  position:absolute;top:6px;left:6px;
  width:20px;height:20px;
  border-radius:6px;
  border:2px solid var(--text3);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;z-index:2;
  transition:all .15s;
  backdrop-filter:blur(4px);
}
.file-card-grid .fc-checkbox.checked{
  background:var(--accent);
  border-color:var(--accent);
}

/* 文件卡片 - list 视图 */
.file-card-list{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:var(--card);
  border-radius:10px;
  border:1px solid var(--card-border);
  cursor:pointer;
  transition:all .2s;
}
.file-card-list:hover{
  background:var(--card-hover);
  border-color:var(--card-border-hover,rgba(124,77,255,.1));
}

/* 回收站视图按钮 */
#trashBackBtn,
#trashClearAllBtn{
  font-size:11px;
  padding:5px 12px;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  height:28px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
#allNotesPanel.open{transform:translateX(-50%) translateY(-50%) !important;}
#taskPanel{transform:translateX(-50%) translateY(-50%);background:var(--bg2);overflow:hidden;}
#taskPanel.open{transform:translateX(-50%) translateY(-50%) !important;}
#taskPanel .panel-header{flex-shrink:0;}
#taskPanel .panel-body{padding:16px 20px;}
#allNotesPanel .panel-header{flex-shrink:0;}
#allNotesPanel .panel-body{padding:0 0 28px !important;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
#allNotesPanel .panel-body::-webkit-scrollbar{width:4px;}
#allNotesPanel .panel-body::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:2px;}
/* 固定顶栏，只滚动卡片区域 */
#allNotesPanel .np-topbar{flex-shrink:0;}
#allNotesPanel .np-input-row{flex-shrink:0;}
#allNotesPanel .np-grid{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 18px 20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-content:start;min-height:0;align-items:start;min-width:0;grid-auto-rows:min-content;background:var(--bg2);} /* [UI] Item 21 */
#ratioFilter .rbtn:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:var(--accent-soft)!important;}
#allNotesPanel{overscroll-behavior:contain;}
/* 编辑弹窗 */
#noteEditModal.show{opacity:1 !important;display:flex !important;}
#noteEditModal.show .modal{transform:translateY(0) !important;}
#noteEditModal .modal{background:var(--bg2);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);}
.nc-dot:hover{transform:scale(1.15);}
#allNotesPanel .np-topbar{
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
}
#allNotesPanel .np-search{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--input-bg);
  border:1.5px solid var(--card-border);
  border-radius:12px;
  padding:9px 14px;
  transition:all .3s;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.05);
}
#allNotesPanel .np-search:hover{
  border-color:var(--accent-soft);
  background:var(--accent-soft);
}
#allNotesPanel .np-search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft),inset 0 1px 3px rgba(0,0,0,.05);
}
#allNotesPanel .np-search input{
  flex:1;border:none;background:transparent;color:var(--text);font-size:13px;outline:none;
}
#allNotesPanel .np-search input::placeholder{
  color:var(--text3);opacity:.6;
}
#allNotesPanel .np-btn-add{
  width:38px;height:38px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--bg-start);font-size:20px;font-weight:700;cursor:pointer;flex-shrink:0;
  box-shadow:0 4px 14px var(--shadow-hover);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
#allNotesPanel .np-btn-add:hover{transform:scale(1.08);}
#allNotesPanel .np-input-row{
  display:none;padding:14px 22px;border-bottom:1px solid var(--line);
}
#allNotesPanel .np-input-box{
  padding:14px;border-radius:14px;background:var(--card);
  border:1px solid var(--card-border);backdrop-filter:blur(var(--glass-blur));
}
#allNotesPanel .np-input-box textarea{
  width:100%;border:none;background:transparent;color:var(--text);
  font-size:13px;line-height:1.6;outline:none;resize:none;font-family:inherit;
  margin-bottom:10px;
}
#allNotesPanel .np-input-actions{
  display:flex;gap:8px;justify-content:flex-end;
}
#allNotesPanel .np-btn-save,
#noteEditModal .np-btn-save{
  padding:9px 28px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--bg-start);font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px var(--shadow-hover);
  transition:all .2s;
  letter-spacing:1px;
}
#allNotesPanel .np-btn-save:hover,
#noteEditModal .np-btn-save:hover{transform:translateY(-2px);filter:brightness(1.15);box-shadow:0 6px 20px var(--shadow-hover);}
#allNotesPanel .np-btn-cancel,
#noteEditModal .np-btn-cancel{
  padding:9px 24px;border-radius:12px;
  border:1px solid var(--card-border);background:var(--glass);
  color:var(--text2);font-size:13px;cursor:pointer;font-weight:500;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.08);
}
#allNotesPanel .np-btn-cancel:hover,
#noteEditModal .np-btn-cancel:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 12px var(--shadow-hover);}
#notePreviewModal{display:none;}
#notePreviewModal .modal{display:flex;flex-direction:column;}
/* 卡片网格 */
.np-card{
  background:var(--card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--card-border);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  min-width:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s,border-color .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06),0 16px 36px rgba(0,0,0,.1);
  animation:fadeIn .35s ease-out backwards;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.np-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.1),0 24px 56px rgba(0,0,0,.13);
  border-color:var(--accent);
}
.np-card .np-card-title{
  font-weight:600;font-size:14px;margin-bottom:10px;
  color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.np-card .np-card-body{
  font-size:13px;color:var(--text2);line-height:1.55;
  flex:1;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;
  -webkit-box-orient:vertical;word-break:break-word;
}
.np-card .np-card-author{
  font-size:10px;color:var(--text3);letter-spacing:.2px;opacity:.6;
  margin-top:6px;padding-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.np-card .np-card-footer{
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;color:var(--text3);letter-spacing:.3px;
}
/* 空状态 */
.np-empty{
  grid-column:1/-1;text-align:center;padding:50px 20px;
  color:var(--text3);font-size:13px;
}
/* 批量选择模式 */
#npBatchBar{display:none;}
.np-card.select-mode{border:2px solid var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.np-card .np-checkbox:hover{transform:scale(1.1);}
/* 加载更多按钮 */
.np-loadmore:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-hover);}
.hl{background:rgba(255,193,7,.3);color:var(--text);padding:0 2px;border-radius:2px;}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes genProgress{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
/* [UI] Item 21 - 提示词面板移动端网格自适应 */
@media(max-width:900px){
  #allNotesPanel .np-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  #allNotesPanel{width:100vw!important;min-width:0!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;top:0!important;left:0!important;transform:none!important;}
}
@media(max-width:600px){
  #allNotesPanel .np-grid{grid-template-columns:repeat(1,1fr);gap:10px;}
  .matting-panel-inner{height:90dvh!important;width:100vw!important;max-width:100vw!important;border-radius:0!important;}
  .matting-panel-inner > .matting-body{flex-direction:column!important;}
  .matting-divider{display:none!important;}
}

/* ========== Matting Panel （美化） ========== */
/* 面板覆盖层 */
#mattingPanel {
  --mp-upload-h: 180px;
}
.matting-panel-inner {
  width: 90vw !important;
  max-width: 1300px !important;
  height: 85vh !important;
  background: var(--panel-bg, var(--card)) !important;
  backdrop-filter: blur(var(--glass-blur, 20px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) !important;
  border-radius: 18px !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.2) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
.matting-panel-header {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}
.matting-panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: .5px !important;
}
.matting-panel-badge {
  font-size: 10px !important;
  font-weight: 400 !important;
  opacity: .8 !important;
  background: rgba(255,255,255,.15) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}
.matting-panel-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.matting-close-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: none !important;
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s !important;
}
.matting-close-btn:hover {
  background: rgba(255,255,255,.3) !important;
}
.matting-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.matting-left-col {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.matting-right-col {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.matting-history-section {
  border-top: 1px solid var(--line) !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
}
.matting-history-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
}
.matting-history-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 8px !important;
}
.matting-preview-area {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.matting-preview-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--text2) !important;
  font-weight: 600 !important;
}
.matting-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}
.matting-actions-row {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 6px !important;
}

/* 上传区域通用 */
.matting-upload-zone {
  border: 2px dashed var(--accent) !important;
  border-radius: 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  background: var(--card) !important;
  opacity: .7 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 24px 20px !important;
  min-height: var(--mp-upload-h, 160px) !important;
}
.matting-upload-zone:hover {
  opacity: 1 !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99,102,241), .12) !important;
}
.matting-upload-zone.drag-over {
  border-color: #4ade80 !important;
  background: rgba(74,222,128,.08) !important;
}
.matting-upload-zone .icon {
  font-size: 34px !important;
  opacity: .6 !important;
  transition: transform .25s ease !important;
}
.matting-upload-zone:hover .icon {
  transform: scale(1.1) !important;
}
.matting-upload-zone .title {
  font-size: 14px !important;
  color: var(--text2) !important;
  font-weight: 600 !important;
}
.matting-upload-zone .desc {
  font-size: 10.5px !important;
  color: var(--text3) !important;
  max-width: 260px !important;
  line-height: 1.5 !important;
}

/* 主操作按钮 */
.matting-btn-primary {
  padding: 10px 32px !important;
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #fff !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: opacity .2s, transform .15s !important;
  letter-spacing: .5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.matting-btn-primary:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
}
.matting-btn-primary:active {
  transform: translateY(0) !important;
  opacity: .8 !important;
}
.matting-btn-primary:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.matting-btn-secondary {
  padding: 10px 28px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--accent) !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all .2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.matting-btn-secondary:hover {
  background: var(--accent-soft) !important;
}
.matting-btn-accent-link {
  color: var(--accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: opacity .2s !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}
.matting-btn-accent-link:hover {
  opacity: .8 !important;
  background: var(--accent-soft) !important;
}
.matting-btn-danger {
  font-size: 10px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--danger) !important;
  color: var(--danger) !important;
  background: transparent !important;
  cursor: pointer !important;
  opacity: .65 !important;
  transition: all .2s !important;
}
.matting-btn-danger:hover {
  opacity: 1 !important;
  background: rgba(220,38,38,.1) !important;
}

/* 结果卡片 */
.matting-card {
  background: var(--card) !important;
  border-radius: 14px !important;
  border: 1px solid var(--card-border) !important;
  overflow: hidden !important;
  transition: transform .2s, box-shadow .2s !important;
}
.matting-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
}
.matting-card .cmp-wrap {
  display: flex !important;
  height: 150px !important;
  overflow: hidden !important;
}
.matting-card .cmp-side {
  flex: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}
.matting-card .cmp-side img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.matting-card .cmp-divider {
  width: 3px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(180deg, var(--accent), var(--accent2)) !important;
}
.matting-card .cmp-label {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  font-size: 8.5px !important;
  background: rgba(0,0,0,.5) !important;
  color: #fff !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  z-index: 2 !important;
  backdrop-filter: blur(4px) !important;
}
.matting-card .cmp-label-result {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  font-size: 8.5px !important;
  background: var(--accent) !important;
  color: #fff !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  z-index: 2 !important;
}
.matting-card .card-footer {
  padding: 7px 10px !important;
  font-size: 10.5px !important;
  color: var(--text2) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid var(--line) !important;
}
.matting-card .card-footer .fname {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
}
.matting-card .pending-overlay {
  position: absolute !important;
  bottom: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 10px !important;
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  padding: 2px 12px !important;
  border-radius: 8px !important;
  backdrop-filter: blur(4px) !important;
  white-space: nowrap !important;
}

/* 历史记录 */
.matting-history-item {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
}
.matting-history-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.18) !important;
}
.matting-history-item .hi-img-wrap {
  position: relative !important;
  aspect-ratio: 3/2 !important;
  overflow: hidden !important;
  background: var(--bg2) !important;
}
.matting-history-item .hi-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s !important;
}
.matting-history-item:hover .hi-img-wrap img {
  transform: scale(1.05) !important;
}
.matting-history-item .hi-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  opacity: 0 !important;
  transition: opacity .25s !important;
  backdrop-filter: blur(3px) !important;
}
.matting-history-item:hover .hi-overlay {
  opacity: 1 !important;
}
.matting-history-item .hi-overlay-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  color: #444 !important;
  font-size: 14px !important;
  line-height: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform .15s !important;
  border: none !important;
}
.matting-history-item .hi-overlay-btn:hover {
  transform: scale(1.18) !important;
}
.matting-history-item .hi-overlay-btn-danger {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  color: #d32f2f !important;
  font-size: 14px !important;
  line-height: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform .15s !important;
  border: none !important;
}
.matting-history-item .hi-overlay-btn-danger:hover {
  transform: scale(1.18) !important;
}
.matting-history-item .hi-name {
  padding: 6px 9px 7px !important;
  font-size: 9.5px !important;
  color: var(--text3) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 进度条 */
.matting-progress {
  width: 100% !important;
  margin: 2px 0 6px !important;
}
.matting-progress .mp-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: var(--text3) !important;
  margin-bottom: 6px !important;
}
.matting-progress .mp-track {
  width: 100% !important;
  height: 5px !important;
  background: var(--card-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.matting-progress .mp-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  border-radius: 3px !important;
  transition: width .3s ease !important;
}

/* 分割线 */
.matting-divider {
  width: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, transparent, var(--accent), transparent) !important;
  flex-shrink: 0 !important;
  margin: 8px 0 !important;
}

/* 对比弹窗 */
.matting-compare-modal {
  background: var(--bg2) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  max-width: 1100px !important;
  width: 92% !important;
  box-shadow: 0 20px 80px rgba(0,0,0,.35) !important;
  border: 1px solid var(--card-border) !important;
}
.matting-compare-modal .cm-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.matting-compare-modal .cm-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.matting-compare-modal .cm-close {
  cursor: pointer !important;
  font-size: 18px !important;
  opacity: .4 !important;
  transition: opacity .2s !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.matting-compare-modal .cm-close:hover {
  opacity: 1 !important;
  background: var(--card-border) !important;
}
.matting-compare-modal .cm-body {
  display: flex !important;
  gap: 3px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 320px !important;
}
.matting-compare-modal .cm-side {
  flex: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}
.matting-compare-modal .cm-side img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.matting-compare-modal .cm-side-label {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  font-size: 10px !important;
  background: rgba(0,0,0,.5) !important;
  color: #fff !important;
  padding: 2px 12px !important;
  border-radius: 6px !important;
  z-index: 2 !important;
  backdrop-filter: blur(6px) !important;
}
.matting-compare-modal .cm-side-label-result {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  font-size: 10px !important;
  background: var(--accent) !important;
  color: #fff !important;
  padding: 2px 12px !important;
  border-radius: 6px !important;
  z-index: 2 !important;
}
.matting-compare-modal .cm-footer {
  margin-top: 14px !important;
  text-align: center !important;
}
.admin-section{
  margin-bottom:10px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.admin-section:last-child{border-bottom:none;margin-bottom:0;}
.admin-section h4{
  font-size:11px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--accent2);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:1px;
  text-transform:uppercase;
}
.admin-section input{
  width:100%;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--card-border);
  background:var(--input-bg);
  color:var(--text);
  font-size:12px;
  outline:none;
  font-family:inherit;
  transition:all .2s;
}
.admin-section input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.admin-section .row{
  display:flex;
  gap:6px;
  margin-top:8px;
  width:100%;
}
.admin-section .row input{flex:1;margin-bottom:0;}
.admin-section .row .btn-sm{
  padding:9px 14px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s;
}
.admin-section .row .btn-sm:hover{opacity:.85;transform:translateY(-1px);}
.admin-section .row .danger-btn{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger) !important;}
.admin-section .row .danger-btn:hover{background:var(--danger);color:#1a1a2e;opacity:1;}
/* 👤 用户管理弹窗 */
.user-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  background:var(--card);
  border:1px solid var(--card-border);
  transition:all .2s;
}
.user-card:hover{border-color:var(--accent2);background:var(--card-hover);}
.user-card .uc-avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  background:var(--accent2-soft);
  color:var(--accent2);
  flex-shrink:0;
}
.user-card .uc-info{flex:1;min-width:0;}
.user-card .uc-info .uc-name{font-size:12px;font-weight:600;color:var(--text);}
.user-card .uc-info .uc-role{font-size:10px;color:var(--text3);margin-top:1px;}
.user-card .uc-pass{
  font-size:10px;
  color:var(--text3);
  background:var(--input-bg);
  padding:4px 10px;
  border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;
  white-space:nowrap;
}
.font-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.font-item label{
  display:block;
  font-size:10px;
  color:var(--text3);
  margin-bottom:4px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;
}
.font-item .color-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.font-item .color-wrap input[type=color]{
  width:32px;
  height:32px;
  padding:2px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--input-bg);
  cursor:pointer;
}
.font-item .color-wrap .color-label{
  font-size:11px;
  color:var(--text2);
  font-family:'JetBrains Mono',monospace;
}
.font-item select{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--input-bg);
  color:var(--text);
  font-size:12px;
  outline:none;
  font-family:inherit;
  cursor:pointer;
  transition:all .2s;
}
.font-item select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.bg-preview{
  height:80px;
  border-radius:12px;
  margin-bottom:10px;
  background-size:cover;
  background-position:center;
  border:1px solid var(--card-border);
  transition:all .3s;
}
.drop-zone{
  border:2px dashed var(--card-border);
  border-radius:12px;
  padding:16px;
  text-align:center;
  cursor:pointer;
  transition:all .25s;
  background:var(--glass);
  margin-bottom:8px;
}
.drop-zone:hover,.drop-zone.dragover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.drop-zone .drop-text{
  font-size:11px;
  color:var(--text3);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.5px;
}
.drop-zone:hover .drop-text,.drop-zone.dragover .drop-text{
  color:var(--accent);
}
.bg-presets{
  display:flex;
  gap:4px;
  margin:8px 0;
  flex-wrap:wrap;
  justify-content:center;
  max-height:110px;
  overflow-y:auto;
  padding:2px 0;
}
.bg-preset{
  width:42px;
  height:42px;
  border-radius:10px;
  cursor:pointer;
  border:2px solid var(--card-border);
  transition:all .2s;
}
.bg-preset:hover{border-color:var(--accent);transform:scale(1.08);}
.bg-preset.active{border-color:var(--accent);}
.bg-preset-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;}
.bg-preset-label{font-size:9px;color:var(--text3);white-space:nowrap;}
.bg-preset:hover{border-color:var(--accent);transform:scale(1.05);}
.bm-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background:var(--card);
  border-radius:14px;
  margin-bottom:8px;
  font-size:12px;
}
.fish-container{
  position:relative;
  height:16px;
  overflow:hidden;
  margin:-300px auto 0;
  max-width:1400px;
  opacity:.3;
}
.fish{
  position:absolute;
  font-size:14px;
  animation:fishSwim 8s ease-in-out infinite;
  filter:drop-shadow(0 0 4px var(--accent));
}
@keyframes fishSwim{
  0%{left:-30px;top:-2px;transform:scaleX(1)}
  25%{top:-4px;transform:scaleX(1)}
  48%{transform:scaleX(1)}
  50%{left:calc(100% - 20px);top:-2px;transform:scaleX(-1)}
  75%{top:0px;transform:scaleX(-1)}
  98%{transform:scaleX(-1)}
  100%{left:-30px;top:-2px;transform:scaleX(1)}
}
.footer{
  text-align:center;
  padding:12px;
  font-size:var(--font-size-caption);
  color:var(--text3);
  border-top:1px solid var(--line);
  max-width:1400px;
  margin:10px auto;
  backdrop-filter:blur(var(--glass-blur));
  border-radius:30px;
  background:var(--card);
  width:fit-content;
  position:relative;
  left:130px;
}
.footer a{
  color:var(--text2);
  text-decoration:none;
  margin:0 12px;
}
@media(max-width:768px){
  body{zoom:1;}
  .app{flex-direction:column;padding:12px;gap:12px;max-width:100%;}
  .sidebar{width:100%;position:static;padding:12px 16px;border-radius:16px;}
  .sidebar.collapsed{width:50px;padding:2px 6px 30px;}
  .sidebar.collapsed .cat{padding:6px;}
  .sidebar .logo{font-size:16px;padding:4px 0 6px 4px;}
  .sidebar .sub{font-size:8px;padding:0 0 8px 4px;}
  .sidebar .cat{padding:6px 10px;font-size:12px;border-radius:10px;gap:4px;}
  .cat-emoji{width:20px;font-size:12px;}
  .sidebar-actions{margin-top:12px;gap:6px;}
  .sidebar-actions button{padding:8px;font-size:10px;border-radius:10px;}
  .top-bar{padding:5px 12px;gap:8px;}
  .top-clock{height:28px;font-size:18px;letter-spacing:1px;}
  .top-date{height:28px;font-size:9px;}
  .top-greeting{font-size:10px;}
  .countdown{height:28px;font-size:11px;padding:4px 12px;letter-spacing:1px;}
  .holiday{height:28px;font-size:11px;padding:2px 8px;}
  .restday{height:28px;font-size:11px;font-weight:700;padding:2px 10px;box-shadow:none;}
  .top-right{gap:4px;}
  .petals-toggle.active{opacity:1 !important;color:var(--accent) !important;font-size:11px;padding:0 6px;transition:none!important;}
  .petals-toggle,.petals-toggle:hover,.petals-toggle:active,.petals-toggle:focus{color:var(--text2)!important;border-color:var(--card-border)!important;background:var(--card)!important;opacity:1!important;transform:none!important;font-size:11px;padding:0 6px;transition:none!important;-webkit-tap-highlight-color:transparent;user-select:none;}
.top-btn{min-width:28px;height:28px;font-size:12px;border-radius:14px;}
#profileBtn{width:28px;height:28px;}
.weather-btn{width:auto;height:28px;font-size:11px;padding:0 12px;}
  .weather{font-size:9px;padding:3px 10px;}
  .search-area{padding:2px 0 12px;}
  .search-wrap input{padding:10px 14px 10px 36px;font-size:13px;border-radius:24px;}
  .search-wrap .si{left:12px;font-size:12px;}
  .engine-btn{padding:6px 14px;font-size:11px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px;padding:4px 0 20px;}
  .card{padding:3px 8px;min-height:26px;border-radius:12px;gap:6px;}
  .card-img{width:20px;height:20px;font-size:11px;border-radius:6px;}
  .card-name{font-size:10px;}
  .del-btn{width:16px;height:16px;font-size:7px;top:3px;right:3px;}
  #stats{font-size:9px;padding:0 0 4px;}
  .footer{font-size:6px;padding:8px 16px;border-radius:16px;}
  .footer a{margin:0 6px;}
  .admin-panel{width:calc(100% - 24px);left:50%;transform:translateX(-50%) translateY(-50%);max-height:80vh;top:50%;border-radius:16px;}
  .admin-panel .panel-body{padding:12px 16px 16px;}
  .admin-panel .panel-header{padding:12px 16px;}
  .admin-panel .panel-header h3{font-size:13px;}
  .admin-section{margin-bottom:10px;padding-bottom:10px;}
  .admin-section h4{font-size:10px;}
  .admin-section input{padding:7px 10px;font-size:11px;border-radius:8px;}
  .bg-preview{height:60px;border-radius:10px;}
  .drop-zone{padding:12px;border-radius:10px;}
  .drop-zone .drop-text{font-size:10px;}
  .bg-preset{width:36px;height:36px;border-radius:8px;}
  .font-item select{padding:7px 10px;font-size:11px;border-radius:8px;}
  .modal{padding:20px;border-radius:16px;}
  .modal h3{font-size:16px;}
  .modal input,.modal textarea{padding:10px 14px;font-size:12px;border-radius:12px;}
  .login-modal{max-width:300px;padding:24px 20px;}
  .login-modal h3{font-size:26px;}
  .todo-header{font-size:9px;}
  .todo-item{padding:2px;font-size:9px;}
  .todo-input-row input{padding:3px 5px;font-size:9px;}
  .todo-add-btn{width:20px;height:20px;font-size:12px;}
  .keys-hint{font-size:8px;}
  .keys-hint kbd{font-size:8px;padding:1px 5px;}
  /* 手机端美食适配 */
  .food-columns{flex-direction:column;}
  .food-header select{max-width:120px;font-size:10px;}
  .food-card{padding:8px 10px;font-size:11px;}
  .food-name{font-size:11px;}
  .food-rank{width:22px;height:22px;font-size:11px;}
  .food-score{font-size:10px;}
  .food-addr{font-size:9px;}
  .food-header input{font-size:10px;padding:4px 8px;}
}
@media(max-width:380px){
  .top-clock{font-size:15px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));}
  .card{padding:2px 6px;min-height:22px;}
  .card-img{width:16px;height:16px;font-size:9px;}
  .card-name{font-size:9px;}
  .countdown{font-size:9px;padding:3px 10px;}
  .holiday{font-size:9px;padding:1px 6px;}
  .restday{font-size:9px;padding:1px 6px;}
  .sidebar .logo{font-size:14px;}
  .sidebar .cat{font-size:11px;padding:5px 8px;}
}
/* ===== 搜索建议 ===== */
.search-suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:100;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  margin-top:20px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  display:none;
}
.search-suggestions .close-results{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text2);
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  transition:all .15s;
}
.search-suggestions .close-results:hover{
  background:var(--danger-soft);
  color:var(--danger);
  border-color:var(--danger);
}
.search-suggestions.show{display:block;}
.search-suggestions .suggestion-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  cursor:pointer;
  font-size:12px;
  color:var(--text2);
  transition:background .15s;
  border-bottom:1px solid var(--line);
}
.search-suggestions .suggestion-item:last-child{border-bottom:none;}
.search-suggestions .suggestion-item:hover{
  background:var(--accent-soft);
  color:var(--accent);
}
.search-suggestions .suggestion-item .sug-emoji{
  width:22px;height:22px;
  border-radius:6px;
  background:var(--glass);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  flex-shrink:0;
}
.search-suggestions .suggestion-item .sug-name{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-suggestions .suggestion-item .sug-hl{
  color:var(--accent);
  font-weight:600;
}
.sug-item{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--text2);transition:background .12s;}
.sug-item:hover{background:var(--accent-soft);color:var(--accent);}
.sug-item .sug-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0;}
.sug-item .sug-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sug-item .sug-count{font-size:10px;color:var(--text3);flex-shrink:0;}
/* ===== 拖拽排序 ===== */
.card.dragging{
  opacity:.6;
  transform:scale(.95) rotate(-1deg);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.np-card.dragging{
  opacity:.5;
  transform:scale(.93) rotate(-1deg);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  border-color:var(--accent);
}
/* 占位线指示器 */
.drag-placeholder{height:4px;background:var(--accent);border-radius:3px;margin:3px 0;animation:placeholderPulse 1s ease-in-out infinite;box-shadow:0 0 12px hsla(var(--brand-h),var(--brand-s),var(--brand-l),.5);}
@keyframes placeholderPulse{0%,100%{opacity:.6}50%{opacity:1}}
/* ===== 右键菜单 ===== */
.context-menu{
  position:fixed;
  z-index:250;
  background:var(--bg2);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:6px;
  min-width:170px;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  display:none;
  opacity:0;
  transform:scale(.92);
  transform-origin:top left;
  transition:opacity .12s ease,transform .12s ease;
}
.context-menu.show{
  display:block;
  opacity:1;
  transform:scale(1);
}
.context-menu .cm-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:10px;
  font-size:12px;
  color:var(--text2);
  cursor:pointer;
  transition:background .12s;
  border:none;
  background:transparent;
  width:100%;
  font-family:inherit;
  white-space:nowrap;
}
.context-menu .cm-item:hover{
  background:var(--accent-soft);
  color:var(--accent);
}
.context-menu .cm-item .cm-icon{
  width:18px;
  text-align:center;
  flex-shrink:0;
  font-size:13px;
}
.context-menu .cm-divider{
  height:1px;
  background:var(--line);
  margin:4px 8px;
}
.context-menu .cm-item.cm-danger:hover{
  background:var(--danger-soft);
  color:var(--danger);
}
/* ===== 批量删除 ===== */
/* ===== 每日一言 ===== */
#quote{
  text-align:center;
  font-size:11px;
  color:var(--text3);
  padding:6px 0 18px;
  font-style:italic;
  letter-spacing:.5px;
  transition:opacity .6s ease;
  opacity:.6;
  line-height:1.6;
}
#quote .q-author{
  font-size:9px;
  opacity:.5;
  margin-left:4px;
  font-style:normal;
}
/* ===== 置顶书签 ===== */
.pin-badge{position:absolute;top:-2px;right:-2px;font-size:9px;z-index:2;filter:drop-shadow(0 0 3px rgba(0,0,0,.3));}
.card.pinned{border-color:var(--accent2);border-width:1.5px;background:var(--card);}
/* ===== 更多按钮小屏 ===== */
.more-btn-wrap{display:none;margin-left:auto;}
.more-menu{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  z-index:50;
  background:var(--bg2);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  min-width:140px;
}
.more-menu.show{display:block;}
.more-menu .more-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:10px;
  font-size:12px;
  color:var(--text2);
  cursor:pointer;
  transition:background .15s;
  border:none;
  background:transparent;
  width:100%;
  font-family:inherit;
}
.more-menu .more-item:hover{
  background:var(--accent-soft);
  color:var(--accent);
}
@media(max-width:800px){
  .more-btn-wrap{display:inline-flex;position:relative;}
  .more-btn-wrap .top-btn{font-size:16px;}
}
@media(max-width:500px){
  .top-right{gap:4px;}
  .more-btn-wrap{display:inline-flex;}
}
/* ===== 美食排行榜 ===== */
.food-columns{display:flex;gap:10px;margin-top:4px}
.food-col{flex:1;min-width:0}
.food-col-title{font-size:13px;font-weight:600;padding:7px 6px;margin-bottom:3px;border-radius:8px;text-align:center}
.food-col-title.amap{background:#f0f7ff;color:#4facfe}
.food-col-title.baidu{background:#fff0f0;color:#e74c3c}
.food-container{display:none;padding:8px 0 40px;}
.food-container.show{display:block;}
.food-header{display:flex;align-items:center;gap:6px;padding:0 4px 8px;}
.food-title{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;}
.food-close{width:28px;height:28px;border-radius:8px;border:1px solid var(--card-border);background:var(--card);color:var(--text2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.food-close:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
.food-card{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--card-border);margin-bottom:8px;transition:all .3s;cursor:default;}
.food-card:hover{background:rgba(255,255,255,.05);border-color:var(--card-border-hover);}
.food-rank{width:28px;height:28px;border-radius:50%;background:var(--glass);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text2);font-family:'JetBrains Mono',monospace;flex-shrink:0;}
.rank-gold .food-rank{background:linear-gradient(135deg,#ffd700,#ffaa00);color:#1a1a2e;font-size:15px;box-shadow:0 0 12px rgba(255,215,0,.3);}
.rank-blue .food-rank{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#1a1a2e;font-size:14px;box-shadow:0 0 12px rgba(79,172,254,.3);}
.rank-pink .food-rank{background:linear-gradient(135deg,var(--accent3),var(--accent2));color:#1a1a2e;font-size:14px;box-shadow:0 0 12px var(--accent-soft);}
.food-info{flex:1;min-width:0;}
.food-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.food-card:nth-child(1) .food-name{color:#ffd700;}
.food-card:nth-child(2) .food-name,.food-card:nth-child(3) .food-name{color:#c0c0c0;}
.food-addr{font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.food-score{font-size:11px;color:var(--accent);font-family:'JetBrains Mono',monospace;font-weight:600;white-space:nowrap;flex-shrink:0;}
.food-card:nth-child(1) .food-score{color:#ffd700;font-size:14px;}
.food-card:nth-child(2) .food-score,.food-card:nth-child(3) .food-score{color:#c0c0c0;font-size:13px;}
.food-empty{text-align:center;padding:60px 20px;color:var(--text3);font-family:'JetBrains Mono',monospace;}
.food-loading{text-align:center;padding:60px 20px;color:var(--text3);font-family:'JetBrains Mono',monospace;}
/* 聊天图片放大 lightbox */
#chatImageLightbox { display: none; align-items: center; justify-content: center; }
#chatImageLightbox.show { display: flex !important; }
/* ===== 🚀 响应式布局增强 - 移动端全屏化 / 自适应 ===== */
/* 平板：1024px 及以下 */
@media(max-width:1024px){
  .sidebar{width:190px;padding:0 12px 24px;}
  .sidebar.collapsed{width:48px;padding:0 5px 24px;}
  #allNotesPanel{min-width:500px;}
  #allNotesPanel .np-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .profile-panel{right:12px;top:70px;}
  .app{padding:20px 24px;gap:20px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
  /* 平板端顶部栏紧凑 + 左缩 */
  .top-bar{padding:9px 12px;gap:8px;}
  .top-clock{font-size:22px;}
  .top-date,.top-greeting{font-size:10px;}
  .search-area{padding:4px 0 16px;}
  .search-wrap input{padding:8px 12px 8px 34px;font-size:13px;border-radius:20px;}
  .search-wrap .si{font-size:14px;}
  .engine-btn{padding:6px 12px;font-size:11px;min-width:70px;}
}
/* 手机横屏/小平板：768px 及以下 - 增强已有规则 */
@media(max-width:768px){
  /* 聊天面板：全屏覆盖 */
  #chatPanel.admin-panel:not(.no-fullscreen){
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    top:0!important;left:0!important;
    transform:none!important;
  }
  #chatPanel.admin-panel.open:not(.no-fullscreen){transform:none!important;}
  /* 提示词面板：全屏覆盖 */
  #allNotesPanel:not(.no-fullscreen){
    width:100vw!important;min-width:100vw!important;max-width:100vw!important;
    height:100dvh!important;max-height:100dvh!important;
    border-radius:0!important;
    top:0!important;left:0!important;
    transform:none!important;
  }
  #allNotesPanel.open:not(.no-fullscreen){transform:none!important;}
  #allNotesPanel:not(.no-fullscreen) .np-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;}
  #allNotesPanel:not(.no-fullscreen) .panel-header{padding:10px 14px;}
  #allNotesPanel:not(.no-fullscreen) .panel-body{padding:0;}
  #allNotesPanel:not(.no-fullscreen) .np-topbar{gap:4px;}
  #allNotesPanel:not(.no-fullscreen) .np-search input{font-size:12px;padding:6px 10px;}
  #allNotesPanel:not(.no-fullscreen) .np-btn-add{width:30px;height:30px;font-size:16px;}
  #allNotesPanel:not(.no-fullscreen) #ratioFilter{width:48px;}
  #allNotesPanel:not(.no-fullscreen) #ratioFilter .rbtn{width:36px;font-size:9px;}
  #allNotesPanel:not(.no-fullscreen) .np-input-box textarea{font-size:12px;min-height:36px;}
  /* 提示词编辑弹窗：全屏覆盖 */
  #noteEditModal:not(.no-fullscreen){
    align-items:stretch!important;
    padding:0!important;
  }
  #noteEditModal:not(.no-fullscreen)>.modal,
  #noteEditModal:not(.no-fullscreen) .modal{
    max-width:100vw!important;width:100vw!important;
    height:100dvh!important;max-height:100dvh!important;
    border-radius:0!important;
    padding:16px!important;
    top:0!important;left:0!important;
    transform:none!important;
    box-sizing:border-box;
  }
  #noteEditModal:not(.no-fullscreen) .modal{flex-direction:column;overflow-y:auto;}
  #noteEditModal:not(.no-fullscreen) .modal>div{min-height:0;}
  #noteEditModal:not(.no-fullscreen) textarea{min-height:120px;font-size:14px;}
  #noteEditModal:not(.no-fullscreen) #noteEditTitle{font-size:18px!important;}
  /* 提示词预览弹窗：全屏覆盖 */
  #notePreviewModal:not(.no-fullscreen) .modal{
    max-width:100vw!important;width:100vw!important;
    border-radius:0!important;
    height:100dvh!important;max-height:100dvh!important;
    top:0!important;left:0!important;
    transform:none!important;
  }
  #notePreviewModal:not(.no-fullscreen) .modal>div{
    flex-direction:column;min-height:100dvh;max-height:100dvh;
  }
  #notePreviewImg{min-height:200px!important;}
  /* 个人面板：从底部弹出 */
  .profile-panel:not(.no-fullscreen){
    top:auto;bottom:0;left:0;right:0;
    max-width:100vw;width:100vw;
    border-radius:20px 20px 0 0;
    max-height:80dvh;
    transform:translateY(100%);
  }
  .profile-panel.open:not(.no-fullscreen){transform:translateY(0);}
  /* 管理面板全屏 */
  #adminPanel.admin-panel:not(.no-fullscreen){
    width:100vw!important;height:100dvh!important;
    max-height:100dvh!important;border-radius:0!important;
    top:0!important;left:0!important;transform:none!important;
  }
  #adminPanel.admin-panel.open:not(.no-fullscreen){transform:none!important;}
  /* 登录框：适当缩放 */
  #loginOverlay .login-box{max-width:300px;}
  /* 所有 modal-overlay 下的 modal 在小屏自适应 */
  .modal-overlay .modal:not(.no-fullscreen){
    max-width:calc(100vw - 24px)!important;
    max-height:90dvh;
  }
  .modal-overlay .modal input,.modal-overlay .modal textarea{font-size:16px!important;}
  /* footer 居中（手机端侧边栏已折叠） */
  .footer{left:auto!important;margin:10px auto!important;}
  /* 壁纸选择弹窗 */
  #wallpaperModal .modal{max-width:calc(100vw - 24px)!important;padding:16px!important;}
  .bg-presets-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))!important;gap:6px!important;}
  /* 日历/排班弹窗 */
  #calModal .modal,#restModal .modal{max-width:calc(100vw - 24px)!important;margin:0 auto;}
}
/* 手机竖屏：480px 及以下 - 极紧凑 */
@media(max-width:480px){
  /* 提示词面板：单列网格 */
  #allNotesPanel:not(.no-fullscreen) .np-grid{grid-template-columns:minmax(0,1fr);gap:8px;}
  #allNotesPanel:not(.no-fullscreen){min-width:100vw;}
  #allNotesPanel:not(.no-fullscreen) .np-btn-add{width:28px;height:28px;font-size:14px;}
  #allNotesPanel:not(.no-fullscreen) #ratioFilter{width:40px;padding:6px 3px;}
  #allNotesPanel:not(.no-fullscreen) #ratioFilter .rbtn{width:30px;font-size:8px;padding:3px 0;}
  /* 提示词编辑弹窗更紧凑 */
  #noteEditModal:not(.no-fullscreen) .modal{padding:12px!important;}
  #noteEditModal:not(.no-fullscreen) #noteEditTitle{font-size:16px!important;width:70%!important;}
  #noteEditModal:not(.no-fullscreen) .modal textarea{min-height:80px;font-size:13px!important;padding:8px!important;}
  /* 登录框极小屏缩放 */
  #loginOverlay .login-box{max-width:280px;}
  /* 卡片网格超小 */
  .grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:4px;}
  .card{padding:2px 5px;min-height:20px;border-radius:10px;gap:4px;}
  .card-img{width:14px;height:14px;font-size:8px;border-radius:4px;}
  .card-name{font-size:9px;}
  /* 顶部栏极紧凑 */
  .top-clock{font-size:14px;letter-spacing:0;}
  .top-bar{gap:3px;}
  .top-date{font-size:8px;}
  .top-greeting{font-size:9px;}
  .top-btn{min-width:24px;height:24px;font-size:10px;border-radius:8px;}
  #profileBtn{width:24px;height:24px;}
  .weather-btn{width:auto;min-width:auto;padding:0 8px!important;font-size:9px!important;height:24px!important;border-radius:10px!important;}
  .countdown{font-size:9px;padding:3px 8px;}
  .holiday{font-size:9px;padding:1px 5px;}
  .restday{font-size:9px;padding:1px 5px;}
  /* 搜索栏紧凑 */
  .search-wrap input{padding:6px 10px 6px 30px;font-size:12px;border-radius:20px;}
  .search-wrap .si{left:10px;font-size:10px;}
  .engine-btn{padding:4px 10px;font-size:10px;}
  /* modal 全屏 */
  .modal-overlay .modal{padding:14px!important;border-radius:12px!important;}
  .modal-overlay .modal h3{font-size:13px!important;}
  .modal-overlay .modal .btn-primary,.modal-overlay .modal .btn-cancel{padding:8px 14px!important;font-size:12px!important;}
  /* 星星相关缩放 - 保留 */
  .top-right .top-btn{min-width:24px;height:24px;font-size:10px;}
  .top-right #profileBtn{width:24px;height:24px;}
  /* 排行/美食 */
  .food-columns{flex-direction:column;}
  .food-header select{max-width:100px;font-size:9px;}
  .food-card{padding:6px 8px;font-size:10px;}
  .food-name{font-size:10px;}
  .food-rank{width:20px;height:20px;font-size:10px;}
  .food-score{font-size:9px;}
  .food-addr{font-size:8px;}
}
/* 极小屏：380px 及以下 - 极限紧凑 */
@media(max-width:380px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:3px;}
  .card{padding:1px 4px;min-height:16px;border-radius:8px;}
  .card-img{width:12px;height:12px;font-size:7px;}
  .card-name{font-size:8px;}
  .top-clock{font-size:12px;}
  .sidebar:not(.no-fullscreen) .cat{font-size:10px;padding:4px 6px;}
  /* 确保登录框不溢出 */
  #loginOverlay .login-box{max-width:260px;padding:16px!important;}
  #loginOverlay .login-box input{font-size:12px!important;padding:8px 10px!important;}
  #loginOverlay .login-btn{padding:10px!important;font-size:13px!important;}
}
/* ===== 大屏优化 - 充分利用宽屏 ===== */
/* 1025-1399px 中屏：4列 + 顶部左缩 */
@media(min-width:1025px) and (max-width:1399px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
  .top-bar{padding:9px 12px;gap:8px;}
  .top-clock{font-size:22px;}
  .search-wrap input{padding:8px 12px 8px 34px;font-size:13px;border-radius:20px;}
  .engine-btn{padding:6px 12px;font-size:11px;min-width:70px;}
}
/* 1400px+ 宽屏：充分利用横向空间 */
@media(min-width:1400px){
  .app{max-width:90vw;padding:24px 40px;gap:32px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
  #allNotesPanel{max-width:90vw;min-width:800px;}
  #allNotesPanel .np-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
}
/* 2000px+ 超大屏：更大卡片 */
@media(min-width:2000px){
  .app{max-width:85vw;padding:24px 48px;gap:36px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
}
/* 平板横屏专用：1280px及以下取消zoom，用更紧凑布局 */
@media(max-width:1280px){
  body{zoom:1 !important;}
  body .app .top-bar{padding:9px 12px;gap:8px;}
  body .app .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;}
  body .sidebar{width:190px;padding:0 14px 24px;}
  body .sidebar.collapsed{width:48px;padding:0 6px 24px;}
  body .app{padding:20px 24px;gap:20px;}
  body .top-clock{font-size:22px;}
  body .top-date,body .top-greeting{font-size:10px;}
}
/* 大屏桌面适当放大 */
/* ===== 🎯 平板专用优化 (2560×1600 小米平板) ===== */
/* 平板横屏断点 */
@media(min-width:1024px) and (max-width:2560px) and (orientation:landscape){
  .app{max-width:100%;margin:16px auto;padding:20px 28px;gap:24px;overflow:hidden;}
  .sidebar{width:280px;}
  .grid{grid-template-columns:repeat(6,1fr)!important;gap:16px;}
  #allNotesPanel .np-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
  
  /* 全局字体 */
  body{font-size:16px;overflow-x:hidden;}
  .top-clock{font-size:28px;height:44px;}
  .top-date,.top-greeting{font-size:13px;height:44px;}
  .countdown,.holiday,.restday{height:44px;}
  
  /* 搜索框 */
  .search-wrap input{height:56px;font-size:16px;border-radius:16px;padding:12px 18px 12px 44px;max-width:800px;}
  .search-wrap .si{font-size:18px;left:16px;}
  
  /* 卡片 */
  .card{min-height:46px;border-radius:16px;padding:9px 20px;gap:14px;}
  .card-img{width:36px;height:36px;border-radius:10px;font-size:20px;}
  .card-name{font-size:14px;}
  
  /* 按钮触摸优化 */
  .engine-btn,.top-btn,a,button{cursor:default;}
  .engine-btn{min-height:48px;padding:10px 20px;font-size:14px;border-radius:14px;}
  .top-btn{min-width:44px;height:44px;font-size:18px;border-radius:14px;}
  #profileBtn{width:44px;height:44px;}
  
  /* 移除hover */
  .card:hover{transform:none;background:var(--card);}
  
  /* 滚动条 */
  ::-webkit-scrollbar{width:8px;height:8px;}
  
  /* 顶部栏 */
  .top-bar{padding:10px 12px;margin-right:0;}
  .search-area{padding:4px 0 18px;}
  
  /* 提示词面板 */
  #allNotesPanel{max-width:90vw;min-width:700px;}
  
  /* 聊天面板 */
  #chatPanel.admin-panel{max-width:90vw;min-width:700px;max-height:80vh;}
  
  /* 强制禁止水平滚动 */
  body{overflow-x:hidden!important;}}
/* 平板竖屏断点 */
@media(min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .grid{grid-template-columns:repeat(3,1fr)!important;gap:12px;}
  #allNotesPanel .np-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sidebar{width:220px;}
  .card{min-height:40px;border-radius:14px;padding:7px 16px;}
}
/* 触摸：active 反馈代替 hover */
@media(hover:none){
  a,button,.card,.engine-btn,.close-btn,.np-btn-add,nav .cat{transition:opacity .15s;}
  a:active,button:active,.card:active,.engine-btn:active,.close-btn:active,.np-btn-add:active,nav .cat:active{opacity:1;}
  .card:hover{transform:none;}
}
/* 所有可点击元素最小触摸区域 */
@media(hover:none) and (pointer:coarse){
  .engine-btn,.top-btn,.close-btn,a.view-all{min-width:48px;height:48px;display:flex;align-items:center;justify-content:center;}
  #profileBtn{width:48px;height:48px;}
}
/* ===== 🖥️ 2560×1600 提示词面板全屏优化 ===== */
@media(min-width:2560px) and (max-height:1600px){
  /* 面板全屏覆盖 */
  #allNotesPanel:not(.no-fullscreen){
    width:100vw!important;min-width:100vw!important;max-width:100vw!important;
    height:100dvh!important;max-height:100dvh!important;
    border-radius:0!important;
    top:50%!important;left:50%!important;
    transform:translate(-50%,-50%)!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #allNotesPanel.open:not(.no-fullscreen){transform:translate(-50%,-50%)!important;}
  
  /* 面板体：flex列布局，搜索栏固定，网格滚动 */
  #allNotesPanel .panel-body{
    display:flex;flex-direction:column;height:100%;padding:0!important;
    overflow:hidden!important;
  }
  
  /* 顶部搜索栏固定 */
  #allNotesPanel .np-topbar{
    flex-shrink:0;padding:16px 24px 12px;
  }
  
  /* 网格区域占满剩余，内部滚动 */
  #allNotesPanel .np-grid{
    flex:1;overflow-y:auto;overflow-x:hidden;
    padding:12px 24px 24px;
    display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:20px;
    align-content:start;grid-auto-rows:min-content;
  }
  
  /* 卡片：提示词面板覆盖 */
  #allNotesPanel .np-card{border-radius:16px;}
  #allNotesPanel .np-card:active{opacity:1;}
  
  /* 取消按钮区域滤镜 */
  #allNotesPanel .ratioFilter{display:none;}
  
  /* 弹窗居中 */
  #noteEditModal:not(.no-fullscreen)>div{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    width:520px;max-height:80vh;overflow-y:auto;
    border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.3);
  }
}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* 涟漪效果 */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none;}
@keyframes rippleAnim{to{transform:scale(4);opacity:0;}}
@media(max-width:767px){
  #genPanel{width:100vw!important;min-width:0!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;}
  #genPanel .panel-body{padding:8px 12px!important;}
}
@media(max-width:767px){
  #filePanel{width:100vw!important;min-width:0!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;overflow:hidden;}
  #filePanel .panel-body{padding:12px 16px 100px!important;overflow-x:auto!important;overflow-y:hidden!important;}
  #fileListGrid{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:8px!important;padding:8px!important;width:auto!important;}
  #fileListGrid .file-card-grid{flex-shrink:0!important;}
}
/* ===== genPanel 毛玻璃样式 ===== */
#genPanel {
  background: #fff !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  transition: width .3s ease, height .3s ease, max-width .3s ease, max-height .3s ease, top .3s ease, left .3s ease, transform .3s ease, border-radius .3s ease !important;
}
/* genPanel 自定义全屏模式（非 Fullscreen API，不覆盖浏览器地址栏） */
#genPanel.gen-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  transform: none !important;
  border-radius: 0 !important;
  z-index: 151 !important;
/* 可拖动 + 可缩放 */
#genPanel.dragging{transition:none!important;cursor:grabbing!important;box-shadow:0 16px 64px rgba(0,0,0,0.25)!important;}
#genPanel .gen-resize-handle:hover{background:var(--accent);opacity:.6;}
#genPanel .gen-resize-handle{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;z-index:200;}
#genPanel .gen-resize-handle::after{content:"";position:absolute;right:4px;bottom:4px;width:12px;height:12px;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);opacity:.6;}
}
/* 消息区 - 透明背景 */
#genMessages {
  overscroll-behavior: contain;
  background: transparent !important;
  scrollbar-width: thin !important;
}
#genMessages::-webkit-scrollbar{width:4px;}
#genMessages::-webkit-scrollbar-thumb{background:var(--text3);border-radius:4px;

/* 底部输入区域 - 毛玻璃 */
#genPanel > div:last-child {
  background: hsla(var(--brand-h),15%,92%,0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--card-border) !important;
}
/* 高级参数区 */
#genAdvanced {
  background: hsla(var(--brand-h),12%,93%,0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--card-border) !important;
}
/* 输入框 */
#genInput {
  background: hsla(var(--brand-h),14%,94%,0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--card-border) !important;
}
/* 下拉选择框 */
#genPanel select {
  background: hsla(var(--brand-h),12%,94%,0.18) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid var(--card-border) !important;
}

/* 底部按钮区域所有按钮 - 毛玻璃 */
#genPanel > div:last-child button {
  background: hsla(var(--brand-h),15%,92%,0.25) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}
#genPanel > div:last-child button:hover {
  background: hsla(var(--brand-h),18%,90%,0.35) !important;
  border-color: var(--accent) !important;
}
/* 生成按钮保留渐变 */
#genPanel > div:last-child button[onclick="sendGenPrompt()"] {
  background: linear-gradient(135deg, hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) - 5%)), hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) + 10%))) !important;
  border: 1px solid var(--card-border) !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
/* 用户消息气泡 - 半透明毛玻璃 */
#genMessages > div[style*="accent-soft"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
/* 图片 hover 操作按钮 */
#genPanel .gen-hover-actions span {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
/* ===== 暗色模式兼容 ===== */
:root[data-theme="dark"] #genPanel {
  background: rgba(20,20,40,0.4) !important;
  border-color: var(--card-border) !important;
}
:root[data-theme="dark"] #genPanel > div:last-child {
  background: rgba(20,20,40,0.3) !important;
  border-top-color: var(--card-border) !important;
}
:root[data-theme="dark"] #genAdvanced {
  background: rgba(20,20,40,0.3) !important;
  border-bottom-color: var(--card-border) !important;
}
:root[data-theme="dark"] #genInput {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--card-border) !important;
}
:root[data-theme="dark"] #genPanel select {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--card-border) !important;
}
:root[data-theme="dark"] #genPanel > div:last-child button:not([onclick="sendGenPrompt()"]) {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] #genPanel > div:last-child button:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: var(--accent) !important;
}
:root[data-theme="dark"] #genPanel select {
  color: var(--text) !important;
}
:root[data-theme="dark"] #genPanel > div:last-child button[onclick="sendGenPrompt()"] {
  background: linear-gradient(135deg, hsl(var(--brand-h),var(--brand-s),var(--brand-l)), hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) + 15%))) !important;
  opacity: .6 !important;
}
:root[data-theme="dark"] #genMessages > div[style*="accent-soft"] {
  background: hsla(var(--brand-h),35%,80%,0.08) !important;
  border-color: hsla(var(--brand-h),35%,80%,0.06) !important;
}
/* ===== genInput 提示词输入框全屏展开模式 ===== */
.gen-input-wrap {
  position: relative;
}
.gen-input-fs-btn {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: var(--card) !important;
  color: var(--text3) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s ease !important;
  opacity: .65 !important;
  z-index: 5 !important;
  line-height: 1 !important;
  border: 1px solid var(--card-border) !important;
}
.gen-input-wrap:hover .gen-input-fs-btn {
  opacity: .85 !important;
}
.gen-input-fs-btn:hover {
  opacity: 1 !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
/* 全屏展开模式 */
#genPanel.gen-prompt-fullscreen #genMessages {
  display: none !important;
}
#genPanel.gen-prompt-fullscreen > div:last-child {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding-bottom: 8px !important;
  overflow: hidden !important;
}
#genPanel.gen-prompt-fullscreen > div:last-child > div:last-child {
  flex-shrink: 0 !important;
}
#genPanel.gen-prompt-fullscreen .gen-input-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
#genPanel.gen-prompt-fullscreen #genInput {
  flex: 1 !important;
  width: 100% !important;
  min-height: 120px !important;
  height: auto !important;
  max-height: none !important;
  resize: none !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  padding: 16px 18px !important;
  transition: all .3s ease !important;
}
#genPanel.gen-prompt-fullscreen .gen-input-fs-btn {
  opacity: .6 !important;
  top: 12px !important;
  right: 12px !important;
  border: 1px solid var(--card-border) !important;
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(4px) !important;
}
#genPanel.gen-prompt-fullscreen .gen-input-fs-btn:hover {
  opacity: 1 !important;
  background: var(--accent-soft) !important;
}
/* 深色主题适配 */
:root[data-theme="dark"] .gen-input-fs-btn {
  background: rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] #genPanel.gen-prompt-fullscreen #genInput {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* ===== 大屏桌面 ≥2560px ===== */
@media(min-width:2560px) and (min-height:1080px){
  .sidebar{width:280px;padding:0 18px 30px;}
  .sidebar.collapsed{width:52px;padding:0 8px 30px;}
}
/* 🔧 平板横屏溢出修复：强制 html/body 不溢出 */
html{overflow-x:hidden;overflow-y:scroll;margin:0;padding:0;}
body{overflow-x:hidden;overflow-y:scroll;margin:0;padding:0;}
*,*::before,*::after{box-sizing:border-box;}
/* ===== 平板等比缩放90% ===== */
@media (min-width: 1050px) and (max-width: 1350px) {
  html, body { overflow-x: hidden; }
  .app { transform: scale(.9); transform-origin: top left; width: 111%; }
}

.card:active,.cat:active,button:active,.top-btn:active{transform:scale(0.96);opacity:.8;transition:.05s}

/* ===== 导航站动画与氛围优化 ===== */
/* 面板过渡动画 */
.panel-animate {
  transition: opacity .25s cubic-bezier(0.34, 1.56, 0.64, 1), transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.panel-animate.slide-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
.panel-animate.slide-out {
  opacity: 0;
  transform: translateY(20px) scale(.95);
}

/* 列表项微交互 - 删除动画 */
.card-delete-out {
  animation: cardDeleteOut .3s ease-in forwards;
}
@keyframes cardDeleteOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.8); }
}

/* 背景渐变漂移 */
body.anim-bg-gradient {
  animation: bgDrift 20s ease-in-out infinite alternate;
  background-size: 150% 150% !important;
}
@keyframes bgDrift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 图片背景呼吸缩放 */
body.anim-bg-image {
  animation: bgBreathe 30s ease-in-out infinite alternate;
}
@keyframes bgBreathe {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* 侧边栏扫光 */
.sidebar::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: sidebarShine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sidebarShine {
  0% { left: -100%; }
  60% { left: 100%; }
  100% { left: 100%; }
}

/* 生图完成惊喜动画 */
.gen-image-pop {
  animation: genPop .4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.gen-image-pop img {
  transition: filter .3s;
}
@keyframes genPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 鼠标视差容器 */
.parallax-bg {
  transition: transform .15s ease-out;
}
.parallax-grid {
  transition: transform .15s ease-out;
}

/* ================================
   QQ 音乐播放器样式（毛玻璃风格，与导航站一致）
   ================================ */

/* 面板入场动画 */
@keyframes panelIn {
  from { transform: scale(.85) translateY(12px); opacity:0; }
  to { transform: scale(1) translateY(0); opacity:1; }
}

#qqMusicBtn {
  background: linear-gradient(135deg, hsl(var(--brand-h),var(--brand-s),var(--brand-l)), hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) + 15%))) !important;
  box-shadow: 0 4px 24px hsla(var(--brand-h),var(--brand-s),var(--brand-l),.35) !important;
  animation: qqMusicPulse 2.5s ease-in-out infinite !important;
  position: relative;
  overflow: visible;
}

@keyframes qqMusicPulse {
  0%, 100% {
    box-shadow: 0 4px 24px hsla(var(--brand-h),var(--brand-s),var(--brand-l),.35);
  }
  50% {
    box-shadow: 0 4px 36px hsla(var(--brand-h),var(--brand-s),var(--brand-l),.55);
  }
}

/* QQ音乐按钮呼吸光环 */
#qqMusicBtn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--brand-h),var(--brand-s),var(--brand-l)), hsl(var(--brand-h),var(--brand-s),calc(var(--brand-l) + 15%)));
  opacity: 0.2;
  z-index: -1;
  animation: qqMusicRing 2.5s ease-in-out infinite;
}

@keyframes qqMusicRing {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.12); opacity: 0.1; }
}

/* 图标弹跳动画 */
#qqMusicBtnIcon {
  display: inline-block;
  animation: qqMusicIconBounce 3s ease-in-out infinite;
}

@keyframes qqMusicIconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 音乐面板基类 */
.music-panel {
  display:flex; flex-direction:column; overflow:hidden;
}

/* 面板头部 */
.music-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 8px;
  border-bottom:1px solid var(--card-border,rgba(255,255,255,.06));
  flex-shrink:0;
}
.music-panel-title {
  font-size:14px; font-weight:600; color:var(--text,#fff);
  display:flex; align-items:center; gap:6px;
}
.music-close-btn {
  background:rgba(255,255,255,.05); border:none;
  color:var(--text3,rgba(255,255,255,.4));
  border-radius:8px; width:28px; height:28px; font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.music-close-btn:hover { background:rgba(255,255,255,.1); color:var(--text,#fff); }

/* 搜索区域 */
.music-search-area {
  display:flex; padding:8px 12px; gap:6px; flex-shrink:0;
}
.music-search-input {
  flex:1; padding:8px 12px; border-radius:10px;
  border:1px solid var(--card-border,rgba(255,255,255,.1));
  background:var(--card,rgba(255,255,255,.08));
  color:var(--text,#fff); font-size:13px; outline:none;
  transition:border-color .2s;
}
.music-search-input:focus { border-color:var(--accent,#818cf8); }
.music-search-input::placeholder { color:var(--text3,rgba(255,255,255,.35)); }
.music-search-btn {
  width:36px; height:36px; border:none; border-radius:10px;
  background:var(--accent-soft,rgba(100,100,255,.15));
  color:var(--accent,#818cf8); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0;
}
.music-search-btn:hover { background:var(--accent,#818cf8); color:#fff; }
.music-search-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* 搜索结果列表 */
.music-results {
  flex:1; overflow-y:auto; padding:4px 8px; min-height:0;
}
.music-loading {
  display:flex; align-items:center; justify-content:center;
  height:100%; min-height:60px;
  color:var(--text2,rgba(255,255,255,.5));
  font-size:13px; text-align:center; padding:40px 16px;
  box-sizing:border-box;
}
.music-result-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:10px; cursor:pointer;
  transition:all .15s; margin-bottom:2px;
}
.music-result-item { border-left:3px solid transparent; transition:all .15s; }
.music-result-item:hover { background:rgba(255,255,255,.06); }
.music-result-item-active { background:rgba(67,233,123,.12); }
.music-result-item-active, .music-playlist-item-active {
  background:rgba(67,233,123,.18) !important;
  border-left:3px solid #43e97b;
}
.music-result-info { flex:1; min-width:0; overflow:hidden; }
.music-result-name {
  font-size:13px; color:var(--text,#fff); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.music-result-singer {
  font-size:11px; color:var(--text3,rgba(255,255,255,.4));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}
.music-result-add {
  width:24px; height:24px; border-radius:50%;
  background:rgba(67,233,123,.15); color:#43e97b;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0; margin-left:8px;
  transition:all .2s;
}
.music-result-item:hover .music-result-add { background:rgba(67,233,123,.3); }

/* 播放器底部控制栏 */
.music-player-bar {
  display:flex; align-items:center; gap:6px;
  padding:8px 12px 10px;
  border-top:1px solid var(--card-border,rgba(255,255,255,.06));
  flex-shrink:0; flex-wrap:wrap; position:relative;
}
.music-cover {
  width:48px; height:48px; border-radius:8px; object-fit:cover;
  flex-shrink:0; background:var(--card-border);
}
.music-info {
  flex:1; min-width:0; overflow:hidden;
}
.music-song-name {
  font-size:13px; color:var(--text,#fff); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.music-singer-name {
  font-size:11px; color:var(--text3,rgba(255,255,255,.4));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 播放控制按钮 */
.music-controls {
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}
.music-ctrl-btn {
  width:30px; height:30px; border:none; border-radius:8px;
  background:transparent; color:var(--text2,rgba(255,255,255,.6));
  font-size:14px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all .2s;
}
.music-ctrl-btn:hover { background:rgba(255,255,255,.08); color:var(--text,#fff); }
.music-ctrl-btn:active { transform:scale(0.9); }
.music-play-btn {
  width:36px; height:36px; font-size:16px;
  background:linear-gradient(135deg,#43e97b,#38f9d7);
  color:#0a0a1a; border-radius:50%;
}
.music-play-btn:hover { transform:scale(1.08); }

/* 进度条 */
.music-progress-wrap {
  display:flex; align-items:center; gap:6px; width:100%; order:1;
}
.music-time {
  font-size:10px; color:var(--text3,rgba(255,255,255,.35));
  font-variant-numeric:tabular-nums; flex-shrink:0; min-width:36px;
  text-align:center;
}
.music-progress-track {
  flex:1; height:4px; border-radius:2px;
  background:rgba(255,255,255,.1); cursor:pointer; position:relative;
}
.music-progress-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,#43e97b,#38f9d7);
  transition:width .1s linear; position:relative;
}
.music-progress-thumb {
  position:absolute; top:50%; width:12px; height:12px;
  border-radius:50%; background:#43e97b;
  transform:translate(-50%,-50%); pointer-events:none;
  transition:left .1s linear;
}

/* 音量控制 */
.music-volume-wrap {
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}
.music-volume-icon {
  font-size:12px; cursor:pointer; color:var(--text2,rgba(255,255,255,.5));
  transition:color .2s;
}
.music-volume-icon:hover { color:var(--text,#fff); }
.music-volume-track {
  width:50px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.1); cursor:pointer; position:relative;
}
.music-volume-fill {
  height:100%; border-radius:2px;
  background:var(--accent,#818cf8); transition:width .1s;
}

/* 播放列表按钮 */
.music-playlist-btn { font-size:13px; }

/* 播放列表下拉 */
.music-playlist {
  position:absolute; bottom:100%; left:0; right:0;
  max-height:200px; overflow-y:auto;
  background:var(--bg2,rgba(20,20,30,.97));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--card-border,rgba(255,255,255,.06));
  border-radius:12px 12px 0 0; padding:4px 0;
  z-index:10;
}
.music-playlist-empty {
  text-align:center; padding:20px; color:var(--text3,rgba(255,255,255,.35));
  font-size:12px;
}
.music-playlist-item {
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  cursor:pointer; transition:all .15s;
}
.music-playlist-item:hover { background:rgba(255,255,255,.04); }
.music-playlist-item-active { background:rgba(67,233,123,.1); }
.music-playlist-idx {
  width:18px; text-align:right; font-size:11px;
  color:var(--text3,rgba(255,255,255,.3)); flex-shrink:0;
}
.music-playlist-info { flex:1; min-width:0; }
.music-playlist-name {
  font-size:12px; color:var(--text,#fff);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.music-playlist-singer {
  font-size:10px; color:var(--text3,rgba(255,255,255,.35));
}
.music-playlist-del {
  font-size:10px; color:var(--text3,rgba(255,255,255,.3));
  cursor:pointer; padding:2px 4px; border-radius:4px;
  transition:all .2s; flex-shrink:0;
}
.music-playlist-del:hover { color:var(--danger,#d63a6a); background:rgba(214,58,106,.1); }

/* 响应式：手机适配 */
@media(max-width:480px){
  #fabContainer { right:12px;bottom:16px; }
  #fabMenu > div { width:42px;height:42px;font-size:18px; }
  #fabMain { width:36px;height:36px;font-size:14px; }
  #qqMusicPanel { right:10px;left:10px;width:auto;bottom:150px;max-height:calc(100dvh - 180px); }
  #btPanel { right:10px;left:10px;width:auto;bottom:150px;height:50vh; }
  .music-volume-track { width:36px; }
}

/* ===== 移动端抽屉式侧栏（汉堡菜单） ===== */
/* 汉堡按钮 */
.hamburger-btn{
  display:none !important;
  position:fixed;
  top:12px;
  left:12px;
  z-index:1001;
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--card-border);
  background:var(--card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  color:var(--text2);
  font-size:20px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:all .25s ease;
}
.hamburger-btn:hover{color:var(--accent);border-color:var(--accent);}
.hamburger-btn:active{transform:scale(.92);}
/* 移动端遮罩 */
.nav-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:999;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
body.nav-open .nav-overlay{
  display:block;
  opacity:1;
  pointer-events:auto;
}
/* 桌面端永不显示汉堡按钮 */
@media(min-width:521px){
  .hamburger-btn{display:none !important;}
}
/* ≤520px: 移动端模式 */
@media(max-width:520px){
  .hamburger-btn{display:flex;}
  body .sidebar{
    position:fixed;
    top:0;left:0;
    width:80vw;max-width:320px;
    height:100dvh;
    z-index:1000;
    border-radius:0 16px 16px 0;
    padding:16px 16px 24px;
    transform:translateX(-100%);
    transition:transform .3s ease;
    overflow-y:auto;
  }
  body .sidebar.collapsed{width:80vw;max-width:320px;padding:16px 16px 24px;}
  body .sidebar.collapsed .logo-main span:not(.logo-icon){display:inline;}
  body .sidebar.collapsed .cat-search-wrap{display:block;}
  body .sidebar.collapsed .cat .cat-text,
  body .sidebar.collapsed .cat .num{display:inline;}
  body .sidebar.collapsed .cat{padding:10px 12px;justify-content:flex-start;border-radius:14px;}
  body .sidebar.collapsed .sidebar-actions button{font-size:13px;padding:10px;text-align:left;}
  body .sidebar.collapsed .sidebar-actions button::first-letter{font-size:inherit;}
  body .sidebar.collapsed .sidebar-bottom-actions button{font-size:13px;padding:10px;text-align:left;}
  body .sidebar.collapsed .sidebar-bottom-actions button::first-letter{font-size:inherit;}
  body .sidebar.collapsed .sidebar-section-divider,
  body .sidebar.collapsed .sidebar-section-label{display:block;}
  body.nav-open .sidebar{transform:translateX(0);}
  /* 移动端侧栏收起按钮隐藏（桌面折叠不用在移动端显示） */
  body .sidebar #sidebarCollapseBtn{display:none;}
  /* 主内容全宽 */
  .app{padding:12px;gap:12px;}
  .main{width:100%;}
  .footer{left:auto!important;margin:10px auto!important;}
}

}

/* 回收站视图 */
#fileListGrid.trash-view{display:flex;flex-direction:column;gap:6px;padding:8px;height:auto;max-height:none;width:100%}
#fileListGrid.trash-view .file-card-grid{width:100%!important;height:auto!important;min-height:100px;display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px 14px;text-align:left;}