:root{
  --bg:#0a0d0f;
  --panel:#12181b;
  --panel-line:#1f2b2e;
  --signal:#ffb400;
  --cyan:#59d6c4;
  --paper:#eae6da;
  --muted:#66767a;

  --font-mono: 'JetBrains Mono','DejaVu Sans Mono','Liberation Mono','Cascadia Code', ui-monospace, monospace;
  --font-sans: -apple-system,'Segoe UI','Noto Sans',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(ellipse at 50% -10%, #16201f 0%, var(--bg) 55%);
  color:var(--paper);
  font-family:var(--font-sans);
  min-height:100vh;
  padding:32px 20px 60px;
  display:flex;
  justify-content:center;
}
.wrap{width:100%;max-width:760px;}

header{margin-bottom:28px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px var(--signal);
}
h1{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-0.01em;
  margin:0 0 8px;
}
header p{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  margin:0;
  max-width:560px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:12px;
  padding:8px;
}

.status{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--muted);
  padding:20px;
  text-align:center;
}
.status.error{color:#e0563f;}

.file-list{
  list-style:none;
  margin:0;
  padding:0;
}
.file-list li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:8px;
  transition:background .12s ease;
}
.file-list li:hover{
  background:#0d1315;
}
.file-list li + li{
  border-top:1px solid var(--panel-line);
}

.file-icon{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:7px;
  background:#0d1315;
  border:1px solid var(--panel-line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}
.file-list li:hover .file-icon{
  border-color:var(--signal);
  color:var(--signal);
}
.file-icon svg{width:16px;height:16px;}

.file-main{
  flex:1 1 auto;
  min-width:0;
}
.file-name{
  display:block;
  color:var(--paper);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.file-name:hover{color:var(--signal);}
.file-meta{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.file-size{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--muted);
  min-width:64px;
  text-align:right;
}

footer{
  margin-top:24px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  text-align:center;
}