/* ============================================================================
 * 账号 / 云同步 / 素材库浏览器 —— 沿用 app.css 的变量与视觉语言，不另起一套。
 * ==========================================================================*/

/* ---------- 头部头像 ---------- */
.hacct{position:relative;flex-shrink:0}
.acct-btn{width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--bd);background:rgba(140,146,160,.06);color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;overflow:hidden}
.acct-btn:hover{border-color:var(--rose);box-shadow:0 0 0 2px rgba(111,92,255,.18)}
.hacct.open .acct-btn{border-color:var(--rose)}
.acct-av{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:13px}
.acct-av img{width:100%;height:100%;object-fit:cover;display:block}

.acct-menu{position:absolute;top:34px;right:0;width:252px;background:var(--p1);border:1px solid var(--bd);border-radius:var(--r3,10px);box-shadow:0 12px 36px rgba(0,0,0,.55);padding:8px;display:none;z-index:60}
.hacct.open .acct-menu{display:block}
.acct-hd{padding:6px 8px 8px;border-bottom:1px solid var(--bd);margin-bottom:6px}
.acct-hd-n{font-size:12px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-hd-e{font-size:11px;color:var(--mu);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-cloud{font-size:11px;color:var(--gold);background:rgba(77,157,255,.08);border:1px solid rgba(77,157,255,.22);border-radius:var(--r1,6px);padding:5px 8px;margin-bottom:7px;letter-spacing:.2px}

.acct-item{display:block;width:100%;text-align:left;padding:7px 8px;border-radius:var(--r1,6px);border:none;background:transparent;color:var(--tx);font-size:11px;cursor:pointer;text-decoration:none;transition:background .12s}
.acct-item:hover{background:rgba(111,92,255,.1);color:var(--peach)}
.acct-item:disabled{opacity:.35;cursor:not-allowed}
.acct-item:disabled:hover{background:transparent;color:var(--tx)}
.acct-item.danger{color:var(--red)}
.acct-item.danger:hover{background:rgba(242,85,90,.1)}
.acct-sep{height:1px;background:var(--bd);margin:6px 2px}
.acct-note{font-size:11px;color:var(--mu);line-height:1.7;padding:6px 8px}
.acct-hint{font-size:11px;color:var(--mu);line-height:1.6;padding:0 8px 6px;opacity:.8}

.acct-tr{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:11px;color:var(--tx)}
.acct-tg{position:relative;width:30px;height:17px;flex-shrink:0;cursor:pointer}
.acct-tg input{position:absolute;opacity:0;width:0;height:0}
.acct-tg i{position:absolute;inset:0;background:var(--bd);border-radius:var(--r3,10px);transition:.18s}
.acct-tg i::after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;background:#fff;border-radius:50%;transition:.18s}
.acct-tg input:checked+i{background:var(--rose)}
.acct-tg input:checked+i::after{left:16px}

/* ---------- 同步提示条 ---------- */
.sync-prompt{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);display:flex;align-items:center;gap:9px;
  background:var(--ov);border:1px solid rgba(77,157,255,.4);border-radius:var(--r4,14px);padding:10px 14px;
  box-shadow:0 10px 34px rgba(0,0,0,.55);backdrop-filter:blur(10px);z-index:400;opacity:0;transition:all .24s;max-width:min(92vw,620px)}
.sync-prompt.on{opacity:1;transform:translate(-50%,0)}
.sync-i{font-size:16px;flex-shrink:0}
.sync-tx{font-size:11px;color:var(--tx);line-height:1.6;flex:1;min-width:0}
.sync-prompt button{padding:5px 10px;border-radius:var(--r1,6px);font-size:11px;cursor:pointer;white-space:nowrap;border:1px solid var(--bd);background:transparent;color:var(--mu);transition:all .13s}
.sync-prompt button:hover{border-color:var(--rose);color:var(--peach)}
.sync-yes{background:var(--rose)!important;color:#fff!important;border:none!important;font-weight:700}
.sync-yes:hover{opacity:.88}
.sync-never{opacity:.6}

/* ---------- 素材：全局搜索 ---------- */
.mat-search{position:relative;margin:11px 13px 0;display:flex;align-items:center}
.mat-search-i{position:absolute;left:9px;font-size:11px;opacity:.6;pointer-events:none}
.mat-search input{width:100%;background:var(--p2);border:1px solid var(--bd);color:var(--tx);padding:7px 28px 7px 27px;border-radius:var(--r2,8px);font-size:11px;outline:none;transition:border-color .15s}
.mat-search input:focus{border-color:var(--rose);box-shadow:0 0 0 2px rgba(111,92,255,.12)}
.mat-search input::placeholder{color:var(--mu);opacity:.7}
.mat-search-x{position:absolute;right:6px;width:18px;height:18px;border:none;background:transparent;color:var(--mu);cursor:pointer;font-size:11px;border-radius:4px}
.mat-search-x:hover{color:var(--peach);background:rgba(111,92,255,.1)}

.mat-results{padding:11px 13px 14px}
.mat-results-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.mat-results-hd span{font-size:11px;color:var(--peach);font-weight:700;letter-spacing:.3px}
.mat-results-x{padding:3px 8px;border-radius:var(--r1,6px);border:1px solid var(--bd);background:transparent;color:var(--mu);font-size:11px;cursor:pointer;white-space:nowrap}
.mat-results-x:hover{border-color:var(--rose);color:var(--peach)}

/* ---------- 素材：分类胶囊 ---------- */
.mat-cats{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.mat-chip{padding:3px 8px;border-radius:20px;border:1px solid var(--bd);background:rgba(140,146,160,.05);color:var(--mu);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .12s;display:inline-flex;align-items:center;gap:4px}
.mat-chip:hover{border-color:var(--rose);color:var(--peach)}
.mat-chip.on{background:rgba(111,92,255,.18);border-color:rgba(111,92,255,.55);color:var(--peach);font-weight:600}
.mat-chip.locked{opacity:.75;border-style:dashed}
.mat-chip i{font-style:normal;font-size:11px;opacity:.6;font-family:monospace}

.mat-empty{grid-column:1/-1;font-size:11px;color:var(--mu);text-align:center;padding:18px 8px;opacity:.7;line-height:1.8}

.mat-more{width:100%;padding:6px;border-radius:var(--r2,8px);border:1px dashed var(--bd);background:transparent;color:var(--mu);font-size:11px;cursor:pointer;margin-bottom:8px;transition:all .13s}
.mat-more:hover{border-color:var(--rose);color:var(--peach);background:rgba(111,92,255,.05)}

/* ---------- 素材：登录提示 ---------- */
.mat-lock{margin-bottom:9px}
.mat-lock-in{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--r2,8px);border:1px solid rgba(77,157,255,.28);background:rgba(77,157,255,.06)}
.mat-lock-i{font-size:14px;flex-shrink:0}
.mat-lock-tx{flex:1;font-size:11px;color:var(--mu);line-height:1.6}
.mat-lock-btn{flex-shrink:0;padding:4px 10px;border-radius:var(--r1,6px);background:var(--rose);color:#fff;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;transition:opacity .13s}
.mat-lock-btn:hover{opacity:.85}

/* ---------- 素材：我的上传小标题 ---------- */
.mat-sub{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin:10px 0 6px;padding-top:8px;border-top:1px solid rgba(140,146,160,.08);opacity:.8}
.mat-sub span{opacity:.7}

/* ---------- 账号弹窗（历史版本等） ---------- */
.spzz-acct-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.spzz-acct-card{position:relative;width:min(520px,96vw);max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  background:var(--p1);border:1px solid var(--bd);border-radius:var(--r4,14px);box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.spzz-acct-x{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--bd);
  background:rgba(140,146,160,.08);color:var(--mu);cursor:pointer;font-size:12px;line-height:1;z-index:2}
.spzz-acct-x:hover{color:var(--tx);border-color:var(--rose)}
.spzz-acct-hd{padding:16px 18px 10px;border-bottom:1px solid var(--bd)}
.spzz-acct-hd h3{margin:0;font-size:15px;color:var(--tx)}
.spzz-acct-hd p{margin:6px 0 0;font-size:11px;color:var(--mu);line-height:1.6}
.spzz-acct-body{padding:14px 18px;overflow:auto}
.spzz-acct-empty,.spzz-acct-loading{padding:28px;text-align:center;color:var(--mu);font-size:12px}
.spzz-rev-list{display:flex;flex-direction:column;gap:8px}
.spzz-rev-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--bd);border-radius:var(--r3,10px);background:rgba(140,146,160,.04)}
.spzz-rev-main{flex:1;min-width:0}
.spzz-rev-v{display:block;font-size:13px;font-weight:700;color:var(--tx)}
.spzz-rev-v em{font-style:normal;font-size:11px;color:var(--gold);background:rgba(77,157,255,.12);border-radius:var(--r1,6px);padding:0 6px;margin-left:6px}
.spzz-rev-meta{display:block;font-size:11px;color:var(--mu);margin-top:2px}
.spzz-rev-btn{flex:0 0 auto;padding:6px 12px;border-radius:var(--r2,8px);border:1px solid var(--bd);background:rgba(111,92,255,.1);color:var(--peach);font-size:11px;cursor:pointer;transition:.12s}
.spzz-rev-btn:hover{background:rgba(111,92,255,.2);border-color:var(--rose)}

/* ---------- 素材搜索：反自动填充诱饵 + 去掉浏览器自带清除按钮 ---------- */
.mat-search .spzz-antifill{position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;opacity:0;padding:0;margin:0;border:0;pointer-events:none}
#matSearch::-webkit-search-cancel-button,#matSearch::-webkit-search-decoration{-webkit-appearance:none;display:none}
#matSearch::-ms-clear{display:none;width:0;height:0}

/* ---------------- 素材收藏 ---------------- */
.mat-thumb{position:relative}
.mat-fav{
  position:absolute;top:2px;right:2px;z-index:4;
  width:18px;height:18px;padding:0;line-height:1;
  display:none;align-items:center;justify-content:center;
  border:none;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;
  transition:transform .12s,color .12s;
}
.mat-thumb:hover .mat-fav{display:flex}
.mat-fav:hover{transform:scale(1.18)}
.mat-fav.on{display:flex;color:#ff5d7a;background:rgba(0,0,0,.5)}
.mat-chip.mat-chip-fav{border-color:rgba(255,93,122,.4);color:#ff8fa3}
.mat-chip.mat-chip-fav.on{background:rgba(255,93,122,.16);border-color:rgba(255,93,122,.7);color:#ff5d7a}