/* ========== 页头 ========== */
.topbar{
  padding:8px 0 12px;
  margin-bottom:8px;
}
.topbar h1{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.topbar-new-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;
  border-radius:12px;
  border:none;
  background:var(--primary);
  color:#fff;
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:transform .4s cubic-bezier(0.34, 1.56, 0.64, 1),background .18s ease,box-shadow .18s ease;
  box-shadow:0 1px 3px rgba(47,110,79,.2);
}
.topbar-new-btn:hover{
  background:var(--primary-dark);
  box-shadow:0 3px 10px rgba(47,110,79,.25);
  transform:scale(1.06);
}
.topbar-new-btn:active{
  transform:scale(0.94);
  transition:transform .08s ease;
}
.topbar .subtitle{font-size:13px;color:var(--text3);margin-top:4px}

/* ========== 页面刷新按钮 ========== */
.page-refresh-btn{
  width:40px;height:34px;
  border-radius:12px;
  border:1px solid rgba(47,110,79,.2);
  background:rgba(47,110,79,.1);
  color:#2f6e4f;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  flex-shrink:0;
}
.page-refresh-btn:hover{
  background:#2f6e4f;
  border-color:#2f6e4f;
  color:#fff;
  box-shadow:0 4px 16px rgba(47,110,79,.4),0 2px 6px rgba(47,110,79,.25);
}
.page-refresh-btn:active{
  transform:scale(0.96);
  box-shadow:0 1px 4px rgba(47,110,79,.2);
}
.page-refresh-btn svg{
  width:15px;height:15px;
  transition:transform .3s ease;
}
.page-refresh-btn.refreshing svg{
  animation:spinRefresh .7s linear infinite;
}
@keyframes spinRefresh{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ========== 搜索框 ========== */
.search-box{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(0,0,0,0.05);
  border-radius:16px;
  padding:13px 18px;margin-top:16px;
  box-shadow:0 2px 16px rgba(0,0,0,0.05),0 1px 4px rgba(0,0,0,0.03),inset 0 1px 0 rgba(255,255,255,0.8);
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.search-box::before{
  content:'';
  position:absolute;
  top:0;left:12px;right:12px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent);
  pointer-events:none;
}
.search-box:focus-within{
  border-color:rgba(47,110,79,0.35);
  box-shadow:0 4px 24px rgba(47,110,79,0.12),0 0 0 4px rgba(47,110,79,0.07),inset 0 1px 0 rgba(255,255,255,0.9);
  background:rgba(255,255,255,0.9);
}
.search-box .icon{
  color:var(--text3);
  margin-right:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.6;
  transition:all .3s ease;
}
.search-box:focus-within .icon{
  color:var(--primary);
  opacity:1;
}
.search-box input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:14px;
  font-weight:500;
  letter-spacing:.3px;
}
.search-box input::placeholder{
  color:var(--text3);
  font-weight:400;
  opacity:.5;
  letter-spacing:.2px;
}
.search-clear{
  display:none;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,0,0,0.06);
  color:var(--text3);
  cursor:pointer;
  margin-left:8px;
  transition:all .2s ease;
  flex-shrink:0;
}
.search-clear:hover{
  background:rgba(0,0,0,0.1);
  color:var(--text);
  transform:scale(1.1);
}
.search-clear:active{
  transform:scale(0.95);
}

/* ========== 标签筛选 ========== */
.tag-filter{
  display:flex;gap:6px;
  padding:16px 0 8px;
  overflow-x:auto;scrollbar-width:none;
}
.tag-filter::-webkit-scrollbar{display:none}
.tag-chip{
  padding:6px 14px;border-radius:999px;
  font-size:12.5px;font-weight:500;
  background:var(--card);
  color:var(--text2);
  border:1px solid var(--border);
  white-space:nowrap;cursor:pointer;
  transition:all .15s ease;
}
.tag-chip:hover{border-color:var(--primary);color:var(--primary)}
.tag-chip.active{
  background:var(--primary);color:#fffefb;border-color:var(--primary);
}

