/* ═══════════════════════════════════════════
   viewer.css  —  SCNet Viewer UI
   ═══════════════════════════════════════════ */

/* ─── CSS Variables ─── */
:root {
  --c1: #0891b2;
  --c2: #0e7490;
  --p1: #3b82f6;
  --p2: #2563eb;
  --dark: #ffffff;
  --dark2: #f1f5f9;
  --bg: #ffffff;
  --bg2: #f8fafc;
  --bg3: #e2e8f0;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --accent: #0891b2;
  --accent2: #3b82f6;
  --radius: 8px;
  --transition: .2s ease;
}

/* ─── Reset / Base ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;font-size:16px;-webkit-tap-highlight-color:transparent}
body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  overflow:hidden;
  cursor:none;
  user-select:none;
  -webkit-user-select:none;
}

/* ─── Custom Cursor ─── */
#cur-dot{
  position:fixed;z-index:99998;pointer-events:none;
  width:6px;height:6px;border-radius:50%;
  background:var(--c1);
  transform:translate(-50%,-50%);
  transition:width .15s,height .15s,background .15s,opacity .15s;
  opacity:1;box-shadow:0 0 6px rgba(8,145,178,.3);
}
.nocursor *{cursor:none!important}
body.cur-hover #cur-dot{width:10px;height:10px;background:var(--p1);box-shadow:0 0 10px rgba(59,130,246,.4)}

