/* ===== dl.chingtsi.com — 无窗口 Finder 布局 ===== */

:root{
  --top:        #1c1f24;
  --side:       #191c21;
  --content:    #14171b;
  --line:       #2b3038;
  --line-soft:  #23272e;
  --text:       #e7eaef;
  --dim:        #9aa3b0;
  --faint:      #6d7683;
  --accent:     #3f92e0;
  --accent-soft:rgba(63,146,224,.18);
  --hover:      rgba(255,255,255,.065);
  --brand-txt:  #dce8f5;
  --crumb:      #c2ccd8;
  --pill:       #2b3139;
  --pill-txt:   #ffffff;
  --field:      #262a31;
  --field-line: #2f353d;
  --field-focus:#2b3038;
  --seg-on-bg:  #3a414b;
  --seg-on-txt: #ffffff;
  --seg-on-sh:  none;
  --scroll:     #333a43;
  --head-bg:    rgba(22,25,29,.94);
  --ico-shadow: rgba(0,0,0,.38);
  --mask:       rgba(0,0,0,.42);
  --drawer-sh:  rgba(0,0,0,.5);
  --menu-bg:    #22262d;
  --menu-sh:    rgba(0,0,0,.42);
  --topbar-h:   50px;
  --status-h:   26px;
  --tree-w:     250px;
  color-scheme: dark;
}