/* ========== 卡片通用 ========== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  transition:box-shadow .15s ease,border-color .15s ease;
}
.card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(47,110,79,.15);
}

/* ========== 首页统计卡片 ========== */
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;padding:0 0;margin-bottom:22px;
}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.stat-card:active{transform:scale(.985)}
.stat-card .stat-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-bottom:14px;
  background:var(--accent-light);color:var(--accent);
}
.stat-card .stat-num{
  font-size:30px;font-weight:750;line-height:1.15;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat-card .stat-label{font-size:12px;color:var(--text3);margin-top:4px}

/* ========== 通用区块 ========== */
.section{padding:0;margin-bottom:30px}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.section-header h2{font-size:17px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.section-header .more{font-size:13px;color:var(--primary);cursor:pointer;font-weight:550}

/* ========== 笔记卡片（列表） ========== */
.note-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;margin-bottom:0;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease, border-color .2s ease;
  min-width:0;
  transform:scale(1);
}
.note-card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(47,110,79,.2);
  transform:scale(1.04);
}
.note-card:active{
  transform:scale(0.96);
  transition:transform .08s ease;
}
.note-card .nc-title{
  font-size:16px;font-weight:650;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.note-card .nc-preview{
  font-size:13.5px;color:var(--text2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:12px;
}
.note-card .nc-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--text3);
}
.note-card .nc-tags{display:flex;gap:5px}
.note-card .nc-tag{background:var(--tag-bg);padding:2px 10px;border-radius:999px;font-size:11px;color:var(--text2)}
.note-card .nc-attach{display:flex;align-items:center;gap:3px}

/* 列表容器：PC 端多列网格 */
.list-container{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:14px;padding:0;
}
#folderNoteList,#folderFileList{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:14px;padding:16px 0 0;
}

/* ========== 文件卡片（列表） ========== */
.file-card{
  display:flex;align-items:center;gap:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;margin-bottom:0;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease, border-color .2s ease;
  transform:scale(1);
}
.file-card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(47,110,79,.2);
  transform:scale(1.04);
}
.file-card:active{
  transform:scale(0.96);
  transition:transform .08s ease;
}
.file-card .fc-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  background:var(--tag-bg);
  overflow:hidden;
}
.file-card .fc-icon.img{background:var(--tag-bg)}
.file-card .fc-icon.doc{background:var(--tag-bg)}
.file-card .fc-icon.pdf{background:var(--tag-bg)}
.file-card .fc-icon.video{background:var(--tag-bg)}
.file-card .fc-icon.audio{background:var(--tag-bg)}
.file-card .fc-icon.zip{background:var(--tag-bg)}
.file-card .fc-info{flex:1;min-width:0}
.file-card .fc-name{
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-card .fc-detail{font-size:12px;color:var(--text3);margin-top:3px}
.file-card .fc-arrow{color:var(--text3);font-size:17px;flex-shrink:0}

/* ========== 空状态 ========== */
.empty{
  text-align:center;padding:88px 20px;color:var(--text3);
}
.empty .empty-icon{font-size:44px;margin-bottom:18px;opacity:.4}
.empty p{font-size:15px;color:var(--text2)}
.empty .empty-hint{font-size:13px;color:var(--text3);margin-top:6px}

/* ========== 悬浮按钮 ========== */
.fab{
  position:fixed;bottom:44px;right:44px;
  width:54px;height:54px;border-radius:50%;
  background:var(--primary);
  color:#fffefb;
  font-size:26px;font-weight:300;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(47,110,79,.32),0 2px 6px rgba(47,110,79,.18);
  z-index:99;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.fab:active{transform:scale(.92)}

/* ========== 编辑页 ========== */
.editor-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 14px;
  background:transparent;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--hairline);
}
.editor-top .back{font-size:15px;color:var(--primary);cursor:pointer;padding:7px 12px;border-radius:8px;font-weight:550;transition:background .18s ease}
.editor-top .back:active{background:var(--primary-light)}
.editor-top .save{
  background:var(--primary);color:#fffefb;
  padding:9px 26px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;
  box-shadow:0 1px 3px rgba(47,110,79,.28);
  transition:background .18s ease,transform .18s ease;
}
.editor-top .save:active{background:var(--primary-dark);transform:scale(.97)}