/* ─── Loader ─── */
#loader{
  position:fixed;inset:0;z-index:100000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);
  transition:opacity .6s ease,visibility .6s ease;
}
#loader.loaded{opacity:0;visibility:hidden;pointer-events:none}
.ld-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(8,145,178,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(8,145,178,.08) 1px,transparent 1px);
  background-size:40px 40px;
}
.ld-logo-wrap{
  position:relative;width:120px;height:120px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.ld-svg,.ld-svg2,.ld-svg3{
  position:absolute;inset:0;width:100%;height:100%;
  animation:ldSpin 3s linear infinite;
}
.ld-svg2{animation-duration:4s;animation-direction:reverse}
.ld-svg3{animation-duration:2.5s}
@keyframes ldSpin{to{transform:rotate(360deg)}}
.ld-center{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.ld-brand{
  font-size:1.8rem;font-weight:700;letter-spacing:.12em;
  background:linear-gradient(135deg,var(--c1),var(--p1));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:6px;
}
.ld-sub{
  font-size:.72rem;color:var(--text3);letter-spacing:.08em;margin-bottom:28px;
}
.ld-progress-wrap{width:220px;text-align:center}
.ld-count{
  font-size:.7rem;color:var(--text2);font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.ld-bar-wrap{
  height:3px;background:var(--bg3);border-radius:3px;overflow:hidden;
}
.ld-bar{
  height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--c1),var(--p1));
  transition:width .12s linear;
}

/* ─── Top Bar ─── */
.top-bar{
  height:52px;display:flex;align-items:center;gap:12px;
  padding:0 16px;background:var(--bg2);
  border-bottom:1px solid rgba(0,0,0,.06);
  position:relative;z-index:100;
}
.logo{
  font-size:1.05rem;font-weight:700;white-space:nowrap;
  background:linear-gradient(135deg,var(--c1),var(--p1));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.logo .sub{
  font-size:.55rem;font-weight:400;letter-spacing:.06em;
  color:var(--text3);-webkit-text-fill-color:var(--text3);margin-left:8px;
}
.breadcrumb{
  flex:1;display:flex;align-items:center;gap:4px;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none;
  padding:0 4px;min-width:0;
}
.breadcrumb::-webkit-scrollbar{display:none}
.bc-item{
  font-size:.72rem;color:var(--text2);cursor:pointer;
  padding:2px 8px;border-radius:4px;transition:background var(--transition),color var(--transition);
}
.bc-item:hover{background:var(--bg3);color:var(--c1)}
.bc-sep{color:var(--text3);font-size:.8rem;margin:0 2px}
.bc-current{font-size:.72rem;color:var(--text);font-weight:600}
.top-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:none;background:var(--bg3);color:var(--text2);border-radius:var(--radius);
  font-size:.85rem;cursor:pointer;transition:all var(--transition);flex-shrink:0;
}
.top-btn:hover{background:var(--dark2);color:var(--c1)}

/* ─── Main Wrapper ─── */
.main-wrap{
  display:flex;height:calc(100vh - 52px - 32px);overflow:hidden;
}

/* ─── Sidebar ─── */
.sidebar{
  width:220px;min-width:220px;
  display:flex;flex-direction:column;
  background:var(--bg2);border-right:1px solid rgba(0,0,0,.06);
  overflow:hidden;transition:width var(--transition);
}
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 6px;
}
.sidebar-header label{font-size:.68rem;font-weight:600;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
.sidebar-header .count{font-size:.6rem;color:var(--text3)}
.sidebar-search{padding:6px 10px}
.sidebar-search input{
  width:100%;padding:6px 10px;border:1px solid var(--bg3);border-radius:6px;
  background:var(--bg);color:var(--text);font-size:.7rem;outline:none;
  transition:border-color var(--transition);
}
.sidebar-search input:focus{border-color:var(--c1)}
.sidebar-tree{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 0;
}
.tree-item{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;margin:1px 6px;border-radius:6px;
  font-size:.7rem;cursor:pointer;
  transition:background var(--transition);white-space:nowrap;overflow:hidden;
}
.tree-item:hover{background:var(--bg3)}
.tree-item .ti-icon{
  flex-shrink:0;width:14px;text-align:center;color:var(--text3);font-size:.65rem;
}
.tree-item .ti-icon.dir{color:var(--c1);font-size:.7rem}
.tree-item .ti-name{flex:1;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.tree-item .ti-meta{
  flex-shrink:0;font-size:.58rem;color:var(--text3);
}

/* ─── Content Area ─── */
.content{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);
}
.content-inner{display:flex;flex-direction:column;height:100%;overflow:hidden}
.content-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;background:var(--bg2);
  border-bottom:1px solid rgba(0,0,0,.06);
  flex-shrink:0;
}
.fg{display:flex;align-items:center;gap:4px}
.f-btn{
  padding:4px 12px;border:none;border-radius:6px;
  background:var(--bg);color:var(--text3);font-size:.65rem;font-weight:500;
  cursor:pointer;transition:all var(--transition);letter-spacing:.02em;
}
.f-btn:hover{background:var(--bg3);color:var(--text2)}
.f-btn.active{background:var(--c1);color:#fff}
.spacer{flex:1}
.vo{display:flex;gap:3px}
.v-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:6px;background:var(--bg);color:var(--text3);
  font-size:.8rem;cursor:pointer;transition:all var(--transition);
}
.v-btn:hover{background:var(--bg3);color:var(--text2)}
.v-btn.active{background:var(--p2);color:#fff}

/* ─── File Grid Wrapper ─── */
.fgw{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:10px;
}

/* ─── Skeleton Loading ─── */
.skel-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.skel-card{
  height:200px;border-radius:var(--radius);background:var(--bg3);
  position:relative;overflow:hidden;
}
.skel-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.03),transparent);
  animation:skShimmer 1.5s infinite;
}
@keyframes skShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ─── File Grid (card view) ─── */
.fg.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.fg.list{display:flex;flex-direction:column;gap:2px}

/* ─── File Card ─── */
.fc{
  position:relative;border-radius:var(--radius);overflow:hidden;
  cursor:pointer;background:var(--bg2);
  border:1px solid rgba(0,0,0,.06);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.fc:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:rgba(8,145,178,.2)}
.fc:active{transform:translateY(0)}