html[data-theme="light"]{
  --top:        #f5f7fa;
  --side:       #eef1f6;
  --content:    #ffffff;
  --line:       #d9e0e9;
  --line-soft:  #e8edf3;
  --text:       #1d242e;
  --dim:        #55606f;
  --faint:      #8b95a3;
  --accent:     #2f7fd6;
  --accent-soft:rgba(47,127,214,.12);
  --hover:      rgba(16,24,40,.06);
  --brand-txt:  #24303e;
  --crumb:      #4b5766;
  --pill:       #e4eaf2;
  --pill-txt:   #16202b;
  --field:      #eef2f7;
  --field-line: #d5dde7;
  --field-focus:#e6ecf4;
  --seg-on-bg:  #ffffff;
  --seg-on-txt: #1d242e;
  --seg-on-sh:  0 1px 2px rgba(16,24,40,.14);
  --scroll:     rgba(16,24,40,.24);
  --head-bg:    rgba(255,255,255,.94);
  --ico-shadow: rgba(16,24,40,.16);
  --mask:       rgba(16,24,40,.28);
  --drawer-sh:  rgba(16,24,40,.22);
  --menu-bg:    #ffffff;
  --menu-sh:    rgba(16,24,40,.18);
  color-scheme: light;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{ height:100%; }
body{
  margin:0;
  display:flex; flex-direction:column;
  background:var(--content);
  color:var(--text);
  font:13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
/* 切换主题时主色块平滑过渡 */
.topbar, .tree, .content, .statusbar, body, .searchbox, .segview, .segview button.on,
.crumb.last, .list-head, .popmenu{ transition:background-color .24s ease, border-color .24s ease, color .24s ease; }
a{ color:inherit; text-decoration:none; }

/* ================= 顶栏 ================= */
.topbar{
  flex:0 0 var(--topbar-h);
  height:var(--topbar-h);
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  background:var(--top);
  border-bottom:1px solid var(--line);
  z-index:30;
}

.iconbtn{
  width:28px; height:28px; flex:0 0 28px;
  display:grid; place-items:center;
  border-radius:6px; color:var(--dim);
}
.iconbtn svg{ width:16px; height:16px; }
.iconbtn:hover{ background:var(--hover); color:var(--text); }
.treebtn{ display:none; }

.brand{
  display:flex; align-items:center; gap:7px;
  flex:0 0 auto; padding:4px 8px 4px 4px; border-radius:6px;
  font-weight:600; font-size:13px; letter-spacing:.2px;
  color:var(--brand-txt);
}
.brand{
  transition:background-color .16s ease, transform .14s cubic-bezier(.16,1,.3,1);
}
.brand:hover{ background:var(--hover); }
.brand:active{ transform:scale(.97); }
.brand-ico{ width:17px; height:17px; color:var(--accent); display:block; }
.brand-ico svg{ width:17px; height:17px; }

.brand-sep{
  flex:0 0 1px; width:1px; height:20px;
  background:var(--line);
}

.brand-wrap{ position:relative; flex:0 0 auto; }
.brand-caret{
  width:9px; height:9px; flex:0 0 9px;
  color:var(--faint); margin-left:1px;
  transition:transform .24s cubic-bezier(.16,1,.3,1), color .16s ease;
}
.brand:hover .brand-caret{ color:var(--dim); }
.brand[aria-expanded="true"]{ background:var(--hover); }
.brand[aria-expanded="true"] .brand-caret{ transform:rotate(180deg); }

/* 弹出选项卡 */
.popmenu{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:226px; padding:6px;
  background:var(--menu-bg);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 34px var(--menu-sh);
  z-index:60;
  transform-origin:top left;
  will-change:transform, opacity;
  backface-visibility:hidden;
}
/* 出场：柔和展开 + 轻微上浮，指数缓出更顺 */
.popmenu.is-in{ animation:menuIn .21s cubic-bezier(.16,1,.3,1) both; }
/* 退场：快速收拢，不拖沓 */
.popmenu.is-out{ animation:menuOut .15s cubic-bezier(.4,0,.2,1) both; pointer-events:none; }
@keyframes menuIn{
  from{ opacity:0; transform:translateY(-7px) scale(.965); }
  60%{ opacity:1; }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes menuOut{
  from{ opacity:1; transform:translateY(0) scale(1); }
  to{ opacity:0; transform:translateY(-5px) scale(.98); }
}
/* 菜单项错峰淡入，避免整块同时跳出 */
@keyframes mItemIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.popmenu.is-in > .pop-label{ animation:mItemIn .22s cubic-bezier(.16,1,.3,1) .02s both; }
.popmenu.is-in > .pop-item:nth-child(2){ animation:mItemIn .22s cubic-bezier(.16,1,.3,1) .05s both; }
.popmenu.is-in > .pop-item:nth-child(3){ animation:mItemIn .22s cubic-bezier(.16,1,.3,1) .08s both; }
.popmenu.is-in > .pop-item:nth-child(5){ animation:mItemIn .22s cubic-bezier(.16,1,.3,1) .11s both; }
.pop-label{
  padding:6px 9px 4px;
  font-size:10.5px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--faint);
}
.pop-item{
  display:flex; align-items:center; gap:9px;
  width:100%; height:32px; padding:0 9px;
  border-radius:7px;
  color:var(--text); font-size:12.5px;
  text-align:left;
}
.pop-item{
  transition:background-color .14s ease, color .14s ease;
  -webkit-tap-highlight-color:transparent;
}
.pop-item:hover{ background:var(--hover); }
.pop-item:active{ background:var(--accent-soft); }
.pi-ico{
  flex:0 0 15px; width:15px; height:15px;
  display:grid; place-items:center; color:var(--dim);
}
.pi-ico svg{ width:15px; height:15px; display:block; }
.pop-item:hover .pi-ico{ color:var(--text); }
.pi-txt{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pi-tick{
  flex:0 0 14px; width:14px; height:14px;
  display:grid; place-items:center;
  color:var(--accent); opacity:0;
}
.pi-tick svg{ width:14px; height:14px; display:block; }
.pop-item.on{ color:var(--text); }
.pop-item.on .pi-ico{ color:var(--accent); }
.pop-item.on .pi-tick{ opacity:1; }
.pop-sep{ height:1px; margin:5px 5px; background:var(--line-soft); }


/* 面包屑：当前目录 */
.crumbs{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:2px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  white-space:nowrap;
  padding:2px 0;
}
.crumbs::-webkit-scrollbar{ height:0; }
.crumb{
  flex:0 0 auto;
  padding:4px 7px; border-radius:5px;
  font-size:12.5px; color:var(--crumb);
  max-width:220px; overflow:hidden; text-overflow:ellipsis;
}
.crumb:hover{ background:var(--hover); color:var(--text); }
.crumb.last{ background:var(--pill); color:var(--pill-txt); font-weight:600; cursor:default; }
.crumb-sep{ flex:0 0 auto; color:var(--faint); font-size:11px; user-select:none; }

/* 工具栏 */
.tools{ flex:0 0 auto; display:flex; align-items:center; gap:9px; }

.searchbox{
  display:flex; align-items:center; gap:6px;
  width:210px; height:28px;
  padding:0 8px;
  background:var(--field);
  border:1px solid var(--field-line);
  border-radius:7px;
  transition:border-color .15s, background .15s;
}
.searchbox:focus-within{ border-color:var(--accent); background:var(--field-focus); }
.searchbox .mag{ width:13px; height:13px; flex:0 0 13px; color:var(--faint); }
.searchbox input{
  flex:1 1 auto; min-width:0;
  background:none; border:0; outline:none;
  color:var(--text); font:inherit; font-size:12.5px;
}
.searchbox input::placeholder{ color:var(--faint); }
.searchbox input::-webkit-search-cancel-button{ display:none; }
.clearsearch{ width:15px; height:15px; flex:0 0 15px; color:var(--faint); }
.clearsearch svg{ width:15px; height:15px; display:block; }

.segview{
  display:flex; gap:1px; padding:2px;
  background:var(--field); border:1px solid var(--field-line); border-radius:7px;
}
.segview button{
  width:26px; height:22px;
  display:grid; place-items:center;
  border-radius:5px; color:var(--faint);
}
.segview button svg{ width:13px; height:13px; }
.segview button:hover{ color:var(--text); }
.segview button.on{ background:var(--seg-on-bg); color:var(--seg-on-txt); box-shadow:var(--seg-on-sh); }

/* ================= 主体 ================= */
.main{
  flex:1 1 auto; min-height:0;
  display:flex;
  position:relative;
}

/* ---- 左侧：目录总览树 ---- */
.tree{
  flex:0 0 var(--tree-w); width:var(--tree-w);
  display:flex; flex-direction:column;
  background:var(--side);
  border-right:1px solid var(--line);
  min-height:0;
  z-index:20;
}
.tree-head{
  flex:0 0 auto;
  padding:12px 14px 8px;
  font-size:10.5px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--faint);
}
.tree-scroll{
  flex:1 1 auto; min-height:0;
  overflow:auto;
  padding:0 8px 14px;
}
.tree-scroll::-webkit-scrollbar{ width:9px; }
.tree-scroll::-webkit-scrollbar-thumb{ background:var(--scroll); border-radius:5px; border:2px solid var(--side); }
.tree-scroll::-webkit-scrollbar-track{ background:transparent; }

.tree-root, .tchildren{ list-style:none; margin:0; padding:0; }
.tchildren{ padding-left:13px; }

.trow{
  display:flex; align-items:center; gap:5px;
  height:25px; padding:0 7px 0 1px;
  border-radius:5px;
  cursor:pointer;
  color:var(--dim);
  user-select:none;
}
.trow:hover{ background:var(--hover); color:var(--text); }
li.on > .trow{ background:var(--accent-soft); color:var(--text); }
li.on > .trow .tlabel{ font-weight:600; }

.caret{
  flex:0 0 14px; width:14px; height:14px;
  display:grid; place-items:center;
  color:var(--faint);
}
.caret svg{ width:8px; height:8px; transition:transform .13s ease; }
li.open > .trow .caret svg{ transform:rotate(90deg); }
.caret.is-leaf{ cursor:pointer; }
.caret:hover{ color:var(--text); }

.tree-ico{ flex:0 0 14px; width:14px; height:14px; color:var(--accent); display:grid; place-items:center; }
.tree-ico svg{ width:14px; height:14px; }
.tlabel{
  flex:1 1 auto; min-width:0;
  font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tmark{ flex:0 0 auto; font-size:10px; color:var(--faint); }

.tree-mask{ display:none; }

/* ---- 右侧：内容区 ---- */
.content{
  flex:1 1 auto; min-width:0; min-height:0;
  display:flex; flex-direction:column;
  background:var(--content);
  position:relative;
}
.scroller{
  flex:1 1 auto; min-height:0;
  overflow:auto;
}
.scroller::-webkit-scrollbar{ width:11px; }
.scroller::-webkit-scrollbar-thumb{ background:var(--scroll); border-radius:6px; border:3px solid var(--content); }
.scroller::-webkit-scrollbar-track{ background:transparent; }

/* 图标视图 */
.gridview{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:6px 4px;
  padding:18px 18px 26px;
  align-content:start;
}
.gitem{
  display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:10px 6px 8px;
  border-radius:8px; cursor:default;
  border:1px solid transparent;
}
.gitem:hover{ background:var(--hover); }
.gitem.is-sel{ background:var(--accent-soft); border-color:rgba(63,146,224,.55); }
.gitem .ico{ width:56px; height:56px; pointer-events:none; }
.gitem .ico svg{ width:56px; height:56px; display:block; filter:drop-shadow(0 3px 6px var(--ico-shadow)); }
.gitem .nm{
  font-size:11.5px; line-height:1.35; text-align:center;
  color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-all; max-width:100%; pointer-events:none;
}
.gitem .where{
  font-size:10px; color:var(--faint); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  pointer-events:none;
}

/* 列表视图 */
.listview{ min-height:100%; display:flex; flex-direction:column; }
.list-head{
  position:sticky; top:0; z-index:5;
  display:grid; grid-template-columns:1fr 100px 120px 150px;
  gap:10px;
  padding:8px 18px;
  background:var(--head-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
  font-size:11.5px; color:var(--faint);
}
.col{ cursor:pointer; display:flex; align-items:center; gap:4px; user-select:none; }
.col:hover{ color:var(--text); }
.col.asc::after{ content:"▲"; font-size:7px; }
.col.desc::after{ content:"▼"; font-size:7px; }
.col-size, .col-kind{ justify-content:flex-start; }

.list-body{ padding:4px 10px 26px; }
.litem{
  display:grid; grid-template-columns:1fr 100px 120px 150px;
  gap:10px; align-items:center;
  padding:5px 8px; border-radius:6px;
  cursor:default; font-size:12.5px;
  border:1px solid transparent;
}
.litem:hover{ background:var(--hover); }
.litem.is-sel{ background:var(--accent-soft); border-color:rgba(63,146,224,.55); }
.cell{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-name{ display:flex; align-items:center; gap:8px; }
.c-name .mini{ flex:0 0 20px; width:20px; height:20px; display:grid; place-items:center; }
.c-name .mini svg{ width:20px; height:20px; display:block; }
.c-name .txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.l-size, .l-kind, .l-date{ color:var(--dim); font-size:12px; }

/* 空状态 */
.empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--faint);
  pointer-events:none;
}
.empty-ico{ width:58px; height:58px; opacity:.32; }
.empty-ico svg{ width:58px; height:58px; }
.empty-title{ font-size:13.5px; color:var(--dim); }
.empty-sub{ font-size:12px; }

/* ================= 状态栏 ================= */
.statusbar{
  flex:0 0 var(--status-h); height:var(--status-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:var(--top);
  border-top:1px solid var(--line);
  font-size:11.5px; color:var(--faint);
}

/* ================= 响应式 ================= */
@media (max-width:820px){
  :root{ --topbar-h:48px; }
  .brand-txt, .brand-sep, .brand-caret{ display:none; }
  .popmenu{ min-width:210px; }
  .searchbox{ width:150px; }
  .tree{
    position:fixed; top:var(--topbar-h); bottom:var(--status-h); left:0;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:14px 0 34px var(--drawer-sh);
  }
  .tree.open{ transform:none; }
  .treebtn{ display:grid; }
  .tree-mask{
    display:block; position:fixed; inset:var(--topbar-h) 0 var(--status-h) 0;
    background:var(--mask); z-index:15;
  }
  .gridview{ grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); padding:14px 12px 22px; }
  .gitem .ico, .gitem .ico svg{ width:48px; height:48px; }
  .list-head{ display:none; }
  .litem{ grid-template-columns:1fr 84px; }
  .l-kind, .l-date{ display:none; }
}
@media (max-width:520px){
  .searchbox{ width:118px; }
  .crumb{ max-width:120px; }
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce){
  .popmenu, .popmenu > *, .brand, .brand-caret, .pop-item{ animation:none !important; transition:none !important; }
  .topbar, .tree, .content, .statusbar, body, .searchbox, .segview, .segview button.on,
  .crumb.last, .list-head{ transition:none !important; }
}