.editor-body{padding:8px 0 64px;max-width:780px;margin:0 auto;width:100%}
.editor-body .title-input{
  width:100%;border:none;outline:none;background:transparent;
  font-size:26px;font-weight:750;letter-spacing:-.02em;padding:22px 0 12px;
  border-bottom:1px solid var(--border);margin-bottom:10px;
  color:var(--ink);
}
.editor-body .title-input::placeholder{color:var(--text3);font-weight:650}
.editor-body .content-input{
  width:100%;border:none;outline:none;background:transparent;
  font-size:15.5px;line-height:1.9;min-height:220px;
  resize:none;padding:14px 0;color:var(--text);
}
.editor-body .content-input::placeholder{color:var(--text3)}

/* 标签输入 */
.tag-input-wrap{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:14px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);margin-bottom:14px;
}
.tag-input-wrap .tag-item{
  background:var(--accent-light);
  color:var(--accent);
  padding:4px 12px;border-radius:999px;font-size:12.5px;
  display:flex;align-items:center;gap:5px;font-weight:550;
}
.tag-input-wrap .tag-item .remove{cursor:pointer;font-weight:700;font-size:14px;opacity:.6}
.tag-input-wrap input{
  flex:1;min-width:80px;border:none;outline:none;
  font-size:13.5px;padding:4px;background:transparent;color:var(--text);
}
.tag-input-wrap input::placeholder{color:var(--text3)}

/* ========== 文件夹选择器（brandkit 风格） ========== */
.folder-picker{
  display:flex;align-items:center;gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--hairline);
}
.folder-picker .fp-label{
  font-size:13px;color:var(--text2);font-weight:500;
  white-space:nowrap;letter-spacing:.01em;
  display:flex;align-items:center;gap:6px;
}
.folder-picker .fp-select{
  flex:1;
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--border);
  border-radius:12px;
  padding:11px 40px 11px 16px;
  font-size:14px;font-weight:500;
  background:var(--card);
  color:var(--text);
  outline:none;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
}
.folder-picker .fp-select:hover{
  border-color:var(--primary);
  background-color:var(--primary-light);
}
.folder-picker .fp-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light);
}
.folder-picker .fp-new{
  padding:10px 18px;
  border-radius:12px;
  border:none;
  background:var(--primary);
  color:#fff;
  font-size:13px;font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease,transform .15s ease,box-shadow .18s ease;
  box-shadow:0 1px 3px rgba(47,110,79,.2);
}
.folder-picker .fp-new:hover{
  background:var(--primary-dark);
  box-shadow:0 2px 8px rgba(47,110,79,.25);
}
.folder-picker .fp-new:active{
  transform:scale(.96);
}

