/* TULU 云同步 · 顶栏状态 + 汉堡抽屉 · cloud-sync.css v1.0.0 */
/* 配套: shared/data-sync.js(同步内核) + shared/mobile-sheet.js(抽屉) */

/* 顶栏按钮: 云状态与菜单在各尺寸都显示(桌面同样需要抽屉入口) */
.tb-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  min-width:40px;height:40px;padding:0 9px;border-radius:10px;
  font-size:13px;color:var(--ink);flex:0 0 auto;
}
.tb-btn:active{background:rgba(0,0,0,.08)}
.tb-btn .lb{white-space:nowrap}

.tb-menu{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center}
.tb-menu i{display:block;width:16px;height:2px;background:var(--ink);border-radius:1px}

/* 云图标按钮(顶栏): 单个触发, 内部含状态点(常驻) + 图标
   点击 = 当前工具智能同步(本地有改动→push,本地空→pull,都有→toast 提示) */
.tb-cloud{
  position:relative;padding:0 11px;
  background:var(--gray-soft);
}
.tb-cloud::before{
  content:"☁";font-size:16px;color:var(--ink);line-height:1;
}
.tb-cloud .cdot{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border:1.5px solid var(--card);
}
.tb-cloud:active{transform:scale(.97)}

/* 状态点: 常驻, 代表"当前一致与否"而非一次性事件 */
.cdot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;display:inline-block}
.st-synced{background:#3B6D11}
.st-dirty{background:#BA7517}
.st-cloudnew{background:#185FA5}
.st-syncing{background:#888}
.st-off,.st-empty{background:#B4B2A9}

/* 抽屉 */
.sheet-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.sheet-mask.show{opacity:1;pointer-events:auto}
.sheet-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);
  background:var(--card);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .24s ease;
}
.sheet-mask.show .sheet-panel{transform:translateX(0)}

/* 抽屉顶部搜索框(首页用) */
.sheet-search{padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.sheet-search input{
  width:100%;padding:10px 12px;border-radius:10px;font-size:14px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);outline:none;
}
.sheet-search input:focus{border-color:var(--navy)}

.sheet-head{
  padding:14px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.sheet-head .who{
  flex:1;min-width:0;font-weight:500;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sheet-head .x{
  width:36px;height:36px;flex:0 0 36px;display:flex;
  align-items:center;justify-content:center;font-size:18px;color:var(--ink-3);
}
.sheet-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 28px}
.sheet-h{font-size:12px;color:var(--ink-3);margin:18px 0 8px;letter-spacing:.03em}
.sheet-h:first-child{margin-top:0}

/* 同步行: 单个工具显示, 状态点 + 名称 + 一键同步 */
.sync-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.sync-row:last-of-type{border-bottom:none}
.sync-row .nm{flex:1;min-width:0}
.sync-row .nm b{display:block;font-weight:500;font-size:14px;line-height:1.4}
.sync-row .nm small{display:block;color:var(--ink-3);font-size:12px;line-height:1.5}

/* 同步按钮: 上传 / 拉取(此为汉堡内的"手动精细控制"入口, 顶栏图标是快速路径) */
.sync-btn{
  flex:0 0 auto;padding:7px 12px;border-radius:9px;font-size:13px;
  background:var(--navy);color:#fff;min-height:36px;
}
.sync-btn.ghost{background:var(--gray-soft);color:var(--ink)}
.sync-btn:disabled{opacity:.45;cursor:default}

/* 当前工具同步详情(只有一行, 不需要网格): 子状态 + 推/拉 两按钮(此为兜底入口) */
.sync-current{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px;background:var(--paper);
  border-radius:10px;
}
.sync-current .head{display:flex;align-items:center;gap:8px}
.sync-current .head .nm{flex:1}
.sync-current .acts{display:flex;gap:8px}
.sync-current .acts .sync-btn{flex:1}

/* ---------- 响应式: 手机端 ---------- */
/* 设计: 桌面端顶栏全展开(👤+☁+☰); 手机端云图标收进汉堡, 顶栏只留 👤+☰ */
@media (max-width:640px){
  .tb-cloud{display:none !important}
}

/* 账号操作 */
.sheet-act{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 2px;font-size:14px;color:var(--ink);
  border-bottom:1px solid var(--line);text-align:left;
}
.sheet-act:last-child{border-bottom:none}
.sheet-act.danger{color:#A32D2D}

/* 短提示: 一次性事件反馈, 数秒后消失 */
.ds-toast{
  position:fixed;left:50%;bottom:28px;z-index:400;
  transform:translateX(-50%) translateY(8px);
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:20px;
  font-size:13px;max-width:86vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.ds-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 提示条: 未登录残留 / 云端冲突等需要用户决策的信息 */
.ds-note{
  background:var(--amber-soft);color:var(--amber-ink);
  padding:10px 12px;border-radius:10px;font-size:13px;
  line-height:1.55;margin-bottom:12px;
}
.ds-note.b{background:var(--blue-soft);color:var(--blue-ink)}
.ds-note.warn{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;font-weight:500}
.ds-note button{
  text-decoration:underline;font-size:13px;color:inherit;
  padding:0 2px;font-weight:500;
}
/* 页面提示条内的"导出备份"操作按钮(显式 pill, 区别于内联链接) */
.ds-note-btn{
  display:inline-block;margin-top:8px;
  padding:6px 14px;border-radius:8px;border:1px solid var(--navy);
  background:var(--navy);color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.ds-note-btn:hover{opacity:.9}

/* 首页残留汇总(列表式跳转): 用户进工具处理完, 该项自动褪去 */
.ds-resi-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.ds-resi-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:8px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);text-decoration:none;
  font-weight:500;font-size:13px;
  transition:background .15s;
}
.ds-resi-link:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.ds-resi-link small{font-weight:400;opacity:.7;font-size:12px}
.ds-note small{display:block;color:var(--ink-3);font-size:11px;margin-top:4px}

/* 残留弹窗: 登录后本地有数据但 owner 不匹配时出现, 2 选项二选一 */
.resi-modal{
  position:fixed;inset:0;z-index:350;display:flex;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);padding:18px;
  animation:resi-fade .18s ease-out;
}
.resi-card{
  background:var(--card,#fff);color:var(--ink);
  border-radius:14px;padding:20px 18px;
  width:100%;max-width:380px;box-sizing:border-box;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  animation:resi-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.resi-card h3{margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.4}
.resi-card p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.resi-card p:last-of-type{margin-bottom:0}
.resi-card b{font-weight:600;color:var(--ink)}
.resi-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.resi-btn{
  display:block;width:100%;padding:13px 14px;border-radius:10px;
  font-size:14px;font-weight:500;cursor:pointer;border:none;
  background:var(--gray-soft);color:var(--ink);
  transition:transform .08s,background .15s;
}
.resi-btn:active{transform:scale(.98)}
.resi-btn.resi-pri{background:var(--navy);color:#fff}
.resi-hint{font-size:12px;color:var(--ink-3);margin-top:4px}
@keyframes resi-fade{from{opacity:0}to{opacity:1}}
@keyframes resi-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

/* 浅色主题(工具页)需要把 card/gray-soft/ink-3 兜底, 不依赖全局变量 */
body[data-page="tool"] .resi-card{background:#fff;color:#1a1a1a}
body[data-page="tool"] .resi-btn{background:#e8e8e8;color:#1a1a1a}
body[data-page="tool"] .resi-btn.resi-pri{background:#1f2a44;color:#fff}
body[data-page="tool"] .resi-hint{color:#666}