/* 远程文档库 · 手机端样式
   ─────────────────────────────────────────────────────────────────────────────
   目标：装进安卓外壳后**看上去是 App**，不是套壳网页。配色沿用原来的
   深色底（#0e1117）+ 蓝紫强调色（#4f8cff → #7b5cff），只换掉"网页味"。

   安全区：一律 env(safe-area-inset-*)。外壳侧已按修订案把系统栏自己垫掉了
   （insets() 恒返回 0），所以这里**绝不**叠加外壳返回的像素值 —— 只兜底 env()。
   浏览器里 env() 为 0，所以两种环境共用同一套规则。

   移动优先：默认按手机竖屏排；≥760px 时内容居中限宽 720px。
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#0e1117;
  --bg-soft:#151a23;
  --card:#191f2a;
  --line:#252c39;
  --text:#e8edf5;
  --muted:#8b97ab;
  --accent:#4f8cff;
  --accent-2:#7b5cff;
  --ok:#3ddc97;
  --warn:#ffb648;
  --err:#ff6b6b;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --ease-ios:cubic-bezier(.32,.72,0,1);
  --tab-h:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* 去网页味①：关掉下拉刷新与滚动回弹；关掉长按选中与长按菜单（输入框见下） */
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--text);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}

/* 去网页味②：正文/口令/搜索框里必须还能选中、还能长按选择 */
input,textarea,#editTitle,#editBody{
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
}

button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:.82em}
.center{text-align:center}
.grow{flex:1 1 auto}
.err{color:var(--err);font-size:14px;min-height:20px;margin:10px 0 0}