/* 自定义下拉组件 */
.custom-select{
  position:relative;
  flex:1;
}
.custom-select .cs-trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--border);
  border-radius:12px;
  padding:11px 16px;
  font-size:14px;font-weight:500;
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
  user-select:none;
}
.custom-select .cs-trigger:hover{
  border-color:var(--primary);
  background:var(--primary-light);
}
.custom-select.open .cs-trigger{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light);
}
.custom-select .cs-arrow{
  width:16px;height:16px;
  transition:transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink:0;
  color:var(--text2);
}
.custom-select.open .cs-arrow{
  transform:rotate(180deg);
}
.custom-select .cs-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(26,25,22,.1),0 2px 6px rgba(26,25,22,.06);
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:200;
  max-height:240px;
  overflow-y:auto;
}
.custom-select.open .cs-dropdown{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.custom-select .cs-option{
  padding:12px 16px;
  font-size:14px;
  color:var(--text);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--hairline);
}
.custom-select .cs-option:last-child{
  border-bottom:none;
}
.custom-select .cs-option:hover{
  background:var(--primary-light);
  color:var(--primary);
}
.custom-select .cs-option.selected{
  background:var(--primary-light);
  color:var(--primary);
  font-weight:600;
}
.custom-select .cs-option.selected::after{
  content:"✓";
  margin-left:auto;
  font-size:13px;
  font-weight:700;
}

