/* 文件浏览器 —— 仅使用 DESIGN.md 定义的 token */
:root{
  --pf-bg:#F7F8FA; --pf-surface:#FFFFFF; --pf-surface-sub:#EEF0F3;
  --pf-border:#D9DDE3; --pf-border-soft:#E8EAEE; --pf-border-strong:#B4BAC4;
  --pf-text:#16181D; --pf-text-sub:#4D5560; --pf-text-mute:#8A919C;
  --pf-accent:#1B4F8A; --pf-accent-hover:#163F6E; --pf-accent-soft:#E7EFF8; --pf-accent-line:#2F6FB6;
  --pf-fs-meta:12px; --pf-fs-small:13px; --pf-fs-body:14px; --pf-fs-title:20px; --pf-fs-page:26px;
  --pf-radius-s:4px; --pf-radius-m:8px;
  --pf-shadow-2:0 4px 16px rgba(22,24,29,.10);
  --pf-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","Microsoft YaHei",sans-serif;
  --pf-mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--pf-bg);color:var(--pf-text);font:var(--pf-fs-body)/1.7 var(--pf-font)}
.fm{max-width:1200px;margin:0 auto;padding:32px 32px 64px}

.fm-head{padding-bottom:12px;border-bottom:1px solid var(--pf-border)}
.fm-titlebar{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.fm-title{margin:0;font-size:var(--pf-fs-page);line-height:1.3;font-weight:700;letter-spacing:.01em}
.fm-crumb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-left:auto;font-family:var(--pf-mono);font-size:var(--pf-fs-small)}
.fm-crumb a{color:var(--pf-accent);text-decoration:none;padding:2px 5px;border-radius:var(--pf-radius-s)}
.fm-crumb a:hover{background:var(--pf-accent-soft)}
.fm-crumb .sep{color:var(--pf-text-mute);padding:0 1px}
.fm-crumb .cur{color:var(--pf-text-sub);padding:2px 5px}

.fm-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:16px}
.fm-btn{height:32px;padding:0 12px;font:600 var(--pf-fs-small)/1 var(--pf-font);color:var(--pf-text);background:var(--pf-surface);border:1px solid var(--pf-border);border-radius:var(--pf-radius-s);cursor:pointer}
.fm-btn:hover{border-color:var(--pf-border-strong)}
.fm-btn:focus-visible{outline:2px solid var(--pf-accent-line);outline-offset:2px}
.fm-btn-ghost{border-color:transparent;background:transparent;color:var(--pf-text-sub)}
.fm-btn-ghost:hover{background:var(--pf-surface-sub);border-color:transparent}

.fm-seg{display:flex;border:1px solid var(--pf-border);border-radius:var(--pf-radius-s);overflow:hidden;background:var(--pf-surface)}
.fm-seg-btn{height:30px;padding:0 12px;font:600 var(--pf-fs-small)/1 var(--pf-font);color:var(--pf-text-sub);background:transparent;border:0;cursor:pointer}
.fm-seg-btn+.fm-seg-btn{border-left:1px solid var(--pf-border)}
.fm-seg-btn:hover{background:var(--pf-surface-sub)}
.fm-seg-btn.is-on{background:var(--pf-accent-soft);color:var(--pf-accent)}
.fm-seg-btn:focus-visible{outline:2px solid var(--pf-accent-line);outline-offset:-2px}

.fm-count{margin:0 0 0 auto;font-family:var(--pf-mono);font-size:var(--pf-fs-meta);color:var(--pf-text-mute)}

.fm-body{margin-top:16px;background:var(--pf-surface);border:1px solid var(--pf-border);border-radius:var(--pf-radius-m);overflow:hidden}

