:root{
  --bg:#070b16;
  --panel:#0f172a;
  --panel2:#121d36;
  --text:#e8eeff;
  --muted:#9bb0d9;
  --line:#24365d;
  --blue:#4f8cff;
  --blue2:#6da6ff;
  --red:#ff627c;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1000px 700px at 80% -10%, #1b2a4f 0%, var(--bg) 45%);
  color:var(--text);
}

.app{width:min(1080px,94vw);margin:16px auto 24px}
.topbar h1{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.06}
.topbar p{margin:6px 0 0;color:var(--muted);font-size:14px}

.stats{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.stat{
  background:linear-gradient(180deg,#132142,#101a32);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
}
.stat span{display:block;color:var(--muted);font-size:12px}
.stat strong{display:block;margin-top:4px;font-size:20px;line-height:1.15}

.card{
  margin-top:12px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.card-head h2{margin:0;font-size:22px;line-height:1.2}

.upload{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
}
.file-input{position:relative;display:inline-flex}
.file-input input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-input span{
  border:1px dashed #4567a8;
  background:#0c1731;
  color:#dbe8ff;
  border-radius:12px;
  padding:10px 14px;
  white-space:nowrap;
}
.selected-file{
  min-width:0;
  background:#0b142c;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.btn{
  border:none;border-radius:12px;padding:10px 14px;min-height:40px;
  cursor:pointer;text-decoration:none;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
}
.btn.ghost{background:#1a2b4e;border:1px solid #395891}
.btn.danger{background:linear-gradient(135deg,#ff5f7a,#ff7b5f)}

.files-head input[type="search"]{
  width:min(320px,48vw);max-width:100%;
  background:#0c1530;border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:10px 12px;outline:none;
}
.files-head input[type="search"]:focus{
  border-color:#5b97ff;box-shadow:0 0 0 3px rgba(91,151,255,.2);
}

.chips{margin:8px 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid #3a578e;background:#112043;color:#dce8ff;
  border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;
}
.chip.active{border-color:#6ea2ff;box-shadow:inset 0 0 0 2px rgba(110,162,255,.2)}

.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.file-card{
  background:#0b142b;border:1px solid var(--line);border-radius:14px;padding:12px;
  overflow:hidden;display:flex;flex-direction:column;min-height:390px;
}
.meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{
  font-size:12px;border:1px solid #3a578e;background:#112043;
  border-radius:999px;padding:3px 8px;
}
.badge.ext{background:#1a2445}
.age{margin-left:auto;color:var(--muted);font-size:12px}

.file-card h3{
  margin:10px 0 6px;font-size:18px;line-height:1.25;
  overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.5em;
}
.size{margin:0;color:var(--muted);font-size:14px}

.preview{
  margin-top:10px;border:1px solid #253a67;border-radius:12px;background:#091025;
  overflow:hidden;width:100%;height:185px;display:flex;align-items:center;justify-content:center;
}
.preview img,.preview video{
  width:100%;height:100%;object-fit:cover;display:block;background:#000;
}
.preview audio{width:calc(100% - 16px);margin:0 8px}
.preview-click{
  width:100%;height:100%;border:none;padding:0;background:transparent;cursor:zoom-in;
}
.no-preview{color:var(--muted);font-size:13px;padding:12px;text-align:center}

.actions{margin-top:auto;padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}

.flash-wrap{margin-top:10px}
.flash{
  background:#10203f;border:1px solid #2f4f88;border-left:4px solid #5fa4ff;
  border-radius:10px;padding:10px 12px;font-size:14px;
}
.empty{color:var(--muted)}

.modal{
  position:fixed;inset:0;background:rgba(2,6,14,.88);display:none;
  align-items:center;justify-content:center;z-index:9999;padding:24px;
}
.modal.open{display:flex}
.modal img{
  max-width:min(1200px,95vw);max-height:82vh;border-radius:12px;border:1px solid #304b82;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal-caption{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  color:#d7e5ff;background:rgba(10,20,40,.75);border:1px solid #385a9a;
  padding:8px 12px;border-radius:10px;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13px;
}
.modal-close{
  position:fixed;top:12px;right:12px;width:40px;height:40px;border-radius:999px;
  border:1px solid #3a588f;background:#0f1f43;color:#fff;font-size:24px;line-height:1;cursor:pointer;
}

@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .upload{grid-template-columns:1fr}
  .files-head{flex-direction:column;align-items:stretch}
  .files-head input[type="search"]{width:100%}
  .file-grid{grid-template-columns:1fr}
  .file-card{min-height:360px}
  .preview{height:170px}
}