/* 用户、登录、编辑信息、来源标识、联网匹配 */
/* ================= 用户 ================= */
.ava{
  display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  color:#fff;font-weight:700;font-size:13px;text-transform:uppercase;line-height:1;
}
.avatar.has-user{border:0;background:var(--ava-bg);color:#fff}   /* .avatar 的 color 是给「未登录」灰色图标用的，有用户时字母要用白色 */
.avatar.has-user:hover{filter:brightness(1.12)}
.user-menu{min-width:200px}
.um-head{display:flex;align-items:center;gap:10px;padding:8px 10px}
.um-head .ava{width:36px;height:36px;font-size:15px}
.um-head b{display:block;font-size:14px}
.um-head small{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.user-menu button svg{width:18px;height:18px}
.user-top{margin:0 0 12px}
.user-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ut-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 130px 76px;gap:12px;align-items:center;padding:11px 14px;font-size:13.5px}
.ut-row + .ut-row{border-top:1px solid var(--line)}
.ut-head{background:rgba(255,255,255,.03);color:var(--faint);font-size:12.5px;font-weight:600}
.ut-name{display:flex;align-items:center;gap:9px;min-width:0;font-weight:600}
.ut-name span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ut-tag{flex:none;font-size:11px;font-weight:600;color:#5b8def;background:rgba(91,141,239,.14);border-radius:4px;padding:2px 6px}
.ut-tag.me{color:var(--accent-2);background:rgba(243,178,63,.14)}
.ut-libs{color:var(--muted);font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ut-last{color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums}
.ut-ops{display:flex;justify-content:flex-end;gap:2px}
.ut-ops button{width:30px;height:30px;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0}
.ut-ops button:hover:not([disabled]){background:rgba(255,255,255,.08);color:var(--text)}
.ut-ops button.del:hover:not([disabled]){color:#ff8a8a}
.ut-ops button[disabled]{opacity:.25;cursor:not-allowed}
.ut-ops svg{width:16px;height:16px}
#userDlg,#pwdDlg{z-index:165}
#libDlg{z-index:165}
#fbDlg{z-index:172}
.fb-dialog{width:min(620px,100%)}
.fb-bar{display:flex;gap:8px;margin-top:14px}
.fb-bar input{flex:1;min-width:0;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:#0f1114;color:var(--text);font:13px ui-monospace,Consolas,monospace;outline:none}
.fb-list{margin-top:10px;height:min(48vh,380px);overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px}
.fb-list button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:7px;background:none;color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.fb-list button:hover{background:rgba(255,255,255,.06)}
.fb-list button svg{width:16px;height:16px;flex:none;color:#f3b23f}
.fb-list .fb-msg{padding:16px;color:var(--faint);font-size:13px}
:root[data-theme="light"] .fb-bar input{background:#fff}
:root[data-theme="light"] .fb-list button:hover{background:rgba(0,0,0,.05)}
.user-dialog,.pwd-dialog{width:min(520px,100%)}
.uf{display:flex;flex-direction:column;margin-top:8px}
.uf-label{font-size:14px;font-weight:650;margin:16px 0 8px}
.uf input[type=text],.uf input:not([type]),.uf input[type=password]{
  height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:#0f1114;color:var(--text);
  font:inherit;font-size:14px;outline:none;width:100%;
}
.uf input:focus{border-color:var(--line-2)}
.pwd-wrap{position:relative;display:block}
.pwd-wrap input{padding-right:40px !important}
.pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.pwd-eye svg{width:17px;height:17px}
.pwd-eye.on{color:var(--accent-2)}
.uf-check{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;cursor:pointer}
.uf-check input,.uf-radios input,.uf-roots input{accent-color:var(--accent);margin:0}
.uf-radios{display:flex;flex-direction:column;gap:11px}
.uf-radios label{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.uf-radios small{color:var(--faint);font-size:12px}
.uf-radios label.disabled{opacity:.45;cursor:not-allowed}
.uf-roots{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0 24px}
.uf-roots label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.uf-roots .none{font-size:13px;color:var(--faint)}
/* 登录 */
.login{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;background:var(--bg)}
.login::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 500px at 50% -10%, rgba(243,178,63,.12), transparent 65%);pointer-events:none}
.login-box{position:relative;width:min(560px,100%);text-align:center}
.login-logo{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(150deg,var(--accent),#e08b1a);color:#1a1205}
.login-logo svg{width:28px;height:28px}
.login h2{margin:0 0 24px;font-size:22px;font-weight:650}
.login-users{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.lu{display:flex;flex-direction:column;align-items:center;gap:9px;width:104px;padding:14px 6px;border-radius:14px;border:1px solid transparent;background:none;color:var(--text);cursor:pointer;font:inherit}
.lu:hover,.lu:focus-visible{background:rgba(255,255,255,.05);border-color:var(--line);outline:none}
.lu .ava{width:64px;height:64px;font-size:26px}
.lu span.n{font-size:14px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu small{font-size:11.5px;color:var(--faint)}
.login-pwd{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:320px;margin:0 auto}
.login-who{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600}
.login-who .ava{width:64px;height:64px;font-size:26px}
.login-pwd input{width:100%;height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#121419;color:var(--text);font:inherit;font-size:15px;outline:none;text-align:center}
.login-pwd input:focus{border-color:var(--accent)}
.login-err{margin:0;min-height:18px;font-size:13px;color:#ff8a8a}
.login-hint{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.login-btns{display:flex;gap:10px}
:root[data-theme="light"] .uf input,:root[data-theme="light"] .login-pwd input{background:#f4f5f7}
:root[data-theme="light"] .ut-head{background:#f7f8fa}
:root[data-theme="light"] .ut-ops button:hover:not([disabled]),:root[data-theme="light"] .lu:hover{background:rgba(0,0,0,.05)}
@media (max-width:700px){
  .ut-row{grid-template-columns:minmax(0,1fr) 70px}
  .ut-libs,.ut-last{display:none}
  .ut-head{display:none}
}

/* ================= 编辑信息 ================= */
.edit-dialog{width:min(640px,100%)}
.form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.field{display:flex;gap:12px;align-items:flex-start}
.field > span{flex:none;width:40px;line-height:34px;font-size:13px;color:var(--faint)}
.field input{
  flex:1;min-width:0;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line);
  background:#0f1114;color:var(--text);font:inherit;font-size:14px;outline:none;
}
.field input:focus{border-color:#3a3f49}
/* 浏览器自动填充会把输入框换成它自己的底色（浅蓝 / 浅黄），和界面配色不一致：保持原来的底色和文字色 */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 1000px #0f1114 inset;transition:background-color 99999s ease-out;
}
:root[data-theme="light"] .field input:-webkit-autofill,:root[data-theme="light"] .field input:-webkit-autofill:focus{box-shadow:0 0 0 1000px #f4f5f7 inset}
.field #editYear{flex:0 0 100px}
.tagpick{display:flex;flex-wrap:wrap;gap:6px;flex:1;padding-top:3px}
.tp{
  height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--line);background:#121419;
  color:var(--muted);font-size:13px;cursor:pointer;
}
.tp:hover{color:var(--text);border-color:var(--line-2)}
.tp[aria-pressed="true"]{background:rgba(243,178,63,.14);border-color:rgba(243,178,63,.5);color:var(--accent-2)}

@media (max-width:880px){
  :root{--side:14px}
  .topbar{height:auto;padding:10px var(--side);flex-wrap:wrap;gap:8px 10px}
  .nav-tabs{order:3;width:100%;height:36px;overflow-x:auto;scrollbar-width:none}
  .nav-tab{padding:0 10px;flex:none}
  .nav-tab.active::after{left:10px;right:10px}
  .topbar .search{order:4;flex:1 1 100%;max-width:none}
  .top-actions{margin-left:auto}
  .top-link{padding:0 8px}
  .top-link .lbl{display:none}
  .avatar{width:30px;height:30px;margin-left:4px}
  .frow{align-items:center}
  .flabel{width:46px;font-size:12.5px;white-space:nowrap}   /* 3 个字的「媒体库」也放得下，各行选项对齐 */
  /* 筛选行横向滑动，「全部」吸附在左边不跟着滑 */
  .fopts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .frow.dynrow:not(.open) .fopts,
  .frow.dynrow.open .fopts{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
  .fopts .fmore{display:none}
  .fopts .fopt:first-child{
    position:sticky;left:0;z-index:2;background:var(--bg);
    box-shadow:8px 0 10px -8px rgba(0,0,0,.9);
  }
  /* 上面的 background 比 .fopt.active 优先级高：不单独写的话，选中的「全部」会变成深字落在页面底色上 */
  .fopts .fopt.active:first-child{background:var(--accent)}
  .fopt{font-size:13px;padding:0 8px}
  .toolbar{gap:8px 10px}
  .toolbar .stats{display:block;width:100%;margin-left:0}
  .field{flex-direction:column;gap:6px}
  .field > span{line-height:1.4;width:auto}
}

/* ================= 来源标识（本地 / 联网 / 手动） ================= */
.src{
  display:inline-flex;align-items:center;gap:2px;font-size:10px;line-height:1;font-weight:600;
  padding:2px 4px;border-radius:3px;margin-right:6px;vertical-align:1px;border:1px solid;
}
.src svg{width:9px;height:9px;flex:none}
.src.local{color:#86c792;border-color:rgba(134,199,146,.38)}
.src.online{color:#86b6ff;border-color:rgba(134,182,255,.42)}
.src.edit{color:#dcb771;border-color:rgba(220,183,113,.42)}
/* 筛选：没有影片的选项淡显；更多 */
.fopt.active{opacity:1}
.fopt.fmore{color:var(--faint);opacity:1;letter-spacing:.05em}
.fopt.fmore:hover{color:var(--accent-2)}

/* 设置：主题分段、联网 */
.seg{display:inline-flex;padding:3px;border-radius:9px;background:#1b1e24;border:1px solid var(--line);flex:none}
.seg button{height:28px;padding:0 13px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:13px;cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button[aria-checked="true"]{background:var(--accent);color:#1a1205;font-weight:600}
.settings-dialog .field{margin-top:6px}
.settings-dialog .field > span{width:58px}
.adv{margin-top:8px;font-size:13px;color:var(--muted)}
.adv summary{cursor:pointer;padding:4px 0;user-select:none}
.tmdb-status{min-height:0}
.tmdb-status.ok{color:#86c792}
.tmdb-status.err{color:#ff8a8a}

/* 联网匹配 */
.match-dialog{width:min(640px,100%)}
.match-form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.match-form input{
  height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:#0f1114;
  color:var(--text);font:inherit;font-size:14px;outline:none;min-width:0;
}
.match-form input:focus{border-color:var(--line-2)}
.match-form #matchQuery{flex:1 1 220px}
.match-form #matchYear{flex:0 0 84px}
.match-form select{height:36px}
.match-list{display:flex;flex-direction:column;gap:8px;margin-top:14px;max-height:52vh;overflow:auto}
.match-msg{padding:22px 8px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}
.match-item{
  display:flex;gap:12px;align-items:flex-start;width:100%;padding:8px;border-radius:10px;text-align:left;
  border:1px solid var(--line);background:#121419;color:var(--text);cursor:pointer;font:inherit;
}
.match-item:hover{border-color:rgba(243,178,63,.5)}
.match-item.current{border-color:rgba(243,178,63,.7);background:rgba(243,178,63,.07)}
.match-item img,.match-item .mp{flex:none;width:52px;aspect-ratio:2/3;border-radius:6px;object-fit:cover;background:#1b1e24}
.match-item .mi{min-width:0;flex:1}
.match-item b{display:block;font-size:14px;font-weight:600}
.match-item small{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.match-item p{
  margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.match-item .cur{font-size:11px;color:#1a1205;background:var(--accent);border-radius:4px;padding:1px 5px;margin-left:6px;font-weight:600}


/* ================= 用户列表里的在线状态 ================= */
.user-presence{margin:0 0 10px}
.user-table.with-status .ut-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,1.2fr) 124px 76px}
.ut-status{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-line{display:flex;align-items:center;gap:7px;font-size:13px}
.st-line b{font-weight:600}
.st-line .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--faint)}
.ut-status small{color:var(--faint);font-size:12px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-on .dot{background:#3fb96e;box-shadow:0 0 0 3px rgba(63,185,110,.18)}
.st-on b{color:#3fb96e}
.st-watch .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(243,178,63,.2);animation:st-pulse 1.8s ease-in-out infinite}
.st-watch b{color:var(--accent)}
.st-watch small{color:var(--muted)}
.st-off b{color:var(--muted);font-weight:500}
@keyframes st-pulse{50%{box-shadow:0 0 0 6px rgba(243,178,63,0)}}
@media (prefers-reduced-motion:reduce){.st-watch .dot{animation:none}}
@media (max-width:700px){
  .user-table.with-status .ut-row{grid-template-columns:minmax(0,1fr) 70px;row-gap:4px}
  .user-table.with-status .ut-ops{grid-row:1 / span 2;grid-column:2}
  .user-table.with-status .ut-status{grid-column:1;grid-row:2}
  .ut-status small{white-space:normal}
}
