:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f7fb;
  color: #172033;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  border-radius: 6px;
  background: #1f6feb;
  color: #fff;
  cursor: pointer;
  min-height: 40px;
  padding: 0 14px;
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cfd7e6;
  border-radius: 6px;
  padding: 0 12px;
  background: #fff;
  color: #172033;
}

.shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0;
}

.auth {
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: center;
}

.auth h1,
.topbar h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0;
}

.auth p,
.topbar p {
  margin: 10px 0 0;
  color: #5e6b82;
}

.panel,
dialog {
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(23, 32, 51, .08);
}

.panel {
  padding: 20px;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.tab {
  background: #eef2f8;
  color: #26364f;
}

.tab.active {
  background: #172033;
  color: #fff;
}

.form {
  display: grid;
  gap: 14px;
}

.form label {
  display: grid;
  gap: 6px;
  color: #34445e;
}

.hidden {
  display: none !important;
}

.app {
  display: grid;
  gap: 18px;
}

.topbar,
.toolbar,
.dialogHeader,
.fileRow,
.userRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.actions,
.inlineForm {
  display: flex;
  gap: 10px;
  align-items: center;
}

.secondary {
  background: #e7ecf4;
  color: #1d2a40;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #536278;
}

.breadcrumbs button {
  min-height: 32px;
  background: #e7ecf4;
  color: #1d2a40;
}

.toolbar {
  padding: 14px;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #fff;
}

.quotaPanel,
.uploadPanel {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #fff;
}

.quotaText {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #536278;
  font-size: 13px;
}

.quotaText span:last-child {
  text-align: right;
}

.progressTrack {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ecf4;
}

.progressBar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #1f6feb;
  transition: width .18s ease;
}

.progressBar.warn {
  background: #c78418;
}

.progressBar.danger {
  background: #c43b3b;
}

.uploadBar {
  background: #206a38;
}

.filePicker input {
  display: none;
}

.filePicker span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  background: #1f6feb;
  color: #fff;
  cursor: pointer;
}

.inlineForm input {
  width: min(260px, 45vw);
}

.message {
  min-height: 22px;
  color: #9b2c2c;
}

.fileList,
.userList {
  display: grid;
  gap: 8px;
}

.tokenForm {
  margin-bottom: 12px;
}

.tokenValue {
  overflow-wrap: anywhere;
  color: #206a38;
}

.tokenValue a {
  color: #1f6feb;
}

.fileRow,
.userRow {
  min-height: 56px;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.meta {
  margin-top: 3px;
  color: #68758a;
  font-size: 13px;
}

.miniProgress {
  width: min(260px, 44vw);
  height: 8px;
  margin-top: 8px;
}

.rowActions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.rowActions button {
  min-height: 34px;
  padding: 0 10px;
}

dialog {
  width: min(720px, calc(100% - 28px));
  padding: 18px;
}

dialog::backdrop {
  background: rgba(23, 32, 51, .35);
}

.dialogHeader {
  margin-bottom: 16px;
}

.dialogHeader h2 {
  margin: 0;
}

.iconButton {
  width: 36px;
  min-height: 36px;
  padding: 0;
  background: #e7ecf4;
  color: #1d2a40;
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 20px, 1040px);
    padding: 24px 0;
  }

  .auth {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .topbar,
  .toolbar,
  .fileRow,
  .userRow {
    align-items: stretch;
    flex-direction: column;
  }

  .actions,
  .inlineForm,
  .rowActions {
    width: 100%;
  }

  .inlineForm input {
    width: 100%;
  }

  .actions button,
  .inlineForm button,
  .rowActions button,
  .filePicker span {
    justify-content: center;
    width: 100%;
  }

  .quotaText {
    flex-direction: column;
    gap: 4px;
  }

  .quotaText span:last-child {
    text-align: left;
  }

  .miniProgress {
    width: 100%;
  }
}