:root{
  --desk-pad: 20px;
  --gap: 18px;
}

html, body { height: 100%; }
body { margin: 0; }

.desktop {
  min-height: 100vh;
  padding: var(--desk-pad);
  background:
    linear-gradient(0deg, rgba(0,0,0,.04) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px) 0 0 / 18px 18px;
}

.shell {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
}

.window { width: 100%; }

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

a.btn { text-decoration: none; }

.overlay[hidden] { display: none !important; }
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 9999;
}

.modal-dialog, .alert-box {
  max-width: min(520px, 92vw);
}

.small-note {
  font-size: 12px;
  opacity: .85;
}