/* 输入框一律 16px 起：小于 16px 时 iOS 会自动放大整个页面 */
input,textarea{font:inherit;font-size:16px;color:var(--text);border:1px solid var(--line);background:var(--bg-soft)}
input::placeholder,textarea::placeholder{color:#5b667a}
input:focus,textarea:focus{outline:0;border-color:var(--accent)}

#app{
  height:100vh;            /* 老浏览器回退 */
  height:100dvh;
  display:flex;flex-direction:column;
  padding-top:var(--safe-t);
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
}
.view{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

/* ---------------- 启动页（≥300ms 后由 app.js 淡出） ---------------- */
.splash{
  position:fixed;inset:0;z-index:95;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(130% 90% at 50% 0%,#182033 0%,#0e1117 62%);
  transition:opacity 280ms ease;
  /* JS 挂了（或脚本被 CSP 拦掉）也不能永远停在启动页：6 秒后自己淡出 */
  animation:splashFallback 400ms linear 6000ms forwards;
}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.splash-logo{width:96px;height:96px;filter:drop-shadow(0 14px 30px rgba(79,140,255,.35))}
.splash-name{margin:0;font-size:17px;font-weight:600;letter-spacing:2px;color:var(--muted)}
.splash.splash-out{opacity:0;pointer-events:none}
@keyframes splashFallback{to{opacity:0;visibility:hidden}}

/* ---------------- 通用按钮：高度都 ≥ 44px ---------------- */
.btn{
  min-height:44px;padding:0 14px;border-radius:12px;
  background:var(--bg-soft);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;white-space:nowrap;
  transition:transform 120ms ease,background-color 120ms ease;
}
.btn:active{transform:scale(.97);background:#1d2637}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;font-weight:600}
.btn.primary:active{background:linear-gradient(135deg,#3f7cf0,#6a4bf0)}
.btn.danger{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.45);color:#ffb3b3}
.btn[disabled]{opacity:.5}
.btn.chip{font-size:14.5px;padding:0 12px}
.wide{flex:1 1 auto}

/* 顶栏上的图标按钮（刷新 / 返回箭头）——都是 44px 可点区 */
.icon-btn{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color 120ms ease,color 120ms ease,transform 120ms ease;
}
.icon-btn:active{background:var(--bg-soft);color:var(--text);transform:scale(.94)}
.back-btn{
  flex:0 0 auto;width:44px;height:44px;margin-left:-10px;border-radius:12px;color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color 120ms ease,transform 120ms ease;
}
.back-btn:active{background:rgba(79,140,255,.14);transform:scale(.94)}

/* ---------------- 顶部栏 / 大标题 ---------------- */
/* 去网页味③：这里没有"地址栏占位"式的大留白，上下只有 6/8px 内边距 */
.top{
  flex:0 0 auto;padding:6px 14px 8px;
  background:linear-gradient(180deg,#131923,#0e1117);
  border-bottom:1px solid transparent;
  transition:border-color 200ms ease;
}
.top.compact{border-bottom-color:var(--line)}
.top-row{display:flex;align-items:center;gap:8px;min-height:44px}
.large-title{
  flex:1 1 auto;min-width:0;margin:0;font-size:22px;font-weight:700;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:font-size 200ms var(--ease-ios);
}
.top.compact .large-title{font-size:16px;font-weight:600}
.edit-spacer{flex:1 1 auto}

/* ---------------- 口令页 ---------------- */
#viewLogin{justify-content:center;padding:24px}
.login-box{max-width:380px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.login-title{margin:0 0 2px;font-size:22px;font-weight:600}
.login-box input{height:48px;border-radius:12px;padding:0 14px}
.login-box .btn{margin-top:2px}

/* ---------------- 视图栈：列表 ↔ 编辑 横向推入 / 推出 ---------------- */
/* 不是 display:none 硬切：两页都在 DOM 里，靠 transform 位移；编辑页从右侧滑入 */
.stack{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.pane{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;background:var(--bg)}
#viewList{
  transform:translateX(0);opacity:1;
  transition:transform 280ms var(--ease-ios),opacity 280ms var(--ease-ios);
}
#viewEdit{
  transform:translateX(100%);visibility:hidden;
  box-shadow:-20px 0 44px rgba(0,0,0,.5);
  transition:transform 280ms var(--ease-ios),visibility 0s linear 280ms;
}
.stack.editing #viewList{transform:translateX(-24%) scale(.97);opacity:.5}
.stack.editing #viewEdit{
  transform:translateX(0);visibility:visible;
  transition:transform 280ms var(--ease-ios),visibility 0s linear 0s;
}

/* ---------------- 列表页 ---------------- */
.search-wrap{padding:0 0 2px}
#search{width:100%;height:44px;border-radius:12px;padding:0 14px}
#search::-webkit-search-cancel-button{-webkit-appearance:none}

.list{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:8px 14px 84px;          /* 底部留白：别让最后一行被 FAB 盖住 */
}

/* 空状态 / 错误态：同一套视觉语言 */
.empty{
  margin-top:32px;padding:22px 18px;border:1px dashed var(--line);border-radius:16px;
  background:rgba(255,255,255,.015);color:var(--muted);text-align:center;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.empty .err-text{margin:0;color:#ffb3b3}

/* ---------------- 骨架屏（首次加载不是空白，是几条灰条） ---------------- */
.row.skel{margin-bottom:10px;pointer-events:none}
.skel-bar{
  height:13px;border-radius:7px;
  background:linear-gradient(90deg,#1b2230 10%,rgba(41,52,72,.85) 42%,#1b2230 72%);
  background-size:220% 100%;
  animation:shimmer 1.25s linear infinite;
}
.skel-bar.w1{width:58%}
.skel-bar.w2{width:66%}
.skel-bar.w3{width:74%}
.skel-bar.w4{width:62%}
.skel-bar.w5{width:70%}
.skel-bar.w6{width:54%}
.skel-bar.thin{height:10px}
.skel-bar.pill{width:66px;height:20px;border-radius:999px;background:#1b2230;animation:none}
.skel-meta{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ---------------- 列表行 + 左滑露出删除 ---------------- */
.swipe{
  position:relative;overflow:hidden;border-radius:14px;margin-bottom:10px;
}
.swipe-del{
  position:absolute;top:0;right:0;bottom:0;width:88px;   /* 宽度必须与 app.js 的 SWIPE_W 一致 */
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff5f5f,#d93b3b);color:#fff;font-size:15px;font-weight:600;
}
.swipe-del:active{background:linear-gradient(135deg,#ff7a7a,#c83232)}
.row{
  position:relative;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:12px 14px 10px;
  transition:transform 200ms var(--ease-ios),border-color 160ms ease,background-color 120ms ease;
}
.row:active{background:#1d2432}
.row-head{display:flex;align-items:center;gap:8px}
.row-title{
  flex:1 1 auto;min-width:0;display:block;
  font-size:16.5px;line-height:1.45;min-height:32px;padding:5px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row-title.untitled{color:var(--muted);font-weight:400}
.row-chev{flex:0 0 auto;color:#5b667a;font-size:20px;line-height:1}

.row-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 0}
.row-time{font-size:13px;color:var(--muted);white-space:nowrap}

.badge{
  flex:0 0 auto;font-size:12.5px;padding:4px 10px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;
}
.badge.none{color:var(--muted);border-color:var(--line);background:var(--bg-soft)}
.badge.wait{color:#ffd79b;background:rgba(255,182,72,.16);border-color:rgba(255,182,72,.45);font-weight:600}
.badge.ok{color:#8ff0c5;background:rgba(61,220,151,.14);border-color:rgba(61,220,151,.4)}

.list-foot{padding:0 16px 8px;min-height:18px}

/* ---------------- 悬浮新建按钮（FAB）：滚动时缩成小一号 ---------------- */
.fab{
  position:absolute;right:16px;bottom:16px;z-index:20;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  font-size:28px;font-weight:300;line-height:1;
  box-shadow:0 10px 24px rgba(79,140,255,.36);
  transition:width 200ms var(--ease-ios),height 200ms var(--ease-ios),
             font-size 200ms var(--ease-ios),opacity 200ms ease,transform 120ms ease;
}
.fab:active{transform:scale(.93)}
.fab.mini{width:46px;height:46px;font-size:21px;opacity:.9;bottom:18px;right:18px}

/* ---------------- 底部 tab 栏 ---------------- */
.tabbar{
  flex:0 0 auto;display:flex;align-items:stretch;
  padding-bottom:var(--safe-b);
  background:#121722;border-top:1px solid var(--line);
}
.tab{
  flex:1 1 0;min-height:var(--tab-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:11.5px;line-height:1;
  transition:color 150ms ease,transform 120ms ease;
}
.tab.active{color:var(--accent)}
.tab:active{transform:scale(.95)}

/* ---------------- 编辑页 ---------------- */
.edit-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative}
.title-input{
  width:100%;height:52px;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;padding:0 16px;font-size:17px;font-weight:600;
}
.title-input:focus{border-color:var(--accent)}
.body-input{
  flex:1 1 auto;width:100%;min-height:0;resize:none;border:0;border-radius:0;background:transparent;
  padding:12px 16px calc(52px + var(--safe-b));
  font-size:17px;line-height:1.7;caret-color:var(--accent);
}
.save-pill{
  position:absolute;right:14px;bottom:calc(12px + var(--safe-b));
  pointer-events:none;font-size:12.5px;padding:5px 11px;border-radius:999px;
  background:rgba(35,43,58,.92);border:1px solid var(--line);color:var(--muted);
}

/* ---------------- 设置页 ---------------- */
.settings{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 28px}
.set-head{font-size:13px;color:var(--muted);margin:18px 4px 8px;letter-spacing:.4px}
.set-head:first-child{margin-top:8px}
.group{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.set-row{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:52px;padding:12px 14px;text-align:left;font-size:16px;
  border-bottom:1px solid var(--line);
}
.set-row:last-child{border-bottom:0}
.set-row.tap{transition:background-color 120ms ease}
.set-row.tap:active{background:var(--bg-soft)}
/* <a> 版本的行（比如「下载安卓版」）：a 默认带下划线和链接蓝，
   和同一列里的 <button> 版本长得不一样。这里抹平 —— 一列里有的像按钮、
   有的像链接，用户会以为它们的行为不一样。 */
a.set-row{color:inherit;text-decoration:none}
.set-label{flex:0 0 auto}
.set-value{
  flex:1 1 auto;min-width:0;text-align:right;color:var(--muted);font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chev{flex:0 0 auto;color:var(--muted);font-size:20px;line-height:1}
.danger-text{color:#ffb3b3}
.set-note{margin:8px 4px 0;line-height:1.55}
.set-version{margin:28px 4px 0;text-align:center;line-height:1.7}

/* ---------------- 弹层 / 提示 ---------------- */
.overlay{
  position:fixed;inset:0;z-index:70;background:rgba(6,9,14,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:16px;
  padding-bottom:calc(16px + var(--safe-b));
  padding-left:calc(16px + var(--safe-l));
  padding-right:calc(16px + var(--safe-r));
}
.card{
  width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:18px;max-height:86dvh;overflow:auto;
}
.card h2{font-size:16.5px;margin:0 0 8px}
.card p{margin:6px 0 0;font-size:14.5px}
.card-actions{display:flex;gap:8px;margin-top:16px}

/* 长按弹出的底部操作菜单 */
.sheet-layer{
  align-items:flex-end;padding:0;
  background:rgba(6,9,14,.6);
  opacity:0;transition:opacity 200ms ease;
}
.sheet-layer.shown{opacity:1}
.sheet{
  width:100%;max-width:520px;margin:0 auto;
  background:#151b26;border:1px solid var(--line);border-bottom:0;
  border-radius:18px 18px 0 0;
  padding:6px 8px calc(10px + var(--safe-b));
  transform:translateY(110%);
  transition:transform 260ms var(--ease-ios);
}
.sheet-layer.shown .sheet{transform:translateY(0)}
.sheet-head{
  margin:10px 14px 8px;font-size:13px;color:var(--muted);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sheet-item{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;border-radius:13px;font-size:16px;color:var(--text);
  transition:background-color 120ms ease,transform 120ms ease;
}
.sheet-item:active{background:rgba(255,255,255,.07);transform:scale(.99)}
.sheet-item.danger{color:#ff9b9b}
.sheet-item.cancel{margin-top:6px;background:var(--bg-soft);color:var(--muted);font-size:15px}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + 22px + var(--safe-b));
  transform:translateX(-50%);
  z-index:80;background:#232b3a;border:1px solid var(--line);color:var(--text);
  padding:10px 16px;border-radius:14px;font-size:14px;
  width:max-content;max-width:88vw;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

/* ---------------- 桌面宽屏：居中限宽 ---------------- */
@media (min-width:760px){
  #app{max-width:720px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .overlay{align-items:center}
  .sheet-layer{align-items:flex-end}
  .toast{bottom:calc(24px + var(--safe-b))}
  .list{padding:8px 18px 84px}
}

/* 系统开了"减少动态效果"就都别动 */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}