@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root {
  --bg-gradient: linear-gradient(135deg, #09090e 0%, #17102e 100%);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --accent: #5865F2; /* Discord blurple */
  --accent-hover: #4752C4;
  --font-main: 'Outfit', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-gradient);
  color: var(--text-primary);
  font-family: var(--font-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 1rem;
  text-decoration: none;
}

.btn-primary { background-color: var(--accent); color: white; }
.btn-primary:hover { background-color: var(--accent-hover); transform: scale(1.02); }
.btn-outline { background-color: transparent; color: var(--text-primary); border: 1px solid var(--glass-border); }
.btn-outline:hover { background-color: var(--glass-bg); }

.container { max-width: 1200px; margin: 0 auto; padding: 2rem; width: 100%; flex: 1; }

.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 0; border-bottom: 1px solid var(--glass-border); margin-bottom: 3rem;
}
.header h1 { font-size: 2rem; font-weight: 700; background: linear-gradient(90deg, #fff, #a1a1aa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.upload-area {
  border: 2px dashed var(--glass-border); border-radius: 16px; padding: 4rem 2rem; text-align: center;
  cursor: pointer; transition: all 0.3s ease; background: rgba(255,255,255,0.02);
}
.upload-area:hover, .upload-area.dragover { border-color: var(--accent); background: rgba(88, 101, 242, 0.05); }

.upload-icon { font-size: 3rem; color: var(--accent); margin-bottom: 1rem; }
.upload-text { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 1rem; }

.progress-container { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 1rem; display: none; }
.progress-bar { height: 100%; background: var(--accent); width: 0%; transition: width 0.1s linear; }

.nc-list { margin-top: 1rem; display: flex; flex-direction: column; }
.nc-header { 
  display: grid; 
  grid-template-columns: 40px auto 100px 150px 80px; 
  padding: 1rem 1rem; 
  border-bottom: 1px solid var(--glass-border); 
  color: var(--text-secondary); 
  font-size: 0.9rem; 
  align-items: center; 
}
.nc-row { 
  display: grid; 
  grid-template-columns: 40px auto 100px 150px 80px; 
  padding: 0.75rem 1rem; 
  border-bottom: 1px solid rgba(255,255,255,0.05); 
  align-items: center; 
  transition: background 0.2s; 
}
.nc-row:hover { background: rgba(255,255,255,0.05); }
.nc-cell { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem;}
.nc-name-cell { gap: 1rem; overflow: hidden; font-size: 1rem;}
.nc-name-text { overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.nc-name-text:hover { text-decoration: underline; }
.nc-icon { font-size: 1.5rem; }
.nc-checkbox { width: 16px; height: 16px; border: 1px solid var(--text-secondary); border-radius: 3px; display: inline-block; cursor: pointer; }

.dropdown { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.dropbtn { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0 0.5rem; line-height: 1; }
.dropbtn:hover { color: var(--text-primary); }
.dropdown-content { 
  display: none; 
  position: absolute; 
  right: 0; 
  top: 100%;
  background-color: #1a1a24; 
  min-width: 150px; 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); 
  z-index: 10; 
  border: 1px solid var(--glass-border); 
  border-radius: 8px; 
  overflow: hidden;
}
.dropdown-content button { 
  color: var(--text-primary); 
  padding: 10px 16px; 
  text-decoration: none; 
  display: block; 
  background: none; 
  border: none; 
  width: 100%; 
  text-align: left; 
  cursor: pointer; 
  font-family: var(--font-main);
  font-size: 0.9rem;
}
.dropdown-content button:hover { background-color: rgba(255,255,255,0.1); }
.dropdown.show .dropdown-content { display: block; }

.preview-modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; }
.preview-modal-content { position: relative; max-width: 90%; max-height: 90%; width: 800px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem 1rem 1rem; }
.close-btn { position: absolute; top: 10px; right: 20px; color: var(--text-secondary); font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
.close-btn:hover { color: white; }
#preview-container { width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#preview-container video, #preview-container img, #preview-container audio { max-width: 100%; max-height: 70vh; border-radius: 8px; }

.nc-grid { margin-top: 1rem; display: block; }
.nc-grid #file-list-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.nc-grid-card { 
  background: var(--glass-bg); 
  border: 1px solid var(--glass-border); 
  border-radius: 8px; 
  padding: 1.5rem 1rem; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  transition: transform 0.2s, box-shadow 0.2s; 
  position: relative;
  text-align: center;
}
.nc-grid-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); background: rgba(255,255,255,0.08); }
.nc-grid-icon { font-size: 5rem; margin-bottom: 1rem; line-height: 1;}
.nc-grid-name { font-size: 1rem; font-weight: 600; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25rem;}
.nc-grid-details { font-size: 0.85rem; color: var(--text-secondary); }
.nc-grid-checkbox { position: absolute; top: 15px; left: 15px; }
.nc-grid-dropdown { position: absolute; top: 15px; right: 10px; }