:root{
  --bg: linear-gradient(135deg,#0d0d0d 0%,#181818 100%);
  --glass: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
  --text: #f5f5f5;
  --text-dim: #a8a8a8;
  --accent: #3b82f6;
  --accent-glow: 0 0 18px rgba(59,130,246,0.45);
  --radius: 12px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-soft: 0 8px 28px rgba(0,0,0,0.45);
  --shadow-glass: 0 3px 18px rgba(0,0,0,0.35);
  --topbar-height: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2d2d2d; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
::-webkit-scrollbar-track { background: #0e0e0e; }

#topbar{
  height: var(--topbar-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .8rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-glass);
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background .25s ease, box-shadow .25s ease;
}

#logo { display:flex; align-items:center; gap:.6rem; user-select:none; }
#logo h1 { font-size:1.15rem; font-weight:700; letter-spacing:-0.4px; color:var(--text); }
#logo .material-icons { color:var(--accent); text-shadow:var(--accent-glow); }

#view-toggle { display:flex; gap:.5rem; align-items:center; }
#view-toggle button{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  padding:.45rem .7rem;
  border-radius: 10px;
  cursor:pointer;
  transition: all .18s ease;
  font-size:.9rem;
}
#view-toggle button:hover,
#view-toggle button:focus,
#view-toggle button.active{
  color:var(--accent);
  border-color:var(--accent);
  box-shadow: var(--accent-glow);
  outline: none;
}

#main{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  gap: 0;
}
#sidebar{
  width: 280px;
  min-width: 200px;
  max-width: 34%;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-right:1px solid var(--border);
  padding: 1.25rem;
  overflow:auto;
  transition: width .25s ease, transform .2s ease;
  box-shadow: inset -1px 0 0 var(--border);
}

#sidebar h2{ font-size: .98rem; font-weight:600; color:var(--text-dim); margin-bottom: .9rem; }
.folder-list, .subfolders { list-style:none; margin:0; padding:0; }
.folder { margin-bottom:8px; }
.folder-header{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:10px; cursor:pointer;
  transition: background .18s ease, color .18s ease;
}
.folder-header:hover{ background: rgba(255,255,255,0.03); }
.folder-header:focus { outline:2px solid rgba(59,130,246,.12); }
.folder-header .toggle { font-size:1rem; color:var(--text-dim); transition: transform .25s ease; }
.folder.open > .folder-header .toggle { transform: rotate(90deg); color:var(--accent); }

.subfolders{
  margin-left:1rem; padding-left:.6rem;
  border-left:1px solid var(--border);
  display:none;
}
.folder.open > .subfolders { display:block; }


#content{
  flex:1 1 auto;
  padding:1.25rem;
  overflow:auto;
  min-width:0;
  animation: fadeIn .5s ease both;
}

#breadcrumb{ display:flex; align-items:center; gap:6px; color:var(--text-dim); font-size:.9rem; margin-bottom:1rem; }
#breadcrumb .material-icons { color:var(--accent); font-size:1.1rem; }
#flexintrobox { display:flex; justify-content:center; padding:2rem 0; }
.intro{
  width:100%;
  max-width:760px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem 1.6rem;
  box-shadow:var(--shadow-soft);
  backdrop-filter: blur(12px);
  text-align:center;
}
.intro h2{ color:var(--accent); font-weight:700; margin-bottom:.6rem; }
.intro p{ color:var(--text-dim); margin-bottom:.9rem; }

#file-view.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:1rem;
  align-items:start;
}
#file-view.list{
  display:flex; flex-direction:column; gap:.6rem;
}

.file-item{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:12px;
  padding: .9rem;
  text-align:center;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-glass);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  position: relative;
}
.file-item:hover{ transform: translateY(-6px); border-color:var(--accent); box-shadow: var(--accent-glow); }
.file-item .icon { font-size:34px; color:var(--accent); margin-bottom:6px; }
.file-item .meta { color:var(--text-dim); font-size:.82rem; display:none; }
#file-view.list .file-item{
  display:flex; align-items:center; text-align:left; gap:12px; padding:.7rem .9rem;
}
#file-view.list .icon { font-size:28px; margin:0; flex: 0 0 36px; text-align:center; }
.file-item .name,
.file-item .title {
  display:block;
  font-family: var(--font-mono);
  font-size:.92rem;
  color:var(--text);
  line-height:1.15;
  max-width:100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#file-view.list .meta { display:block; color:var(--text-dim); font-size:.82rem; }
#file-view.grid .file-item[title]:hover::after{
  content: attr(title);
  position:absolute; bottom:115%; left:50%; transform:translateX(-50%);
  background: rgba(20,20,20,0.96); color:var(--text); padding:6px 10px; border-radius:8px;
  font-size:.8rem; white-space:nowrap; border:1px solid var(--border); box-shadow:var(--shadow-soft); z-index:20;
}
.file-item.wrap .name,
.file-item.wrap .title {
  white-space: normal;
  word-break: break-word;
}
#file-view.list .file-item .name {
  min-width: 0; /* allows flex children to shrink */
  flex: 1 1 auto;
}
#loading-overlay{
  position:fixed; inset:0; background:#070707; display:flex; justify-content:center; align-items:center;
  z-index:9998; transition: opacity .45s ease;
}
#loading-overlay img{ width:140px; height:auto; filter: drop-shadow(0 0 20px var(--accent)); }
#loading-overlay.hidden{ opacity:0; pointer-events:none; }
#main-content{ opacity:0; transition: opacity .45s ease; }
#main-content.visible{ opacity:1; }
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 10000;
  animation: fadeIn 0.4s ease;
}
#modal-overlay.hidden {
  display: none;
}

#modal-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.75);
  display:flex; justify-content:center; align-items:flex-start; padding:40px 20px; overflow-y:auto; z-index:10000;
}
#modal-overlay.hidden{ display:none; }
.content-container{
  background:var(--glass); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem 1.5rem; max-width:920px; width:100%; color:var(--text);
  box-shadow:var(--shadow-soft); backdrop-filter: blur(14px);
  font-family: var(--font-mono);
}
.content-container .modal-header{ display:flex; justify-content:flex-end; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.content-container pre{
  background:#0f0f0f; border-radius:10px; padding:1rem; margin-top:1rem; overflow-x:auto; color:#eee; line-height:1.5;
}

a:focus, button:focus, .folder-header:focus, .file-item:focus { outline: 3px solid rgba(59,130,246,0.12); outline-offset:2px; }
@media (max-width: 900px){
  #main { flex-direction:column; }
  #sidebar { width:100%; max-height:320px; border-right:none; border-bottom:1px solid var(--border); }
  #content { padding:1rem; }
  .intro { padding:1rem; }
}
@media (max-width: 600px){
  #logo h1 { font-size:1rem; }
  #file-view.grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:.6rem; }
  #sidebar { padding:.9rem; }
  #topbar { padding:.6rem .9rem; height:56px; }
}
@keyframes fadeIn { from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:translateY(0);} }