.fm-table{width:100%;border-collapse:collapse;table-layout:fixed}
.fm-table th{position:sticky;top:0;z-index:1;font-size:var(--pf-fs-meta);font-weight:600;color:var(--pf-text-sub);text-align:left;background:var(--pf-surface-sub);padding:8px 16px;border-bottom:1px solid var(--pf-border);white-space:nowrap}
.fm-table th.c-size,.fm-table td.c-size{text-align:right;width:110px}
.fm-table th.c-time,.fm-table td.c-time{width:158px;color:var(--pf-text-mute);font-family:var(--pf-mono);font-size:var(--pf-fs-meta);white-space:nowrap}
.fm-table td{padding:0 16px;height:40px;border-bottom:1px solid var(--pf-border-soft);font-size:var(--pf-fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-table tbody tr:last-child td{border-bottom:0}
.fm-table tbody tr{cursor:pointer}
.fm-table tbody tr:hover{background:var(--pf-surface-sub)}
.fm-table tbody tr:focus-visible{outline:2px solid var(--pf-accent-line);outline-offset:-2px}
.fm-name{display:flex;align-items:center;gap:8px;min-width:0}
.fm-name .nm{font-family:var(--pf-mono);font-size:var(--pf-fs-small);overflow:hidden;text-overflow:ellipsis}
.fm-name .dir{font-weight:600;color:var(--pf-text);font-family:var(--pf-font)}
.fm-ico{width:16px;height:16px;flex:none;color:var(--pf-text-mute)}
tr.is-dir .fm-ico{color:var(--pf-accent)}
.fm-size{font-family:var(--pf-mono);font-size:var(--pf-fs-small);color:var(--pf-text-sub);font-variant-numeric:tabular-nums}
tr.is-up .nm{color:var(--pf-text-sub)}

.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px}
.fm-tile{margin:0;border:1px solid var(--pf-border);border-radius:var(--pf-radius-m);overflow:hidden;background:var(--pf-surface);cursor:pointer;transition:border-color 120ms ease-out}
.fm-tile:hover{border-color:var(--pf-border-strong)}
.fm-tile:focus-visible{outline:2px solid var(--pf-accent-line);outline-offset:2px}
.fm-thumb{display:flex;align-items:center;justify-content:center;height:120px;background:var(--pf-surface-sub);border-bottom:1px solid var(--pf-border-soft);overflow:hidden;padding:8px}
.fm-thumb img{width:100%;height:100%;object-fit:contain}
.fm-thumb .fm-ico{width:28px;height:28px}
.fm-tile-cap{display:flex;justify-content:space-between;gap:8px;padding:8px 10px}
.fm-tile-cap .nm{font-family:var(--pf-mono);font-size:var(--pf-fs-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-tile-cap .sz{flex:none;font-family:var(--pf-mono);font-size:var(--pf-fs-meta);color:var(--pf-text-mute)}

.fm-state{margin:0;padding:56px 16px;text-align:center;color:var(--pf-text-mute);font-family:var(--pf-mono);font-size:var(--pf-fs-small)}

.fm-dlg{border:1px solid var(--pf-border);border-radius:var(--pf-radius-m);box-shadow:var(--pf-shadow-2);background:var(--pf-surface);padding:0;width:min(660px,92vw);color:var(--pf-text);overscroll-behavior:contain}
body.fm-locked{overflow:hidden}
.fm-dlg::backdrop{background:rgba(22,24,29,.45)}
.fm-dlg-head{display:flex;gap:8px;padding:16px;border-bottom:1px solid var(--pf-border-soft)}
.fm-dlg-head input{flex:1;height:34px;padding:0 10px;font:var(--pf-fs-small)/1 var(--pf-font);border:1px solid var(--pf-border);border-radius:var(--pf-radius-s);background:var(--pf-surface);color:var(--pf-text)}
.fm-dlg-head input:focus{outline:none;border-color:var(--pf-accent-line);box-shadow:0 0 0 3px var(--pf-accent-soft)}
.fm-dlg-meta{margin:0;padding:10px 16px;font-family:var(--pf-mono);font-size:var(--pf-fs-meta);color:var(--pf-text-mute);border-bottom:1px solid var(--pf-border-soft)}
.fm-results{list-style:none;margin:0;padding:4px 0;max-height:52vh;overflow:auto}
.fm-results li{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;border-bottom:1px solid var(--pf-border-soft)}
.fm-results li:last-child{border-bottom:0}
.fm-results li:hover,.fm-results li.is-cursor{background:var(--pf-surface-sub)}
.fm-results .r-main{min-width:0;flex:1}
.fm-results .r-name{display:block;font-family:var(--pf-mono);font-size:var(--pf-fs-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-results .r-path{display:block;font-family:var(--pf-mono);font-size:var(--pf-fs-meta);color:var(--pf-text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-results .r-size{flex:none;font-family:var(--pf-mono);font-size:var(--pf-fs-meta);color:var(--pf-text-sub)}

.fm-preview{width:min(880px,94vw)}
.fm-pv-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pf-border-soft)}
.fm-pv-name{font-family:var(--pf-mono);font-size:var(--pf-fs-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-pv-size{margin-left:auto;font-family:var(--pf-mono);font-size:var(--pf-fs-meta);color:var(--pf-text-mute)}
.fm-pv-stage{display:flex;align-items:center;gap:12px;padding:16px;background:var(--pf-surface-sub)}
.fm-pv-stage img{flex:1;min-width:0;max-height:70vh;width:100%;object-fit:contain;background:var(--pf-surface);border:1px solid var(--pf-border-soft)}
.fm-pv-nav{flex:none;width:36px;height:64px;font-size:20px;line-height:1;color:var(--pf-text-sub);background:var(--pf-surface);border:1px solid var(--pf-border);border-radius:var(--pf-radius-s);cursor:pointer}
.fm-pv-nav:hover{border-color:var(--pf-border-strong);color:var(--pf-text)}
.fm-pv-nav:disabled{opacity:.35;cursor:not-allowed}
.fm-pv-foot{padding:10px 16px;text-align:right}
.fm-pv-foot a{color:var(--pf-accent);font-size:var(--pf-fs-small)}

tr.is-hit{animation:fm-hit 1.4s ease-out}
@keyframes fm-hit{0%{background:var(--pf-accent-soft)}100%{background:transparent}}

@media (max-width:640px){
  .fm{padding:16px 16px 48px}
  .fm-table th.c-time,.fm-table td.c-time{display:none}
  .fm-count{display:none}
  .fm-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));padding:12px;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}