/* loader.css — extras for the GGUF Loader page. Inherits style.css base. */

.navlink { color: var(--accent); text-decoration: none; font-size: 11px; }
.navlink:hover { text-decoration: underline; }

.loadRow { display: grid; grid-template-columns: 1fr 200px; gap: 12px; align-items: stretch; }
.drop { display: block; }
.drop input { display: none; }
.dropBox {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px;
  border: 1px dashed var(--edge);
  border-radius: 9px;
  color: var(--dim);
  font-size: 12px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  background: var(--panel-2);
  transition: border-color .15s, color .15s;
}
.dropBox:hover, .drop.over .dropBox { border-color: var(--accent); color: var(--accent); }

.loadSide { display: flex; flex-direction: column; gap: 8px; justify-content: center; }

.metaGrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px;
}
.metaGrid > div {
  background: var(--panel-2); border: 1px solid var(--edge); border-radius: 7px;
  padding: 5px 8px; display: flex; flex-direction: column; gap: 1px;
}
.metaGrid .mono { font-size: 12px; color: var(--text); word-break: break-all; }

.appBox { display: flex; flex-direction: column; gap: 10px; }
.split { display: grid; grid-template-columns: 1fr 170px; gap: 10px; align-items: stretch; }
.result { margin: 0; }

.barh {
  border: 1px solid var(--edge); border-radius: 8px; background: #04060a;
  padding: 8px; overflow: auto; max-height: 180px;
  display: flex; align-items: flex-end; gap: 2px;
}
.barh .cell {
  flex: 1 1 0; min-width: 2px; border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, var(--accent), rgba(111,227,200,.15));
}
.barh .cell.hi { background: linear-gradient(180deg, #fff, var(--accent)); }

@media (max-width: 760px) {
  .loadRow, .split { grid-template-columns: 1fr; }
  .metaGrid { grid-template-columns: repeat(2, 1fr); }
}