/* Grid layout */
.fg.grid .fc{display:flex;flex-direction:column}
.fg.grid .fc-thumb{
  height:120px;background-size:cover;background-position:center;background-repeat:no-repeat;
  position:relative;
}
.fg.grid .fc-badge{
  position:absolute;top:6px;right:6px;
  background:rgba(8,145,178,.9);color:#fff;
  font-size:.55rem;font-weight:600;padding:1px 6px;border-radius:4px;
  letter-spacing:.05em;backdrop-filter:blur(4px);
}
.fg.grid .fc-di{
  height:100px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);font-size:2rem;
}
.fg.grid .fc-body{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column}
.fg.grid .fc-name{
  font-size:.7rem;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fg.grid .fc-meta{
  font-size:.6rem;color:var(--text3);margin-top:auto;padding-top:4px;
}

/* List layout */
.fg.list .fc{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:6px;border:1px solid transparent;
}
.fg.list .fc:hover{border-color:rgba(8,145,178,.15);background:var(--bg3)}
.fg.list .fc-icon{flex-shrink:0;width:16px;text-align:center;color:var(--text3);font-size:.65rem}
.fg.list .fc-name{flex:1;font-size:.7rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg.list .fc-type-tag{
  flex-shrink:0;font-size:.55rem;color:var(--text3);background:var(--bg3);
  padding:1px 6px;border-radius:4px;
}
.fg.list .fc-meta{
  flex-shrink:0;font-size:.62rem;color:var(--text3);text-align:right;min-width:120px;
}

/* ─── Empty State ─── */
.empty-state{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 20px;text-align:center;
}
.empty-icon{font-size:3rem;margin-bottom:12px;opacity:.6}
.empty-title{font-size:.95rem;font-weight:600;color:var(--text2);margin-bottom:6px}
.empty-sub{font-size:.7rem;color:var(--text3);line-height:1.5}

/* ─── Status Bar ─── */
.status-bar{
  height:32px;display:flex;align-items:center;gap:16px;
  padding:0 14px;background:var(--bg2);
  border-top:1px solid rgba(0,0,0,.06);
  flex-shrink:0;font-size:.65rem;color:var(--text2);
}
.status-bar .dot{
  width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.stat{display:flex;align-items:center;gap:6px;white-space:nowrap}

/* ─── Modal Overlay ─── */
.modal-overlay{
  position:fixed;inset:0;z-index:200000;
  background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  backdrop-filter:blur(6px);
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{
  width:92vw;height:88vh;max-width:1400px;
  background:var(--bg);border-radius:12px;
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  transform:scale(.95);transition:transform .3s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.modal-overlay.open .modal{transform:scale(1)}

/* Modal top bar */
.modal-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--bg2);border-bottom:1px solid rgba(0,0,0,.08);
  flex-shrink:0;z-index:2;
}
.mt-path{
  font-size:.7rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.mt-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:none;background:var(--bg3);color:var(--text2);border-radius:6px;
  font-size:.8rem;cursor:pointer;transition:all var(--transition);flex-shrink:0;
}
.mt-close:hover{background:rgba(239,68,68,.1);color:#ef4444}

/* Navigation arrows */
.nav-arrow{
  position:absolute;top:50%;z-index:10;transform:translateY(-50%);
  width:40px;height:60px;display:flex;align-items:center;justify-content:center;
  border:none;background:rgba(0,0,0,.08);color:var(--text);font-size:1.8rem;
  cursor:pointer;transition:all var(--transition);border-radius:6px;
  backdrop-filter:blur(4px);opacity:0;
}
.modal-overlay.open:hover .nav-arrow{opacity:1}
.nav-arrow:hover{background:rgba(8,145,178,.15)}
.nav-arrow:disabled{opacity:0!important;pointer-events:none}
.nav-arrow.prev{left:8px}
.nav-arrow.next{right:8px}

/* Modal body */
.modal-body{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.modal-loading{
  font-size:.8rem;color:var(--text3);animation:pulse 1.5s ease-in-out infinite;
}

/* Gallery wrapper */
.gw{
  position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.gi{
  max-width:90%;max-height:90%;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transition:transform .05s linear;
  width:100%;height:100%;
}
.go{
  position:absolute;inset:0;z-index:3;
}
.go.grabbing{cursor:grabbing}

/* Zoom indicator */
.zi{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.08);color:var(--text);padding:4px 14px;
  border-radius:6px;font-size:.7rem;font-weight:600;
  opacity:0;transition:opacity .25s ease;
  backdrop-filter:blur(4px);z-index:5;
}
.zi.show{opacity:1}

/* Gallery Bar */
.gb{
  flex-shrink:0;padding:8px 16px;background:var(--bg2);
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;
}
.gbi{
  display:flex;align-items:center;gap:6px;
}
.gb-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:none;background:var(--bg3);color:var(--text2);border-radius:6px;
  font-size:.9rem;cursor:pointer;transition:all var(--transition);
}
.gb-btn:hover{background:var(--dark2);color:var(--c1)}
.gb-btn:disabled{opacity:.3;pointer-events:none}
.gb-c{
  font-size:.7rem;color:var(--text2);padding:0 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:300px;
}

/* Video/Audio/PDF/Text inside modal */
.vw{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.vw video{
  max-width:100%;max-height:100%;border-radius:4px;outline:none;display:block;
}
.vfs{
  position:absolute;bottom:12px;right:12px;z-index:4;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:none;background:rgba(0,0,0,.08);color:var(--text);border-radius:6px;
  font-size:1rem;cursor:pointer;transition:all var(--transition);
  backdrop-filter:blur(4px);
}
.vfs:hover{background:rgba(8,145,178,.6)}
.modal-body audio{
  width:80%;max-width:500px;outline:none;
}
.modal-body iframe{
  width:100%;height:100%;border:none;
}
.modal-body pre{
  background:var(--bg3);color:var(--text);padding:20px;
  font-size:.75rem;line-height:1.5;overflow:auto;width:100%;height:100%;
  margin:0;white-space:pre-wrap;word-break:break-all;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
*{scrollbar-width:thin;scrollbar-color:var(--bg3) transparent}

/* ─── Save Toast (fullscreen overlay) ─── */
#saveToast{
  position:fixed;inset:0;z-index:999999;
  background:rgba(30,26,23,.88);color:#f6f2eb;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:2.8rem;font-weight:700;letter-spacing:.2em;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;backdrop-filter:blur(12px);
}
#saveToast .toast-icon{
  display:block;margin-bottom:24px;font-size:4rem;
}

/* ─── Slide-up animation ─── */
@keyframes slideUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── Responsive ─── */
@media(max-width:768px){
  body{cursor:auto}
  #cur-dot{display:none}
  .sidebar{
    position:fixed;left:0;top:52px;bottom:32px;z-index:500;
    width:260px;transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-toggle-mobile{display:flex!important}
  .fg.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .fg.list .fc{padding:5px 8px;flex-wrap:wrap;gap:4px}
  .fg.list .fc-meta{min-width:80px;font-size:.55rem}
  .fg.list .fc-type-tag{display:none}
  .modal{width:100vw;height:100vh;max-width:none;border-radius:0}
  .nav-arrow{width:32px;height:50px;font-size:1.4rem;opacity:.6}
  .modal-overlay.open:hover .nav-arrow{opacity:.6}
  .nav-arrow.prev{left:2px}
  .nav-arrow.next{right:2px}
  .gb-c{max-width:150px;font-size:.65rem}
  .logo .sub{display:none}
  .top-bar{gap:8px;padding:0 10px}
  .content-header{padding:6px 10px;flex-wrap:wrap;gap:4px}
  .f-btn{padding:3px 8px;font-size:.6rem}
  .fgw{padding:6px}
  .status-bar{font-size:.6rem;gap:10px;padding:0 10px}
  .status-bar .stat:last-child{display:none}
  .ld-brand{font-size:1.4rem}
  .ld-sub{font-size:.6rem}
}
@media(max-width:480px){
  .fg.grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .fg.grid .fc-thumb{height:90px}
  .fg.grid .fc-di{height:80px;font-size:1.6rem}
  .sidebar{width:240px}
  .modal-body audio{width:90%}
  #saveToast{font-size:2rem}
}