/* 附件区 */
.attach-section{margin-top:12px}
.attach-section h3{font-size:13px;color:var(--text2);margin-bottom:12px;font-weight:600}
.attach-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:12px;margin-bottom:14px;
}
.attach-item{
  position:relative;border-radius:12px;overflow:hidden;
  background:var(--tag-bg);
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.attach-item img{width:100%;height:100%;object-fit:cover}
.attach-item .file-icon{font-size:30px;color:var(--text3)}
.attach-item .file-name{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(33,31,26,.72));color:#fffefb;
  font-size:10px;padding:14px 8px 5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.attach-item .del-btn{
  position:absolute;top:6px;right:6px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(33,31,26,.62);color:#fffefb;
  font-size:13px;display:flex;align-items:center;justify-content:center;
  z-index:2;border:none;cursor:pointer;
}
/* 大附件区域：hover 内分三栏 */
.attach-zone{
  position:relative;
  border:1.5px dashed var(--border);
  border-radius:16px;
  height:110px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.attach-zone:hover{
  border-color:var(--primary);
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.attach-zone.drag-over{
  border-color:var(--primary);
  background:var(--primary-light);
  transform:scale(1.01);
}
.attach-zone .az-default{
  position:absolute;
  inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;
  color:var(--text3);
  font-size:14px;font-weight:500;
  transition:opacity .2s ease;
}
.attach-zone:hover .az-default{
  opacity:0;
}
.attach-zone .az-options{
  position:absolute;
  inset:0;
  display:flex;
  opacity:0;
  transition:opacity .2s ease;
}
.attach-zone:hover .az-options{
  opacity:1;
}
.attach-zone .az-option{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;
  border-right:1px solid var(--hairline);
  transition:background .15s ease;
}
.attach-zone .az-option:last-child{
  border-right:none;
}
.attach-zone .az-option:hover{
  background:var(--primary-light);
}
.attach-zone .az-option:hover .azo-text{
  color:var(--primary);
}
.attach-zone .azo-icon{font-size:26px}
.attach-zone .azo-text{font-size:13px;font-weight:500;color:var(--text2);transition:color .15s ease}

.attach-add{
  border:1.5px dashed var(--border-solid);border-radius:12px;
  aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;
  color:var(--text3);font-size:12px;gap:5px;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.attach-add:active{background:var(--accent-light);border-color:rgba(47,110,79,.4);color:var(--accent)}
.attach-add .plus{font-size:22px}

.file-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.file-list .file-item{
  display:flex;align-items:center;gap:12px;
  background:var(--card);
  border:1px solid var(--border);
  padding:12px 14px;border-radius:12px;cursor:pointer;
  transition:border-color .18s ease;
}
.file-list .file-item .ficon{font-size:20px;flex-shrink:0}
.file-list .file-item .finfo{flex:1;min-width:0}
.file-list .file-item .fname{font-size:13px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .file-item .fsize{font-size:11px;color:var(--text3)}
.file-list .file-item .fdel{color:var(--danger);font-size:17px;padding:4px;flex-shrink:0}

/* ========== 详情页 ========== */
.detail-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 14px;
  background:transparent;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--hairline);
}
.detail-top .back{font-size:15px;color:var(--primary);cursor:pointer;padding:7px 12px;border-radius:8px;font-weight:550;transition:background .18s ease}
.detail-top .actions{display:flex;gap:8px}
.detail-top .action-btn{
  padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;
  font-weight:600;cursor:pointer;
  background:var(--tag-bg);color:var(--text2);
  transition:opacity .18s ease,transform .18s ease;
}
.detail-top .action-btn:active{transform:scale(.96)}
.detail-top .edit-btn{background:var(--accent-light);color:var(--accent)}
.detail-top .del-btn{background:rgba(192,70,62,.09);color:var(--danger)}

.detail-body{padding:10px 0 64px;max-width:780px;margin:0 auto;width:100%}
.detail-body h1{font-size:27px;font-weight:750;letter-spacing:-.02em;margin-bottom:12px;line-height:1.4;color:var(--ink);text-wrap:balance}
.detail-body .detail-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:26px;font-size:12px;color:var(--text3);
}
.detail-body .detail-meta .dtag{background:var(--tag-bg);padding:3px 12px;border-radius:999px;color:var(--text2)}
.detail-body .detail-content{
  font-size:15.5px;line-height:1.95;color:var(--text);
  white-space:pre-wrap;word-break:break-word;margin-bottom:30px;
}

.detail-attach h3{font-size:13px;color:var(--text2);margin-bottom:12px;font-weight:600}
.detail-attach .img-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px;
}
.detail-attach .img-grid img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;cursor:pointer;
  transition:opacity .18s ease;
}
.share-row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.share-row button{
  flex:1;min-width:140px;padding:12px;border-radius:var(--radius-sm);
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:transform .15s ease,background .18s ease;
}
.share-row button:active{transform:scale(.97)}
.share-row .btn-primary{background:var(--primary);color:#fffefb;box-shadow:0 1px 3px rgba(47,110,79,.28)}
.share-row .btn-outline{background:var(--accent-light);color:var(--accent)}

/* ========== 设置页 ========== */
.settings-list{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:0;
}
.settings-item{
  padding:16px 20px;margin-bottom:0;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--hairline);
  transition:background .18s ease;
}
.settings-item:last-child{border-bottom:none}
.settings-item:active{background:rgba(255,255,255,.06)}
.settings-item .sleft{display:flex;align-items:center;gap:14px}
.settings-item .sicon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--tag-bg);flex-shrink:0;
}
.settings-item .stext .stitle{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.settings-item .stext .sdesc{font-size:12px;color:var(--text3);margin-top:2px}
.settings-item .sarrow{color:var(--text3);font-size:17px}
.settings-item.danger .stitle{color:var(--danger)}

/* ========== 图片预览遮罩 ========== */
.img-preview{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(24,22,17,.94);z-index:1000;
  display:none;align-items:center;justify-content:center;cursor:zoom-out;
}
.img-preview.active{display:flex}
.img-preview img{max-width:100%;max-height:100%;object-fit:contain}

/* ========== Toast ========== */
.toast{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(33,31,26,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fffefb;
  padding:12px 26px;border-radius:12px;font-size:14px;
  z-index:10000;opacity:0;transition:opacity .3s ease;
  pointer-events:none;max-width:80%;text-align:center;
  box-shadow:0 10px 32px rgba(24,22,17,.24);
}
.toast.show{opacity:1}

/* ========== 确认弹窗 ========== */
.modal-mask{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(24,22,17,.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:1500;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-mask.active{display:flex}
.modal{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;padding:28px 26px 24px;
  max-width:400px;width:100%;text-align:center;
  box-shadow:var(--shadow-lg);
}
.modal h3{font-size:17px;font-weight:700;margin-bottom:10px;color:var(--ink);letter-spacing:-.01em}
.modal p{font-size:14px;color:var(--text2);margin-bottom:24px;line-height:1.75;white-space:pre-wrap}
/* 紧凑弹窗（仅同步本地文件使用） */
.modal-mask.compact-modal .modal{padding:18px 20px 14px}
.modal-mask.compact-modal .modal p{margin-bottom:0}
.modal .modal-btns{display:flex;gap:10px}
.modal .modal-btns button{
  flex:1;padding:11px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .15s ease,background .18s ease;
}
.modal .modal-btns button:active{transform:scale(.97)}
.modal .btn-cancel{background:var(--tag-bg);color:var(--text2)}
.modal .btn-confirm{background:var(--danger);color:#fffefb}
.modal .btn-primary{background:var(--primary);color:#fffefb}

/* ========== 文件分类筛选 ========== */
.cat-filter{
  display:flex;gap:8px;padding:8px 0 18px;
  overflow-x:auto;scrollbar-width:none;
}
.cat-filter::-webkit-scrollbar{display:none}
.cat-filter::after{content:'';flex-shrink:0;width:16px}
.cat-chip{
  padding:6px 15px;border-radius:999px;
  font-size:13px;font-weight:500;
  background:var(--card);
  color:var(--text2);
  border:1px solid var(--border);
  white-space:nowrap;cursor:pointer;transition:all .18s ease;
  display:flex;align-items:center;gap:4px;
}
.cat-chip.active{
  background:var(--primary);color:#fffefb;border-color:var(--primary);
}

/* ========== 底部弹出菜单（PC 端居中呈现） ========== */
.action-sheet-mask{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(24,22,17,.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:200;
  display:none;align-items:flex-end;justify-content:center;
  animation:fadeIn .2s ease;
}
.action-sheet-mask.show{display:flex}
.action-sheet{
  width:100%;max-width:640px;
  background:rgba(252,251,247,.96);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-radius:22px 22px 0 0;
  padding:14px 22px calc(20px + env(safe-area-inset-bottom));
  animation:slideUp .25s ease;
  border:1px solid var(--border);
  border-bottom:none;
}
.action-sheet-title{
  text-align:center;font-size:13px;color:var(--text3);
  padding:8px 0 14px;font-weight:500;
}
.action-sheet-item{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
  margin-bottom:8px;
  box-shadow:var(--shadow);
  cursor:pointer;transition:all .15s ease;
}
.action-sheet-item:active{background:rgba(255,255,255,.06);transform:scale(.985)}
.action-sheet-item .asi-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;flex-shrink:0;
  background:var(--accent-light);color:var(--accent);
}
.action-sheet-item .asi-icon.blue{background:var(--accent-light);color:var(--accent)}
.action-sheet-item .asi-icon.purple{background:var(--accent-light);color:var(--accent)}
.action-sheet-item .asi-icon.green{background:var(--accent-light);color:var(--accent)}
.action-sheet-item .asi-info{flex:1}
.action-sheet-item .asi-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.action-sheet-item .asi-desc{font-size:12px;color:var(--text3);margin-top:2px}
.action-sheet-cancel{
  width:100%;padding:14px;border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
  font-size:15px;font-weight:600;color:var(--text2);
  cursor:pointer;margin-top:4px;
  transition:transform .15s ease;
}
.action-sheet-cancel:active{transform:scale(.985)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ========== 自定义输入弹窗 ========== */
.input-modal-mask{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(24,22,17,.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:500;
  display:none;align-items:center;justify-content:center;
  padding:20px;animation:fadeIn .2s ease;
}
.input-modal-mask.show{display:flex}
.input-modal{
  width:100%;max-width:400px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px 24px 24px;
  box-shadow:var(--shadow-lg);
  animation:scaleIn .25s ease;
}
.input-modal-title{
  font-size:17px;font-weight:700;color:var(--ink);
  margin-bottom:6px;text-align:center;letter-spacing:-.01em;
}
.input-modal-desc{
  font-size:13px;color:var(--text3);
  margin-bottom:18px;text-align:center;
}
.input-modal-input{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--border-solid);border-radius:var(--radius-sm);
  font-size:15px;color:var(--text);
  background:rgba(255,255,255,.05);outline:none;
  transition:all .2s ease;
  box-sizing:border-box;
}
.input-modal-input:focus{
  border-color:rgba(181,138,62,.55);
  box-shadow:0 0 0 3px rgba(181,138,62,.10);
  background:rgba(255,255,255,.1);
}
.input-modal-btns{
  display:flex;gap:10px;margin-top:22px;
}
.input-modal-btn{
  flex:1;padding:12px;border-radius:var(--radius-sm);
  border:none;font-size:15px;font-weight:600;
  cursor:pointer;transition:all .15s ease;
}
.input-modal-btn:active{transform:scale(.97)}
.input-modal-btn.cancel{
  background:var(--tag-bg);color:var(--text2);
}
.input-modal-btn.confirm{
  background:var(--primary);color:#fffefb;
  box-shadow:0 1px 3px rgba(47,110,79,.28);
}

/* ========== 桌面端 hover 微动效（仅在支持 hover 的设备生效） ========== */
@media(hover:hover) and (pointer:fine){
  .stat-card:hover,
  .note-card:hover,
  .file-card:hover,
  .hnote-card:hover,
  .quick-card:hover,
  .vault-card:hover,
  .add-option:hover{
    transform:scale(1.04);
    box-shadow:var(--shadow-md);
    border-color:rgba(47,110,79,.2);
  }
  .tag-chip:not(.active):hover,
  .cat-chip:not(.active):hover{
    border-color:var(--border-solid);color:var(--text);
  }
  .fab:hover{
    transform:translateY(-3px);
    background:var(--primary-dark);
    box-shadow:0 14px 32px rgba(47,110,79,.36),0 3px 8px rgba(47,110,79,.2);
  }
  .editor-top .save:hover,
  .share-row .btn-primary:hover,
  .input-modal-btn.confirm:hover{
    background:var(--primary-dark);
  }
  .detail-top .action-btn:hover{opacity:.85}
  .sn-item:hover{background:rgba(255,255,255,.07)}
  .sn-item.active:hover{background:rgba(255,255,255,.13)}
  .section-header .more:hover,
  .home-section .sec-more:hover{opacity:.72}
  .settings-item:hover{background:rgba(255,255,255,.05)}
}

/* ========== 手机 / 窄屏适配 ========== */
@media(max-width:880px){
  .top-nav{
    top:12px;
    width:calc(100% - 24px);
    height:54px;
  }
  .tn-inner{padding:0 8px 0 16px;gap:16px}
  .tn-brand-text{display:none}
  .tn-logo{width:28px;height:28px;font-size:12px}
  .tn-items{height:40px}
  .tn-item{padding:0 12px}
  .tn-item .tn-label{display:none}
  .tn-item .tn-icon{font-size:17px}
  .app{
    padding:84px 16px 60px;
  }
  .fab{right:18px;bottom:84px}
  .list-container,
  #folderNoteList,#folderFileList{
    grid-template-columns:1fr;
  }
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .topbar h1{font-size:24px}
  .hero-title{font-size:26px}
  .action-sheet-mask{align-items:flex-end}
  .action-sheet{max-width:640px;border-radius:22px 22px 0 0;border-bottom:none}
}

/* ========== 手机安全区适配（APK打包用） ========== */
#app{
    padding-top: env(safe-area-inset-top);
    padding-top: constant(safe-area-inset-top);
}

/* 视频缩略图播放按钮 */
.attach-item{position:relative}
.attach-item video{width:100%;height:100%;object-fit:cover;border-radius:8px}
.video-badge{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:36px;height:36px;border-radius:50%;
    background:rgba(33,31,26,.62);color:#fffefb;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;pointer-events:none;
}