/* Files (explorer) — Win11-style, themed via --hp-* tokens. */
.xpl { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--hp-surface); color: var(--hp-text-1); font: 13px/1.5 "Segoe UI", system-ui, sans-serif; }
.xpl-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--hp-border); background: var(--hp-surface-2); }
.xpl-tb { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: var(--hp-radius-sm); background: transparent; color: var(--hp-text-1); cursor: pointer; }
.xpl-tb:hover { background: var(--hp-hover); }
.xpl-tb i { width: 16px; height: 16px; }
.xpl-sep { width: 1px; height: 18px; background: var(--hp-border); margin: 0 4px; }
.xpl-grow { flex: 1; }

.xpl-body { flex: 1; display: flex; min-height: 0; }
.xpl-nav { width: 200px; flex-shrink: 0; border-right: 1px solid var(--hp-border); padding: 8px 6px; overflow: auto; background: var(--hp-surface); }
.xpl-nav-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--hp-text-2); padding: 6px 8px 4px; }
.xpl-nav-i { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--hp-radius-sm); cursor: pointer; color: var(--hp-text-1); text-decoration: none; }
.xpl-nav-i:hover { background: var(--hp-hover); }
.xpl-nav-i.active { background: color-mix(in srgb, var(--hp-accent) 16%, transparent); color: var(--hp-accent); }
.xpl-nav-i i { width: 16px; height: 16px; }

.xpl-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.xpl-crumbs { display: flex; align-items: center; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--hp-border-soft); overflow-x: auto; white-space: nowrap; }
.xpl-crumb { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: var(--hp-radius-sm); cursor: pointer; color: var(--hp-text-1); text-decoration: none; }
.xpl-crumb:hover { background: var(--hp-hover); }
.xpl-crumb i { width: 14px; height: 14px; }
.xpl-crumb-sep i { width: 14px; height: 14px; color: var(--hp-text-disabled); }

.xpl-list { flex: 1; overflow: auto; padding: 4px; outline: none; }
.xpl-row { display: grid; grid-template-columns: 1fr 180px 90px; align-items: center; padding: 5px 10px; border-radius: var(--hp-radius-sm); cursor: default; user-select: none; }
.xpl-row:hover { background: var(--hp-hover); }
.xpl-row.sel { background: color-mix(in srgb, var(--hp-accent) 18%, transparent); }
.xpl-row.xpl-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--hp-text-2); cursor: default; border-bottom: 1px solid var(--hp-border-soft); border-radius: 0; position: sticky; top: 0; background: var(--hp-surface); z-index: 1; }
.xpl-row.xpl-head:hover { background: var(--hp-surface); }
.c-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-mod { color: var(--hp-text-2); font-size: 12px; }
.c-size { color: var(--hp-text-2); font-size: 12px; text-align: right; }
.xpl-ic { display: inline-flex; }
.xpl-ic i { width: 16px; height: 16px; }
.xpl-ic.ico-dir i { color: #e3b341; }
.xpl-ic.ico-file i { color: var(--hp-text-2); }

/* icon view */
.xpl-list.icons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 12px; }
.xpl-list.icons .xpl-head { display: none; }
.xpl-list.icons .xpl-row { grid-template-columns: none; flex-direction: column; width: 96px; height: 92px; text-align: center; gap: 6px; padding: 10px 6px; }
.xpl-list.icons .c-name { flex-direction: column; gap: 6px; }
.xpl-list.icons .xpl-ic i { width: 34px; height: 34px; }
.xpl-list.icons .c-mod, .xpl-list.icons .c-size { display: none; }
.xpl-list.icons .c-name .nm { max-width: 88px; white-space: normal; line-height: 1.25; max-height: 2.4em; }

.xpl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 70%; color: var(--hp-text-disabled); }
.xpl-empty i { width: 42px; height: 42px; }
.xpl-status { padding: 4px 12px; border-top: 1px solid var(--hp-border-soft); color: var(--hp-text-2); font-size: 12px; }

/* context menu: 已统一至 desktop/context-menu.js + desktop/menu.css（.ctx-pop） */

/* modal + toast */
.xpl-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.xpl-modal { width: min(720px, 90vw); max-height: 84vh; display: flex; flex-direction: column; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow-md); }
.xpl-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--hp-border); font-weight: 600; }
.xpl-x { border: none; background: transparent; cursor: pointer; color: var(--hp-text-2); }
.xpl-modal-b { padding: 12px 14px; overflow: auto; }
.xpl-modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--hp-border); }
.xpl-edit { width: 100%; min-height: 320px; resize: vertical; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-sm); padding: 10px; font: 12px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--hp-bg); color: var(--hp-text-1); }
.xpl-btn { padding: 6px 14px; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-sm); background: var(--hp-surface); color: var(--hp-text-1); cursor: pointer; font: inherit; }
.xpl-btn:hover { background: var(--hp-hover); }
.xpl-btn.primary { background: var(--hp-accent); color: var(--hp-accent-fg); border-color: transparent; }
.xpl-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--hp-text-1); color: var(--hp-surface); padding: 8px 16px; border-radius: var(--hp-radius); opacity: 0; transition: all var(--hp-dur) var(--hp-ease); z-index: 10001; box-shadow: var(--hp-shadow-md); }
.xpl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* tree (sidebar reuse) */
.xpl-tree { overflow: auto; padding: 4px; font-size: 13px; }
.tree-row { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-radius: var(--hp-radius-sm); cursor: pointer; white-space: nowrap; }
.tree-row:hover { background: var(--hp-hover); }
.tree-row i { width: 15px; height: 15px; flex-shrink: 0; }
.tree-row .tree-nm { overflow: hidden; text-overflow: ellipsis; }
.tree-indent { width: 15px; display: inline-block; }